TVプラットフォーム向けのデザインとユーザーエクスペリエンスのガイドライン

デザインとユーザーエクスペリエンスのガイドライン (Amazon Fire TV)

テレビのユーザーインターフェイスの設計は、デスクトップコンピューター、タブレット、スマートフォンの設計とは大きく異なります。ここでは、開発者の皆さんが10フィートUIのデザイン原則を理解し、アプリケーションとデザインをAmazon Fire TVユーザーインターフェイスに対応させる際の助けとなるガイドラインを紹介しています。

全般的な原則

アプリをデザインする際は、次に示す原則を全体的に適用します。

10 フィート UI

テレビを見るとき、ユーザーは画面から 10 フィート (約 3 メートル) 以上離れているため、テレビのインターフェイスは、10 フィートユーザーインターフェイス (10-ft UI) と呼ばれることがあります。画面自体を大きくすることはできますが、画面が大きいほど解像度は低くなり、画面から離れるほど視野角は小さくなります。

デスクトップコンピューターやタブレット、スマートフォンでは、より近い距離から画面を見るため、これらで実行するアプリケーションまたはウェブページ向けのデザインは、テレビを対象にする場合と根本的に異なります。

また、テレビはデスクトップコンピューター、タブレット、またはスマートフォンに比べて、よりくつろいだ雰囲気で視聴されるため、テレビのUIでは、高いレベルの注意力および正確性を求めないようにする必要があります。10 フィートUIでは、既存のアプリのデザインやレイアウト、ナビゲーションを完全に見直す必要があります。

クリア、シンプル、ビジュアル

10-ft UI では、画面をシンプルかつクリアにし、情報密度を低くする必要があります。画面に表示されるデザイン要素またはUIコンポーネント (メニュー、ボタン、イメージ) の数を制限し、これらの要素は、遠くからでも認識および区別できるように十分に大きくし、間を空けるようにします。各画面では、一連の操作とオプションを明確に提示します。

ユーザーはテレビの画面で大量のテキストを読むことに慣れていないので、テキストの量は最小限にします。情報を大量に入力しなくても済むようにし、可能な限り合理的なデフォルト値を提供します。

重要なコンテンツを最初に配置する

最も重要なコンテンツまたはオプションを画面の目立つところに配置し、ユーザーが容易に認識およびナビゲーションできるようにします。

コンテンツ再生に重点を置く

アプリケーションでは、ユーザーがすばやくコンテンツにアクセスできるようにすることに重点を置く必要があります。テレビのインターフェースは、娯楽を提供することが主な目的です。テレビの前に座っているユーザーは、余分な操作をしたくありせん。ユーザーは、「見聞きしたいものをすぐに再生する」という本来の目的を実現する、シンプルなユーザーインターフェイスを求めています。

デザインガイドライン

アプリで個々の画面やビューをデザインする際には、次のガイドラインを使用します。

画面サイズと解像度

タブレットやスマートフォン向けのアプリをデザインする際、対象となる画面のサイズと解像度は固定されています。これと異なり、テレビのデザインでは、同じアプリが 720pまたは 1080pのいずれかの解像度で、しかもさまざまなサイズの画面に表示されることを考慮する必要があります。

最高のユーザーエクスペリエンスを提供するために、フル 1080pのテレビ画面を対象にして、アプリとそのリソースをデザインすることをお勧めします。Amazon Fire TVプラットフォームは、テレビの画面サイズと解像度に応じて、リソースを拡大/縮小します。1080pの場合、画面サイズは1920 x 1080 px、密度は320 dpi ("xhdpi")、出力解像度は960 x 540 dp ("large") です。

また、Amazon Fire TV プラットフォームでは、標準の Android 設定がサポートされており、Android 開発者ガイドのマルチスクリーンのサポートで説明されているように、出力パラメータの違いに応じて複数のリソースディレクトリを使用できます。

アプリを実行すると、Fire TVはリソースを適切なフォルダーから読み込みます。Amazon Fire TV で利用できるリソース設定の詳細については、「ディスプレイとレイアウト」を参照してください。

オーバースキャンとセーフゾーン

