6 月 3 日の「#Android11: The Beta Launch Show」にぜひご参加ください。

多様なフォーム ファクタに対応するデザイン

アプリの UI は、特定のデバイス フォーム ファクタを前提としてデザインするものではありません。Android アプリは、4 インチのハンドセットから、50 インチのテレビ、サイズ変更可能なウィンドウを備えた Chrome OS デバイスに至るまで、さまざまなタイプのデバイスに適応する必要があります。

アプリのユーザー インターフェースは、ウィンドウ内に描画され、そのウィンドウのサイズは自由に変更できます。リソース限定子を使用して、さまざまなウィンドウ サイズに対してそれぞれ異なるレイアウトを提供します。ウィンドウ サイズの多様化をもたらす要因としては、デバイスの画面サイズそのものに制約があるケースもあれば、ユーザーがマルチウィンドウ モードを使用してウィンドウ サイズを変更するケースもあります。

レスポンシブ コンテンツをデザインする

デベロッパーは、すべてのユーザーに対して充実した機能を提供する必要があります。そのため、アプリ内の各画面で、それぞれ利用できるウィンドウ領域を最大限に活用する必要があります。

たとえば、スマートフォン画面の全幅を占めるウィンドウ内で稼働するアプリの場合、マルチウィンドウ モードに移行したときには、コンテンツの詳細を非表示にし、Chrome OS デバイス上で画面の全幅を占めるウィンドウ内で稼働するときには、ユーザー インターフェースを拡張して、提供するコンテンツを増やすようにします。

このようなユーザーの期待に応えるだけでなく、大きなデバイスの場合に、あまりも多くの余白が残ったり、無駄なインタラクションが生じたりすることのないように、通常、提供するコンテンツを増やす必要があります。大きなウィンドウに対してユーザー インターフェース デザインを適応させる際に生じる可能性のある問題を以下の図に示します。

図 1: 幅の広いウィンドウに対して十分なコンテンツがないため、不自然な余白が生じるケースや 1 行があまりにも長くなるケース

サイズに合わせて調整したユーザー エクスペリエンスを提供する

利用可能なスペースが大きい場合、コンテンツ ビューを拡大してスペースを埋めるだけでなく、固有の機能を提供するようにしてください。ウィンドウ サイズに合わせてユーザー インターフェースを調整することで、ウィンドウ サイズごとに理想的なユーザー エクスペリエンスを提供することができます。結果的に、ウィンドウ サイズごとにまったく異なるレイアウトやウィジェットを使用する場合もあります。

たとえば、図 2 をご覧ください。縦方向のスペースが十分ある場合は、BottomNavigationView がトップレベル ナビゲーションとして使用されます。他方、図の右側に示すように、ウィンドウのサイズが縮小されると、代わりに DrawerLayout を使用してトップレベル ナビゲーションが実装されます。

図 2: 縦方向のスペースが制限されている場合は下部のナビゲーション バーをナビゲーション ドロワーに置き換えるデザイン

ほかにも以下のような例が考えられます。

  • Toolbar を使用すると、利用可能なスペースに応じて、アクション メニュー項目の表示 / 非表示を切り替えることができます。
  • RecyclerView.LayoutManager を使用すると、スパンカウントを変更して、ウィンドウのサイズを最大限に活用することができます。
  • 利用可能なスペースが大きい場合は、カスタムビューに表示する詳細情報の量を増やすことができます。

このような方法を利用することで、アプリの実行環境にかかわらず、優れたユーザー エクスペリエンスを提供することできます。

レスポンシブ デザイン パターンのサンプルや、アダプティブ レイアウトのアイデアについては、material.io をご覧ください。