tvos-design-guidelines

tvOS デザインガイドライン

Apple TV は、フォーカスベースのナビゲーションと Siri Remote だけで操作するリビングルーム向けデバイスです。ポインターもタッチスクリーンもマウスもありません。デザイン上のすべての判断で、画面から約3メートル離れて視聴すること、リモコンの操作がシンプルであること、テレビ視聴がくつろいで楽しむものだという点を考慮する必要があります。

---

1. フォーカスベースのナビゲーション（重要）

フォーカスシステムは、tvOS におけるすべての操作の基盤です。カーソルはありません。ユーザーは Siri Remote のタッチサーフェスを使って、要素間でフォーカスを移動します。

ルール

FOCUS-01：すべての操作可能な要素に、はっきりと見えるフォーカス状態を設定してください。 フォーカス中の項目は、フォーカスされていない項目と明確に区別できなければなりません。拡大（通常は1.05倍～1.1倍）、影による浮き上がり、明るさの変化、枠線の強調表示などを使用してください。色だけに頼ってはいけません。

FOCUS-02：フォーカスの移動は予測可能で、論理的な空間配置に沿う必要があります。 ユーザーが右にスワイプしたら、フォーカスは視覚的に右側にある要素へ移動する必要があります。フォーカスが画面上で予期せず飛ぶレイアウトは避けてください。グリッドレイアウトとリニアレイアウトが最も安全です。

FOCUS-03：レイアウトの隙間をつなぐために、フォーカスガイド（UIFocusGuide）を使用してください。 フォーカス可能な要素の間に視覚的な隙間がある場合は、ユーザーが行き詰まらないように、見えないフォーカスガイドを追加してください。スワイプするたびに、フォーカスが意味のある場所へ移動する必要があります。

FOCUS-04：フォーカス中の項目に視差効果を適用してください。 フォーカス中のカード、ポスター、アイコンには、タッチサーフェスの動きに応じた控えめな視差による傾きを付けてください。前景、中景、背景のレイヤーを含むレイヤー画像（LSR 形式）を使用します。これにより奥行きが伝わり、フォーカス中であることを示せます。

適切：

// SwiftUI — custom focus engine with explicit focus state
struct ContentView: View {
    @FocusState private var focusedItem: String?

    var body: some View {
        HStack(spacing: 40) {
            ForEach(items) { item in
                CardView(item: item)
                    .focusable()
                    .focused($focusedItem, equals: item.id)
                    .scaleEffect(focusedItem == item.id ? 1.1 : 1.0)
                    .shadow(radius: focusedItem == item.id ? 20 : 0)
                    .animation(.easeInOut(duration: 0.15), value: focusedItem)
            }
        }
    }
}

不適切：

// SwiftUI — no focus state: unfocused and focused items look identical
struct ContentView: View {
    var body: some View {
        HStack(spacing: 40) {
            ForEach(items) { item in
                CardView(item: item)
                    .focusable()
                // No scale, shadow, or visual change on focus
                // User cannot tell which item is selected
            }
        }
    }
}

FOCUS-05：快適に操作できる十分な大きさのフォーカスターゲットを用意してください。 カードのタッチターゲットは、最小でも250x150ptを推奨します。これより小さい要素は、スワイプベースのナビゲーションでは選択しにくくなります。可能であれば、小さなアクションをフォーカス可能な親要素の下にまとめてください。

FOCUS-06：すべての画面で、デフォルトのフォーカス要素を設定してください。 ビューが表示されたとき、すでに1つの要素にフォーカスがある必要があります。ユーザーが選ぶ可能性が最も高い項目を選択してください。通常は、主要なコンテンツ項目かコレクションの最初の項目です。

FOCUS-07：画面に戻ったときは、フォーカスの記憶を維持してください。 ユーザーが画面から移動して戻ってきた場合、フォーカスはデフォルトに戻すのではなく、その画面で最後にフォーカスされていた項目に復元してください。

