ArcGIS Experience Builder では、Web エクスペリエンス用にさまざまなページ レイアウトを構成および作成できるため、ページ レイアウトはすべての画面サイズで正常に機能します。 個々のレイアウトの構成は、大、中、小の画面サイズ用に固有のデザインを作成できるアダプティブ デザインに基づいています。 各レイアウトはエクスペリエンスの転用であり、アプリをさらにカスタマイズし、画面サイズとさまざまなコンテンツを活用するための優れた柔軟性を提供します。
テンプレートは複数の画面サイズで機能するように構築されています。 空の全画面アプリまたは空白のスクロール ページ テンプレートを選択すると、[自動] レイアウトが中画面デバイスと小画面デバイスで有効になります。 これにより、すべてのウィジェットと大画面デバイスのレイアウトに含まれるウィジェットとの同期が維持され、自動的に整列されます。
中画面デバイスまたは小画面デバイス用の個別のレイアウトを作成するには、ページまたはウィンドウのレイアウトの横にある [カスタム] ボタンをクリックします。 これで、選択した画面デバイス用にウィジェットとウィンドウを手動で整列したり、サイズ変更したりできます。
小画面デバイスでレイアウトを編集する場合、キャンバスに表示される次のような大きな構成パネルは、代わりにビルダーの余白に表示されます。
- ボタン ウィジェット、区切り線ウィジェット、ビュー ナビゲーション ウィジェットの [クイック スタイル] パネル
- [動的コンテンツ] パネル
- プレースホルダー ウィジェットとグリッド ウィジェットの [ウィジェットの追加] パネル
- ページ、ヘッダー、フッター、ウィンドウ、ブロック、グリッドの [テンプレートの選択] パネル
ヒント:
さまざまな画面サイズおよびデバイスのレイアウトをテストするには、ビルダー ツールバーの [ライブ ビュー] をクリックします。 ライブ ビューを使用すると、コンテンツを保存して公開する前にコンテンツが正しく適用されていることを確認できます。 また、いくつかの設定を調整して試すことも、対話型の動的ウィジェットを操作してどのように機能するかを確認することもできます。
保留中のリスト
デバイスのレイアウトからウィジェットまたはスクリーン グループを削除するには、そのツールバーで [保留中のリストに移動] ボタン 
をクリックします。 これにより、現在のデバイスのキャンバスからウィジェットまたはスクリーン グループが削除され、レイアウトに戻す必要がある場合に備えて、構成が保存されます。 カスタム レイアウト オプションを有効にすると、他のウィジェットは、他のデバイス モードに追加されていると、現在のデバイスには追加されません。 それらのウィジェットは保留中のリストから手動で追加できます。
注意:
保留中のリストにあるウィジェットの設定は、すべてのコンテンツ設定、ウィジェット固有のスタイル設定 (背景や枠線など)、すべてのアクション設定を含め、その大部分が保存されます。 ウィジェットでは、サイズや位置の設定など、[スタイル] タブにある全体的なレイアウト設定は維持されません。
保留中のリストは、[ウィジェットの挿入] パネルの [保留中] タブに表示されます。 少なくとも 1 つのデバイス モードでアプリに含まれているウィジェットは、[他のデバイスで使用] の下のリストに表示されます。 次のアイコンは、各ウィジェットが属するデバイス モードを示しています:
- 大画面および中画面のデバイスで使用されます。
- 大画面および小画面のデバイスで使用されます。
- 中画面および小画面のデバイスで使用されます。
- 大画面のデバイスで使用されます。
- 中画面のデバイスで使用されます。
- 小画面のデバイスで使用されます。
どのデバイス モードでもキャンバス上に現在存在しないウィジェットは、[すべてのデバイスで未使用] の下に表示されます。 これらのウィジェットを保留中のリストから削除するには、[削除] をクリックします。
メッセージ アクションと保留中リスト
保留中リストに移動したウィジェットをメッセージ アクションのターゲットにすることはできません。
ウィジェットの設定の [アクション] タブでメッセージ アクションを追加する際、保留中リストのウィジェットは選択可能なターゲットとしてリストされません。
すでにメッセージ アクションのターゲットになっているウィジェットを保留中リストに移動した場合、そのウィジェットを保留中リストに移動したデバイス モードでのみ、メッセージ アクションがオフになります。 ソース ウィジェットの設定の [アクション] タブに、そのアクションが構成されてアクティブになっているデバイス モードを示すアイコンが表示されます。
高速モードでは、現在表示しているデバイス モード レイアウトのメッセージ アクションのみが表示されます。
ヒント:
Experience Builder モバイル最適化の設定の詳細については、チュートリアル「モバイルに合わせたアプリ レイアウトの最適化」をご参照ください。
レスポンシブ レイアウトを設計する際のベスト プラクティス
ユーザーのエクスペリエンスに合わせてレイアウトを設計する際には、次のベスト プラクティスを検討してください:
- 適切なレイアウト タイプを選択します。
- エレメントをコンテンツのサイズに基づいて流動的に配置するのではなく、その場に留めておく場合は、固定レイアウトが適しています。 これらはダッシュボード設計やモーダル ダイアログに適しています。
- フロー レイアウトでは、画面サイズに基づいてコンテンツを自動的に積み重ねて位置を移動できます。 これらは、多量のテキスト、画像、マップを含む長いページなど、反応性の高いスクロール可能なコンテンツに最適です。
- 行/列/グリッド ウィジェットを含むレイアウト ウィジェットは、複雑な構造のレイアウトに適しています。 これらの各ウィジェットは、コンテナー内でのウィジェットの配置と整列を柔軟に行えます。
- サイズと位置の設定オプションを理解して、戦略的に適用します。
- ヘッダーやフッター、および異なる画面サイズ間で同じサイズのままである必要があるその他のエレメントなどで正確なサイズが求められる場合は、ピクセル (px) が最適です。 これは、デスクトップ レイアウト内のエレメントと固定サイズのエレメントに適した単位です。
- 高さと幅が親コンテナーに応じて反応するようにする場合は、パーセンテージ (%) が最適です。 パーセンテージを使用すると、異なる画面サイズ間でエレメントが柔軟に反応できます。 これは、タブレットとスマートフォン上で拡大縮小する適応型の画面サイズに適した単位です。
- [自動] を使用すると、ウィジェットのサイズと位置を Experience Builder がそのコンテンツに基づいて決定できます。 これは、コンテンツを収めるために必要なスペースの量が変化するダイナミック テキストまたは画像に適しています。 エレメントのサイズが変化するよう求める場合は [自動] を使用します。
- [ストレッチ] を使用すると、エレメントのコンテナー スペース全体を埋めることができます。 これは、空きスペースを完全に占める必要がある背景画像、マップ、その他のコンテンツに適しています。 小画面レイアウトでこのオプションを使用する場合は、十分に注意してください。 多数のウィジェットにストレッチを適用すると、小さい画面で処理しきれないことがあります。
- 大画面レイアウトから始めて、次により小さなレイアウトに取り組みます。
- 大画面レイアウトの作成後は、デバイス モード ツールを使用し、そのレイアウトを中画面および小画面デバイス上で表示してみます。
- 必要に応じて、[カスタム] レイアウト オプションを使用し、中画面および小画面デバイス用にレイアウトを変更します。
- 自動レイアウトでは、画面サイズ間でエレメントが同期されますが、複雑なウィジェットの整列が十分に処理されない場合があります。
- カスタム レイアウトでは、小さな画面で使いやすくなるように、ウィジェットの再配置、非表示、サイズ変更を行うことができます。
- レイアウトの一貫性を維持します。
- 一貫した間隔と配置を用いて、視覚的にまとまりのあるエクスペリエンスを生み出します。
- レイアウト間で統一されたフォント スタイル、色、ウィジェットのパディングとギャップを適用します。
- ページ設定の [ヘッダー] および [フッター] ツールを使用して、ヘッダーとフッターがページ間で一貫して動作するように構成します。
- プレビューとテストを行います。
- ビルダーでレイアウトをテストするには、[ライブ ビュー] を使用します。
- ブラウザー ウィンドウでアプリをプレビューするには、[プレビュー] ツールを使用します。 ブラウザー ウィンドウのサイズ変更により、異なる画面サイズでアプリをプレビューできます。
- 小さな画面上では、エレメントが収容できなくなったり、オーバーラップしたりしないこと、ウィジェットが使いやすく読みやすいこと、スクロール可能な領域によって重要なナビゲーションやボタンがブロックされないことを確認します。