Chromecast プラットフォームでのユーザー エクスペリエンス

Chromecast を使用すると、Android、iOS、Chrome のウェブアプリで、動画、音声、画面共有(ミラーリング)などのコンテンツを「Cast」対応デバイスに次のような

  • Chromecast
  • Chromecast built-in テレビ(Chromecast built-in テレビとも呼ばれます)
  • Chromecast built-in スピーカー(Chromecast built-in 搭載スピーカー)
  • スマートディスプレイ(シン クライアントとして使用されるポータブル タッチスクリーン LCD モニター)
  • Android タブレット

キャスト インタラクション モデルでは、スマートフォン、タブレット、またはノートパソコンは、再生を制御するリモコンとして機能する送信者であり、テレビ、ディスプレイ、またはドッキング タブレットは、送信者から指示を受け取り、受信者のインターネット接続からコンテンツを表示するレシーバーです。すべてのユーザー アクション(タップとスワイプ)は、送信側デバイスまたはウェブ受信側の両方で実行できます。

キャストは複数の画面間の調整に依存します(送信側の UI と受信側の UI は連携して動作する必要があります)。たとえば、モバイル デバイスのボタンを押してコンテンツを一時停止した場合、テレビには「一時停止中」と表示され、モバイル デバイスには再生を再開するための再生ボタンが表示されます。

考慮事項

ハードウェアとリソースの制限により、Chromecast 対応アプリでは以下のような制限があります。

  • キャスト デバイスはメモリ、CPU、GPU に関して低消費電力のデバイスであるため、Web Receiver アプリケーションはできる限り軽量化する必要があります。
  • Chromecast と Chromecast built-in 対応モデルでは、ウェブレシーバー アプリまたは送信者アプリの両方でタブ、ウィンドウ、ポップアップを作成し、タップやスワイプなどのユーザー入力を直接受け入れることができます。たとえば、ドッキングされたタブレットやディスプレイのウェブレシーバー アプリは、一時停止ボタンを表示して、ユーザーのタップを受信できます。このように、アプリケーションに対するすべてのアクションは、Web Receiver または送信者のアプリケーションからトリガーする必要があります。
  • スマートディスプレイでは、送信アプリまたは UI のタップ経由のユーザー入力がサポートされています。
  • Web レシーバーは、動画の再生に合わせて最適化された Chrome ブラウザです。そのため、WebGL と Chrome ネイティブ クライアント(NaCL)は現在サポートされておらず、Chrome 拡張機能もサポートされていません。
  • キャストでは、<audio> タグと <video> タグでの単一のメディア ストリームの同時再生、または WebAudio API を使用した複数の音声トラックがサポートされます。DOM で有効にできる動画要素は常に 1 つのみです。また、動画合成、操作、変換、回転、ズームはサポートされていません。

全体的な設計原則

ユーザー インターフェースを開発する際は、次の点に注意してください。

Web Receiver インターフェース:

  • ウェブ レシーバーは、インタラクティブ要素と情報要素の両方を使用して、アプリの状態(一時停止、再生、エラー メッセージなど)を記述できます。ユーザー操作は、Cast センダー(スマートフォン、タブレット、Chrome ブラウザ)またはウェブレシーバー(テレビ、ディスプレイ、タブレット)で行うことができます。
  • 動画アクションはテレビ画面の中央で実行され、UI 要素がプレゼンテーションに干渉しないようにします。UI 要素は、ウェブ レシーバー ディスプレイの下 3 分の 1 以内に配置し、オーバースキャンが可能なように画面の端から 10% の余白を残します。
  • 可能であれば、ある画面状態から別の画面状態への遷移を滑らかにして、映画撮影のような感覚にします。状態から状態への突然の移行ではなく、フェードインやフェードアウトなどの遷移を使用します。たとえば、コンテンツ読み込み状態は画面上に残り、メディア再生エクスペリエンスにフェードインします。

送信者インターフェース:

  • 送信者はユーザー アクションをサポートし、Web Receiver は状態情報を表示します。たとえば、コンテンツが一時停止されている場合、テレビはコンテンツが一時停止中であることを示し、モバイル デバイスは再生を開始する準備が整っていることを示します(たとえば、ユーザーに再生ボタンを表示するなど)。
  • 速度は重要です。ユーザーはキャスト コントロールをすばやく見つけて、大画面でコンテンツがすぐに再生できる必要があります。コンテンツの読み込み中は、アニメーション化された読み込みインジケーターを提供し、遷移を使用して動作が高速になるようにします。

