Google Cast プラットフォームのユーザー エクスペリエンス
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
Google Cast を使用すると、Android、iOS、Chrome ウェブアプリから、次のような Cast 対応デバイスにコンテンツ(動画、音声、画面共有(ミラーリング)など)を「ストリーミング」できます。
- Google Chromecast
- Google Cast 対応テレビ
- Google Cast 対応スピーカー
- スマートディスプレイ(シン クライアントとして使用するポータブル タッチスクリーン LCD モニター)
- Android タブレット
Google Cast のインタラクション モデルでは、スマートフォン、タブレット、ノートパソコンが送信側となり、再生を操作するリモコンとして機能します。テレビ、ディスプレイ、ホルダーに装着したタブレットが受信側となり、送信側からの指示を受け取り、受信側のインターネット接続からコンテンツを表示します。すべてのユーザー アクション(タップとスワイプ)は、送信側デバイスとウェブ レシーバーの両方で実行できます。
キャストは、送信側 UI と受信側 UI の 2 つ以上の画面間の調整に依存します。これらの画面は連携して動作する必要があります。たとえば、モバイル デバイスのボタンを押してコンテンツを一時停止すると、テレビに一時停止したことが示され、モバイル デバイスには再生を再開するための再生ボタンが表示されます。
考慮事項
ハードウェアとリソースの制限により、Google Cast 対応アプリには一定の制限が適用されます。
- キャスト デバイスは低消費電力デバイスですが、メモリ、CPU、GPU に制限があります。そのため、Web Receiver アプリはできる限り軽量化する必要があります。
- Cast と Google Cast のインタラクション モデルでは、ウェブ レシーバー アプリと送信元アプリの両方でタブ、ウィンドウ、ポップアップを作成できます。また、タップやスワイプなどのユーザー入力を直接受け入れることもできます。たとえば、ホルダーに装着されたタブレットやディスプレイ上のウェブレシーバー アプリは、一時停止ボタンを表示してユーザーのタップを受け付けることができます。このように、アプリケーションのすべてのアクションは、ウェブ受信側または送信側のアプリケーションからトリガーする必要があります。
- スマートディスプレイは、送信元アプリまたは UI のタップによるユーザー入力をサポートしています。
- ウェブ レシーバーは、動画の再生に最適化された Chrome ブラウザです。そのため、現在のところ、WebGL と Chrome ネイティブ クライアント(NaCL)はサポートされていません。また、Chrome 拡張機能もサポートされていません。
- Cast は、
<audio>
タグと <video>
タグで単一のメディア ストリームの同時再生、または WebAudio API を使用した複数のオーディオ トラックをサポートしています。DOM で一度に有効にできる動画要素は 1 つだけです。また、動画の合成、操作、変換、回転、ズームもサポートされていません。
全体的な設計原則
ユーザー インターフェースを開発する際は、次の点に注意してください。
ウェブレシーバーのインターフェース:
- ウェブレシーバには、アプリの状態(一時停止中、再生中、エラー メッセージなど)を記述するインタラクティブな要素と情報要素の両方を配置できます。ユーザー操作は、Cast センダー(スマートフォン、タブレット、Chrome ブラウザ)またはウェブ レシーバ(テレビ、ディスプレイ、タブレット)で行われます。
- 動画のアクションはテレビ画面の中央で行われるため、UI 要素がプレゼンテーションの邪魔にならないようにしてください。オーバースキャンを考慮して、Web Receiver の画面の下 3 分の 1 の内側に UI 要素を配置し、画面の端から 10% の余白を確保します。
- 可能であれば、画面の状態から別の状態への遷移はスムーズで、映画のような感覚になるようにします。状態から状態への急な移動ではなく、フェードインやフェードアウトなどの遷移を使用します。たとえば、コンテンツの読み込み状態が画面に残り、メディアの再生状態にフェードインします。
送信者のインターフェース:
- 送信側はユーザー アクションをサポートし、ウェブ受信側はステータス情報を表示します。たとえば、コンテンツが一時停止された場合、テレビは一時停止したことを示し、モバイル デバイスは再生を開始する準備ができたことを示します(ユーザーに再生ボタンを表示するなど)。
- 速度は非常に大事です。ユーザーがキャスト コントロールをすばやく見つけ、大画面でコンテンツの再生がすぐに開始できるようにする必要があります。コンテンツの読み込み中は、アニメーションするローディング インジケーターや画面遷移を使用して、処理が進んでいることがユーザーにわかるようにします。
Cast アプリケーションがこれらの原則に準拠していることを確認する最も簡単な方法は、Cast のデザイン チェックリストでユーザー インターフェースを確認し、Cast アプリケーションをテストすることです。
ブランド ガイドライン
以下の Google Cast ブランド ガイドラインはアプリ デベロッパー向けであり、アプリをテキストで記述するために従わなければならない追加要件に焦点を当てています。Cast デバイスのブランド ガイドラインについては、Partner Marketing Hub をご覧ください。アプリが Google Cast に対応していることを他者に知らせるには、「Google Cast 対応」という用語を使用します。ただし、アプリが Cast の SDK デベロッパー向け追加利用規約と設計チェックリストに準拠していること、および「Google Cast 対応」の使用が Google のブランディング ガイドラインに準拠していることを確認してください。
同様に、アプリやデバイスが Google のバッジガイドラインに準拠していれば、Google Cast バッジを使用できます。Google は、ブランド ガイドラインに準拠していない場合に、バッジの変更または使用の中止をリクエストする権利を有します。
テキストの「Google Cast」
- (ハードウェア製品ではなく)アプリを Cast 対応と説明する場合は、「Google Cast 対応」という表現を使用してください。(例: 「このアプリは Google Cast 対応です」)。
- Cast 対応のサードパーティ製ハードウェア製品について説明する場合は、「この {TV} は Google Cast に対応しています」、「これらの {スピーカー} は Google Cast に対応しています」という表現を使用します。
- テキストで記述する場合は、「Google」と「Cast」を大文字で表記してください。
- マーケティング資料で「Google Cast」をテキストまたはバッジやロゴで使用する場合は、次の法的帰属を表示する必要があります。Google Cast は Google LLC の商標です。
- アプリのタイトルに「Google Cast」を含めないでください(XYZ Google Cast アプリなど)。
Google Cast 対応アプリのメッセージ アプリ
次のような方法でアプリを宣伝できます。
- 「XYZ は Google Cast 対応アプリで、お気に入りのエンターテイメントをモバイル デバイスからテレビにストリーミングできます。」
- 「XYZ アプリが Google Cast 対応テレビで利用可能になりました。」
- 「XYZ アプリは、Google Chromecast、Google Cast Audio、Google Cast 対応のテレビやスピーカーなど、すべての Google Cast 製品で利用できるようになりました。」
- 「XYZ アプリは Google Cast に対応しており、Google Cast 対応のテレビでお気に入りの番組、映画、音楽、ゲームをすべてお楽しみいただけます。」
- 「XYZ アプリが Google Cast に対応し、ユーザーはスマートフォンから Google Cast 対応のテレビにコンテンツをストリーミングできるようになりました。」
Google Cast バッジ
ウェブサイト、アプリストアの掲載情報、マーケティング資料、プロモーション資料で「Google Cast」バッジを使用して、Cast プロトコルを使用するデバイスとの互換性を示せます。
- バッジ画像の色、比率、間隔、その他の要素を変更しないでください。
- 他のコンポーネント技術(Bluetooth、Spotify Connect、AirPlay など)のロゴと一緒に使用する場合は、Google Cast バッジのサイズがそれらのロゴと同じかそれ以上である必要があります。
- バッジをページの主要な要素にしないでください。
- バッジとページ上の他のロゴやアイコンの間には十分な間隔を空けます。
- 白、明るい色、または中間色の背景で使用する場合は、黒のバッジを使用してください。
- 黒または暗い色の背景に使用する場合は、白いバッジを使用します。
- アダルト コンテンツを含むページ、ギャンブルを促進するページ、暴力を助長するページ、ヘイトスピーチを含むページ、21 歳未満の人にタバコまたはアルコールを販売するページ、他の適用法または規制に違反するページ、またはその他の不快なページでバッジを使用しないでください。
バッジのリンク
Google Cast バッジをオンラインで使用する場合は、次のいずれかにリンクする必要があります。
- Google Cast 対応アプリとプロダクトの一覧については、g.co/castapps をご覧ください。
- 公開した商品のリスト。
- 貴社が公開した特定の商品の詳細ページ。
- 公開しているアプリのリスト。
- Google Play または Apple App Store で公開されている、デベロッパーが公開した特定のアプリの詳細ページ。
Google Cast バッジのアセットをダウンロードする
ダウンロード バンドルには、Portable Network Graphics(.png)、Adobe Illustrator(.ai)、Encapsulated Postscript(.eps)の形式が含まれています。
Google Cast バッジのプレビュー
利用可能なバッジと使用方法については、Partner Hub バッジ ガイドラインのページをご覧ください。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-07-25 UTC。
[null,null,["最終更新日 2025-07-25 UTC。"],[[["\u003cp\u003eGoogle Cast enables streaming of content like video and audio from Android, iOS, and Chrome to compatible devices.\u003c/p\u003e\n"],["\u003cp\u003eThe sender device (phone, tablet, laptop) acts as a remote, while the receiver device (TV, speaker, display) plays the content.\u003c/p\u003e\n"],["\u003cp\u003eBoth sender and receiver UIs must be coordinated for a seamless user experience, with actions reflected on both.\u003c/p\u003e\n"],["\u003cp\u003eWeb Receiver applications should be lightweight due to device limitations, and interactive elements should be strategically placed for optimal viewing.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Cast branding guidelines must be followed when promoting app compatibility, including using the approved badge and messaging.\u003c/p\u003e\n"]]],["Google Cast enables content streaming from sender devices (phones, tablets, laptops) to receiver devices (Chromecast, Cast-enabled TVs/speakers/displays). Senders act as remote controls, while receivers display content from their internet connection. Both sender and receiver UIs coordinate actions like pausing/playing. Design considerations include lightweight receiver apps, UI placement within the lower third of the screen, and smooth transitions. Apps can be described as \"Google Cast-enabled\" and use a Google Cast badge, following specific branding guidelines and linking requirements.\n"],null,["# User Experience With the Google Cast Platform\n\nGoogle Cast allows Android, iOS, and Chrome web apps to \"stream\" content ---\nlike video, audio and screen sharing (mirroring) --- to Cast-ready devices\nlike:\n\n- Google Chromecast\n- TVs that work with Google Cast\n- Speakers that work with Google Cast\n- Smart Displays (a portable touchscreen LCD monitor used as a thin client)\n- Android Tablets\n\nIn the Google Cast interaction model, the mobile phone, tablet or laptop is the\n**sender** which acts as a remote control to control the playback, and the TV,\ndisplay or docked tablet is the **receiver** which receives instructions from\nthe sender and displays the content from the receiver's Internet connection. All\nthe user actions (taps and swipes) can take place on **both** the sender device\nor the Web Receiver.\n\nCasting relies on the coordination between two or more screens; the sender UI\nand the receiver UI --- they must work together. For example, if you press a\nbutton on a mobile device to pause the content, the TV should indicate that it\nis paused, while the mobile device should provide a play button to resume\nplayback.\n\nConsiderations\n--------------\n\nDue to hardware and resource limitations, there are certain restrictions placed\non Google Cast-enabled applications:\n\n- The Cast device is a low-power device with memory, CPU and GPU limitations, so the Web Receiver application should be as lightweight as possible.\n- For Cast and Google Cast interaction models, tabs, windows or popups can be created in both the Web Receiver or sender app, as well as directly accept user input, such as taps or swipes. For example, the Web Receiver app on a docked tablet or display can display a pause button and receive a user's tap. In this way, *all* actions on the application must be triggered from either a Web Receiver or sender application.\n- Smart Displays support user input through a sender app or via touch on the UI.\n- The Web Receiver is a Chrome browser optimized for video playback. As such, WebGL and Chrome Native Client (NaCL) are not currently supported, nor are Chrome extensions.\n- Cast supports a single concurrent media stream playback in the `\u003caudio\u003e` and `\u003cvideo\u003e` tags, or multiple audio tracks using the WebAudio API. Only one video element may be active in the DOM at any time. Additionally, video compositing, manipulation, transformations, rotations or zooming are not supported.\n\nOverall design principles\n-------------------------\n\nKeep the following in mind as you develop your user interface.\n\n**Web Receiver interface:**\n\n- The Web Receiver can have both interactive elements and informational elements to describe the state of the app, such as paused or playing, or error messages. User interaction can take place on the Cast sender (phone, tablet, or Chrome browser) or the Web Receiver (TV, displays, or tablets).\n- Remember that the video action is happening in the middle of the TV screen, and your UI elements should not interfere with the presentation. Place UI elements within the lower third of the Web Receiver display, leaving a 10% margin from the edges of the screen for possible [overscan](/cast/docs/caf_receiver/customize_ui#overscan).\n- When possible, transitions from one screen state to another should be smooth and feel cinematic. Rather than abrupt moves from state to state, use transitions like fade-in and fade-out. For example, the content-loading state lingers on-screen and fades into the media playing experience.\n\n**Sender interface:**\n\n- The sender supports user actions and the Web Receiver displays state information. For example, if content is paused, the TV should indicate that it is paused, while the mobile device indicates it is ready to start playing (for example, showing the user a play button).\n- Speed matters. Users need to be able to quickly locate the casting control and see content start playing immediately on the large screen. While content is loading, provide animated loading indicators and use transitions to help make things feel faster.\n\nThe easiest way to ensure that your Cast application follows these principles is\nto review your user interface with the Cast [Design Checklist](/cast/docs/design_checklist)\nand [test your Cast applications](/cast/docs/testing).\n\nBrand guidelines\n----------------\n\nThe following Google Cast brand guidelines are for app developers and focus on\nthe additional requirements you must comply with to describe your app in text.\nFor Cast devices brand guidelines see the\n[Partner Marketing Hub](https://partnermarketinghub.withgoogle.com/brands/google-cast/overview/brand-introduction/).\nYou can let others know that your app works with Google Cast by using\nthe term \"Google Cast-enabled\". However be sure that your app complies\nwith the Cast [SDK Additional Developer Terms of Service](/cast/docs/terms)\nand the [Design Checklist](/cast/docs/design_checklist), and that your\nuse of \"Google Cast-enabled\" complies with our branding guidelines.\n\nYou can similarly use a [Google Cast badge](#google_cast_badge)\nas long as your app or device complies with our badging guidelines. Google\nreserves the right to request that you modify or cease your use of the badge if\nit does not comply with the brand guidelines.\n\n### \"Google Cast\" in text\n\n- When describing an app (not a hardware product) as being Cast-enabled, use the phrase \"Google Cast-enabled\". For example: \"This app is Google Cast-enabled\".\n- When describing a Cast compatible third-party hardware product, use \"This {TV} works with Google Cast\", \"These {speakers} work with Google Cast\".\n- When written in text, \"Google\" and \"Cast\" should be capitalized.\n- In any marketing asset that uses \"Google Cast\" in text or the badge/logo, you must include the following legal attribution: Google Cast is a trademark of Google LLC.\n- Don't put Google Cast in the title of the app (such as XYZ Google Cast App).\n\n### Google Cast-enabled app messaging\n\nYou can promote your app as follows:\n\n- \"XYZ is a Google Cast-enabled app which lets you stream your favorite entertainment from your mobile device to your TV.\"\n- \"The XYZ app is now available for TVs that work with Google Cast.\"\n- \"The XYZ app is now available for all Google Cast products including Google Chromecast, Google Cast Audio, and TVs and speakers that work with Google Cast.\"\n- \"The XYZ app is Google Cast-enabled, allowing you to enjoy all your favorite shows/movies/music/games on your TV that works with Google Cast.\"\n- \"The XYZ app now has Google Cast support, allowing users to stream content from their phone to their TV that works with Google Cast.\"\n\n### Google Cast badge\n\nYou can use the \"Google Cast\" badges on your website, app store listing,\nmarketing materials and promotional materials to display compatibility with\ndevices that use the Cast protocol.\n\n- Don't modify the color, proportions, spacing or any other aspect of the badge image.\n- When used alongside logos for other ingredient technologies (for example, Bluetooth, Spotify Connect, AirPlay, etc.), the Google Cast badge must be of equal or greater size.\n- Don't make the badge the primary element on your page.\n- Keep some distance between the badge and other logos and icons on your page.\n- When used on white, light, or medium-toned background, use a black badge.\n- When used on a black or dark-toned background, use the white badge.\n- Don't use the badge on a page that contains or displays adult content, promotes gambling, promotes violence, contains hate speech, involves the sale of tobacco or alcohol to persons under twenty-one years of age, violates other applicable laws or regulations or is otherwise objectionable.\n\n### Badge linking\n\nWhen used online, the Google Cast badge must link to one of the following:\n\n- Google's list of Google Cast-enabled apps and products at [g.co/castapps](http://g.co/castapps).\n- A list of products published by you.\n- A specific product detail page published by you.\n- A list of apps published by you.\n- A specific app detail page published by you, on Google Play, or in the Apple App Store.\n\n### Download Google Cast badge assets\n\nThe download bundle includes Portable Network Graphics (.png), Adobe\nIllustrator (.ai), and Enapsulated Postscript (.eps) formats.\n\n- [Partner Hub Downloads page](https://partnermarketinghub.withgoogle.com/brands/google-cast/downloads/)\n\n### Preview Google Cast badges\n\nRefer to the [Partner Hub Badges Guidelines page](https://partnermarketinghub.withgoogle.com/brands/google-cast/visual-identity/visual-identity/#badge-guidelines)\nfor all available badges and instructions on usage."]]