最初から大画面向けに設計する

Android デバイスには、スマートフォン、タブレット、折りたたみ式デバイス、ChromeOS デバイスなど、さまざまなフォーム ファクタがあり、広範な画面サイズが用意されています。Android は、マルチウィンドウ、マルチディスプレイ、フリーフォーム、ピクチャー イン ピクチャーなど、多くの表示モードに対応しています。折りたたみ式デバイスには、テーブルトップやブックなど、さまざまな状態または形状があります。

アプリの設計を始める際には、アプリのさまざまなユースケースを検討してください。次に例を示します。

  • 大画面デバイスでは、ユーザーがメディアアプリのコンテンツをさまざまな方法で利用できるスペースが広がります。

  • ユーザーは、マルチウィンドウ構成で動画を視聴しながらマルチタスクを行ったり、大画面を活用して画像の撮影後に複雑な編集を適用したりできます。

  • ユーザーは、ビデオ通話でつながりを維持し、友人や家族をより詳細に表示するために、タブレットに目を向けることがあります。アプリは、カスタム再生オーバーレイでタイトルやシーンに関するより豊富なコンテキストを表示したり、画面上でより多くのコントロール オプションを提供したりできます。

  • ブラウジング ビューのカルーセルでは、より多様なコンテンツを表示して視覚的な魅力を高めることができます。また、メディアアプリでは、再生と並行してブラウジング可能なフィードを提供することで、ユーザー エンゲージメントを維持できます。

メディアアプリは、標準のスマートフォン、折りたたみ式デバイス、タブレット、ChromeOS デバイスで同じコードが実行されるため、アプリ デベロッパーはアプリ開発の最初から大画面向けに設計する必要があります。詳細と視覚的な例については、大画面ギャラリーをご覧ください。

メディアアプリをデフォルトでレスポンシブにする

スマートフォン、タブレット、折りたたみ式デバイス、ChromeOS デバイスでアプリのレイアウトをアダプティブにすることで、メディアアプリでユーザー エクスペリエンスが損なわれないようにします。

アプリは、さまざまなディスプレイ サイズ、向き、フォーム ファクタに対応するためにレスポンシブでなければなりません。アダプティブ レイアウトは、使用可能な表示スペースに応じて変化します。詳しくは、各種のディスプレイ サイズのサポートをご覧ください。

ガイドラインに沿って設計する

コアアプリの品質は、ディスプレイ サイズ、デバイスの形状、その他のデバイス固有の考慮事項に関係なく、すべての Android アプリの基本となります。大画面向けの設計を開始する前に、アプリがこれらの基本要件を満たしている必要があります。詳細については、コアアプリの品質をご覧ください。

アプリは、デバイスのフォーム ファクタ、画面サイズ、表示モード、形状に関係なく、優れたユーザー エクスペリエンスを提供する必要があります。そのため、以下の Tier 1、2、3 のガイドラインに沿ってアプリを設計してください。

このガイドラインは、ほとんどの種類の Android アプリに関する品質要件を包括的に定めています。

Tier 3:

この基本レベルでも、アプリは UI とグラフィックの要件に準拠する必要があります。アプリは大画面に対応しており、ユーザーは重要なタスクフローを実行できますが、ユーザー エクスペリエンスは最適とはいえません。

アプリのレイアウトは望ましいものではない可能性がありますが、全画面(またはマルチ ウィンドウ モードの全画面)で実行されます。レターボックス表示されず、互換モードでは実行されません。キーボード、マウス、トラックパッドなどの外部入力デバイスの基本的な機能に対応しています。詳細については、大画面対応をご覧ください。

Tier 2:

この階層では、アプリはすべての画面サイズとデバイス設定においてレイアウトが最適化され、外部入力デバイスのサポートも拡張しています。詳しくは、大画面向けに最適化をご覧ください。

Tier 1:

これは、プレミアム機能と性能を指定するため、最高レベルのサポートであり、ユーザーにアプリの最も優れたエクスペリエンスを提供します。

該当する場合には、マルチタスク、折りたたみ式デバイスの形状、ドラッグ、タッチペンによる入力をサポートしています。このレベルでは、アプリは高度に差別化されているため、マルチタスクや折りたたみ式デバイスの形状などのガイドラインに細心の注意を払ってください。詳しくは、大画面向けに差別化をご覧ください。

最適化されたレイアウト

(向きの制限による)レターボックス表示や引き伸ばしをすることなく、大画面の広いスペースを活用できます。メディアやソーシャル メディア向けにアプリのレイアウトを最適化することで、アプリのリーチを拡大し、あらゆる大画面フォーム ファクタ(タブレット、折りたたみ式デバイス、ChromeOS デバイス)で優れたユーザー エクスペリエンスを実現できるだけでなく、あらゆるスマートフォンの画面サイズに対応できます。

ナビゲーション レールとドロワー コンポーネントでこれまでにないナビゲーションを提供し、見やすく操作しやすい UI を実現します。また、最小限の画面スペースを確保しつつ、メインのナビゲーション デスティネーションをアクセスしやすい場所に配置することで、正規レイアウト(リストと詳細、フィード、サポートペイン)を補完します。

メディアのレイアウト