キャスト アプリがこれらの原則に従うことを確認する最も簡単な方法は、キャスト デザイン チェックリストを使用してユーザー インターフェースを確認し、キャスト アプリケーションをテストすることです。

ブランドの取り扱いガイドライン

以下の Chromecast ブランド ガイドラインはアプリ デベロッパーを対象としており、アプリをテキストで説明する際に遵守する必要のある追加要件に重点を置いています。 キャスト デバイスのブランド ガイドラインについては、Partner Marketing Hub をご覧ください。アプリが「Chromecast built-in 搭載」で動作することを知らせるには、「Chromecast 対応」という用語を使用します。ただし、アプリが Cast SDK 追加デベロッパー利用規約設計チェックリストを遵守していること、および「Chromecast 対応」の使用が Google のブランドの取り扱いガイドラインを遵守していることを確認してください。

同様に、バッジバッジは、アプリまたはデバイスが Google のバッジに関するガイドラインを遵守している限り使用できます。Google は、ブランド ガイドラインを遵守していない場合にバッジの使用を変更または停止する権限を有します。

テキストに「Chromecast」を使用する

  • (ハードウェア プロダクトではなく)アプリを Cast 対応と説明する場合は、「Chromecast 対応」という表現を使用します。(例: 「このアプリは Chromecast 対応です」)。
  • Cast 対応のサードパーティ製ハードウェア製品について説明する際は、「Chromecast built-in TV」、「Chromecast built-in スピーカー」、「Chromecast built-in」のみを使用してください。
  • テキストで記述する場合、「Chromecast」は大文字で、「built-in」は小文字にする必要があります。
  • テキストまたはバッジやロゴで「Chromecast」を使用するマーケティング アセットには、次の法的帰属を含める必要があります。Chromecast は Google LLC の商標です。
  • アプリのタイトル(XYZ Chromecast アプリなど)には Chromecast を使用しないでください。

Chromecast 対応アプリのメッセージ

アプリを宣伝する方法は次のとおりです。

  • 「XYZ は、お気に入りのエンターテイメントをモバイル デバイスからテレビにストリーミングできる Chromecast 対応アプリです」
  • 「XYZ アプリは、Chromecast built-in 搭載テレビでご利用いただけます。」
  • 「XYZ アプリは、Chromecast、Chromecast Audio、Chromecast built-in 搭載のテレビやスピーカーなど、すべての Chromecast 製品でご利用いただけるようになりました。」
  • 「XYZ アプリは Chromecast 対応なので、Chromecast が組み込まれたお気に入りの番組、映画、音楽、ゲームをテレビで楽しめます。」
  • 「XYZ アプリは、Chromecast をサポートしているため、Chromecast built-in 搭載のスマートフォンからテレビにコンテンツをストリーミングできます。」

Chromecast のバッジ

「Chromecast」バッジは、ウェブサイト、アプリストアのリスティング、マーケティング資料、プロモーション素材で使用でき、キャスト プロトコルを使用するデバイスとの互換性を表示できます。

  • バッジの画像の色、比率、間隔などの要素は変更しないでください。
  • 他の要素テクノロジー(Bluetooth、Spotify Connect、AirPlay など)のロゴとともに使用する場合は、Chromecast バッジのサイズをこのサイズ以上にする必要があります。
  • バッジをページの主要な要素にしないでください。
  • ページ上のバッジと他のロゴやアイコンの間には、ある程度の距離を空けてください。
  • 背景が白、明るい色、中間の色の場合は、黒いバッジを使用します。
  • 背景が黒またはダークトーンの場合は、白のバッジを使用します。
  • アダルト コンテンツ、ギャンブルの助長、ヘイトスピーチ、未成年者へのタバコやアルコールの販売、その他適用される法令や規制に違反する内容や、不快感を与える内容を含むページで、バッジを使用しないでください。

バッジのリンク

オンラインで使用する場合、Chromecast バッジは次のいずれかにリンクする必要があります。

  • Chromecast 対応アプリとプロダクトの一覧(現在は g.co/castapps)。
  • 公開している商品のリスト。
  • 商品の詳細ページ。
  • 公開しているアプリのリスト。
  • Google Play、または Apple App Store で公開されているアプリの詳細ページ。

Chromecast のバッジアセットをダウンロードする

ダウンロード バンドルには、Portable Network Graphics(.png)、Adobe Illustrator(.ai)、Enapsulated Postscript(.eps)形式が含まれます。

Chromecast バッジをプレビューする

黒い背景に青いロゴと白いテキスト
白い背景に黒いロゴと白いテキスト
白い背景に青のロゴと灰色のテキスト