Android デバイスには、スマートフォン、タブレット、折りたたみ式デバイス、ChromeOS デバイスなど、さまざまなフォーム ファクタがあり、広範な画面サイズが用意されています。Android は、マルチウィンドウ、マルチディスプレイ、フリーフォーム、ピクチャー イン ピクチャーなど、多くの表示モードに対応しています。折りたたみ式デバイスには、テーブルトップやブックなど、さまざまな状態や形状があります。
アプリの設計を開始する際は、アプリのさまざまなユースケースを検討してください。次に例を示します。
大画面デバイスでは、ユーザーがさまざまな方法でメディアアプリのコンテンツを利用できます。
ユーザーは、マルチ ウィンドウ構成で動画を視聴しながらマルチタスクを行ったり、大画面を利用して画像をキャプチャした後に複雑な編集を行ったりする可能性があります。
ビデオ通話でつながったり、友だちや家族の顔をより詳しく見たりするために、タブレットを利用するユーザーもいます。アプリでは、カスタムの再生オーバーレイでタイトルやシーンに関するより豊富なコンテキストを表示したり、画面上でより多くの制御オプションを提供したりできます。
ブラウジング ビューのカルーセルでは、より多様なコンテンツを表示して視覚的な魅力を高めることができます。また、メディアアプリでは、再生と並べてブラウジング可能なフィードを提供することで、ユーザーのエンゲージメントを維持できます。
メディアアプリは、標準のスマートフォン、折りたたみ式デバイス、タブレット、ChromeOS デバイスで同じコードを実行するため、アプリ開発の最初から大画面を想定して設計する必要があります。詳細と視覚的な例については、大画面ギャラリーをご覧ください。
メディアアプリをデフォルトでレスポンシブにする
メディアアプリのレイアウトをスマートフォン、タブレット、折りたたみ式デバイス、ChromeOS デバイスでアダプティブにすることで、ユーザー エクスペリエンスの破損を回避します。
アプリは、さまざまなディスプレイ サイズ、向き、フォーム ファクタに対応するためにレスポンシブでなければなりません。アダプティブ レイアウトは、使用可能なディスプレイ スペースに応じて変化します。詳しくは、各種のディスプレイ サイズのサポートをご覧ください。
ガイドラインに沿った設計
コアアプリの品質は、ディスプレイ サイズ、デバイスの形状、その他のデバイス固有の考慮事項に関係なく、すべての Android アプリの基盤となります。大画面向けの設計を開始する前に、アプリがこれらの基本要件を満たしている必要があります。詳しくは、アプリの品質に関する主要なガイドラインをご覧ください。
アプリは、デバイスのフォーム ファクタ、画面サイズ、表示モード、形状に関係なく、優れたユーザー エクスペリエンスを提供する必要があります。そのため、以下の Tier 1、2、3 のガイドラインに沿ってアプリを設計してください。
このガイドラインは、ほとんどの種類の Android アプリに関する品質要件を包括的に定めています。
Tier 3:
この基本レベルでも、アプリは UI とグラフィックの要件に準拠する必要があります。アプリは大画面に対応しており、ユーザーは重要なタスクフローを実行できますが、ユーザー エクスペリエンスは最適とはいえません。
アプリのレイアウトは望ましいものではない可能性がありますが、全画面(またはマルチ ウィンドウ モードの全画面)で実行されます。レターボックス表示されず、互換モードでは実行されません。キーボード、マウス、トラックパッドなどの外部入力デバイスの基本的な機能に対応しています。詳しくは、大画面対応をご覧ください。
Tier 2:
ここでは、アプリではすべての画面サイズとデバイス設定においてレイアウトが最適化され、外部入力デバイスのサポートも拡張しています。詳しくは、大画面向けに最適化をご覧ください。
Tier 1:
これは最良のサポートレベルであり、プレミアム機能と機能が指定されているため、ユーザーはアプリで最高のエクスペリエンスを得ることができます。
該当する場合には、マルチタスク、折りたたみ式デバイスの形状、ドラッグ、タッチペンによる入力をサポートしています。このレベルでは、アプリの差別化が高度に行われているため、マルチタスクや折りたたみ式デバイスの姿勢などに関するガイドラインに十分注意してください。詳しくは、大画面の差別化をご覧ください。
最適化されたレイアウト
大画面の表示領域を、レターボックス(向きの制限による)やストレッチなしで有効活用できます。メディアやソーシャル メディア向けにアプリのレイアウトを最適化することで、アプリのリーチを拡大し、あらゆる大画面フォーム ファクタ(タブレット、折りたたみ式デバイス、ChromeOS デバイス)でユーザー エクスペリエンスを向上させることができます。また、あらゆるスマートフォンの画面サイズにも対応できます。
ナビゲーション レールとドロワー コンポーネントでこれまでにないナビゲーションを提供し、見やすく操作しやすい UI を実現します。また、最小限の画面スペースを確保しつつ、メインのナビゲーション デスティネーションをアクセスしやすい場所に配置することで、正規レイアウト(リストと詳細、フィード、サポートペイン)を補完します。
メディア レイアウト
リスト詳細、フィード、サポート ペインにメディア固有のレイアウトを実装して、アプリの使いやすさを向上させます。MDX、Flutter、Compose のレイアウトについては、レイアウト リソースをご覧ください。
リストと詳細: インタラクティブなメディア ブラウザを備えたアプリを設計すると、ユーザーは視聴や聴取をしながらさまざまなメディアを閲覧できます。メディア タイトルが再生中の動画や音声ファイルと並べて表示されます。デバイスの向きが変わると、リスト / 詳細レイアウトはアプリの状態を維持しながら変更に対応します。詳しくは、リストと詳細のレイアウトをご覧ください。
フィード: フィード レイアウトは、同等のコンテンツ要素を設定可能なグリッドに配置して、大量のコンテンツ(アプリ内の音楽フィードや映画 / TV キオスクなど)をすばやく簡単に確認できるようにするレイアウトです。詳しくは、フィード レイアウトをご覧ください。
補助ペイン: プライマリとセカンダリの表示領域を使用すると、アプリでコンテキスト、関連性、参照用の補助ペインを埋め込むことができます。たとえば、似たタイトル、公開レビュー、同じアーティストや俳優による他の作品のスクロール リストなどです。詳しくは、ペイン レイアウトのサポートをご覧ください。
厳選されたメディア レイアウトのコレクションについては、メディア ギャラリーをご覧ください。
ソーシャル メディアのレイアウト
大画面では大きな作業スペースを確保でき、コンテンツの作成、マルチタスク、アプリ間でのコンテンツのドラッグ&ドロップを行い、コンテンツを共有できます。小画面のデバイスでは不可能な、特徴的な機能を利用して、大画面のメディアアプリでリストの詳細、フィード、補助ペインのレイアウトを活用できます。
リスト / 詳細: メッセージ アプリ、連絡先管理ツール、ファイル ブラウザに最適です。たとえば、会話のリストと詳細を並べて表示し、最新のメッセージを常に把握できるようにします。詳しくは、リストと詳細のレイアウトをご覧ください。
フィード: このスタイルのレイアウトの一般的なコンポーネントは、カードとリストです。たとえば、投稿のコラージュを柔軟なグリッド形式で作成したり、サイズや位置に基づいて重要な投稿を目立たせたりできます。ユーザーは大量のコンテンツをすばやく確認できます。詳しくは、フィード レイアウトをご覧ください。
補助ペイン: 検索アプリや参照アプリ、生産性向上アプリでは、このレイアウト スタイルが役立ちます。コンテンツ作成ツールをユーザーがいつでも利用できるようにします。たとえば、アプリでユーザーが設定を調整したり、カラーパレットにアクセスしたり、エフェクトを適用したり、変更内容をすぐに確認したりできるようにします。詳しくは、ペイン レイアウトのサポートをご覧ください。
ソーシャル メディア レイアウトの厳選されたコレクションについては、ソーシャル メディア ギャラリー ページをご覧ください。
大画面メディア アプリのベスト プラクティス
大画面に関するベスト プラクティスを使用すると、アプリの不要な手直しを回避できます。また、最初からより多くのデバイスでアプリを使いやすくすることができます。特に、向き、キーボード ショートカット、カメラ プレビューのサポート、折りたたみ式デバイスの姿勢については、このことが当てはまります。
向きとサイズ変更
メディアアプリが画面の向きとサイズ変更の制限を宣言している場合、Android は互換モードを有効にします。互換性モードを使用すると、アプリの動作は許容範囲内になりますが、ユーザビリティが大幅に低下し、ユーザー エクスペリエンスが損なわれます。
たとえば、アプリがタブレットで実行されている場合、タブレットは横向きでホルダーにセットされます。アプリが縦向きに制限されている場合、レターボックス表示になるため、エンドユーザーにとって理想的ではありません。アプリでは、ユーザーが好みの向きを使用できるようにする必要があります。そのため、大画面で利用できるサイズをデザインに活用してください。
向きの制限は、ユーザーがコンテンツを操作したりメディアを消費したりする方法を減らし、アプリの使用を制限します。向きを変更するとサイズに影響する可能性がありますが、サイズ変更によって向きが変更されるとは限りません。
キーボード ショートカット
大画面では、物理キーボードのキーボード ショートカット(開始、停止、一時停止、巻き戻し、早送りなど)が使用される可能性が高く、キーボードによる一貫したユーザー エクスペリエンスが実現します。
ユーザーはメディアアプリでこれらの機能を期待しています。ユーザーの摩擦点を減らすために、物理キーボードでアプリをテストすることを検討してください。これにより、設計の開始時にこれらの重要なショートカットに気づき、アプリに含めることができます。
カメラ プレビューのサポート
大画面では、拡大、切り抜き、回転に関する問題が発生しやすくなります。そのため、カメラ プレビューのサイズがメディアアプリの UI で実際にレンダリングされるサイズであると想定することはできません。
たとえば、タブレットで写真を撮ったときに、タブレットの画面で上下逆さまに表示されるのは、最適なエクスペリエンスとは言えません。大画面でのカメラ プレビューのサポートを含めます。
詳しくは、CameraX プレビューまたは Camera2 プレビューをご覧ください。
折りたたみ式デバイスの形状
大画面向けメディアアプリの設計には、折りたたみ式デバイスの姿勢も含まれます。たとえば、メディア再生用の卓上構成をユーザーが利用できるようにしたり、プレビューやキャプチャに背面ディスプレイとデュアル スクリーン モードを使用できるようにしたりできます。
開発計画に折りたたみ式デバイスのポーズを含めることで、アプリを利用できるデバイスが増え、影響範囲が広がります。折りたたみ式デバイスの形状を活かして、他のデバイスでは実現できない方法でユーザーのメディア エクスペリエンスを拡大できます。詳細については、折りたたみ式デバイスの姿勢をご覧ください。