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

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

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

大画面向けのメディアアプリの設計には、折りたたみ形状が含まれます。たとえば、メディア再生をテーブルトップ構成にしたり、プレビューとキャプチャに背面ディスプレイとデュアル スクリーン モードを使用したりできます。

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