Human Interface Guidelines


ビデオの再生


人々は、使用しているアプリやゲームに関係なく、デバイスでリッチなビデオ体験を楽しむことを期待しています。



システムは、iOS、iPadOS、macOS、および tvOS のあなたのアプリやゲームに再生体験を埋め込むために使用するようにデザインされたビデオプレーヤーを提供します。これらのプラットフォームの TV アプリを介してコンテンツを提供することもできます。これにより、人々に便利で一貫した視聴体験を与えることができます。


システムが提供するビデオプレーヤーは、さまざまなアスペクト比の再生モードとピクチャーインピクチャー (PiP) 表示モードをサポートしています。人々は再生中にモードを切り替えることはできますが、デフォルトでは、システムはビデオのアスペクト比に基づいて以下の再生モードのいずれかを選択します。


  • フルスクリーン (または アスペクトフィル) モードでは、ビデオはディスプレイ全体に拡大縮小され、エッジのトリミングが発生する場合があります。このモードは、ワイドビデオ (2:1 から 2.40:1) のデフォルトです。開発者向けガイダンスについては、resizeAspectFill を参照してください。

  • スクリーンに合わせる (または アスペクト) モードでは、ビデオ全体がスクリーン上に表示され、必要に応じてレターボックスまたはピラーボックスが表示されます。このモードは、標準ビデオ (4:3、16:9、および 2:1 までのもの) およびウルトラワイドビデオ (2.40:1 を超えるもの) のデフォルトです。開発者向けガイダンスについては、resizeAspect を参照してください。

  • tvOS では、内蔵のビデオプレーヤーに トランスポートバーコントロール も用意されており、字幕をオンにしたり、オーディオの言語の変更などの再生タスクや、ライブラリへの番組の追加やクリップの優先などのアクションを実行できます。トランスポートバーの下に、ビデオプレーヤーは、情報、エピソード、章などの コンテンツタブ を表示します。これらのタブは、サポート情報を提供し、ナビゲーションを合理化するのに役立ちます。



    ベストプラクティス


    システムビデオプレーヤーを使用して、人々に親しみやすく便利な体験を提供します。 内蔵のビデオプレーヤーは、人々が没入型コンテンツを楽しむことに集中できるようにする一貫した対話と動作を与える、卓越したビデオ再生体験を提供します。あなたのアプリにカスタムビデオプレーヤーが本当に必要な場合は、システムビデオプレーヤーの動作とインターフェイスを参照して、人々がすぐに理解できる体験を提供できるようにします。システムが提供する体験とは少し異なるカスタム体験は、人々が習慣的な対話のすべてではなく一部に依存するため、欲求不満を引き起こす可能性があります。


    ビデオコンテンツは常に元のアスペクト比で表示してください。 ビデオコンテンツが埋め込まれたレターボックスかピラーボックスパディングを使用して特定のアスペクト比に準拠している場合、システムは現在の再生モードに基づいてビデオを正しくスケーリングできない場合があります。ビデオフレーム内に埋め込まれたパディングにより、フルスクリーンモードとスクリーンに合わせるモードの両方でビデオが小さく表示される可能性があります。また、iPad の ピクチャーインピクチャー モードのように、フルスクリーンでない端から端までのコンテキストでビデオが正しく表示されないようにします。


    パディングが iPhone X のビデオ表示にどのように影響するかを示すいくつかの例を以下に示します。


    4:3 ビデオにパディングした結果21:9 ビデオにパディングした結果






    フルスクリーン表示モードの 4:3 ビデオ





    フルスクリーン表示モードで、パディングが埋め込まれた 4:3 ビデオ










    スクリーンに合わせて表示する 21:9 ビデオ



    スクリーンに合わせる表示モードで、パディングが埋め込まれた 21:9 ビデオ






    付加価値を付けるときには追加情報を提供します。 iOS、iPadOS、tvOS では、イメージ、タイトル、説明、その他の役立つ情報を提供することで、ビデオの追加情報をカスタマイズできます。一般に、このコンテンツは、メディアの再生を妨げないように制限してください。開発者向けガイダンスについては、externalMetadata を参照してください。


    再生のコントロールに使用しているデバイスに関係なく、人々が期待する相互作用を有効にします。 たとえば、Mac、iPhone、iPad、Apple TV でメディアの再生を開始または一時停止するには、接続されたキーボードの Space を押すことを人々は期待しています。同様に、人々は Siri Remote でなじみのある、直感的なジェスチャーをすることで、Apple TV でメディアを移動することを期待しています。ガイダンスについては、キーボードとリモコンを参照してください。


    人々があなたの tvOS アプリの再生オプションやコンテンツ固有の情報にアクセスする必要がある場合は、トランスポートコントロールまたはカスタムコンテンツタブの追加を検討してください。 人々は通常、ビデオを見ているときにトランスポートコントロールまたはコンテンツタブを開くため、最も有用なアクションと情報のみを提供することが不可欠です。あなたのアクションが 1、2 ステップ以上かからず、コンテンツが簡潔であることを確認することで、人々が視聴体験にすばやく戻るのを支援します。トランスポートコントロールを使用して、気に入ったビデオなどの再生関連のアクションを有効にします。カスタムコンテンツタブを使用して、補足情報または推奨事項を表示します。


    視聴者がフルスクリーンモードと PiP (*1)モードを切り替えるときに、さまざまなソースからのオーディオを混合させないでください。 混合したオーディオは、不快でイライラするユーザー体験です。一般に、オーディオソースの少なくとも 1 つが二次オーディオを正しく処理できない場合、オーディオは混合されます。典型的なシナリオは次のとおりです。フルスクリーンビデオを見ている間、視聴者はそれを PiP ウィンドウに移動し、そこでシステムがビデオを自動的にミュートします。フルスクリーンウィンドウで、視聴者はバックグラウンドミュージックを再生するゲームを開始し、次に PiP ウィンドウに切り替えて、ビデオのミュートを解除します。ゲームが二次オーディオを適切に処理しない場合、そのオーディオはミュートされていないビデオのオーディオと混合されます。開発者向けガイダンスについては、silenceSecondaryAudioHintNotification (silenceSecondaryAudioHintNotification) を参照してください。


    (*1 訳注) PiP : Picture in Picture



    TV アプリとの統合


    TV アプリは、システム全体からお気に入りの、最近再生された、推奨されるビデオコンテンツへのグローバルアクセスを提供します。人々があなたのアプリ内でコンテンツの再生を開始すると、TV アプリは自動的にあなたのアプリを開き、アプリに移行します。これらのガイドラインに従って、TV アプリの体験があなたのアプリの統合された部分のように感じられるようにしてください。


    あなたのアプリへのスムーズな移行を確実にします。 TV アプリは、あなたのアプリに移行すると黒にフェードし、あなたのアプリの起動スクリーンを表示しません。コンテンツの再生または再開を開始する前に、すぐにあなた独自の黒いスクリーンを表示することにより、この移行で視覚的な連続性を維持します。


    期待されるコンテンツをすぐに表示します。 人々は、特に再生を再開するときに、あなたのアプリへの移行が完了するとすぐに再生を開始することを選択したコンテンツが開始することを期待しています。あなたのアプリの黒いスクリーンからコンテンツに直接ジャンプし、スプラッシュスクリーン、詳細スクリーン、イントロアニメーション、またはコンテンツへの到達に時間がかかるその他の障壁を表示しないようにします。選択したメディアを再生する前に隙間の要素を表示しなければならないまれな状況では、人々は [選択]を選んで要素をスルーするか、隙間のコンテンツをスキップして再生を開始する場合は [再生] を選択できます。


    再生を再開するかどうかを尋ねるのは避けてください。 再生を再開できる場合は、確認を求めずに自動的に再開してください。


    人々が接続されている Bluetooth キーボードのスペースを押すと、再生するか再生を一時停止します。 スペースを押してメディアの再生を制御することは、使用しているキーボードに関係なく、人々が期待する操作です。


    コンテンツが正しい視聴者のために再生されることを確認してください。 あなたのアプリが複数のユーザープロファイルをサポートしている場合、TV アプリは再生リクエストを発行するときにプロファイルを指定できます。再生を開始する前に、あなたのアプリをこのプロファイルに自動的に切り替えます。再生リクエストでプロファイルが指定されていない場合は、再生を開始する前に視聴者にプロファイルを選択してもらい、将来この情報を提供できるようにします。


    長いビデオクリップの再生を再開するときは、前の終了時刻を使用します。 前の停止ポイントで再生を再開すると、人々は中断したところからすばやく続行できます。



    コンテンツのロード


    可能な場合はロード中のスクリーンを表示しないでください。 コンテンツのロードが速い場合はロード中のスクリーンは不要ですが、ロードに 2 秒以上かかる場合は、中央にアクティビティスピナーがあり、周囲のコンテンツがない黒いロード中のスクリーンを表示することを検討してください。


    すぐに再生を開始します。 ロード中のスクリーンを表示しなければならない場合は、再生を開始するのに十分なコンテンツがロードされるまでロード中のスクリーンを表示してください。バックグラウンドで残りのコンテンツのロードを続行します。


    スクリーンコンテンツのロードを最小限に抑えます。 ロード中のスクリーンにブランドやイメージを含める場合は、再生へのシームレスな移行を可能にする黒い背景を維持しながら、最小限に抑えてください。



    再生の終了


    再生を終了した後、人々は TV アプリに戻るのではなく、あなたのアプリ内にとどまるため、人々が混乱しないようにすることをお勧めします。


    状況に応じたスクリーンを表示します。 再生を終了するときは、視聴者が今見ているコンテンツの詳細スクリーンを表示し、再生を再開するオプションを含めます。詳細スクリーンが利用できない場合は、このコンテンツを一覧表示するメニューまたはアプリのメインメニューのいずれかを表示します。


    すぐに終了する準備をしてください。 再生通知を受け取ったらできるだけ早く終了スクリーンを準備して、再生開始直後に人々が終了した場合にスクリーンを表示できるようにします。



    プラットフォームの考慮事項


    iOS、iPadOS、または macOS に関する追加の考慮事項はありません。



    tvOS


    ビデオの上にロゴやインタラクティブでないオーバーレイを表示する場合は、コンテンツを延期してください。 小さくて目立たないロゴまたはカウントダウンタイマーがあなたのビデオに適しているが、視聴体験を向上させない大きくて気が散るオーバーレイは避けてください。また、一部のデバイスはイメージが保持される傾向があるため、オーバーレイを短くし、明るく不透明なコンテンツよりも標準ダイナミックレンジ (SDR) の半透明のグラフィックを優先することをお勧めします。


    インタラクティブなオーバーレイを適切に表示します。 一部のビデオには、クイズ、調査、進行状況のチェックインなどのインタラクティブなオーバーレイが表示されます。最高のユーザー体験を得るには、最小 0.5 秒の遅延を実装してメディアの再生を一時停止し、インタラクティブオーバーレイを表示します。オーバーレイを閉じて、対話が終了した後にメディアの再生を再開する明確な方法を人々に提供します。



    watchOS


    watchOS では、システムがビデオの再生を管理します。アプリがアクティブで、前景で実行されている間、アプリは短いビデオクリップを再生できます。ムービー要素を使用して、インターフェイスにクリップを埋め込んでビデオをインラインで再生することも、別のインターフェイスでクリップを再生することもできます。開発者向けガイダンスについては、VideoPlayer (VideoPlayer) を参照してください。


    ビデオクリップは短くしてください。 30 秒以内の短いクリップをお勧めします。長いクリップはより多くのディスクスペースを消費し、人々が手首を長時間上げたままにする必要があり、疲労を引き起こします。


    メディア・アセットの推奨サイズとエンコード値を使用します。 特に、パフォーマンスに影響を与え、外観が最適ではなくなるビデオクリップの拡大は避けてください。以下の表に、ビデオ・アセットの推奨されるエンコードと解像度の値を示します。オーディオエンコード値は、映画とオーディオのみのアセットの両方に適用されます。


    属性
    ビデオコーデックH.264 ハイプロファイル
    ビデオビットレート最大 30 fps での 160 kbps
    解像度 (フルスクリーン)208px × 260px (ポートレイト向き)
    解像度 (16:9)320px × 180px (ランドスケープ向き)
    オーディオ64 kbps HE-AAC


    システムコントロールのように見えるポスターイメージを作成することは避けてください。 ムービー要素をタップして再生できることを人々に理解してもらいましょう。映画の要素を他のもののように見せることで人々を混乱させたくないのです。


    ビデオクリップのコンテンツを表すポスターイメージを作成することを検討してください。 人々がポスターイメージをタップすると、システムはイメージを動画に置き換え、インライン再生を始めます。関連するポスターイメージは、人々がビデオを見るかどうかについて情報に基づいた決定を下すのに役立ちます。一般に、コンテンツとは関係のない、または人々がコントロールと間違える可能性のあるポスターイメージを作成することは避けてください。



    リソース


    関連


    オーディオの再生


    フィードバック



    開発者用文書


    AVKit (AVKit)


    HTTP ライブ ストリーミング (HTTP Live Streaming)


    ビデオ





    目次
    Xcode の新機能

  • new HIG
  • 基礎

    概要

    アクセシビリティ

    ベストプラクティス

    操作

    ボイスオーバー

    テキスト表示

    色と効果

    プラットフォームの考慮事項

    リソース


    アプリのアイコン

    ベストプラクティス

    プラットフォームの考慮事項

    仕様

    リソース


    ブランド化

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    カラー

    ベストプラクティス

    包括的カラー

    システムカラー

    カラーマネジメント

    プラットフォームの考慮事項

    仕様

    リソース


    ダークモード

    ベストプラクティス

    ダークモードの色

    プラットフォームの考慮事項

    リソース


    アイコン

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    イメージ

    拡大率

    フォーマット

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    含まれる物

    デザインによる包括

    言語の歓迎

    親しみやすい

    性同一性

    人と設定

    ステレオタイプの回避

    アクセシビリティ

    言語

    リソース


    レイアウト

    ガイドと安全なエリア

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    マテリアル(材料)

    ベストプラクティス

    プラットフォームに関する考慮事項

    リソース


    モーション

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    右から左へ

    テキストの配置

    数字と文字

    コントロール

    イメージ

    インターフェイスアイコン

    プラットフォームの考慮事項

    リソース


    SF シンボル

    ウェイトよスケール

    デザインバリアント

    カスタムシンボル

    プラットフォームの考慮事項

    リソース


    タイポグラフィ(印刷)

    ベストプラクティス

    システムフォントの使用

    カスタムフォントの使用

    プラットフォームの考慮事項

    仕様

    リソース




    パターン

    概観


    個人データへのアクセス

    許可を求める

    ロケーションボタン

    事前アラートスクリーン

    リクエストの追跡

    データの保護

    プラットフォームの考慮事項

    リソース


    データのグラフ化

    ベストプラクティス

    効果的なグラフの設計

    プラットフォームの考慮事項

    リソース

    変更記録

    協力と共有化

    ベストプラクティス

    プラットフォームの考慮事項

    リソース

    変更記録

    ドラッグアンドドロップ

    ベストプラクティス

    フィードバックの提供

    ドロップを受け入れる

    プラットフォームの考慮事項

    リソース


    データ入力

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    フィードバック

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    ファイル管理

    ベストプラクティス

    ファイルを開く

    作業の保存

    クイックルックプレビュー

    プラットフォームの考慮事項

    リソース


    全画面表示

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    起動

    ベストプラクティス

    起動画面

    プラットフォームの考慮事項

    リソース


    ライブビューのアプリ

    ベストプラクティス

    EPG の体験

    クラウド DVR

    プラットフォームの考慮事項

    リソース


    ロード中

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    アカウントの管理

    ベストプラクティス

    アカウントの削除

    TV プロバイダーアカウント

    プラットフォームの考慮事項

    リソース


    通知の管理

    フォーカスとの統合

    ベストプラクティス

    買い物通知の送信

    プラットフォームの考慮事項

    リソース


    モダリティ

    ベストプラクティス

    リソース


    マルチタスク

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    ヘルプの提供

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    搭載

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    オーディオの再生

    ベストプラクティス

    中断の処理

    プラットフォームの考慮事項

    リソース


    触覚の再生

    ベストプラクティス

    カスタムの触覚

    プラットフォームの考慮事項

    リソース


    ビデオの再生

    サポートされる
    プラットフォーム

    iPhone iPad

    macOS tvOS

    watchOS

    ベストプラクティス

    TV アプリとの統合

    プラットフォームの考慮事項

    リソース


    印刷

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    格付けとレビュー

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    検索

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    設定

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    取り消しとやり直し

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    トレーニング

    ベストプラクティス

    プラットフォームの考慮事項

    リソース




    部品

    全ての部品


    コンテンツ

    イメージビュー

    テキストビュー

    Web ビュー


    レイアウトと構成

    ボックス

    コレクション

    コラムビュー

    開示コントロール

    ラベル

    リストと表

    ロックアップ

    アウトラインビュー

    スプリットビュー

    タブビュー


    メニューとアクション

    活動ビュー

    ボタン

    コンテキストメニュー

    ドックメニュー

    編集メニュー

    メニュー

    ポップアップボタン

    プルダウンボタン

    ツールバー


    ナビゲーションと検索

    ナビゲーションバー

    パスコントロール

    検索フィールド

    サイドバー

    タブバー

    トークンフィールド


    プレゼンテーション

    アクションシート

    アラート

    ページコントロール

    パネル

    ポップオーバー

    スクロールビュー

    シート

    ウィンドウ


    選択と入力

    カラーウェル

    コンボボックス

    数値入力ビュー

    イメージウェル

    スクリーン上のキーボード

    ピッカー

    セグメントコントロール

    スライダー

    ステッパー

    テキストフィールド

    トグル(切り替え)


    状態

    活動リング

    ゲージ

    レベルインジケータ

    進捗インジケータ

    格付けインジケータ

    システムの体験

    複雑化

    ホーム画面のクイックアクション

    ライブ活動

    メニューバー

    通知

    ステータスバー

    一番上の棚

    時計の文字盤

    ウィジェット




    入力

    概観


    Apple Pencil と落書き

    ベストプラクティス

    落書きのサポート

    カスタムの描画

    プラットフォームの考慮事項

    リソース


    デジタルの竜頭

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    焦点と選択

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    ゲームコントローラー

    ベストプラクティス

    ボタン

    プラットフォームの考慮事項

    リソース


    ジャイロスコープと加速度計

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    キーボード

    ベストプラクティス

    キーボードショートカット

    カスタムキーボードショートカット

    プラットフォームの考慮事項

    仕様

    リソース


    ポインティングデバイス

    ベストプラクティス

    プラットフォームの考慮事項

    リソース


    リモコン

    ベストプラクティス

    ジェスチャ

    ボタン

    互換性のあるリモコン

    プラットフォームの考慮事項

    リソース


    空間的相互作用

    ベストプラクティス

    デバイスの使用法

    プラットフォームの考慮事項

    リソース


    タッチバー

    ジェスチャ

    ベストプラクティス

    インターフェイスアイコン

    コントロールとビュー

    プラットフォームの考慮事項

    リソース


    タッチスクリーンジェスチャ

    ベストプラクティス

    標準的なジェスチャ

    プラットフォームの考慮事項

    リソース




    プラットフォーム

    概観

    iOS 用デザイン

    ベストプラクティス

    リソース


    iPadOS 用デザイン

    ベストプラクティス

    リソース


    macOS 用デザイン

    ベストプラクティス

    リソース


    tvOS 用デザイン

    ベストプラクティス

    リソース


    watchOS 用デザイン

    ベストプラクティス

    リソース




    テクノロジー

    AirPlay

    序文

    アイコン

    編集者用


    常にオン

    アプリクリップ

    序文

    ユーザー体験

    アプリクリップカード

    アプリクリップのコード

    印刷ガイドライン

    法的要件


    Apple Pay

    序文

    Apple Pay の提供

    チェックアウトと支払い

    エラー処理

    サブスクリプションと寄付

    ボタンとマーク

    編集者用


    拡張現実

    CareKit

    序文

    データとプライバシー

    ビュー

    ユーザー体験

    シンボルとブランド化


    CarPlay

    序文

    アーキテクチャ

    操作

    視覚的デザイン

    アイコンとイメージ

    システム要素


    ゲームセンター

    序文

    アクセス・ポイント

    ダッシュボード

    成果

    リーダーボード

    多数のプレイヤー

    カスタムダッシュボードのリンク


    HealthKit

    HomeKit

    序文

    用語とレイアウト

    設定

    Siri の操作

    カスタム機能

    アイコン

    編集者用


    iCloud

    アプリ内購入

    序文

    自動更新可能なサブスクリプト


    ライブ写真

    Mac Catalyst

    序章

    アプリの構造

    ユーザーの操作

    視覚的デザイン

    Mac の慣用句


    機械学習

    序文

    機械学習の役割

    明示的なフィードバック

    暗黙のフィードバック

    較正

    訂正

    間違い

    複数のオプション

    自信

    属性

    制限事項


    マップ

    序文

    Apple Watch のマップ

    屋内のマップ


    ビジネス向けメッセージ

    序文

    ブランド化

    ボタン

    ダークモード

    ロゴ

    メッセージバブルの内容

    スクリーンショット


    NFC

    写真編集

    ResearchKit

    SharePlay

    ShazamKit

    Apple でサインイン

    序文

    データ管理

    ボタン


    Siri

    序文

    システムの意図

    カスタムの意図

    ショートカットと提案

    編集者用


    タップして iPhone で支払う

    財布

    序文

    パスのデザイン

    注文追跡のデザイン















    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