Wix Blocks：アプリケーションのデザインガイドライン

Wix Blocks では、Wix ウェブサイトを構築するの方法と同様に、ドラッグアンドドロップ機能を使用して、わずかなコードで魅力的なアプリをデザインすることができます。始める前に、簡単なガイドラインをいくつかご紹介します。

Wix Blocks を使用すると、レスポンシブアプリをビルドし、すべての Wix エディタにインストールすることができます。デザイナーは、ビューポート / ウィジェットのサイズ変更とカスタマイズされたコンテンツをサポートする、完全に流動的で機能的なウィジェットを構築できます。そのため、Wix Blocks で作業を始める前に、レスポンシブデザインとフルードデザインの基本を知ることが重要です。

レイアウター、グリッド、スタック、リピーターなどのレイアウトツールを使用して構築すると、レスポンシブ動作を作成するのに役立ちます。

Wix Blocks でアプリをビルドする場合、Wix エディタでカスタマイズできることを考慮し、このカスタマイズ可能なコンテンツに対応する必要があります。たとえば、エディタでアプリをインストールしたユーザーは、一部の要素を削除することができます。そのため、セクションの 1つが削除されたときの表示方法など、さまざまな種類のエッジケースに合わせてアプリのデザインを調整することが重要です。たとえば、次のウィジェットをご覧ください：

以下は、ユーザーが画像を削除することを選択した後の同じウィジェットです：

コンテンツをカスタマイズ可能にする方法：

デザインプリセットを使用すると、1つのアプリにさまざまなデザインを作成できます。複数のブレイクポイントをデザインし、同じ要素を再編成して、ウィジェットに複数のレイアウトを作成します（例：デスクトップとモバイル）。すべてのプリセットには同じ要素が含まれており、並べ替えはされていますが、リペアレント（親は変更）されていません。すべてが同じロジックで接続されています。たとえば、すべてのプリセットのグリッドには、同じ数のセルが必要です。

ウィジェットは単独ではなくサイトにインストールされるため、ビルドする際はサイトスタイルに接続するようにしてください。

以下を可能にするため、要素をサイトのカラーパレットに接続してください：

以下を可能にするため、テキストコンポーネントをテキストスタイルに接続してください：

注意：スタイルからフォントサイズの接続を解除できます。これにより、ユーザーが「スタイルパネル」からスタイルを変更しても、タイポグラフィの外観が維持されます。

ウィジェットのデザインが完了したら、アプリをインストールして、正しく動作することを確認してください。