FOCUS-08：フォーカスを閉じ込めてはいけません。 ユーザーは常に、どの要素からもフォーカスを移動できる必要があります。ある領域からフォーカスを移動できないと、アプリが壊れているように感じられます。

FOCUS-09：再認識にかかる負担を減らしてください。 行の順序を安定させ、戻ったときに以前のフォーカスを復元し、近くにあるフォーカス先を優先してください。これにより、ユーザーがナビゲーションのたびに画面全体を見直す必要がなくなります。

視差レイヤーのリファレンス

レイヤー	用途	移動量
背景	静的な背景、ぼかした画像	最小（1～2pt）
中景	主なアートワークまたはコンテンツ画像	中程度（3～5pt）
前景	タイトルテキスト、ロゴ、バッジ	最大（5～8pt）

アセットカタログ内の静的なレイヤー画像には、Xcode の LSR（Layered Static Image）形式を使用してください。システムがフォーカス時に自動でアニメーションさせます。プログラムで独自の視差を実装する場合は、UIImageView インスタンスを重ね、フォーカスエンジンのコールバック（didUpdateFocus(in:with:) と UIFocusAnimationCoordinator）を使って、フォーカス遷移中のレイヤーの動きを制御してください。（UIMotionEffect が反応するのは、Siri Remote のジャイロスコープによる微細な動きだけであり、フォーカス駆動の視差を実現する仕組みではありません。）

---

2. Siri Remote（重要）

Siri Remote は主要な（そして多くの場合、唯一の）入力デバイスです。タッチサーフェス、メニューボタン、再生／一時停止ボタン、Siri／マイクボタン、音量ボタン、電源ボタンを備えています。

ルール

REMOTE-01：タッチサーフェスのスワイプでフォーカスを移動します。 スワイプすると、対応する方向にフォーカスが移動します。タッチサーフェスをクリックすると、フォーカス中の項目が選択されます。この2つが基本的な操作です。すべての設計は、この操作を中心に行ってください。

REMOTE-02：メニューボタンで常に戻れるようにします。 メニューを押すと、現在の画面を閉じる、オーバーレイを閉じる、または階層を上に移動するようにします。最上位では、Apple TVのホーム画面に戻ります。この動作への期待を決して裏切らないでください。

REMOTE-03：再生／一時停止ボタンでメディア再生を操作できるようにします。 メディアの再生中は、表示中の画面にかかわらず、再生／一時停止で再生を切り替えられるようにします。このボタンをメディア以外の操作に転用しないでください。

REMOTE-04：複雑なジェスチャーや複数指のジェスチャーを要求しないでください。 Siri Remoteのタッチサーフェスは小さいため、ピンチ、回転、複数回タップ、長押しのジェスチャーを要求しないでください。1本指でのスワイプとクリックに限定してください。

REMOTE-05：スワイプの方向は直感的で、一貫している必要があります。 横方向のスワイプでは横にスクロールし、縦方向のスワイプでは縦にスクロールします。軸を逆にしないでください。斜め方向のコンテンツ移動は、スワイプの主な軸に沿って行ってください。

REMOTE-06：検索とテキスト入力でSiriの音声入力に対応してください。 tvOSのオンスクリーンキーボードによるテキスト入力は手間がかかります。キーボード入力の代替として、常に音声入力とSiri検索に対応してください。

REMOTE-07：クリック時のフィードバックを提供してください。 ユーザーがタッチサーフェスをクリックして項目を選択したときは、クリックに応答性を感じられるよう、すぐに視覚的なフィードバック（アニメーション、ハイライトの変化、または触覚フィードバックを模した視覚的なパルス）を提供してください。

REMOTE-08：オンスクリーンキーボードを、実用上唯一のテキスト入力手段にしないでください。 検索、サインイン、初期設定では、リモコンで長いテキストを入力させるのではなく、音声入力、最近の検索、オートフィル、短いコードを使った手順を優先してください。リモコンでのテキスト入力は、操作面・認知面の負担が大きくなります。

