レイアウトの調整

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

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

  • まず、デバイスのウィンドウ クラスの幅を考慮してレイアウトの変更を決定し、次に高さを調整します。
  • Android は、ウェブ開発と同様にレスポンシブ デザインのコンセプトを活用し、柔軟なグリッドと画像を使用して、コンテキストに効果的に対応するレイアウトを作成します。

モバイルとタブレットのサイズの生産性向上アプリの画面。

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

適応型を考える

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

一部の機能やユースケースは、すべての画面サイズやフォーム ファクタで意味をなさない可能性があります。アダプティブ デザインにより、人間工学、ユーザビリティ、アプリの質といった点でユーザーの自由度が高まります。

方法と品質

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

コンテンツとコンポーネントの最大幅を設定して、全幅に引き延ばされないようにします。

コンテンツを全幅に拡大することを許可します。

コンテナまたはペインの観点から考えてください。

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

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

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

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