XCode 14.1 日本語化計画：New Human Interface Guideline

一番上の棚

Apple TV のホームスクリーンには、トップシェルフ (一番上の棚) と呼ばれる領域があり、豊富で魅力的な方法でコンテンツを紹介しながら、人々がドックでお気に入りのアプリにアクセスすることもできます。

フルスクリーンのトップシェルフをサポートすると、人々は複数のフルスクリーンコンテンツビューをスワイプしたり、予告編やプレビューを再生したり、コンテンツに関する詳細情報を取得したりできます。

トップシェルフは、新しい、注目のコンテンツ、またはおすすめのコンテンツを強調し、人々があなたのアプリやゲームに直接ジャンプして閲覧できるようにするまたとない機会です。たとえば、人々が ドック で Apple TV を選択すると、フルスクリーンプレビューがすぐに再生を開始し、すぐに ドック がスライドしてなくなります。人々は最初の番組のプレビューを見ながら、他のすべての注目番組のプレビューをスワイプして、関心のあるプレビューの [再生] または [詳細情報] を選択するのをやめることができます。

システムは、人々がドックであなたのアプリを選択したときに魅力的なトップシェルフ体験を提供するために使用できるいくつかのレイアウトテンプレートを定義しています。コンテンツの配置に役立つように、これらのテンプレートを Apple Design Resources からダウンロードできます。

ベストプラクティス

人々があなたのコンテンツにすぐに飛び込めるように補助します。 トップシェルフは、人々が最も気にかけているコンテンツへのパスを提供します。システムが提供する 2 つのレイアウトテンプレート (カルーセルアクション と カルーセルの詳細) には、それぞれデフォルトで 2 つのボタンが含まれています。再生を開始するための主要なボタンと、あなたのアプリを開いてコンテンツの詳細を表示するビューを表示するための [詳細情報] ボタンです。

新しいコンテンツを目立たてます。 たとえば、新しいリリースやエピソードを紹介し、今後の映画や番組を強調し、人々が既に購入し、レンタルし、または視聴したコンテンツを宣伝しないようにします。

人々のお気に入りのコンテンツをパーソナライズします。 人々は通常、最も頻繁に使用するアプリをトップシェルフに入れます。あなたの提供するトップシェルフコンテンツにターゲットを絞った推奨を表示することで、体験をパーソナライズできます。これにより、人々はメディアの再生を再開したり、アクティブなゲームプレイに戻ったりすることができます。

広告や価格の表示は避けてください。 人々はあなたのアプリを棚の一番上に置き販売したので、あなたのアプリから多くの広告を目にすることを好まないかもしれません。購入可能なコンテンツを棚の一番上に表示することは問題ありませんが、新しいエキサイティングなコンテンツに重点を置き、人々が興味を示した場合にのみ価格を表示することを検討してください。

魅力的な動的コンテンツを紹介します。 棚の一番上に表示するビデオやイメージは、人々を惹きつけ、もっと見るように促します。必要に応じて静止イメージを提供することもできますが、人々は通常、最新または最高評価のコンテンツを特徴とする魅力的で動的なトップシェルフ体験を好みます。この体験を提供するには、レイヤー化されたイメージ を作成してトップシェルフに表示することが望ましいです。

推奨されるフルスクリーンコンテンツを提供しない場合は、代替として少なくとも 1 つの静止イメージを提供してください。 あなたのアプリがドックにあり、焦点が当てられ、フルスクリーンコンテンツが利用できない場合、システムは静止イメージを表示します。tvOS は、16:9 の縦横比で 1920 ピクセルの幅に収まるように、イメージを反転してぼかします。以下の値を参考にしてください。

静止イメージで対話性をほのめかすことは避けてください。 静的なトップシェルフイメージはフォーカス可能ではないため、人々に対話型だと思われたくありません。

動的レイアウト

動的トップシェルフのイメージは、いくつかの方法で表示できます。

カルーセルアクション

カルーセルアクションレイアウトスタイルは、フルスクリーン表示のビデオとイメージに重点を置いており、人々がより多くを表示できるようにする目立たないコントロールがいくつか含まれています。このレイアウトスタイルは、人々がすでに何かを知っているコンテンツを紹介する場合に特に効果的です。たとえば、写真などのユーザー生成コンテンツや、人々が楽しみそうなフランチャイズや番組の新しいコンテンツを表示するのに最適です。