---

3. 10フィートUI（高）

Apple TVのコンテンツは、通常、画面から8～12フィート（2.5～3.5メートル）離れた部屋の向こう側から視聴されます。すべてのビジュアルデザインで、この視聴距離を考慮する必要があります。

ルール

DISTANCE-01：本文テキストの最小サイズは29ptです。 29pt未満のテキストは、リビングルームでの視聴距離では読みにくくなります。タイトルは48pt以上にしてください。San Francisco Display、または同等に視認性の高い書体を使用してください。

DISTANCE-02：テキストと背景のコントラストを高く保ってください。 デフォルトでは、暗い背景に明るいテキストを使用してください。tvOSはダークテーマを使用します。コントラスト比はWCAG AA以上（本文テキストは4.5:1、大きなテキストは3:1）にしてください。

DISTANCE-03：画面ごとのテキスト量を制限してください。 テレビは視覚的なメディアです。段落ではなく、見出し、短い説明、メタデータを表示してください。長いテキストが必要な場合は、ユーザーが明示的に開くスクロール可能なテキストオーバーレイを使用してください。

DISTANCE-04：高解像度で、力強く明瞭な画像を使用してください。 全画面の背景画像は1920x1080または3840x2160（4K）にしてください。コンテンツのアートワークは鮮明で、視覚的に魅力的なものにしてください。視聴距離が離れると明瞭さが失われる、細部の多い小さなイラストは避けてください。

DISTANCE-05：シンプルでゆとりのあるレイアウトにしてください。 余裕のあるマージンとパディングを設けてください。小さな要素を多く並べて画面を詰め込まないでください。20枚以上のサムネイルを並べた密なグリッドより、カードを5～7枚並べた1行のほうが適しています。

DISTANCE-06：テレビのセーフエリアを使用してください。 重要なコンテンツはすべてセーフエリア（端から60pt内側）の範囲に収めてください。オーバースキャンにより、一部のテレビでは画面端付近のコンテンツが切り取られる場合があります。

DISTANCE-07：細いフォントや極細の境界線は避けてください。 細い線はテレビ画面では見えなくなります。特に、モーションブラーや圧縮アーティファクトがある場合は顕著です。最低でもミディアムまたはセミボールドのウェイトを使用してください。

テキストサイズの目安

要素	最小サイズ	推奨サイズ
本文テキスト	29pt	31-35pt
補助ラベル	25pt	29pt
タイトル	48pt	52-76pt
大見出し	64pt	76-96pt
ボタン	29pt	35-38pt

---

4. トップシェルフ（HIGH）

トップシェルフは、Apple TV のホーム画面でユーザーがアプリのアイコンにフォーカスしたときに表示される、目立つコンテンツ領域です。コンテンツを紹介する絶好の場所です。

ルール

SHELF-01: トップシェルフ拡張機能を用意します。 アプリには、動的なコンテンツを返す TVTopShelfContentProvider（tvOS 14 以降）を含める必要があります。TVTopShelfProvider は tvOS 14 以降非推奨です。使用しないでください。トップシェルフを静的なままにすると、エンゲージメントを高める機会を逃すことになります。

SHELF-02: コンテンツに適したレイアウトスタイルを使用します。

• インセットバナー：中央に大きくフォーカスされたアイテムを 1 つ、その左右に小さなアイテムを配置します。注目コンテンツや編集者おすすめのコンテンツに最適です。
• セクション別コンテンツ：カテゴリ別にグループ化されたアイテムのスクロール可能な行を複数表示します。メディアライブラリに最適です。

SHELF-03: トップシェルフの各アイテムから、アプリ内の該当コンテンツに直接移動できるようにします。 各アイテムを選択すると、対応するコンテンツが開く必要があります。すべてのアイテムを同じ汎用ランディングページにリンクしてはいけません。

