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

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 プレビューをご覧ください。

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

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

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