タイトルを提供します。 番組や映画のタイトル、写真アルバムのタイトルなど、簡潔なタイトルを含めます。必要に応じて、短いサブタイトルを付けることもできます。たとえば、写真アルバムのサブタイトルを日付の範囲にすることができます。エピソードのサブタイトルは、番組の名前にできます。

カルーセルの詳細

このレイアウトスタイルは、カルーセルアクションレイアウトスタイルを拡張し、コンテンツに関する情報をいくつか含める機会を提供します。たとえば、人々がコンテンツを選択するかどうかを決定するのに役立つあらすじ、キャストのリスト、その他のメタデータなどの情報を提供できます。

現在再生中のコンテンツを識別するタイトルを提供します。 コンテンツのタイトルはスクリーンの上部近くに表示されるため、人々が一目で簡単に読むことができます。タイトルの上には、「マイアプリ でおすすめ」などの簡潔なフレーズやアプリの属性を示すこともできます。

セクション化されたコンテンツ行

このレイアウトスタイルは、セクション化されたコンテンツのラベル付きの 1 行を表示します。これは、最近表示したコンテンツ、新しいコンテンツ、またはお気に入りを強調するのに適しています。行のコンテンツはフォーカス可能であり、人々はすばやくスクロールできます。個々のコンテンツにフォーカスが当たるとラベルが表示され、リモコンのタッチ表面上を少し動かすと、フォーカスされたイメージが生き生きとします。セクション化されたコンテンツ行を構成して、複数のラベルを表示することもできます。

完全な行を構成するのに十分なコンテンツを提供します。 少なくとも、セクション化されたコンテンツ行に十分なイメージをロードして、スクリーンの全幅に広げます。さらに、プラットフォームの一貫性を高め、追加のコンテキストを提供するために、少なくとも 1 つのラベルを含めます。

セクション化されたコンテンツ行では、以下のイメージサイズを使用できます。

ポスター

正方形(1:1)

16:9

イメージサイズを組み合わせるときは、追加のスケーリングに注意してください。 トップシェルフのデザインにイメージサイズが混在している場合、必要に応じてイメージが自動的に拡大され、最も高いイメージの高さに一致することに注意してください。たとえば、16:9 のイメージは、ポスターまたは正方形のイメージの行に含まれている場合、高さ 500 ピクセルにスケーリングされます。

スクロールするはめ込みバナー

このレイアウトには、一連の大きなイメージが表示され、それぞれがスクリーンの幅のほぼ全体に広がっています。Apple TV は、事前に設定されたタイマーでこれらのバナーを自動的にスクロールし、人々が 1 つのバナーにフォーカスを合わせるまで待ちます。最終イメージに到達した後、シーケンスは最初に戻ります。

バナーにフォーカスが合っている場合、リモコンのタッチ表面で小さな円形のジェスチャを行うと、システムフォーカス効果が適用され、項目がアニメーション化され、照明効果が適用されます。また、バナーにレイヤー化されたイメージが含まれている場合は、3D 効果が生成されます。タッチ表面をスワイプすると、シーケンス内の次または前のバナーにパンします。このスタイルを使用して、人気の新しい映画など、リッチで魅力的なコンテンツを紹介します。

3 ～ 8 個のイメージを提供します。 スクロールするバナーを効果的に見せるには、最低 3 つのイメージを使用することをお勧めします。イメージが 8 つを超えると、特定のイメージに移動するのが難しくなります。

テキストが必要な場合は、イメージに追加します。 このレイアウトスタイルでは、コンテンツの下にラベルが表示されないため、すべてのテキストはイメージ自体の一部でなければなりません。レイヤー化されたイメージでは、テキストを他のレイヤーの上にある専用レイヤーに配置して、テキストを持ち上げることを検討してください。イメージのアクセシビリティラベルにもテキストを追加して、ボイスオーバー が読み取れるようにします。

スクロールするはめ込みバナーイメージには、以下のサイズを使用します。

リソース

関連

アップルデザインリソース

ビデオ