レシーバーはコンテンツを再生し、その状態をユーザーに反映します。受信側は送信側アプリでのアクションに即座に応答する必要があります。たとえば、レシーバーでコンテンツを一時停止すると、一時停止アイコンが表示され、送信側アプリでユーザーが再生ボタンを押すと、レシーバーがコンテンツの再生を開始し、一時停止アイコンが削除されます。
レシーバー UI フィードバックの例:
- 再生中
- 一時停止
- 再生位置 / 移動
- バッファリング
レシーバー UI
必須
A ほとんどの UI 要素を画面の下部 1/4 内に配置し、他の UX との整合性を保ちます。
B 要素をインタラクティブなコントロールとして表示しないでください。たとえば、レシーバー UI でセンダー UI を再現しないでください。
運用のヒント
- トランジション（フェード）、透明度、ニュアンスを使用して、視覚効果をソフトにします。
- ユーザーができるだけ多くのコンテンツを見たいという事実を考慮してください。ユーザーはコンテンツを調べるためにコンテンツを一時停止することが多いため、不要な UI は可能な限りフェードアウトします。
Android
送信者の UI
レシーバー UI
iOS
送信者の UI
レシーバー UI
Chrome
送信者の UI
レシーバー UI
レシーバー アプリがアイドル状態
レシーバーがセンダーに接続されているが、キャストはしていない場合、レシーバーにアイドル状態の画面が表示されます。
必須
A 読み込まれるレシーバー アプリを特定する
運用のヒント
- アイドル状態の画面を使用して、センダー アプリのコンテンツや機能を宣伝します。
- 30 ～ 60 秒ごとに表示内容を変更して、画面の焼き付きを防ぐ。
- レシーバー アプリの接続を解除し、アイドル状態が 5 分間続いたら実行を停止します。 停止すると、レシーバーのホーム画面が表示され、画面の焼き付きを防ぐのに役立ちます。
Android
キャスト ダイアログ、接続されているが、キャストされていない
レシーバー アプリの読み込み / アイドル状態
iOS
キャスト ダイアログ、接続されているが、キャストされていない
レシーバー アプリの読み込み / アイドル状態
レシーバー アプリの読み込み
ユーザーがレシーバに接続したとき、レシーバ アプリはまず読み込みを行ってから、アプリのアイドル状態を表示するか、コンテンツの再生を開始する必要があります。
必須
A アプリのロゴを表示して、読み込み中のレシーバー アプリを特定する
B 読み込みスピナーのアニメーションを表示して、レシーバー アプリが読み込み中であることを確認する
Android
送信者に接続しています
レシーバー アプリを読み込んでいます
iOS
送信者に接続しています
レシーバー アプリを読み込んでいます
Chrome
送信者に接続しています
レシーバー アプリを読み込んでいます
レシーバーのコンテンツを読み込んでいます
レシーバー アプリが読み込まれると、レシーバーへのコンテンツのストリーミングが開始されます。
必須
A コンテンツのタイトルまたはアートワークを表示して、読み込まれているコンテンツを特定します
B アニメーションの読み込みスピナーを表示して、コンテンツが読み込み中であることを示します。
おすすめの方法
一時停止したコンテンツを再開する場合は、5 ～ 10 秒後に巻き戻し、センダーからレシーバーへの移行中に視聴者が何も見逃さないようにします。
Android
送信者のコンテンツを読み込んでいます
レシーバーのコンテンツを読み込んでいます
iOS
送信者のコンテンツを読み込んでいます
レシーバーのコンテンツを読み込んでいます
Chrome
送信者のコンテンツを読み込んでいます
レシーバーのコンテンツを読み込んでいます
レシーバーの再生
必須
A コンテンツ開始時に再生されるものを特定する
B 位置が調整されたときに再生位置を特定する
C 再生位置が変更されたものの、まだ再生されていないときにレシーバがコンテンツをシークしていることを確認する
Android
送信者が再生位置を調整しています
レシーバーのコンテンツ検索
iOS
送信者が再生位置を調整しています
レシーバーのコンテンツ検索
Chrome
送信者が再生位置を調整しています
レシーバーのコンテンツ検索
レシーバーを一時停止
必須
A 一時停止アイコンと再生位置を表示して、コンテンツが一時停止されていることを特定する
B コンテンツ タイトルまたはアートワークを表示して、一時停止されているコンテンツを特定する
C アプリのロゴを表示して、どのレシーバー アプリが読み込まれているかを特定する
運用のヒント
- ユーザーはコンテンツを調べるためにコンテンツを一時停止することが多いため、数秒間一時停止したときに一時停止アイコンを表示して不要な UI がフェードアウトされるようにします。
- レジュームやキューのアイテムのスキップなど、再生開始の明示的なリクエストがある場合を除き、レシーバー アプリはコンテンツの再生を続行してはなりません。
- レシーバー アプリの接続を解除し、アイドル状態が 20 分間続いたら実行を停止します。 停止すると、レシーバーのホーム画面が表示され、画面の焼き付きを防ぐのに役立ちます。一時停止した場所を保存しておくと、後でユーザーがその位置から再生を再開できます。
Android
送信者が一時停止しました
レシーバーのコンテンツを一時停止しました
送信者が一時停止しました
5 秒後にレシーバーが一時停止します
iOS
送信者が一時停止しました
レシーバーのコンテンツを一時停止しました
送信者が一時停止しました
5 秒後にレシーバーが一時停止します
Chrome
送信者が一時停止しました
レシーバーのコンテンツを一時停止しました
送信者が一時停止しました
5 秒後にレシーバーが一時停止します
レシーバー バッファリング
ネットワーク レイテンシなどの要因によって再生が遅延すると、レシーバーでのバッファリングが発生します。
必須
A バッファリング スピナーを表示して、レシーバーが数秒後にバッファリング中であることを示します。バッファリングを示すのを数秒待つと、ネットワーク状態が悪い場合にバッファリング スピナーが頻繁に表示されるのを防ぐことができます。
ベスト プラクティス
5 秒経過してもバッファリングが続く場合に、バッファリングしているコンテンツを特定します。
Android
センダーがレシーバー バッファリングを示す
レシーバーのコンテンツ バッファリング
iOS
センダーがレシーバー バッファリングを示す
レシーバーのコンテンツ バッファリング
Chrome
センダーがレシーバー バッファリングを示す
レシーバーのコンテンツ バッファリング
レシーバーがキャストを停止する
再生が停止またはタイムアウトしたとき、レシーバー UI はセンダー アプリで利用できる他のコンテンツまたは機能をプロモートします。
必須
A アプリロゴを表示することで、どのレシーバー アプリが読み込まれているか、またはアイドル状態になっているかを識別
運用のヒント
- 再生後のアイドル状態の画面を使用して、キャストしたばかりの内容に基づいて、送信側のアプリからおすすめのコンテンツや機能が表示されます
- 画面が焼き付きを防ぐために、アイドル状態の画面を 30 ～ 60 秒ごとに変更します
- レシーバー アプリの接続を解除し、アイドル状態が 5 分間続いたら実行を停止します。 停止すると、レシーバーのホーム画面が表示され、画面の焼き付きを防ぐのに役立ちます。
Android
センダーアプリがアイドル状態
レシーバー アプリがアイドル状態
送信者の接続を解除しました
ホーム画面をキャストする
iOS
センダーアプリがアイドル状態
レシーバー アプリがアイドル状態
送信者の接続を解除しました
ホーム画面をキャストする
Chrome
センダーアプリがアイドル状態
レシーバー アプリがアイドル状態
送信者の接続を解除しました
ホーム画面をキャストする
このデザインガイドで使用されている画像は、Blender Foundation により著作権またはクリエイティブ・コモンズ ライセンスに基づいて共有されているものです。
- Elephant's Dream: (c)copyright 2006、Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
- Sintel: （c）copyright Blender Foundation | www.sintel.org
- Tears of Steel: （CC）Blender Foundation | mango.blender.org
- Big Buck Bunny: (c)copyright 2008、Blender Foundation / www.bigbuckbunny.org