Experience Builder では、Web エクスペリエンス用にさまざまなページ レイアウトを構成および作成できるため、ページ レイアウトはすべての画面サイズで正常に機能します。 個々のレイアウトの構成は、大、中、小の画面サイズ用に固有のデザインを作成できるアダプティブ デザインに基づいています。 各レイアウトはエクスペリエンスの転用であり、アプリをさらにカスタマイズし、画面サイズとさまざまなコンテンツを活用するための優れた柔軟性を提供します。
テンプレートは複数の画面サイズで機能するように構築されています。 空の全画面アプリまたは空白のスクロール ページ テンプレートを選択すると、[自動] レイアウトが中画面デバイスと小画面デバイスで有効になります。 これにより、すべてのウィジェットと大画面デバイスのレイアウトに含まれるウィジェットとの同期が維持され、自動的に整列されます。
中画面デバイスまたは小画面デバイス用の個別のレイアウトを作成するには、ページまたはウィンドウのレイアウトの横にある [カスタム] ボタンをクリックします。 これで、選択した画面デバイス用にウィジェットとウィンドウを手動で整列したり、サイズ変更したりできます。 小型デバイスのレイアウトからウィジェットまたはスクリーン グループを削除するには、そのツールバーで [保留中のリストに移動] ボタン 
をクリックします。 これにより、現在のデバイスのキャンバスからウィジェットまたはスクリーン グループが削除され、レイアウトに戻す必要がある場合に備えて、構成が保存されます。 カスタム レイアウト オプションを有効にすると、他のウィジェットは、他のデバイス モードに追加されていると、現在のデバイスには追加されません。 それらのウィジェットは、[ウィジェットの挿入] パネルの [保留中] タブから手動で追加できます。
小画面デバイスでレイアウトを編集する場合、キャンバスに表示される次のような大きな構成パネルは、代わりにビルダーの余白に表示されます。
- ボタン ウィジェット、区切り線ウィジェット、ビュー ナビゲーション ウィジェットの [クイック スタイル] パネル
- [動的コンテンツ] パネル
- プレースホルダー ウィジェットとグリッド ウィジェットの [ウィジェットの追加] パネル
- ページ、ヘッダー、フッター、ウィンドウ、ブロック、グリッドの [テンプレートの選択] パネル
ヒント:
さまざまな画面サイズおよびデバイスのレイアウトをテストするには、ビルダー ツールバーの [ライブ ビュー] をクリックします。 ライブ ビューを使用すると、コンテンツを保存して公開する前にコンテンツが正しく適用されていることを確認できます。 また、いくつかの設定を調整して試すことも、対話型の動的ウィジェットを操作してどのように機能するかを確認することもできます。
ヒント:
Experience Builder モバイル最適化の設定の詳細については、チュートリアル「モバイルに合わせたアプリ レイアウトの最適化」をご参照ください。