正規レイアウト

正規レイアウトを出発点として使用します。これは、一般的なユースケースや画面サイズに合わせてレイアウトを調整するのに役立つ、すぐに使用できる構成です。これらのレイアウトは、見た目の美しさと機能性を兼ね備えており、マテリアル 3 のガイダンスに基づいています。

図 21: 正規レイアウト

Android フレームワークには特化したコンポーネントが含まれていて、Jetpack Compose またはビュー API を使用して簡単かつ確実にレイアウトを実装できます。

リストと詳細のレイアウト

リスト / 詳細レイアウトでは、記述や説明などの補足情報（アイテムの詳細情報）があるアイテムのリストをユーザーに表示します。コンパクト画面サイズでは、リストビューまたは詳細ビューのいずれかのみが表示されます。コンテンツのコレクションを行ベースのレイアウトで表示するリストは、アプリのレイアウトとして最も一般的な形式です。リスト / 詳細レイアウトは、メッセージ アプリ、連絡先管理ツール、ファイル ブラウザのほか、詳細情報を表示するアイテムのリストとしてコンテンツを整理できるアプリに最適です。

コンテンツは静的または動的です。

• 動的コンテンツは、アプリがオンザフライで配信するコンテンツです。ユーザー作成コンテンツの表示や、ユーザーの好みや行動の反映に最適です。たとえば、ユーザーが作成した写真のスクロール可能なリストを表示する写真アプリを考えてみましょう。このリストはユーザーごとに固有で、ユーザーが画像をアップロードするたびに変化します。これらの画像は動的コンテンツです。
• 静的コンテンツはハードコードされたコンテンツを表します。このコンテンツは、アプリのコードを直接変更することでのみ変更できます。静的コンテンツの例としては、すべてのユーザーに表示される可能性のある画像やテキストがあります。

Now in Android の Figma ファイルには、複数のレイアウト例が用意されています。次の例は、コンテンツの 1 次元コレクションを示しています。

図 22: コンテンツの 1 次元コレクション

リスト コンポーネントと仕様に関する設計ガイダンスについて詳しくは、マテリアル 3 のリストをご覧ください。

フィードのレイアウト

フィード レイアウトは、同等のコンテンツ要素を設定可能なグリッドに配置して、大量のコンテンツをすばやく簡単に確認できるようにするレイアウトです。詳しくは、 コレクションでカードを使用するためのマテリアル 3 のガイドラインをご覧ください。フィードは、コンパクトなディスプレイでリストベースまたはグリッドベースの構成にできます。通常はカードまたはタイルで表示されます。コンテンツは動的です。つまり、API などの動的な外部ソースから「供給」されます。

グリッド レイアウトは、暗黙的または明示的な包含原則で構成される行と列の両方で構成されます。グリッド レイアウトは、厳密に適用することも、行と列をずらして変化をつけることもできます。ユーザーの混乱を避けるため、どちらも一貫した間隔とロジックで適用する必要があります。フィードの設計に関するマテリアル 3 のガイドラインをご覧ください。

フィード レイアウトは、Compose では遅延リストまたは遅延グリッドを使用して、View では RecyclerView または CardView を使用して実装できます。

たとえば、写真ギャラリーやポッドキャストをグリッド レイアウトで表示する形式が一般的なフィード形式です。

補助ペイン レイアウト

モバイルビューでは、コンテンツやコントロールのサポートが必要になる場合があります。通常はシートやダイアログの形式で表示され、メインビューの焦点が定まり、すっきりとした状態を保つことができます。サポート ペインの標準レイアウトを使用するための M3 ガイダンスをご覧ください。

図 24: ボトムシートは、メインビューの補助コンテンツとして機能する

ボトムシートに関する M3 のガイダンスについて学習する。