デザインとユーザーエクスペリエンス（UX）に関するガイドライン
TVのユーザーインターフェイス（UI）設計は、デスクトップコンピューター、タブレット、スマートフォンの設計とは大きく異なります。ここでは、10フィートUIのデザイン原則を理解し、アプリとそのデザインをAmazon Fire TVのUIに対応させる際に役立つガイドラインを紹介します。
一般原則
アプリのデザイン全体をとおして、以下の原則を指針とします。
10フィートUI
TVを観るとき、ユーザーは画面から10フィート（約3メートル）以上離れているため、TVのインターフェイスは10フィートユーザーインターフェイス（10フィートUI）と呼ばれることがあります。画面自体を大きくすることはできますが、画面が大きいほど解像度は低くなり、画面から離れるほど視野角は小さくなります。
デスクトップコンピューターやタブレット、スマートフォンでは、より近い距離から画面を観るため、これらで実行するアプリやウェブページ向けのデザインは、TVを対象にする場合と根本的に異なります。
また、TVはデスクトップコンピューター、タブレット、スマートフォンに比べて、よりくつろいだ状態で視聴するため、TVのUIではあまり注意力や正確さを求めないようにする必要があります。10フィートUIでは、既存のアプリのデザインやレイアウト、ナビゲーションを完全に見直す必要があります。
明瞭、シンプル、ビジュアル
10フィートUIでは、画面のデザインをシンプルかつ明瞭にし、情報密度を低くする必要があります。画面に表示されるデザイン要素やUIコンポーネント（メニュー、ボタン、イメージ）は、あまり数を多くせず、遠くからでも認識して区別できるように大きくし、間を空けるようにします。画面ごとに、一連の操作とオプションを明確に提示します。
ユーザーはTVの画面で大量のテキストを読むことに慣れていないので、テキストの量は最小限にします。情報を大量に入力しなくても済むようにし、可能な限り妥当なデフォルト値を提供します。
重要コンテンツを引き立てる配置
最も重要なコンテンツやオプションを画面の目立つ場所に配置し、ユーザーが容易に認識してナビゲーションできるようにします。
コンテンツ利用への配慮
アプリでは、ユーザーがすばやくコンテンツにアクセスできるようにする必要があります。TVのインターフェイスは、娯楽を提供することが主な目的です。TVの前に座っているユーザーは、余計な操作をしたくはありません。ユーザーは、「今すぐ観たいものを観て、聴きたいものを聴く」という本来の目的を実現する、 シンプルなユーザーインターフェイスを求めています。
デザインガイドライン
アプリで個々の画面やビューをデザインする際には、次のガイドラインを適用します。
画面サイズと解像度
タブレットやスマートフォンに対応するアプリをデザインする際、対象となる画面のサイズと解像度は固定されています。一方、TV向けアプリの場合は表示画面のサイズもさまざまで、解像度も720pと1080pの両方に対応させる必要があります。
最高のユーザーエクスペリエンスを提供するために、フル1080pのTV画面を対象にして、アプリとそのリソースをデザインすることをお勧めします。Amazon Fire TVプラットフォームでは、TVの画面サイズと解像度に応じて、リソースが拡大／縮小されます。1080pの場合、画面サイズは1920x1080px、密度は320dpi（"xhdpi"）、出力解像度は960 x 540dp（"large"）です。
また、Amazon Fire TVプラットフォームでは、標準のAndroid構成がサポートされており、Android開発者ガイドの複数画面をサポートするで説明されているように、出力パラメーターの違いに応じて複数のリソースディレクトリを使用できます。
アプリを実行すると、Fire TVはリソースを適切なフォルダから読み込みます。Amazon Fire TVで利用できるリソース構成の詳細については、表示とレイアウトを参照してください。
オーバースキャンとセーフゾーン
画面サイズに関係なく、すべてのTVには、画面の表示可能な領域の周囲に余白が確保されています。このスペースは、オーバースキャンと呼ばれます。TVがオーバースキャンとして使用する領域の大きさは、メーカーによって異なります。オーバースキャンの領域は、アプリで使用できません。
Amazon Fire TVプラットフォームでは、TVのオーバースキャンの大きさを設定で調整できますが、念のために画面の縁から5%以内にはアプリのUI要素を配置しないようにすることをお勧めします。特に、フォーカスが置かれるアイテムや画面上のテキストは、その全体が画面の内側90%（セーフゾーン）内に収まるようにする必要があります。
開発者オプションを使用してFire TVにオーバースキャンを表示できます。System X-Rayを参照してください。
カラー
TVの画面はコンピューターの画面よりもコントラストが高く設定されており、より鮮やかで、明るく、生き生きとしたカラーに見えます。表示可能な色の範囲を示す色域も、PC画面よりも狭い範囲となります。アプリでは、彩度の低いカラーを使用してください。寒色（青、紫、灰）が暖色（赤、橙）よりも見やすくなります。
タイポグラフィ
TV画面は部屋のどこからでも読み取れる必要があるため、本文のテキストには大きなフォントサイズ（14sp以上、つまり720pでは約19px、1080pでは約28px）を使用します。Amazonでは、システムフォントとしてHelvetica Neue Regularが使用されます。
アイテムの説明やそのほかのテキストブロックは、その内容も行幅もできる限り短くします。行間は、デスクトップやタブレットの画面の場合よりも広くします。テキストは段落または小さなチャンクに分割し、短い平叙文で記述します。
ナビゲーションと入力
Amazon Fire TVユーザーインターフェイスでは、ナビゲーションとユーザー入力の両方とも、Fire TVリモコン（Amazon Fire TVリモコンまたは音声認識リモコン）か、ゲームコントローラー（Amazon Fire TVゲームコントローラー（日本では現在お取り扱いできません）またはBluetoothゲームコントローラー）から行います。マウス、キーボード、タッチ入力の代わりに物理コントローラーを使用するため、Fire TV対応アプリの入力や制御の方法は、柔軟性の点でほかのデバイスに比べてやや劣ります。
D-Padを使用した方向ナビゲーション
Amazon Fire TVリモコンまたはゲームコントローラーの上下左右のD-Padボタンを使用して、アプリのユーザーインターフェイスをナビゲーションできます。ユーザーに対しては、アプリのユーザーインターフェイスを使用したナビゲーションの方法を明確に示してください。上下左右の方向を明確に示し、操作可能な画面要素すべてがD-Padを通してアクセスできるようにします。
フォーカスと選択
ユーザーはリモコンやゲームコントローラーの方向ボタンを使用してユーザーインターフェイスをナビゲーションするので、フォーカスされた要素を示すために各種のUI要素を強調表示します。アプリ内では、現在フォーカスされている画面要素を明確に示す必要があります。ユーザーがTVから目を離し、再び画面を見たときに、ナビゲーションで利用できるオプションが依然としてはっきりと表示されている必要があります。
UI要素にフォーカスが置かれているときに選択（またはゲームコントローラーのAボタン）が押された場合、その要素がすぐに選択された状態に変化する必要があります。
テキスト入力
テキストフィールドにフォーカスが移動すると、システムキーボードが自動的に表示されます。情報の入力は、リモコンまたはゲームコントローラーの方向ボタンを使用して文字や数字を選択することによって行えます。オートコンプリート機能が用意されており、予測された入力候補をいつでも選択できます。
画面、ビュー、フロー
このセクションでは、Amazon Fire TVユーザーインターフェイスの主な画面とビュー、およびそれらを構築するために使用されているコントロールについて説明します。独自のアプリのデザインを最適化し、アプリをシステムUIと統合する際には、ここに記載されているパターンを参考にしてください。
ホーム画面（ランチャー）
ホーム画面は、グローバルナビゲーションメニュー（左側）と一連のコンテンツタイル（右側）で構成されます。
グローバルナビゲーションメニューは、中心となるシステムメニューです。画面の左側に、縦に1列に並んで表示されます。グローバルナビゲーションメニューでは、主なコンテンツカテゴリーのほか、[検索]、[ホーム]、[映画]、[TV番組]、[ミュージック]、[ゲーム]、[アプリ] などのオプションを選択できます。グローバルナビゲーションメニューの各アイテムは、上と下の方向ボタンを使用して選択できます。
グローバルナビゲーションメニューのいずれかのアイテムにフォーカスを置くと、そのノードのホームビューが画面の右側に表示されます。ノードごとに、専用のホームビューと固有のコンテンツがあります。システム全体のホームビュー（ランチャーと呼ばれることがあります）にアクセスするには、Fire TVリモコンまたはゲームコントローラーのホームキーを使用するか、グローバルナビゲーションメニューからホームを選択します。
各ホームビューは、複数のコンテンツ行で構成されます。行のタイトルタイルはコンテンツの種類（たとえば、「注目タイトル」、「マイビデオ」、「おすすめ」など）を示します。残りのタイルは、そのコンテンツのサンプルを示します。これらのコンテンツ行では、次のことができます。
- 上と下の方向ボタンを使用して、行間をナビゲーションする。
- 左ボタンを使用して、ナビゲーションメニューに戻る。
- 選択または右を使用して行を選択し、その行の1Dリストを表示する。
1Dリストビュー
1Dリストビューは、ホームビューからコンテンツ行が選択されると表示されます。1Dリストは、1行のアイテムで構成されます。タイトルバーには、リストのタイトル（たとえば、「注目タイトル」「マイビデオ」「おすすめ」など）に加えて、リストにあるアイテムの数とフォーカスされているアイテムの位置を示す2つの数字が表示されます。
参照リストでフォーカスされているアイテムについては、そのアイテムの簡単な説明がリストの下に表示されます。簡単な説明には、アイテムの基本情報（タイトル、日付、評価）と [ウォッチリストに追加] などのオプションが含まれます。
1Dリストでは、次のことができます。
- 左と右の方向ボタンを使用してアイテム間をナビゲーションする。リストの最後を越えてナビゲーションすると、フォーカスは最初のアイテムに戻ります。
- 選択ボタンを使用してアイテムを選択する。この操作で、そのアイテムの詳細ビューが表示されます。
詳細ビュー
詳細ビューは、参照リストからアイテムが選択されると表示されます。上の画像は、ある映画の詳細ビューです。表示される詳細情報は、TV番組や音楽など、コンテンツによって異なる可能性があります。詳細ビューには、コンテンツまたはほかのアイテムに関連する情報と操作が表示されます。
説明の下には、このアイテムで実行可能な操作が表示されます。実行可能な操作は、ユーザーの定期購入ステータス（たとえば、Amazonプライムメンバーであるなど）とコンテンツ利用の可否によって異なります。
画面の左側のディスカバリーメニューには、アイテムに関連する追加情報（たとえば、[Cast]、[Trivia]、[Reviews] など）が表示されます。
検索
ホーム画面の [検索] メニューを選択すると検索画面が表示され、音声検索やテキスト検索を利用できます。検索画面は、Alexa対応音声認識リモコンのマイクボタンからも利用でき、現在のアプリまたはコンテンツ上にオーバーレイとして表示されます。
テキスト検索の場合は、左と右の方向キーを使用してアルファベット間を移動し、文字ごとに選択を押して検索クエリを入力します。入力候補がクエリの下にリストとして表示されます。
グローバル検索はシステム全体で利用できますが、個々のアプリ向けにカスタマイズすることはできません。開発者は独自のアプリ内検索を実装できますが、この検索は、グローバル検索機能には含まれません。
その他のリソース
10フィートUIのユーザーエクスペリエンス（UX）デザインに関するベストプラクティスについて詳しくは、Android TVを参照してください。
Last updated: 2020年10月29日