画面サイズに関係なく、すべてのテレビには、画面の表示可能な領域の周囲に余白が確保されています。このスペースは、オーバースキャンと呼ばれます。テレビがオーバースキャンとして使用する領域の大きさは、メーカーによって異なります。オーバースキャンの領域は、アプリで使用できません。

Amazon Fire TVプラットフォームでは、テレビのオーバースキャンの大きさを設定で調整できますが、念のために画面の縁から5%以内にはアプリのUI要素を配置しないようにすることをお勧めします。特に、フォーカスが置かれるアイテムや画面上のテキストは、その全体が画面の内側90% (セーフゾーン) 内に配置されるようにする必要があります。

オーバースキャン

開発者オプションを使用してFire TVにオーバースキャンを表示できます。System X-Rayを参照してください。

Color

テレビの画面はコンピュータの画面よりもコントラストが高く設定されており、カラーがより明るく、鮮やかで、飽和しているように見えます。表示可能な色の範囲を示す色域も、PC画面よりも狭い範囲となります。アプリでは、飽和度の低いカラーを使用してください。寒色 (青、紫、灰) が暖色 (赤、橙) よりも見やすくなります。

Color

タイポグラフィ

テレビ画面は部屋のどこからでも読み取れる必要があるため、本文のテキストには大きなフォントサイズ (14sp 以上、つまり 720p では約 19px、1080p では約 28px) を使用します。Amazonでは、システムフォントとしてHelvetica Neue Regularが使用されます。

アイテムの説明やその他のテキストブロックは、その内容も行幅もできる限り短くします。行間は、デスクトップやタブレットの画面の場合よりも広くします。テキストは段落または小さなかたまりに分割し、短い平叙文で記述します。

Amazon Fire TVユーザーインターフェイスでのナビゲーションとユーザー入力はどちらも、Fire TVのリモコン (Amazon Fire TVリモコンまたは音声認識リモコン (リモコンの音声認識機能以外は日本未対応))、またはゲームコントローラー (Amazon Fireゲームコントローラー、またはBluetoothゲームコントローラー) から行います。マウス、キーボード、またはタッチ入力の代わりに物理コントローラーを使用するため、Fire TVアプリの入力や制御の方法は、柔軟性の点で他の端末に比べてやや劣ります。

D-Pad を使用した方向ナビゲーション

Amazon Fire TVのリモコンまたはゲームコントローラーの上下左右のD-Padボタンを使用して、アプリのユーザーインターフェイスをナビゲーションできます。ユーザーに対しては、アプリのユーザーインターフェイスを使用したナビゲーションの方法を明確に示してください。上下左右の方向を明確に示し、画面上の操作可能なすべての要素がD-Padを通してアクセスできるようにします。

フォーカスと選択

ユーザーはリモコンまたはゲームコントローラの方向ボタンを使用してユーザーインターフェイスをナビゲーションするので、フォーカスのある要素を示すために各種の UI 要素を強調表示します。アプリ内では、現在フォーカスのある画面上の要素を明確に示す必要があります。ユーザーがテレビから目を離し、再び画面を見たときに、ナビゲーションで利用できるオプションが明確に維持されている必要があります。

UI要素にフォーカスがあるときに [選択] (またはゲームコントローラーの [A] ボタン) が押された場合、その要素はすぐに選択された状態に変化する必要があります。

テキスト入力

テキストフィールドにフォーカスがナビゲートされると、システムキーボードが自動的に表示されます。情報の入力は、リモコンまたはゲームコントローラーの方向ボタンを使用して文字や数字を選択することによって行うことができます。オートコンプリート機能が用意されており、予測された入力候補をいつでも選択できます。

画面、ビュー、およびフロー

このセクションでは、Amazon Fire TV ユーザーインターフェイスの主な画面とビュー、およびそれらを構築するために使用されているコントロールについて説明します。独自のアプリのデザインを最適化し、アプリをシステムUIと統合する際には、ここに記載されているパターンを参照してください。

画面

ホーム画面 (ランチャー)

画面

ホーム画面は、グローバルナビゲーションメニュー (左側) と一連のコンテンツタイル (右側) で構成されます。

