レイアウトの調整

アダプティブ デザインとは、特定のブレークポイントとデバイスに適応させるためのレイアウト設計の手法です。

アダプティブ レイアウトを効果的に実装するには:

• まず、デバイスのウィンドウ クラスの幅を考慮してレイアウトの変更を決定し、次に高さを調整します。各種の画面サイズをサポートします。

• Android は、ウェブ開発と同様にレスポンシブ デザインのコンセプトを活用し、柔軟なグリッドと画像を使用して、コンテキストに効果的に対応するレイアウトを作成します。

• アダプティブ メソッド（リフロー、表示、プレゼンテーションの変更）を使用して、さまざまなサイズに対応できるようにレイアウトを調整します。

• アプリを縦向きのみに固定しないでください。アプリのサイズ変更時にレターボックス表示が発生します。

拡大された画面サイズに合わせてレイアウトを調整する設計ガイドラインについては、Compose の各種の画面サイズのサポート デベロッパー ガイドと、M3 のレイアウトの適用ページをご覧ください。Android の大画面の正規レイアウト ギャラリーで、大画面レイアウトのインスピレーションと実装を確認することもできます。

適応型思考

アプリを設計する際は、アダプティブをデフォルトにする必要があります。Android モバイル市場は常に進化しているため、モバイルを携帯電話としてのみ考えることはできません。ハンドセット、折りたたみ式、タブレットなど、その間のすべてのデバイスを含める必要があります。

特定の機能やユースケースは、すべての画面サイズやフォーム ファクタに適しているとは限りませんが、アダプティブ デザインを取り入れることで、人間工学、ユーザビリティ、アプリの質といった点でユーザーにとって自由度が高まります。

メソッドと品質

まず、クラスサイズをブレークポイントとして、アプリの残りの部分のガイドラインとなる主要な画面（アプリの重要なコンセプトを伝える）を設計します。これらのヒーロー エクスペリエンスは、アダプティブとフォーム ファクタの差別化された品質を強調できます。または、コンテンツがどのように制約され、展開され、リフローされるかを注釈で示すことで、コンテンツを基本的なレベルでレスポンシブになるように設計します。

この例では、ナビゲーションとコンテンツがリフロー、フレックス、スケーリングされ、操作しやすいナビゲーションになっています。レイアウト グリッドが縦向きから複数列に拡大します。アプリバーとフィルタのアドレスがレイアウト グリッドに合わせてリフローされ、フレキシブルになります。

入力とボタンが引き伸ばされていないことを確認します。

コンテインメントとペインの観点から考えてください。

ペインの包含のコンセプトを使用して、アダプティブ レイアウトのコンテンツをグループ化します。たとえば、使用されている例は、リスト詳細レイアウトで表示できる 1 つのペインである詳細画面です。

コンパクト サイズは 1 つのペイン レイアウトに準拠する必要があります。

Medium では 1 ～ 2 ペインのレイアウトを使用できます。

大と特大では、複数のペイン レイアウトを使用できます。

要素をグループ化するには、固有のコンテナと視覚的なコンテナを使用します。ペインは、移動、非表示、展開、制約、ポップアップが可能です。ペインを考慮することで、すべてのモバイル デバイスで設計しやすくなります。

ペインは大きな画面では必須ではありませんが、柔軟性を確保するために、コンテンツをコンテナ グループで考える必要があります。

要素がグリッドにどのように適応するかを重視することで、要素の移動と再配置を可能にします。要素の垂直方向の変更を考慮し、制約とプレゼンテーションの変更と組み合わせます。

表示されるコンテンツの規模と量を考慮します。

スマートフォンの小さな動画グリッドは、タブレットでは狭く、圧倒的なものになります。 画面サイズ、密度、入力に基づいて UI 要素のスケールを更新します。

高品質なアプリは、アプリの中核品質と大画面の品質に関するガイドラインの差別化されたティアを満たしている必要があります。

レイアウトについて詳しくは、マテリアル デザイン 3（M3）のレイアウトについてをご覧ください。

独自のフォーム ファクタ サイズを活用します。

Android スマートフォンにはさまざまなサイズがあり、折りたたみ式デバイスにはアプリを表示できる小さなカバー画面が含まれている場合があるため、小さい画面サイズやさまざまなアスペクト比も考慮してください。

メディア プレーヤーなどのコントロール ベースのレイアウトでは、コントロールをリフローしてコンテンツを表示できるようにします。

ユーザーが調整できるように、大きな再生ボタンなどのアンカー要素を使用して、周囲のコンテンツを適応させ、カバー画面の背景としてヒーローアートを使用します。

サイズクラスを超えて

ウィンドウ サイズはアダプティブ デザインの共通の要素ですが、アプリは、ユーザーがモニターや入力デバイスを接続したり、さまざまな距離で表示したり、デバイスの姿勢を変更したりする状況にも対応する必要があります。mediaQuery API を使用してこれらの変更を確認できます。この API を使用すると、アプリが特定の UI 要素を特定のユースケースに適合させる方法を設計する際に、ニュアンスを追加できます。サイズ、入力、フォーム ファクタ、姿勢ごとに画面全体を設計するのではなく、コンポーネントまたはペイン レベルでアプリのデザインを調整します。

入力操作について詳しくは、デスクトップ エクスペリエンスの操作ガイドをご覧ください。

最新のアダプティブ API と設計ガイダンスを使用して構築、設計されたサンプル ケーススタディ Pawparrazzi をご覧ください。