TV 向けレイアウトを作成する

TV スクリーンは 3 メートルほど離れて見ることが通常であり、他の Android デバイスのディスプレイよりもはるかに大きいことが多く、小型のデバイスのスクリーンと同レベルの精度と色を再現できません。これらの要素を考慮すると、リビングルームで便利で楽しいユーザーエクスペリエンスを実現するためには、テレビ端末を念頭に置いたアプリのレイアウトを作成する必要があります。

基本的なレイアウトの原則

TV デバイスの大きな画面で使いやすく効果的なレイアウトを実現するために、参考となるガイドラインがいくつかあります。TV 画面に適したレイアウトをビルドするには、以下をヒントにしてください。

  • 横向きでレイアウトをビルドします。テレビ画面は常に横表示で表示されます。
  • 画面上のナビゲーションコントロールを画面の左側または右側に配置し、垂直方向のスペースをコンテンツのために確保しましょう。
  • ユーザーインターフェースがさまざまなディスプレイ解像度で適切にスケーリングされるように、レスポンシブサイズと相対サイズ指定(dpsp単位など)を使用してください。
  • レイアウト コントロール間には十分なマージンとパディングを取り、UI が見やすくなるようにします。

オーバースキャン

テレビのレイアウトには、視聴者にフルスクリーン映像を提供するというテレビ規格の進化に伴い、いくつかの独自の要件が存在する。このため、TV デバイスではフルスクリーン表示の際にディスプレイ全体を埋められるように、アプリのレイアウト周囲がクリッピングされる場合があります。この動作は、一般的に「オーバースキャン」と呼ばれます。

常にユーザーに表示する必要がある画面要素は、オーバースキャン安全領域に配置します。レイアウトの左右に 48 dp の 5%、上下に 27 dp の 5% のマージンを追加すれば、そのレイアウト内の画面要素がオーバースキャン安全領域に確実に収まります。

ユーザーが直接操作しない背景画面要素を調整したり、オーバースキャン安全領域に合わせてクリッピングしたりしないでください。この方法により、背景画面の要素がすべての画面で正しく表示されることが保証されます。

使いやすいテキストとコントロールを作成する

TV アプリのテキストやコントロールを遠くからでも見やすくするには、以下をヒントにしてください。

  • ユーザーがひと目でわかる小さな単位にテキストを分割します。
  • 暗い背景に対して明るい色のテキストを使用します。これにより、TV スクリーン上のテキストが読みやすくなります。
  • 細いフォントや、狭すぎるストローク、または広すぎるストロークのフォントを使用しないようにします。読みやすさを向上させるために、サンセリフフォントとアンチエイリアシングを使用してください。
  • すべてのビューウィジェットは、画面から 10 フィート離れた場所に座っている人にもはっきりと見えるように、十分な大きさにしてください。絶対的なピクセル単位ではなく、密度非依存ピクセル(dp)単位を使用し、タイポグラフィにはスケーラブル ピクセル(sp)単位を使用します。

密度に依存しないピクセルと、画面サイズが大きな場合のレイアウトのビルドについて詳しくは、画面の互換性の概要をご覧ください。

TV のレイアウト リソースを管理する

他のすべての Android デバイスと同様に、テレビにもさまざまな画面サイズがあり、720p、1080p、4K など、さまざまな解像度に対応しています。アプリが各種の画面サイズをサポートしていることを確認してください。

画面サイズや解像度が異なると、ピクセル密度も異なります。画面サイズ、解像度、ピクセル密度全体で UI の外観を維持するには、密度非依存ピクセル(dp)を使用して UI の測定値を定義します。さまざまなテレビ パネルの解像度に対する画面のピクセル密度は、次の表にまとめられています。

パネルの解像度 画面ピクセル密度
720p tvdpi
1080p xhdpi
4K xxxhdpi

詳しくは、各種のピクセル密度をサポートする画面の互換性の概要をご覧ください。

避けるべきレイアウト パターン

テレビ端末ではうまく機能しないレイアウト構築方法がいくつかあります。TV のレイアウトを開発する際は、次のユーザー インターフェース パターンを避けてください。

  • 電話またはタブレットのレイアウトの再利用: 電話またはタブレット アプリのレイアウトを修正せずに再利用しないでください。他の Android 搭載デバイスのフォーム ファクタ向けにビルドされたレイアウトは TV デバイスには不向きであり、TV 操作向けに簡略化する必要があります。
  • 電話のアクションバーやメニューの使用: 上部のアクションバーやプルダウンメニューは、リモコンで操作するのが難しいため、テレビのインターフェースには適していません。
  • スワイプのみのナビゲーションの使用: 画面間のスライドやスワイプはスマートフォンやタブレットでは非常に有効ですが、ユーザーが D-pad リモコンを使用する TV では、スワイプのみのジェスチャーは推奨されません。

TV に適したレイアウトのデザインについて詳しくは、TV 向けに設計するをご覧ください。

大容量のビットマップを処理する

TV デバイスのメモリは限られています。アプリのレイアウトで超高解像度の画像を使用すると、すぐにメモリの上限に達してメモリ不足エラーが発生する可能性があります。効率的な画像読み込みとデコードのライブラリ(CoilGlide など)を使用して、アプリでビットマップを取得、デコード、表示します。

ビットマップ処理の際に最高のパフォーマンスを得るには、Android グラフィックのベスト プラクティスをご覧ください。

効果的な広告を提供する

リビングルーム環境においては、全画面表示で 30 秒以内に閉じることができる動画広告ソリューションのご利用をお勧めします。Android TV における広告機能(閉じるボタンやクリック操作など)は、タッチ操作ではなく方向キー(D パッド)を使用して操作できるようにする必要がある。

Android TV では、ウェブブラウザは提供されません。広告でウェブブラウザの起動や Android TV デバイスに対して承認されていない Google Play ストア コンテンツへのリダイレクトは行えません。