レイアウトは、アクティビティなど、アプリとのインターフェースとなるユーザーの視覚的な構造を定義します。Android には、コンテンツを表示して配置するためのさまざまなライブラリ、正規の出発点、手法が用意されています。
テイクアウェイ
デバイスのセーフエリアを尊重します。これには、ディスプレイ カットアウト、エッジ ツー エッジ インセット、エッジ ディスプレイ、ソフトウェア キーボード、システムバーなどの UI 部分が含まれます。
推奨事項: ユーザーがキーボードを操作できる柔軟なレイアウトを提供する。
動画 1: ユーザーが操作できる柔軟なレイアウトの提供
プライマリ ナビゲーションなどの重要なインタラクションは、到達可能な画面領域に保持します。
図 1: フローティング アクション ボタン（FAB）は、目に留まりやすくアクセスしやすい操作ポイントとして配置される コンテインメントを使用すると、関連コンテンツをグループ化して、ユーザーがコンテンツとアクションをガイドできます。
図 2: 明示的コンテインメントを使用してコンテンツと関連するアクションをグループ化したカード 類似したコンテンツと UI 要素の間で一貫性を保つ。
禁止事項: 要素のようにスペースに一貫性がないため、読みやすさを損なうと、デザインが無秩序な印象を与えてしまう可能性があります。
推奨: 類似する要素間に一定の間隔を空ける。
図 3: 読みやすさを損なわない 縦向きや理想的なレイアウトにこだわらない: ユーザーが遭遇する可能性のあるさまざまなアスペクト比、サイズクラス、解像度を考慮してください。
ビューあたりのアクション数が多くなりすぎないようにします。
カスタム レイアウトを作成する場合は、位置揃え、制約、グラビティの項を使用して、コンテンツをレイアウト内にどのように配置するかを記述します。画像を適切に表示するためのコンテナへの応答方法を含めます。
一般的な Android アプリ画面の各部
ほとんどの Android アプリは、システムバーと呼ばれる領域、ナビゲーション エリア、本体で構成されます。
システムバー
ステータスバーとナビゲーション バー（総称してシステムバー）には、バッテリー残量、時刻、通知アラートなどの重要な情報が表示され、どこからでもデバイスを直接操作できます。詳しくは、システムバーをご覧ください。
システムバーは、デバイス インターフェースに不可欠な要素です。これらをデザインの最上位レイヤとして追加し、画面レイアウト内で考慮されるようにします。そうしないと、ユーザーが非表示にするつもりであると誤解し、スタイル設定を逃し、間隔がずれてしまう可能性があります。
棒を最上位のレイヤとして追加します。アプリのテーマ内のシステムバーに色を適用するには、android:navigationBarColor と android:statusBarColor を使用します。
ナビゲーション リージョン
Navigation（ナビゲーション）は、ユーザーがアプリ内での移動、重要なアクションへのアクセス、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 ガイドラインを確認する。
フィード レイアウトは、Lazy リストまたは遅延グリッドを使用して Compose に実装することも、RecyclerView または CardView を使用して View に実装することもできます。
補助ペインのレイアウト
モバイルビューには、対応するコンテンツやコントロールが必要になる場合があります。通常はシートまたはダイアログの形式で、プライマリ ビューをフォーカスして整理できます。補助ペインの正規レイアウトを使用するための M3 ガイダンスをご覧ください。
詳しくは、ボトムシートに関する M3 ガイダンスをご覧ください。
相対レイアウト
入力、コンテンツ、その他のアクションは、互いに相対的に表示されるか、親コンテナに制約される場合があります。レイアウトはよりカスタマイズできますが、グループ化、列、間隔の一貫性を保つようにしてください。
レイアウトでは、レイアウト タイプを組み合わせて使用することもできます。たとえば、カルーセルや横方向のスクロールを縦方向のカードと組み合わせることができます。また、縦長のリストデータを含むカスタムグラフを表示することもできます。
遅延行と遅延列を含むスクロール行または列にコンテンツを表示できます。
Compose レイアウトの基本とコンポーザブルの構成について学習します。
次の図に示すように、認証は一般的な相対レイアウトです。
全画面レイアウトは、没入モードで使用されるもう一つの一般的なレイアウトです。
Compose ではなく View を使用する場合は、ConstraintLayout を使用して、兄弟ビューと親レイアウトの関係に従ってビューをレイアウトし、大規模で複雑なレイアウトを実現できます。ConstraintLayout を使用すると、Layout Editor を使用して XML を編集する代わりに、ドラッグ&ドロップによって完全にビルドできます。詳しくは、Layout Editor による UI の作成をご覧ください。
レイアウトを調整する
アダプティブ デザインとは、特定のブレークポイントとデバイスに適応するレイアウトを設計する手法です。通常、デバイスの幅を考慮して、レイアウトを変更または適応させる場所を決定します。ウェブと Android のどちらも、柔軟なグリッドや画像など、レスポンシブ デザインのコンセプトを利用して、コンテキストにより適切に応答するレイアウトを作成しています。
拡大された画面サイズにレイアウトを適応させるための設計ガイドラインについては、Compose のさまざまな画面サイズのサポート デベロッパー ガイドと、M3 のレイアウトの適用ページをご覧ください。大画面レイアウトのヒントと実装については、Android large screen canonical ギャラリーも参考になります。
すべてのアプリをあらゆる画面サイズで利用可能にする必要はありませんが、エルゴノミクス、ユーザビリティ、アプリの品質に関して、ユーザーがより自由に使用できるようになります。
- ガイドラインとして機能するブレークポイントとしてクラスサイズを使用した主要画面（重要なコンセプトやアプリを伝える）を設計できます。
- または、コンテンツに対してどのような制約、拡張、リフローを行うべきかを示すことで、レスポンシブに動作するコンテンツをデザインします。
レイアウトの詳細については、マテリアル デザイン 3（M3）レイアウトについてのページをご覧ください。
ウェブ表示
WebView は、アプリ内ウェブページを表示するビューです。ほとんどの場合、ユーザーへのコンテンツ配信には Chrome などの標準的なウェブブラウザを使用することをおすすめします。ウェブブラウザの詳細については、インテントを使用してブラウザを呼び出すのガイドをご覧ください。