レイアウトは、アクティビティなど、ユーザーがアプリを操作するための視覚的構造を定義します。Android には、コンテンツを表示して配置するためのさまざまなライブラリ、標準的な開始点、手法が用意されています。
まとめ
デバイスのセーフティ エリアを尊重します。セーフティ エリアには、ディスプレイの切り欠き、エッジツーエッジの切り欠き、エッジディスプレイ、ソフトウェア キーボード、システムバーなどの UI の一部が含まれます。
すべきこと: ユーザーがキーボードを操作できるように、柔軟なレイアウトを用意します。
動画 1: ユーザーが操作しやすいフレキシブルなレイアウトを提供する
メイン ナビゲーションなどの重要なインタラクションを、到達可能な画面領域に配置します。
図 1: フローティング アクション ボタン（FAB）は、目立つ操作ポイントとして使用できます コンテンツをグループ化して、関連するコンテンツとアクションをユーザーに案内します。
図 2: 明示的なコンテナを使用して、関連するアクションを持つコンテンツをグループ化するカード 類似するコンテンツと UI 要素の配置を統一する。
すべきでない: 類似する要素の間隔を一定にせず、読みやすさを損なわないでください。デザインが雑に見えてしまう可能性があります。
すべきこと: 類似する要素の間に一貫した間隔を確保します。
図 3: 読みやすさを損なわない 縦向きや理想的なレイアウトに固執しないでください。ユーザーが遭遇する可能性のあるさまざまなアスペクト比、サイズクラス、解像度を考慮してください。
1 回の表示で表示されるアクションが多すぎないようにします。
カスタム レイアウトを作成する場合は、配置、制約、重力に関する用語を使用して、コンテンツをレイアウト内に配置する方法を示します。画像が適切に表示されるようにコンテナに応答する方法を含めます。
一般的な Android アプリ画面の各部
Android アプリの多くは、システムバー、ナビゲーション エリア、ボディと呼ばれる領域で構成されています。
システムバー
ステータスバーとナビゲーション バー（総称してシステムバー）には、バッテリー残量、時刻、通知アラートなどの重要な情報が表示されます。また、どこからでもデバイスを直接操作できます。システムバーの詳細を確認する。
ナビゲーション リージョン
ナビゲーションは、ユーザーがアプリ内の移動、重要なアクションへのアクセス、Android プラットフォーム全体を移動するためのさまざまなアフォーダンスを表します。
身体の領域
ボディ領域には画面コンテンツを配置します。ボディ コンテンツは、追加のグループとレイアウト パラメータで構成されます。ナビゲーションとシステムバーの領域の下に続く必要があります。
エッジからエッジへのインセットの場合は WindowCompat.setDecorFitsSystemWindows(window, false) を宣言します。
レイアウトに適した構成とナビゲーション パターンを決定するには、ユーザーがコンテンツを操作する方法と、アプリの情報アーキテクチャを操作する方法について理解する必要があります。ユーザーが操作できる UI を作成することで、ユーザー中心の設計に導くことができます。
コンテンツの構成と構造
コンテンツの構造と制御方法を使用して、柔軟な流れとリズムを構築します。
ベース構造: 視覚的なガードレールに余白と列を使用する
一貫したガイドラインで堅固な構造を作成するには、レイアウトに余白と列を追加します。
マージンは、画面とコンテンツの左右の端にスペースを配置します。コンパクト サイズの標準的なマージン値は 16 dp ですが、大きな画面に対応できるようにマージンを調整する必要があります。アプリの本文のコンテンツとアクションは、これらの余白内に収めて、余白に合わせて配置する必要があります。
このステップで、セーフゾーンやインセットを設定することもできます。システムバーの切り欠きにより、重要なアクションがシステムバーの下に隠れることがなくなります。詳しくは、システムバーの背後にコンテンツを描画するをご覧ください。
列を使用して、一貫した配置のための柔軟なグリッド構造を構築し、本文領域内のコンテンツを分割してレイアウトに垂直方向の定義を追加します。コンテンツは、列を含む画面領域に配置されます。これらの列はレイアウトに構造を与え、要素を配置するのに便利な構造を提供します。
列グリッドを使用すると、コンテンツを基盤となるグリッドに揃えながら、サイズを柔軟に維持できます。列グリッドは、特定の時点で画面サイズに応じて列サイズと列数を変更することで、さまざまなフォーム ファクタに対応できます。また、コンテンツのスケーリングも可能です。列グリッドを細かくしすぎないでください。ベースライン グリッドは、一貫した間隔単位を提供するためにあります。
行のグリッドを設定する場合は注意が必要です。向きやフォーム ファクタに応じて横方向のコンテンツのスケーリングが制限される可能性があります。通常、パディング ルールを設定すると、必要な視覚的な一貫性が得られます。
包含を使用して要素を視覚的にグループ化する
包含とは、ホワイト スペースと視覚的要素を組み合わせて視覚的なグループ化を作成することです。コンテナは、囲まれた領域を表すシェイプです。1 つのレイアウトで、類似のコンテンツや機能を共有する要素をグループ化し、空白、タイポグラフィ、ディバイダーを使用して他の要素と区切ることができます。
ユーザーにとって見やすいコンテンツにするために、似たようなアイテムをホワイト スペースや目に見える分割を使ってグループ化することもできます。
暗黙的包含では、ホワイト スペースを使った視覚的なグループ コンテンツでコンテナの境界線を作成します。一方、明示的包含では、分割ラインやカードを使ってグループ コンテンツをまとめます。
次の図は、暗黙的な包含を使用してヘッダーとプライマリ コピーを格納する例を示しています。列グリッドは、グループを配置して作成するために使用されます。ハイライトはカード内に明示的に含まれます。アイコンとタイプ階層を使用して、視覚的な分離を強化。
コンテンツの配置
Android には、重力、間隔、スケーリングなど、コンテンツ要素を適切に配置するために、それぞれのコンテナでコンテンツ要素を処理する複数の方法があります。
重力は、特定のユースケースで、より大きなコンテナ内にオブジェクトを配置するための標準です。次の図は、オブジェクトを開始位置と中央（1）、上部と中央の水平（2）、左下（3）、終了位置と右（1）に配置する例を示しています。
スケーリング
動的コンテンツ、デバイスの向き、画面サイズに対応するには、スケーリングが不可欠です。要素は固定されたままにするか、スケーリングできます。
デバイスのコンテキストに関係なく、画像が意図したとおりに表示されるように、画像がコンテナ内でどのように表示されるかを、スケーリングと位置で確認することが重要です。そうしないと、画像の主な焦点が切り取られたように見える、画像がレイアウトに対して小さすぎるまたは大きすぎる、などの望ましくない効果が生じる可能性があります。
メモが付いていないコンテンツは、想定または希望する内容と異なる場合があります。
固定されたコンテンツ
多くの要素には、スロットまたはスキャフォールドによるインタラクション、スクロール、配置が組み込まれています。重要なアクションを配置するフローティング アクション ボタン（FAB）など、一部の要素はスクロールに反応せずに固定されるように変更できます。
位置揃え
AlignmentLine を使用してカスタム アライメント ラインを作成します。親レイアウトで子の整列と配置に使用できます。
すべきでない: 要素などのスペースに一貫性がなく、読みづらくなるようにしないでください。デザインが雑に見えてしまう可能性があります。
すべきこと: 類似する要素の間に一貫した間隔を確保します。
コンポーネントのレイアウト
マテリアル 3 コンポーネントには、インタラクションとコンテンツ用の独自の構成と状態が用意されています。
Compose には、マテリアル コンポーネントを一般的な画面パターンに組み合わせるための便利なレイアウトが用意されています。Scaffold などのコンポーザブルは、さまざまなコンポーネントやその他の画面要素用のスロットを提供します。マテリアル コンポーネントとレイアウトの詳細
レイアウトとナビゲーション パターン
アプリにユーザーが移動できる複数のデスティネーションがある場合は、他のアプリで一般的に使用されているレイアウトとナビゲーションの組み合わせを使用することをおすすめします。多くのユーザーはすでにこれらのペアリングに関するメンタルモデルを持っているため、アプリはより直感的になります。
レイアウトとナビゲーションの組み合わせ
ナビゲーション バーとモーダル ナビゲーション ドロワーは、親レイアウト ビューとプライマリ ナビゲーションの宛先のプライマリ ナビゲーション パターンとして使用されます。
ナビゲーション バーには、同じ階層レベルに 3 ～ 5 個のナビゲーション デスティネーションを配置できます。このコンポーネントは、大画面のナビゲーション レールと変換されます。
ナビゲーション ドロワーには 5 つを超えるナビゲーション デスティネーションを保持できますが、コンパクトなサイズでは上部バーに到達する必要があるため、ナビゲーション バーほど理想的ではありません。
マテリアル 3 のタブとボトム アプリバーは、メイン ナビゲーションを補完したり、子ビューに表示したりできるセカンダリ ナビゲーション パターンです。
レイアウトの操作
ユーザーがアクションを実行できるようにコントロールを提供する。一般的なパターンには、トップバーのアクション、フローティング アクション ボタン（FAB）、メニューなどがあります。
最も重要な操作には、FAB を使用して、ユーザーに大きな目立つボタンを提供します。このレベルでは、一度に 1 つのアクションのみ指定します。FAB は、複数のサイズと、ラベルを含む展開形式で表示できます。Scaffold を使用して FAB を固定し、スクロールしても常に表示される状態にします。
セカンダリ アクションは、トップバー内に配置できます。関連コンテンツの近くにグループ化されている場合は、ページ内に配置することもできます。
すぐに必要とされないアクションや頻繁に必要とされないアクションは、オーバーフロー メニューに追加します。
正規レイアウト
正規レイアウトを開始点として使用します。これは、一般的なユースケースと画面サイズにレイアウトを適応させるのに役立つ、すぐに使用できるコンポジションです。これらのレイアウトは、見た目の美しさと機能性を兼ね備えており、マテリアル 3 のガイダンスに基づいています。
Android フレームワークには、Jetpack Compose または Views API を使用して、レイアウトの実装を簡単かつ確実に行うための専用のコンポーネントが含まれています。
リストと詳細のレイアウト
リスト / 詳細レイアウトでは、記述や説明などの補足情報（アイテムの詳細情報）があるアイテムのリストをユーザーに表示します。コンパクトな画面サイズでは、リストビューまたは詳細ビューのみが表示されます。コンテンツのコレクションを行ベースのレイアウトで表示するリストは、アプリで最も一般的なレイアウト形式です。リスト / 詳細レイアウトは、メッセージ アプリ、連絡先管理ツール、ファイル ブラウザのほか、詳細情報を表示するアイテムのリストとしてコンテンツを整理できるアプリに最適です。
コンテンツは静的または動的です。
- 動的コンテンツは、アプリがオンザフライで提供するコンテンツです。ユーザー作成コンテンツの表示や、ユーザーの設定や操作の反映に適しています。たとえば、ユーザー作成の写真のスクロール可能なリストがある写真アプリがあるとします。このリストはユーザーごとに固有で、ユーザーが画像をアップロードするたびに変化します。これらの画像は動的コンテンツです。
- 静的コンテンツはハードコードされたコンテンツを表します。このコンテンツは、アプリのコードを直接変更することでのみ変更できます。静的コンテンツの例としては、すべてのユーザーに表示される画像やテキストなどがあります。
Now in Android Figma ファイルには、複数のレイアウト例が用意されています。次の例は、1 次元のコンテンツ コレクションを示しています。
リスト コンポーネントと仕様に関する詳細な設計ガイダンスについては、マテリアル 3 リストをご覧ください。
フィードのレイアウト
フィード レイアウトは、同等のコンテンツ要素を設定可能なグリッドに配置して、大量のコンテンツをすばやく簡単に確認できるようにするレイアウトです。（コレクションでカードを使用する際のマテリアル 3 のガイドラインを参照）。フィードの構成は、コンパクト ディスプレイ（通常はカードまたはタイル）でリストベースまたはグリッドベースにできます。コンテンツは動的にすることもできます。つまり、API などの動的外部ソースから「フィードイン」されるようにすることもできます。
グリッド レイアウトは、暗黙的または明示的な制限原則によって構成される行と列の両方で構成されます。（詳しくは、このページの制限をご覧ください）。グリッド レイアウトは、より厳密に適用することも、行と列を変化させるようにずらすこともできます。ユーザーが混乱しないように、両方でスペースとロジックを一貫して適用する必要があります。フィードの設計に関するマテリアル 3 ガイドラインを確認する。
フィードのレイアウトは、Compose で遅延リストまたは遅延グリッドを使用して実装できます。また、ビューで RecyclerView または CardView を使用して実装することもできます。
補助ペイン レイアウト
モバイル ビューでは、コンテンツやコントロールのサポートが必要になる場合があります。通常はシートやダイアログの形で、メインビューのフォーカスを維持し、整理された状態に保つのに役立ちます。サポートペインの標準レイアウトの使用に関する M3 ガイダンスを確認する。
ボトムシートに関する M3 のガイダンスについて学習する。
相対レイアウト
入力、コンテンツ、その他のアクションは、相互に相対的に表示されたり、親コンテナに制約されたりすることができます。レイアウトはよりカスタマイズできますが、グループ化、列、間隔を統一してください。
レイアウトでは、レイアウト タイプを組み合わせて使用することもできます。たとえば、カルーセルや横方向のスクロールと縦型カードを組み合わせることができます。または、縦方向のリストデータを含むカスタムグラフを表示することもできます。
遅延行と遅延列を使用して、スクロールする行または列にコンテンツを表示できます。
Compose レイアウトの基本と、コンポーザブルを構成する要素について学びます。
認証は、次の図に示すように、一般的な相対レイアウトです。
全画面レイアウトは、没入モードで使用される一般的なレイアウトです。
Compose ではなくビューを使用している場合は、ConstraintLayout を使用して、兄弟ビューと親レイアウトの関係に応じてビューをレイアウトできます。これにより、大規模で複雑なレイアウトが可能になります。ConstraintLayout を使用すると、レイアウト エディタを使用して XML を編集するのではなく、ドラッグ＆ドロップだけでレイアウトを作成できます。詳しくは、Layout Editor による UI の作成をご覧ください。
レイアウトを適応させる
アダプティブ デザインとは、特定のブレークポイントとデバイスに適応させるためのレイアウト設計の手法です。通常、デバイスの幅によりレイアウトの変更点や適応点が決まります。ウェブと Android の両方で、柔軟なグリッドや画像などのレスポンシブ デザインのコンセプトを利用して、コンテキストに適したレイアウトを作成します。
拡大した画面サイズにレイアウトを適応させるための設計ガイドラインについては、Compose のさまざまな画面サイズをサポートするデベロッパー ガイドと M3 のレイアウトの適用ページをご覧ください。Android の大画面の正規化ギャラリーで、大画面レイアウトのインスピレーションや実装方法を確認することもできます。
すべてのアプリをすべての画面サイズに適応させる必要はありませんが、このデザインを取り入れることで、人間工学、ユーザビリティ、アプリの質といった点でエクスペリエンスが向上し、ユーザーにとって自由度が高まります。
- クラスサイズをブレークポイントとして、重要な画面（アプリの基本コンセプトを伝える画面）を設計し、ガイドラインとして使用できます。
- または、コンテンツの制限、拡張、再フロー方法を指定することで、コンテンツをレスポンシブに動作するように設計します。
レイアウトの詳細については、マテリアル デザイン 3（M3）のレイアウトについてをご覧ください。
ウェブ表示
ウェブビューは、アプリ内ウェブページを表示するビューです。ほとんどの場合、Chrome などの標準ウェブブラウザを使用してユーザーにコンテンツを提供することをおすすめします。ウェブブラウザの詳細については、インテントを使用してブラウザを呼び出すガイドをご覧ください。