SHELF-04: 高品質で魅力的な画像を使用します。 トップシェルフの画像はホーム画面に大きく表示されます。ぼやけた画像、解像度の低い画像、テキストの多い画像はプロらしく見えません。推奨画像サイズ：

• インセットバナー：1940x624pt（@1x）または 3880x1248pt（@2x）
• セクション別アイテム：404x608pt（@1x）

SHELF-05: トップシェルフのコンテンツを常に新鮮に保ちます。 トップシェルフのコンテンツは定期的に更新してください。理想的には、最近追加されたコンテンツ、トレンドのコンテンツ、またはパーソナライズされたコンテンツを反映させます。古いコンテンツが残ったままのトップシェルフは、アプリが放置されている印象を与えます。

---

5. メディアと再生（MEDIUM）

Apple TV は主にメディアを視聴するためのデバイスです。再生インターフェイスは、確立されたテレビの慣習に従う必要があります。

ルール

MEDIA-01: 標準の再生コントロールを使用します。 再生、一時停止、10 秒送り、10 秒戻し、およびスクラバー付きのタイムラインを用意します。一貫した動作のこれらの機能をそのまま利用するには、AVPlayerViewController を使用します。

MEDIA-02: 再生中に下へスワイプすると情報オーバーレイを表示します。 再生中に下へスワイプすると、タイトル、説明、メタデータを表示する情報パネルが現れるようにします。もう一度下へスワイプするか、Menu を押すと閉じます。

MEDIA-03: タッチサーフェスでのスクラブに対応します。 再生中にタッチサーフェスを左右にスワイプすると、タイムライン上をスクラブできるようにします。可能な場合は、スクラブ中にサムネイルプレビューを表示します。

MEDIA-04: 字幕と別のオーディオトラックに対応します。 情報オーバーレイまたは標準のプレーヤーコントロールから、字幕の選択とオーディオトラックの切り替えを利用できるようにします。

MEDIA-05: 適切な場合はピクチャ・イン・ピクチャに対応します。 動画コンテンツでは、視聴しながらほかのコンテンツを閲覧できるように PiP を利用できるようにします。AVPictureInPictureController との連携を実装します。

MEDIA-06: 再生位置を記憶します。 ユーザーが以前視聴したコンテンツに戻ったときは、前回の続きから再生します。コンテンツのサムネイルに進行状況インジケーターを表示します。

MEDIA-07: 中断に適切に対処します。 再生中にユーザーが TV ボタンを押したり、アプリを切り替えたりした場合は、再生位置を保存して適切に一時停止します。ユーザーが戻ったときは、再バッファリングせずに再開します。

---

6. タブバー（MEDIUM）

tvOS のタブバーは画面下部にある iOS とは異なり、画面上部にあります。アプリの各セクション間を移動するための主要なナビゲーションを提供します。

ルール

TAB-01：タブバーは画面の上部に配置します。 これは tvOS の標準的な慣例です。下部のタブバーは iOS のパターンであり、テレビでは違和感があります。

TAB-02：タブバーは半透明にし、コンテンツに重ねます。 タブバーはぼかし効果とともにコンテンツ上に浮かびます。ユーザーがタブバーにフォーカスすると、スペースを確保するためにコンテンツが下に移動します。

TAB-03：タブは3～7個にします。 タブが3個未満の場合、タブナビゲーションを使うにはアプリが単純すぎることを示唆します。7個を超えると、横方向のスワイプでの移動が難しくなります。

TAB-04：すべてのタブにテキストラベルを付けます。 アイコンのみのタブでは、テレビの視聴距離では不十分です。明確にするため、テキストラベルが必要です。アイコンをテキストに添えることもできますが、必須ではありません。

TAB-05：タブバーへのフォーカスは軽快に感じられるようにします。 フォーカスがタブバーに移動したとき、スムーズに表示されるようにします。半透明のバーの下にコンテンツのプレビューが見えるようにします。タブを切り替えたら、すぐに下のコンテンツを更新するか、読み込み状態を表示します。

