Android によって、さまざまな画面サイズとフォーム ファクタのデバイスで適切に動作するアプリを簡単に開発できるようになりました。この互換性により、単一のアプリを設計して、ターゲットとするすべてのデバイスに幅広く配信できます。
ただし、それぞれの画面設定においてユーザーに最良のエクスペリエンスを提供するためには、さまざまなサイズに合わせてレイアウトや他の UI コンポーネントを最適化することが必要です。ChromeOS では、UI の最適化によって利用可能な広い画面スペースを十分に活用して、新しい機能を提供したり、追加コンテンツを表示したり、その他の方法によるエクスペリエンスを拡張することで、ユーザーのエンゲージメントを向上させることができます。
大画面向けのレイアウト
スマートフォン向けに開発したアプリのデザインを ChromeOS やその他の大画面フォーム ファクタで改善する場合は、まずレイアウト、フォント、スペースに多少の調整を加えるところから着手します。7 インチ タブレットや大きなキャンバスを持つゲームなどの一部のケースでは、この調整を行うだけで、タブレットでアプリが適切に表示されるようになる場合があります。
大きなディスプレイでは、UI のパーツのデザインを変更して、「画面いっぱいに伸びた UI」を、効率的なマルチペインの UI、シンプルなナビゲーション、追加のコンテンツに置き換えることができます。マテリアル デザイン チームのマテリアル スタディで、その例を確認できます。たとえば、Reply がさまざまな画面サイズにどのように適応するかをご覧ください。
以下にいくつかご紹介します。
- これらの大画面向けにカスタム レイアウトを提供します。これを行うには、画面の最も短いサイズまたは利用できる最小の幅と高さを使用します。
- ChromeOS などの横向き優先の環境で、UX とレイアウトがどのように機能するかを想像してください。ウィンドウ サイズに基づいて、これらの向きでレイアウトが適切に表示され、動作するように調整するか、land リソース修飾子を使用して特定の横向きレイアウトを提供します。動的なウィンドウ サイズ変更や大画面に関するその他の考慮事項については、ウィンドウ管理のページをご覧ください。
- アプリが横長に引き伸ばされると、下部のナビゲーション バーはうまくスケーリングされません。ナビゲーションを左側のメニューに移動して、アクセスしやすく、より多くのオプションを表示できるようにすることを検討してください。Reply の例は、このことをよく示しています。
- 少なくとも、フォントサイズ、マージン、スペースなどのサイズを大きい画面向けにカスタマイズして、スペースの利用とコンテンツの読みやすさを向上させます。ChromeOS デバイスや他のデスクトップ環境など、ユーザーがデバイスから少し離れている場合の見た目を考慮してください。
- ユーザーがマウスを使用している場合やタブレットを手で持っている場合に操作しやすいように、UI コントロールの配置を調整します。たとえば、画面の中央から離れた端にコントロールが表示されるようにします。
- 通常、ChromeOS やその他の大画面デバイスの場合の UI 要素のパディングは、スマートフォンの場合よりも大きくする必要があります。マージンとガターは、画面サイズが変わるたびにすべて調整される必要があります。
- テキスト コンテンツには十分なパディングを設定し、画面の端に接するような形でテキストが表示されないようにします。画面の端近くのコンテンツの周囲には、少なくとも 16dp のパディングを設定します。
特に、レイアウトが画面いっぱいに伸びて表示されることがないようにします。
- テキストの行は長すぎないようにする必要があります。1 行あたり最大 100 文字となるように調整します。最適な長さは 50 ～ 75 文字です。
- リストやメニューは画面幅全体を使用しないようにする必要があります。
- パディングを使用して画面上の要素の幅を調整するか、大画面デバイスの場合にはマルチペイン UI に切り替えます（次のセクションをご覧ください）。
広い画面領域を活用する
ChromeOS デバイスでは、アプリの利用できる画面領域がかなり広くなります。大画面向けにアプリの UI を設計する際は、広い画面領域を十分に活用してください。
Reply と Rally の例では、アプリが画面サイズの拡大をさまざまな方法で活用しています。Reply は、すっきりとした外観にするためにスペースを追加しています。一方、Rally は、スクロールやタップを減らすために、より多くのデータを表示しています。
まず、ユーザーに表示されない可能性のあるものと、それらを表示する方法を確認することから始めましょう。たとえば、アイテムに関する詳細情報を表示したり、右クリックや長押しで表示されるメニューを常に表示したり、左側のナビゲーション領域が広くなったことで、別のナビゲーション オプションやより深いナビゲーション オプションを表示したりできます。これらは、現在のエクスペリエンスを完全に再設計することなく、UX を改善し、アプリをデスクトップのような感覚で操作できるようにする、大きなユーザビリティの改善です。
アプリに関する推奨事項は以下のとおりです。
- ブランドは、さまざまな画面サイズを検討する際の方向性を決定します。優先順位を付けてユーザーに表示する内容は、存在するユーザー ジャーニーの種類と最もよく使用される機能によって異なります。インスピレーションを得るには、マテリアル スタディを確認し、各プロダクトが大きな画面にどのように対応しているかをご覧ください。
- レスポンシブ グリッド システムを使用してアプリのデザインがどのように動作するか、また、画面の占有面積が大きくなるにつれてコンテンツ、ナビゲーション、オプションがどのように移動するかを検討します。
- どの画面サイズで異なるレイアウトを使用するかを決め、そのうえで適切なウィンドウ サイズのバケット（large/xlarge など）またはウィンドウの最小幅（sw600dp/sw720 など）でそれぞれ異なるレイアウトを提供します。これらのレイアウトに移行する際、ユーザーがいたコンテキスト全体は変更しないようにしてください。また、レイアウト間の移行時に、ユーザーの状態（スクロール位置、入力中のテキストなど）をすべて保持するようにしてください。
高密度で大画面向けにデザインされたアセットを使用する
アプリの表示が最適になるよう、ChromeOS で一般的にサポートされている各解像度ごとに、アイコンや他のビットマップ アセットを用意します。特に、アプリバー、通知、ランチャーのアイコンをアイコン画像の設計ガイドに従ってデザインし、それらのアイコンをベクター形式で用意して、アプリが動作するさまざまな画面で適切に拡大縮小されるようにする必要があります。
Android の VectorDrawable とベクター アセットについて詳しくは、Nick Butcher によるこちらのブログ投稿をご覧ください。
フォントサイズとタップ ターゲットを調整する
アプリを ChromeOS や高密度画面で使えるようにするには、ターゲットとするすべての画面構成に合わせて、UI のフォントサイズとタップ ターゲットを調整します。フォントサイズはスタイルを指定できる属性またはサイズ設定用のリソースを使用して調整できます。タップ ターゲットは、前述のとおりレイアウトやビットマップ ドローアブルを使用して調整できます。
考慮事項は次のとおりです。
- 大きな画面サイズと解像度に対して、テキストが大きくなりすぎたり、小さくなりすぎたりしないようにする必要があります。対応する UI 要素に合せてラベルが適切なサイズとなること、および、ラベルやタイトルなどの要素内に不適切な改行が含まれていないことを確認します。
- 画面要素のタップ ターゲットのサイズは、48 dp とすることをおすすめします。大画面 UI では多少の調整が必要となる場合があります。スペーシング方法で、タップ ターゲットと、画面サイズが変化したときのアイテム間のスペーシングについて詳しくご覧ください。これらの推奨事項は、最低限のアクセシビリティ ガイドラインも満たしています。
-
可能であれば、小さなアイコンについては、
TouchDelegateを使用するか、透明なボタンの中央にアイコンを配置することによって、タップできる領域を 48 dp より大きいサイズに拡げます。