キャスト アイコン

ユーザーにキャストを紹介する

キャスト アイコンを導入することで、送信者のアプリがキャストをサポートするようになったことを既存のユーザーに伝えられるほか、Google Cast を初めて使用するユーザーにも便利です。

必須
A ウェブレシーバーが初めて利用可能な場合にキャストの概要画面を表示する。iOS の送信者の場合は、初めてキャスト アイコンが表示されるときにキャストの概要画面を表示します。
B ボタンの周囲にキャスト アイコンを視覚的に強調表示する
C キャスト ボタンの仕組みを説明する（「タップして動画をテレビにキャストする」などのメッセージを表示するなど）

キャスト アイコンの有無

必須
A キャスト アイコンは、再生可能なコンテンツがあるすべての画面から表示でき、コンテンツをブラウジングまたは再生しているときに決まった位置に配置する必要があります。また、Chrome のヘッダーのグローバル コントロールにも表示されます。
B iOS 以外の送信者では、ウェブレシーバーが利用できないときはキャスト アイコンを非表示にできます。iOS の送信側の場合は、デバイスが Wi-Fi に接続されていれば常にキャスト アイコンが表示されるため、ユーザーがローカル ネットワークへのアクセスをオフにし、結果としてデバイスが検出されなくなった場合でも、適切なサポートを提供できます（詳しくは iOS の権限と検出をご覧ください）。
C モバイルアプリでは、キャスト アイコンは右側に配置する必要があります。
D Chrome では、キャスト アイコンはコンテンツ メディア コントロールの右側に配置する必要があります（埋め込み動画をご覧ください）。メディア コントロールにフルスクリーン ボタンが含まれている場合は、そのボタンの左にキャスト ボタンを配置します。

注

Google Cast はマルチタスク モデルを採用しており、ユーザーはキャスト中に送信者のアプリや他のアプリをブラウジングできます。キャスト アイコンは、再生可能なコンテンツがあるすべての画面から表示する必要があります。これにより、ユーザーはテレビで再生しているコンテンツを一時停止または停止する場所を探す必要がありません。

キャスト アイコンの状態

必須
A 使用不可: Android でウェブレシーバーが利用できない場合、キャスト アイコンは表示されません
B 切断済み: ウェブレシーバーが利用可能な場合、
C 接続: ウェブレシーバーが接続されると、キャスト ボタンがアイコンの領域で徐々に動きます（詳しくは Fi をご覧ください）。

おすすめの方法
ボタンの各状態に対して、アプリの他の UI 要素のスタイルと一致する色を使用します。オン / 接続状態には、黄色などの明るい色を使用する必要はありません。

注

• キャスト アイコンは Chrome と iOS で表示されるため、Cast デバイスを利用できるかどうかにかかわらず Cast 拡張機能にアクセスできます。
• 接続（アニメーション）状態は、Cast API への接続に予想より時間がかかっている場合に表示されます（Android と Chrome SDK ではキャスト アイコンが自動的にアニメーション化されます）。接続すると、Web Receiver アプリが起動します。
• キャスト アイコンのオン / 接続状態が更新され、アイコン フレーム内の塗りつぶしが可能になりました。新しいキャスト アイコンとアイコン テンプレートはこちらから入手できます。

 

このデザインガイドで使用されている画像は、著作権またはクリエイティブ・コモンズ ライセンスに基づいて共有されている 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
• ティアー オブ スティール: （CC）ブレンダー財団 | mango.blender.org
• Big Buck Bunny: （c）copyright 2008、Blender Foundation / www.bigbuckbunny.org