TAB-06：選択中のタブをアプリの起動間で保持します。 アプリを終了したときにユーザーが「検索」タブを表示していた場合、再度開いたときも「検索」タブに戻します。

---

7. アクセシビリティ（重要）

Apple TV は VoiceOver に対応しています。目の見えるユーザーはフォーカスナビゲーションを使い、VoiceOver を使うユーザーはそれに加えて読み上げによる説明を聞きます。どちらも機能する必要があります。

ルール

ACCESS-01：すべてのインタラクティブ要素に、意味のあるアクセシビリティラベルを設定します。 アイコンのみのボタンや画像カードにもラベルが必要です。フォーカスが移動すると、VoiceOver はフォーカスされた項目の名前を読み上げます。

ACCESS-02：自明でない操作にはアクセシビリティヒントを設定します。 カードをタップしたときにコンテンツを開く以外の動作をする場合（例：全編再生ではなく予告編を再生する場合）は、アクセシビリティヒントで説明します。

ACCESS-03：VoiceOver のフォーカス順序を、視覚的なフォーカス順序に合わせます。 VoiceOver では、フォーカスエンジンのナビゲーションと同じ順序で要素を移動できる必要があります。UIFocusGuide によるカスタムのフォーカス順序によって、VoiceOver の読み上げ順序が途切れないようにします。

ACCESS-04：視差効果を減らす設定に従います。 アクセシビリティ設定でユーザーが視差効果を減らす設定を有効にした場合、視差効果やその他のアニメーションを減らすか、無効にする必要があります。

ACCESS-05：太字テキストに対応します。 ユーザーが太字テキストを有効にした場合、カスタム描画のテキストもそれに合わせて調整する必要があります。SwiftUI のダイナミックタイプスタイルは自動的に対応します。カスタムのテキスト描画では、UIAccessibility.isBoldTextEnabled を確認するか、@Environment(\.legibilityWeight) を使用する必要があります。

ACCESS-06：コントラストを上げる設定に対応します。 ユーザーがコントラストを上げる設定（システムカラーを濃くする）を有効にした場合、カスタムカラーにはコントラストを高めたバリエーションを用意する必要があります。SwiftUI では @Environment(\.colorSchemeContrast) を、UIKit では UIAccessibility.isDarkerSystemColorsEnabled を使用して設定を検出し、適切な値を適用します。

ACCESS-07：ダイナミックタイプ／大きな文字に対応します。 tvOS は UIContentSizeCategory を通じて「大きな文字」のアクセシビリティ設定に対応しています。テキストが自動的に拡大縮小されるよう、SwiftUI のセマンティックなテキストスタイル（Font.TextStyle）を使用します。UIKit では、基準となる UIFont.TextStyle に対して UIFontMetrics を使い、カスタムフォントを拡大縮小します。

正しい例：

// SwiftUI — semantic text styles scale with Larger Text automatically
Text("Now Playing")
    .font(.title2)        // Scales with UIContentSizeCategory
Text("Episode description")
    .font(.body)          // Scales with UIContentSizeCategory

// UIKit — scale custom font with UIFontMetrics
let baseFont = UIFont(name: "CustomFont-Regular", size: 29)!
let scaledFont = UIFontMetrics(forTextStyle: .body).scaledFont(for: baseFont)
label.font = scaledFont
label.adjustsFontForContentSizeCategory = true

誤った例：

// SwiftUI — hardcoded size ignores Larger Text preference
Text("Now Playing")
    .font(.system(size: 29)) // Does not scale

// UIKit — hardcoded font ignores UIContentSizeCategory
label.font = UIFont(name: "CustomFont-Regular", size: 29)
// Missing adjustsFontForContentSizeCategory = true

---

評価チェックリスト

tvOS アプリのデザインまたは実装をレビューするときに、このチェックリストを使用します。

フォーカスシステム

