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

Chromecast を使用すると、Android、iOS、Chrome のウェブアプリから、動画、音声、画面共有(ミラーリング)などのコンテンツをキャスト対応デバイスに「ストリーミング」できます。

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

キャスト インタラクション モデルでは、スマートフォン、タブレット、またはノートパソコンが「送信側」として再生を操作し、テレビ、ディスプレイまたはホルダーに装着されたタブレットが「受信側」として送信側からの指示を受信し、受信機のインターネット接続からコンテンツを表示します。すべてのユーザー アクション(タップとスワイプ)は、送信側デバイスとウェブ レシーバーの両方で発生します。

キャストは、2 つ以上の画面(センダー UI とレシーバー UI)間の調整に依存しており、これらは連携して動作する必要があります。たとえば、モバイル デバイスのボタンを押してコンテンツを一時停止した場合、テレビには一時停止したことが表示され、モバイル デバイスには再生を再開するための再生ボタンが表示されます。

考慮事項

ハードウェアとリソースの制限により、Chromecast 対応アプリには一定の制限があります。

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

設計に関する全般的な原則

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

Web Receiver インターフェース:

  • ウェブ レシーバーには、アプリの状態(一時停止、再生、エラー メッセージなど)を説明するインタラクティブな要素と情報要素の両方があります。ユーザーの操作は、キャスト センダー(スマートフォン、タブレット、Chrome ブラウザ)またはウェブ レシーバー(テレビ、ディスプレイ、タブレット)で行われます。
  • 動画アクションはテレビ画面の中央で行われるため、UI 要素が表示を妨げないようにする必要があります。UI 要素をウェブ レシーバー ディスプレイの下 3 分の 1 の範囲内に配置し、オーバースキャンのために画面の端から 10% のマージンを確保します。
  • 可能であれば、ある画面から別の画面の状態への遷移はスムーズで映画のような印象を与える必要があります。状態から状態に突然移動するのではなく、フェードインやフェードアウトなどの遷移を使用します。たとえば、コンテンツ読み込み状態は画面上に残っており、メディア再生エクスペリエンスにフェードインします。

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

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

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

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

以下の Chromecast ブランド ガイドラインはアプリ デベロッパー向けのものであり、アプリをテキストで記述するために準拠する必要がある追加の要件に重点を置いています。キャスト デバイスのブランド ガイドラインについては、Partner Marketing Hub をご覧ください。「Chromecast 対応」という用語を使用することで、アプリが Chromecast built-in に対応していることを広く知らせることができます。ただし、アプリが Cast の SDK 追加デベロッパー向け利用規約設計チェックリストに準拠していることと、「Chromecast 対応」の使用が Google のブランド ガイドラインに準拠していることを確認してください。

同様に、アプリやデバイスが Google のバッジに関するガイドラインを遵守していれば、Chromecast のバッジを使用できます。Google は、ブランドの取り扱いガイドラインに準拠していないバッジについて、変更または使用停止をリクエストする権利を有します。

文章で「Chromecast」を使用する

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

Chromecast 対応アプリ メッセージ

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

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

Chromecast バッジ

ウェブサイト、アプリストアの掲載情報、マーケティング資料、宣伝資料に「Chromecast」バッジを使用して、Cast プロトコルを使用するデバイスとの互換性があることをアピールできます。

  • バッジ画像の色、比率、間隔などは変更しないでください。
  • 他のコンポーネント テクノロジー(Bluetooth、Spotify Connect、AirPlay など)のロゴと並べて使用する場合は、Chromecast バッジを同等以上のサイズにする必要があります。
  • バッジをページの主要な要素にしないでください。
  • ページ上の他のロゴやアイコンと、バッジとの間に一定の距離を保ってください。
  • 白、明るい、中間色の背景で使用する場合は、黒のバッジを使用します。
  • 黒または濃い色の背景で使用する場合は、白のバッジを使用してください。
  • アダルト コンテンツ、ギャンブルの助長、暴力の助長、ヘイトスピーチを含むページ、未成年者へのタバコやアルコールの販売、その他の適用される法律や規則に違反する内容、その他好ましくないページにバッジを使用しないでください。

バッジのリンク

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

  • Google の Chromecast 対応アプリと製品のリスト(現時点では g.co/castapps)をご覧ください。
  • 販売者が公開している商品のリスト。
  • 販売者が公開している特定の商品の詳細ページ。
  • あなたが公開しているアプリのリスト。
  • 自社、Google Play、Apple App Store で公開している特定のアプリの詳細ページ。

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

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

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

黒の背景に青のロゴと白のテキスト
黒地に白のロゴと白のテキスト
白の背景に青色のロゴとグレーのテキスト