グローバルナビゲーションメニューは、中心となるシステムメニューです。画面の左側に、縦に 1 列に並んで表示されます。グローバルナビゲーションメニューでは、主なコンテンツカテゴリのほか、[検索]、[ホーム]、[映画]、[TV番組]、[ミュージック]、[ゲーム]、[アプリ] などのオプションを選択できます。グローバルナビゲーションメニューの各アイテムは、[上] と [下] の方向ボタンを使用して選択できます。

グローバルナビゲーションメニューのいずれかのアイテムにフォーカスを置くと、そのノードのホームビューが画面の右側に表示されます。各ノードには、独自のホームビューと独自のコンテンツがあります。ランチャーと呼ばれる、システム全体のホームビューにアクセスするには、Fire TVリモコンまたはゲームコントローラーの [ホーム] キーを使用するか、グローバルナビゲーションメニューから [ホーム] を選択します。

コンテンツ行

各ホームビューは、複数のコンテンツ行で構成されます。行のタイトルタイルはコンテンツの種類 (たとえば、「注目タイトル」、「マイビデオ」、「おすすめ」など) を示します。残りのタイルは、そのコンテンツのサンプルを示します。これらのコンテンツ行では、次のことを行うことができます。

  • [Up] と [Down] の方向ボタンを使用して、行間をナビゲーションできます。
  • [Left] ボタンを使用して、ナビゲーションメニューに戻ることができます。
  • [Select] または [Right] を使用して行を選択し、その行の 1D リストを表示することができます。

1D リストビュー

1D リスト

1D リストビューは、ホームビューからコンテンツ行が選択されると表示されます。1Dリストは、1 行のアイテムで構成されます。タイトルバーには、リストのタイトル (たとえば、「注目タイトル」、「マイビデオ」、「おすすめ」など) に加えて、リストにあるアイテムの数とフォーカスされているアイテムの位置を示す数の 2 つの数が表示されます。

参照リストでフォーカスされているアイテムについては、そのアイテムの簡単な説明がリストの下に表示されます。簡単な説明には、アイテムの基本情報 (タイトル、日付、評価) と [ウォッチリストに追加] などのオプションが含まれます。

1D リストでは、次のことを行うことができます。

  • [Left] と [Right] の方向ボタンを使用してアイテム間をナビゲーションする。リストの最後を越えてナビゲーションすると、フォーカスは最初のアイテムに戻ります。
  • [Select] ボタンを使用してアイテムを選択する。これにより、そのアイテムの詳細ビューが表示されます。

詳細ビュー

詳細ビュー

詳細ビューは、参照リストからアイテムが選択されると表示されます。このイメージは、ある映画の詳細ビューを示しています。表示される詳細情報は、テレビ番組、音楽、または他のコンテンツにより異なる可能性があります。詳細ビューには、コンテンツまたは他のアイテムに関連する情報と操作が表示されます。

説明の下には、このアイテムで実行可能な操作が表示されます。実行可能な操作は、ユーザーの登録ステータス (たとえば、Amazonプライムメンバーであるなど) とコンテンツの利用状況によって異なります。

画面の左側のディスカバリーメニューには、アイテムに関連するその他の情報 (たとえば、[Cast]、[Trivia]、または [Reviews] など) が表示されます。

ホーム画面の [Search] メニューアイテムを選択すると、音声検索またはテキスト検索を利用できる検索画面が表示されます。検索画面は、Alexa Voice Remote (リモコンの音声認識機能以外は日本未対応) の [Microphone] ボタンからも利用でき、現在のアプリまたはコンテンツ上にオーバーレイとして表示されます。

テキスト検索の場合は、[左] と [右] の方向キーを使用してアルファベット間を移動し、文字ごとに [選択] を押して検索クエリを入力します。入力候補がクエリの下にリストとして表示されます。

検索

グローバル検索がシステム全体で利用できますが、個々のアプリ向けにカスタマイズすることはできません。開発者は独自のアプリ内検索を実装できますが、この検索は、グローバル検索機能には含まれません。

その他のリソース

10フィートエクスペリエンスに対応した設計を行う際のユーザーエクスペリエンスに関するベストプラクティスの詳細については、Android TVを参照してください。