• すべてのインタラクティブ要素に、視認できる明確なフォーカス状態がある
• すべての方向へのフォーカス移動が予測可能である
• アプリ内のどこにもフォーカストラップがない
• フォーカスガイドがレイアウトの隙間をつないでいる
• コンテンツカードとアイコンに視差効果が適用されている
• すべての画面でデフォルトのフォーカスが設定されている
• 戻る操作時にフォーカス位置が保持される

Siri Remote

• すべての画面でメニューボタンを使って戻れる
• 再生／一時停止ボタンで、メディア再生を全体的に操作できる
• 複雑なジェスチャーが不要である
• クリック時のフィードバックが即座に表示され、見てわかる
• テキスト入力で Siri／音声入力に対応している

10フィート UI

• 本文のテキストは29pt以上です
• すべてのテキストで高いコントラスト比を確保しています
• テキストの内容は簡潔で、段落が多くありません
• 画像は高解像度で、視認性に優れています
• レイアウトには十分な余白があり、テレビ画面向けの安全マージンを確保しています
• 細いフォントや極細の線は使用していません

トップシェルフ

• トップシェルフ拡張機能が動的なコンテンツを提供します
• すべてのトップシェルフ項目から正しくディープリンクできます
• 画像は高品質で、サイズも適切です
• コンテンツを定期的に更新します

メディアと再生

• 標準的な再生コントロールを利用できます
• タッチサーフェスでシークできます
• 字幕と音声トラックにアクセスできます
• 再生位置を記憶します
• 中断を適切に処理します

タブバー

• タブバーは画面上部にあります
• タブにはテキストラベルがあります
• タブは3〜7個使用します
• 選択したタブはアプリの起動後も保持されます

アクセシビリティ

• すべての操作可能な要素とコンテンツカードに、意味のあるアクセシビリティラベルがあります
• 分かりにくい操作にはアクセシビリティヒントがあります
• VoiceOverのフォーカス順は、視覚的なフォーカスエンジンの順序と一致しています
• 視差効果と装飾的なアニメーションは、「視差効果を減らす」が有効な場合に無効になります
• 「文字を太くする」の設定を尊重します（SwiftUIでは自動的に処理されます。カスタムテキストではisBoldTextEnabledを確認します）
• 「コントラストを上げる」の設定を尊重します（カスタムカラーには高コントラストのバリエーションを用意します）
• 「文字を大きくする」（Dynamic Type）の設定を尊重します（SwiftUIではFont.TextStyle、UIKitではUIFontMetricsを使用します）

---

テレビ向けのアンチパターン

tvOSにモバイル向けのパターンをそのまま持ち込まないでください。以下はよくある間違いです。

アンチパターン	うまくいかない理由	適切な方法
画面下部のタブバー	iOSの慣習であり、テレビでは違和感があります	上部のタブバーを使用します
小さなタップ領域	スワイプ操作によるナビゲーションでは正確に選択できません	最小250x150ptのカードを使用します
テキストが密集した画面	3メートル離れた位置からでは読めません	見出しと短い説明だけを表示します
ハンバーガーメニュー	テレビではタップして表示する操作がありません	タブバーまたはフォーカス操作で表示するメニューを使用します
プルして更新	Siri Remoteには引っ張るジェスチャがありません	自動更新または明示的な更新ボタンを使用します
トースト通知	大画面のテレビでは見逃しやすくなります	モーダルアラートまたは常時表示されるバナーを使用します
スクロールインジケーター	細いスクロールバーは離れた位置から見えません	コンテンツの一部を見せ、次の項目が途中まで表示されるようにします
ピンチで拡大・縮小	Siri Remoteでは複数の指を使うジェスチャはできません	明示的なズームコントロールを用意します
長いフォーム	tvOSではキーボード入力が煩雑です	あらかじめ入力する、プロフィールを使用する、またはiPhoneに任せます
細い／ライトウェイトの文字	テレビ画面では見えにくくなります	最低でもミディアムウェイトを使用します