レイアウトは、アクティビティなど、アプリとのインターフェースを構成するユーザーの視覚的構造を定義します。Android には、コンテンツを表示して配置するためのさまざまなライブラリ、正規の出発点、手法が用意されています。
テイクアウェイ
ディスプレイ カットアウト、エッジ ツー エッジのインセット、エッジ ディスプレイ、ソフトウェア キーボード、システムバーなどの UI の一部を含むデバイスのセーフエリアを優先します。
推奨事項: ユーザーがキーボードを操作できる柔軟なレイアウトを提供する。
動画 1: ユーザーによる操作を可能にする柔軟なレイアウト
プライマリ ナビゲーションなどの重要なインタラクションは、到達可能な画面領域に保持します。
図 1: フローティング アクション ボタン（FAB）は視認性が高くアクセスしやすい コンテインメントを使用することで、関連するコンテンツをグループにまとめて、ユーザーがコンテンツとアクションをガイドできます。
図 2: 明示的なコンテインメントを使用して、関連するアクションとコンテンツをグループ化するカード 類似のコンテンツと UI 要素を一貫した形で配置する。
非推奨: 要素などの間隔に一貫性がない場合、デザインが無秩序な印象を与えてしまう可能性があり、読みやすさを損なうおそれがあります。
推奨事項: 類似する要素間のスペースを統一します。
図 3: 読みやすさを損なわない 縦向きや理想的なレイアウトにこだわらないでください。ユーザーが遭遇する可能性のあるさまざまなアスペクト比、サイズクラス、解像度を検討してください。
ビューあたりのアクション数が多くなりすぎないようにします。
カスタム レイアウトを作成する場合は、位置揃え、制約、グラビティの用語を使用して、レイアウト内にコンテンツがどのように配置されるかを記述します。適切に表示されるように、画像がコンテナに応答する方法を含めます。
一般的な Android アプリ画面の一部
ほとんどの Android アプリは、システムバーと呼ばれる領域、ナビゲーション エリア、本文で構成されます。
システムバー
ステータスバーとナビゲーション バー（まとめてシステムバーと呼びます）には、バッテリー残量、時刻、通知アラートなどの重要な情報が表示され、どこからでもデバイスを直接操作できます。詳しくは、システムバーについての説明をご覧ください。
システムバーは、デバイス インターフェースに不可欠な要素です。これらをデザインの最上位レイヤとして追加して、画面レイアウト内で考慮されるようにします。そうしないと、ユーザーが非表示にするつもりだという誤解を招き、スタイル設定を逃し、結果としてスペースがずれてしまう可能性があります。
棒を最上位レイヤとして追加します。アプリのテーマのシステムバーに色を適用するには、android:navigationBarColor と android:statusBarColor を使用します。
ナビゲーション リージョン
ナビゲーションとは、ユーザーがアプリ内での移動、重要なアクションへのアクセス、Android プラットフォーム全体での移動を可能にするさまざまなアフォーダンスのことです。
身体の部位
本体領域には画面のコンテンツが格納されます。本文は、追加のグループとレイアウト パラメータで構成されます。ナビゲーション領域とシステムバー領域で引き続き表示する必要があります。
エッジ ツー エッジのインセット用に WindowCompat.setDecorFitsSystemWindows(window, false) を宣言します。
レイアウトに適した構成とナビゲーション パターンを決定するには、ユーザーがどのようにコンテンツを利用しているか、また、ユーザーがアプリの情報アーキテクチャをどのように移動するかを理解するよう努めます。これを理解することで、ユーザーが操作できる UI を作成することで、よりユーザー重視の設計を実現できるようになります。
コンテンツの構成と構成
コンテンツの構造と封じ込め方法で、柔軟な流れとリズムを作り出します。
基本構造: 視覚的なガードレールとしてマージンと列を使用する
一貫したガードレールを使用して固定された構造を作成するには、レイアウトにマージンと列を追加します。
余白は、画面とコンテンツの左右端の間隔を設定します。 コンパクト表示の標準的なマージン値は 16 dp ですが、余白は大画面に合わせて調整する必要があります。アプリの本文のコンテンツと操作は、この余白内に収まる必要があります。
このステップで、セーフゾーンまたはインセットを確実に挿入することもできます。システムバー インセットにより、重要なアクションがシステムバーの下に配置されるのを防ぐことができます。詳しくは、コンテンツをシステムバーの背後に描画するをご覧ください。
columns を使用して柔軟なグリッド構造を構築し、一貫した配置を可能にし、本文領域内でコンテンツを分割することでレイアウトを垂直方向に定義します。コンテンツは、列を含む画面の領域に配置されます。これらの列はレイアウトに構造を与え、要素の配置に便利な構造となります。
列グリッドを使用して、コンテンツを基盤となるグリッドに合わせて配置します。ただし、サイズは柔軟に設定できます。列グリッドは、特定のポイントの画面サイズに応じて必要に応じて列サイズと列数を変更することで、さまざまなフォーム ファクタに対応すると同時に、コンテンツもスケーリングできます。列グリッドのサイズを細かく指定しすぎないようにします。そのため、ベースライン グリッドで一貫した間隔単位を指定できます。
付随する行のグリッドの確立には注意してください。画面の向きやフォーム ファクタに応じてコンテンツの水平方向のスケーリングが制限される可能性があります。通常は、パディング ルールを設定することで、必要な視覚的な一貫性を確保できます。
包含を使用して要素を視覚的にグループ化する
包含とは、空白要素と可視要素を組み合わせてビジュアル グループを作成することです。コンテナは囲まれた領域を表すシェイプです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 API または Views API を使用して、レイアウトを簡単かつ確実に実装できます。
リストと詳細のレイアウト
リスト / 詳細レイアウトを使用すると、ユーザーは、説明、説明、その他の補足情報（アイテムの詳細）を持つアイテムのリストを探索できます。コンパクト画面の場合、リストビューまたは詳細ビューのみが表示されます。コンテンツのコレクションは行ベースのレイアウトで表示され、リストはアプリのレイアウトの最も一般的な形式になります。リスト / 詳細レイアウトは、メッセージ アプリ、連絡先管理ツール、ファイル ブラウザのほか、詳細情報を表示するアイテムのリストとしてコンテンツを整理できるアプリに最適です。
コンテンツは静的または動的のいずれかです。
- 動的コンテンツとは、アプリがその場で配信するコンテンツで、ユーザー作成コンテンツを表示する場合や、ユーザーの好みやアクションを反映する場合に適しています。たとえば、ユーザーが生成した写真のスクロール可能なリストを表示する写真アプリがあるとします。このリストはユーザーごとに固有で、ユーザーがより多くの画像をアップロードすると変わります。これらの画像は動的コンテンツです。
- 静的コンテンツとは、ハードコードされたコンテンツのことです。静的コンテンツは、アプリのコードに直接変更を加えることでのみ変更できます。静的コンテンツの例としては、すべてのユーザーが目にする画像やテキストなどがあります。
Now in Android Figma ファイルには、複数のレイアウトの例が含まれています。次の例は、1 次元のコンテンツのコレクションを示しています。
リストのコンポーネントと仕様に関するデザイン ガイダンスについては、マテリアル 3 リストをご覧ください。
フィード レイアウト
フィード レイアウトは、同等のコンテンツ要素を設定可能なグリッドに配置して、大量のコンテンツをすばやく簡単に確認できるようにするレイアウトです。（コレクションでカードを使用するためのマテリアル 3 ガイドラインをご覧ください）。フィードは、コンパクトなディスプレイ（通常はカードまたはタイル）でリストベースまたはグリッドベースで構成できます。コンテンツが動的である場合、つまり API などの動的な外部ソースから「フィードされる」こともあります。
グリッド レイアウトは、暗黙的または明示的なコンテインメントの原則によって構成される行と列の両方で構成されます。（詳細については、このページのコンテインメントをご覧ください）。グリッド レイアウトでは、行や列を変えて、より厳格に適用したり、ずらしたりして適用できます。また、ユーザーの混乱を避けるため、スペースとロジックの適用に一貫性を持たせる必要があります。フィードの設計に関するマテリアル 3 ガイドラインを確認する。
フィード レイアウトは、Compose で Lazy リストまたは遅延グリッドを使用して実装することも、View に RecyclerView または CardView を使用して実装することもできます。
補助ペインのレイアウト
モバイルビューには、補助的なコンテンツやコントロールが必要になる場合があります。通常はシートまたはダイアログの形式で、プライマリビューの焦点を絞り、すっきりとした状態に保つことができます。補助ペインの正規レイアウトを使用するための M3 ガイダンスをご覧ください。
詳しくは、ボトムシートに関する M3 ガイダンスをご覧ください。
相対レイアウト
入力、コンテンツ、その他のアクションは、互いに相対的に表示することも、親コンテナに制約することもできます。レイアウトはよりカスタマイズできますが、グループ化、列、間隔が一貫していることを確認してください。
レイアウトでは、レイアウト タイプを組み合わせて使用することもできます。たとえば、カルーセルや横スクロールと縦方向のカードを組み合わせます。縦長のリストデータを使ったカスタムグラフを表示することも可能です。
遅延行と遅延列を使用して、スクロールする行または列にコンテンツを表示できます。
Compose レイアウトの基本と、コンポーザブルの構成要素について学習します。
次の図に示すように、認証は一般的な相対レイアウトです。
全画面レイアウトは、没入モードで使用されるもう一つの一般的なレイアウトです。
Compose ではなくビューを使用している場合は、ConstraintLayout を使用して、兄弟ビューと親レイアウトとの関係に従ってビューをレイアウトし、大規模で複雑なレイアウトを作成できます。ConstraintLayout を使用すると、Layout Editor で XML を編集するのではなく、ドラッグ&ドロップするだけで完全にビルドできます。詳しくは、Layout Editor による UI の作成をご覧ください。
レイアウトを調整する
アダプティブ デザインとは、特定のブレークポイントやデバイスに適合するレイアウトを設計する手法です。通常は、デバイスの幅を考慮して、レイアウトを変更または適応させる場所を決定します。ウェブと Android はどちらも、柔軟なグリッドや画像など、レスポンシブ デザインのコンセプトを利用して、コンテキストにより適したレイアウトを作成しています。
拡大画面サイズにレイアウトを適応させるための設計ガイドラインについては、Compose のアダプティブ レイアウトを作成するに関するデベロッパー ガイドと M3 のレイアウトの適用ページをご覧ください。また、Android の大画面正規化ギャラリーでは、大画面レイアウトのアイデアと実装についてもご覧いただけます。
あらゆるアプリをあらゆる画面サイズで利用できる必要はありませんが、ユーザーはエルゴノミクス、ユーザビリティ、アプリの品質に関して自由度を高めることができます。
- クラスサイズをブレークポイントとして、ガイドラインとして機能する主要な画面（重要なコンセプトやアプリを伝える）を設計できます。
- または、コンテンツに対してどのような制約、拡張、リフローが必要かを記述して、レスポンシブに動作するコンテンツをデザインします。
レイアウトの詳細については、マテリアル デザイン 3（M3）レイアウトについてのページをご覧ください。
ウェブ表示
WebView は、アプリ内のウェブページを表示するビューです。ほとんどの場合、ユーザーへのコンテンツ配信には Chrome などの標準のウェブブラウザを使用することをおすすめします。ウェブブラウザの詳細については、インテントを使用してブラウザを呼び出すのガイドをご覧ください。