リストと詳細、フィード、サポート ペインにメディア固有のレイアウトを実装することで、アプリのユーザビリティを向上させます。MDX、Flutter、Compose のレイアウトについては、レイアウト リソースをご覧ください。

  • リストと詳細: インタラクティブなメディア ブラウザを使用してアプリを設計すると、ユーザーは視聴しながら別のメディアを閲覧できます。メディア タイトルは、再生中の動画や音声ファイルと並べて表示されます。デバイスの向きが変更されると、リストと詳細レイアウトはアプリの状態を維持しながら変更に対応します。詳細については、リストと詳細のレイアウトをご覧ください。

  • フィード: フィード レイアウトは、同等のコンテンツ要素を設定可能なグリッドに配置して、大量のコンテンツをすばやく簡単に確認できるようにするレイアウトです。たとえば、アプリ内の音楽フィードや映画とテレビのキオスクなどです。詳しくは、フィード レイアウトをご覧ください。

  • 補助ペイン: プライマリとセカンダリの表示領域を使用して、アプリはコンテキスト、関連性、参照用の補助ペインを埋め込むことができます。たとえば、似たタイトル、公開レビュー、同じアーティストや俳優による他の作品のスクロール リストなどです。 詳しくは、ペイン レイアウトのサポートをご覧ください。

厳選されたメディア レイアウトのコレクションについては、メディア ギャラリーをご覧ください。

ソーシャル メディアのレイアウト

大画面ではソーシャル メディア ユーザーは、コンテンツの作成、マルチタスク、アプリ間でのコンテンツのドラッグ、共有を行うための作業スペースをより多く確保できます。小画面のデバイスでは不可能な、特徴的な機能を備えた大画面メディアアプリは、リストと詳細、フィード、補助ペインのレイアウトを活用できます。

  • リストと詳細: メッセージ アプリ、連絡先管理ツール、ファイル ブラウザに最適です。たとえば、会話のリストを詳細と並べて表示し、最新のメッセージを常に把握できるようにします。詳細については、リストと詳細のレイアウトをご覧ください。

  • フィード: このスタイルのレイアウトで一般的なコンポーネントは、カードとリストです。たとえば、投稿のコラージュを柔軟なグリッド形式で作成したり、サイズや位置に基づいて重要な投稿を目立たせたりできます。ユーザーは、コンテンツの大きなグループをすばやく表示できます。詳しくは、フィードのレイアウトをご覧ください。

  • 補助ペイン: 検索アプリ、参照アプリ、生産性向上アプリは、このスタイルのレイアウトを活用できます。コンテンツ作成ツールをいつでも利用できるようにします。たとえば、アプリでユーザーが設定を調整したり、カラーパレットにアクセスしたり、エフェクトを適用したり、変更内容を即座に確認したりできるようにします。詳細については、サポート ペイン レイアウトをご覧ください。

ソーシャル メディア レイアウトの厳選されたコレクションについては、ソーシャル メディア ギャラリーのページをご覧ください。

大画面メディアアプリのベスト プラクティス

大画面向けのベスト プラクティスを使用すると、アプリの不要な手直しを回避できます。また、特に画面の向き、キーボード ショートカット、カメラ プレビューのサポート、折りたたみ式デバイスの姿勢に関して、最初からより多くのデバイスでアプリを使いやすくすることができます。

向きとサイズ変更

メディアアプリが画面の向きとサイズ変更の制限を宣言している場合、Android は互換モードを有効にします。互換性モードを使用すると、アプリの動作は許容範囲内に収まりますが、ユーザビリティが大幅に低下し、ユーザー エクスペリエンスが損なわれます。

たとえば、アプリがタブレットにインストールされている場合、タブレットは横向きでホルダーにセットされます。アプリが縦向きに制限されている場合、レターボックス表示になります。これはエンドユーザーにとって理想的ではありません。アプリは、ユーザーが好みの向きで使用できるようにする必要があります。そのため、デザインでは大画面の利用可能なサイズを活用してください。

画面の向きを制限すると、ユーザーがコンテンツを操作したりメディアを視聴したりする方法が制限され、アプリの使用が制限されます。画面の向きを変更すると、サイズ変更に多少の影響が生じることがありますが、サイズ変更によって画面の向きが変更されるとは限りません。

キーボード ショートカット

大画面では、物理キーボードのキーボード ショートカット(開始、停止、一時停止、巻き戻し、早送りなど)が使用される可能性が高く、キーボードによる一貫したユーザー エクスペリエンスが実現されます。

ユーザーは、メディアアプリにこれらの機能を期待しています。ユーザーの不満を軽減するため、物理キーボードでアプリをテストすることを検討してください。これにより、設計の開始時にこれらの重要なショートカットを認識してアプリに組み込むことができます。

カメラ プレビューのサポート

大画面では、引き伸ばし、切り抜き、回転に関する問題が発生する可能性が高くなります。そのため、カメラ プレビューのサイズが、メディアアプリの UI で実際にレンダリングされるサイズであるとは限りません。

たとえば、ユーザーがタブレットで写真を撮影したときに、タブレットの画面に上下逆さまに表示されると、最適なエクスペリエンスとは言えません。大画面でのカメラ プレビューのサポートを含めます。

詳しくは、CameraX プレビューまたは Camera2 プレビューをご覧ください。

折りたたみ式デバイスの形状

大画面向けにメディアアプリを設計する際は、折りたたみ式デバイスの形状も考慮する必要があります。たとえば、アプリでメディア再生用のテーブルトップ構成をユーザーに提供したり、プレビューとキャプチャに背面ディスプレイとデュアル スクリーン モードを使用したりできます。

開発計画に折りたたみ式デバイスのポスチャーを含めると、アプリをより多くのデバイスで利用できるようになり、より大きな影響を与えることができます。折りたたみ式デバイスの形状を利用することで、他のデバイスでは実現できない方法でユーザーのメディア エクスペリエンスを拡大できます。詳細については、折りたたみ式デバイスの姿勢をご覧ください。