キャスト アイコン
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
キャスト アイコンをクリックすると、ウェブ レシーバへの接続、制御、切断を行うためのダイアログが開きます。
キャスト アイコンのテンプレートをダウンロードするには、キャスト アイコンをご覧ください。
キャスト アイコンは Google Cast 固有のものではなく、ウェブ レシーバと非ウェブ レシーバ（Bluetooth ヘッドセットなど）の両方を表すために使用できます。ウェブ レシーバは常にキャスト ダイアログに表示され、別のダイアログ、メニュー、コントロールに表示されることはありません。
キャスト アイコンを導入することで、既存のユーザーにセンダーアプリがキャストをサポートしていることを知らせ、Google Cast を初めて使用するユーザーをサポートできます。
必須
A ウェブ レシーバが初めて利用可能になったときに、キャストの紹介画面を表示します。iOS 送信側の場合、キャスト ボタンが初めて表示されたときにキャストの紹介画面を表示します。
B キャスト ボタンを視覚的にハイライト表示する（ボタンを丸で囲むなど）
C キャスト ボタンの仕組みを説明する（「タップして動画をテレビにキャスト」などのメッセージを表示するなど）
Android
キャストの概要
ホーム画面をキャストする
iOS
キャストの概要
ホーム画面をキャストする
Chrome
キャストの概要
ホーム画面をキャストする
必須
A 再生可能なコンテンツがあるすべての画面でキャスト ボタンが表示され、コンテンツの閲覧中または再生中に一貫した位置に配置されている必要があります。また、Chrome のヘッダーにも表示され、グローバル コントロールとして使用できます。
B Chrome では、ウェブ レシーバが利用できない場合、キャスト アイコンが非表示になることがあります。Android と iOS の送信側では、デバイスが Wi-Fi に接続されているときは常にキャスト ボタンが表示されるようにする必要があります。これにより、ユーザーがローカル ネットワークへのアクセスをオフにした結果、デバイスが検出できなくなった場合に、適切なヘルプを提供できます（詳しくは、iOS の権限と検出をご覧ください）。
C モバイルアプリでは、キャスト ボタンは右側に配置する必要があります。
D Chrome では、キャスト アイコンはコンテンツ メディア コントロールの右側に表示される必要があります（埋め込み動画など）。メディア コントロールに全画面ボタンが含まれている場合は、その左側にキャスト ボタンを配置します。
注
Google Cast はマルチタスク モデルを採用しているため、ユーザーはキャスト中に送信側アプリや他のアプリをブラウジングできます。キャスト ボタンは、再生可能なコンテンツがあるすべての画面で表示されるようにする必要があります。これにより、ユーザーはテレビで再生中のコンテンツを一時停止または停止する場所を探す必要がなくなります。
Android
送信者の接続が解除されました
ホーム画面をキャストする
iOS
送信者の接続が解除されました
ホーム画面をキャストする
Chrome
送信者の接続が解除されました
ホーム画面をキャストする
必須
A 切断: ウェブレシーバーが利用可能な場合、キャスト ボタンが表示されます。
B 接続中: ウェブレシーバーが接続中の場合、キャスト ボタンのアイコンの波が徐々にアニメーション表示されます（詳しくは下記の注をご覧ください）。
C 接続済み: このアプリがキャスト ウェブレシーバーに接続されている場合、キャスト ボタンが塗りつぶされたフレームの形で表示されます。
ベスト プラクティス
ボタンの各状態に、アプリの他の UI 要素のスタイルに合った色を使用します。オン / 接続状態に目立つハイライト色（黄色など）を使用することは任意です。
注
- キャスト アイコンは Chrome、Android、iOS に表示され、キャスト デバイスの有無にかかわらず、キャスト拡張機能にアクセスできます。
- キャスト API への接続に予想よりも時間がかかると、接続中（アニメーション）状態が表示されます（Android と Chrome SDK はキャスト アイコンを自動的にアニメーション表示します）。接続が完了すると、ウェブ レシーバー アプリが起動します。
- キャスト アイコンのオン / 接続状態が更新され、アイコン フレーム内で塗りつぶしが使用されるようになりました。新しいキャスト アイコンとアイコン テンプレートは
こちらで入手できます。
Android
送信側、キャストの接続が切断されました
ホーム画面をキャストする
送信側、キャストに接続中
ホーム画面をキャストする
送信側、キャスト接続済み
Web Receiver アプリの読み込み
送信側、キャスト接続済み
Web Receiver アプリが読み込まれた / アイドル状態
iOS
送信者、キャストを利用できない
ホーム画面をキャストする
送信側、キャストの接続が切断されました
ホーム画面をキャストする
送信側、キャストに接続中
ホーム画面をキャストする
送信側、キャスト接続済み
Web Receiver アプリの読み込み
送信側、キャスト接続済み
Web Receiver アプリが読み込まれた / アイドル状態
Chrome
送信者、キャストを利用できない
接続状態に関係なく、Chrome にキャスト アイコンが表示され、キャスト拡張機能にアクセスできるようになります。
ホーム画面をキャストする
送信側、キャストの接続が切断されました
ホーム画面をキャストする
送信側、キャストに接続中
ホーム画面をキャストする
送信側、キャスト接続済み
Web Receiver アプリの読み込み
送信側、キャスト接続済み
Web Receiver アプリが読み込まれた / アイドル状態
このデザイン ガイドで使用されている画像は、Blender Foundation の提供によるもので、著作権またはクリエイティブ・コモンズ ライセンスに基づいて共有されています。
- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute /
www.elephantsdream.org
- Sintel: (c) コピーライト: 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
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2025-07-26 UTC。
[null,null,["最終更新日 2025-07-26 UTC。"],[[["\u003cp\u003eThe Cast button, used for connecting to Web Receivers and other devices, should be visible on every screen with playable content.\u003c/p\u003e\n"],["\u003cp\u003eUsers should be introduced to the Cast button's functionality with a highlight and explanatory message, especially on first use.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button has distinct visual states (Disconnected, Connecting, Connected) to indicate the connection status.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button should be consistently positioned, typically on the right side of the UI in mobile apps and Chrome's content media controls.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Cast allows for multitasking, enabling users to browse other apps while casting content.\u003c/p\u003e\n"]]],["The Cast button facilitates connections to Web Receivers, allowing users to control and disconnect. It should be consistently visible on all screens with playable content, positioned on the right in mobile apps and to the left of the fullscreen button in Chrome media controls. The button has distinct states: disconnected, connecting (animated), and connected (filled frame). Users should receive an introduction to the Cast feature, including visual highlights and explanatory messages.\n"],null,["# Cast Button\n\nThe Cast button opens a dialog to connect, control, and disconnect from Web Receivers.\n\nSee [Cast icons](/cast/docs/get-started#download_cast_icons_optional) to download the Cast button templates.\n\nNote that the Cast button is not specific to Google Cast; it can be used to represent both Web\nand non-Web Receivers (like Bluetooth headsets). Web Receivers should always appear under the\nCast dialog, and never under another dialog, menu, or control.\n\n### [Introduce Cast to users](#prompting)\n\nIntroducing the Cast button helps existing users know that the sender app now supports Casting\nand also helps users new to Google Cast.\n\n\n**Required**\n\n\nA Show a Cast introduction screen the first time\nWeb Receivers are available. For iOS senders, show a Cast introduction\nscreen the first time the Cast button appears.\n\n\nB Visually highlight the Cast button by circling the\nbutton)\n\n\nC Explain how the Cast button works (for example,\ndisplaying a message such as \"Touch to cast videos to your TV\") \n\n### Android\n\nCast introduction \nCast home screen \n\n### iOS\n\nCast introduction \nCast home screen \n\n### Chrome\n\nCast introduction \nCast home screen \n\n### [Cast button availability](#sender-cast-icon-available)\n\n\n**Required**\n\n\nA The Cast button must\nbe visible from every screen where there is playable content, and located in a consistent position\nwhile browsing or playing content. It will also appear in Chrome's header for global control.\n\n\nB In Chrome, the Cast button can be hidden\nwhen Web Receivers aren't available. For Android and iOS senders,\nthe Cast button should always display when the device is on Wi-Fi, so proper help can be given\nif the user has turned off local network access and devices become undiscoverable as a result\n(see [iOS Permissions and Discovery](/cast/docs/ios_sender/permissions_and_discovery)\nfor more details).\n\n\nC In mobile apps, the Cast button should be on the right\nside.\n\n\nD In Chrome, the Cast button should be on the right side in\nthe content media controls (for example, see embedded video). If the media controls contain a fullscreen\nbutton, place the Cast button to the left of it.\n\n**Note**\n\nGoogle Cast employs a multi-tasking model, which allows users to browse the sender app and\nother apps while casting. The Cast button must be visible from every screen where there is\nplayable content, so the user doesn't have to hunt to find where to pause or stop the content\nplaying on TV. \n\n### Android\n\nSender disconnected \nCast home screen \n\n### iOS\n\nSender disconnected \nCast home screen \n\n### Chrome\n\nSender disconnected \nCast home screen \n\n### [Cast button states](#sender-cast-icon-states)\n\n\n**Required**\n\n\nA Disconnected: When Web Receivers are available, the\nCast button appears\n\n\nB Connecting: When the Web Receiver is connecting, the\nCast button animates the waves in the icon progressively (for details, see note below)\n\n\nC Connected: When this app is connected to the Cast\nWeb Receiver, its Cast button appears with a filled frame shape\n\n\n**Best practices**\n\n\nFor each of the button states, use colors that match the style of other UI\nelements of your app. Using a distinct highlight color (such as yellow) for the ON / Connected\nstate is optional.\n\n\n**Notes**\n\n- The Cast icon displays on Chrome, Android, and iOS to provide access to the Cast extension regardless of the availability of Cast devices.\n- The Connecting (animated) state appears when the connection to the Cast API takes longer than expected (the Android and Chrome SDK's will automatically animate the Cast icon). Once connected, the Web Receiver app launches.\n- The ON / Connected state of the Cast icon has been updated and now uses a solid fill within the icon frame. The new Cast icon and icon templates are available [here](/cast/docs/get-started#download_cast_icons_optional).\n\n\u003cbr /\u003e\n\n### Android\n\nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### iOS\n\nSender, Cast unavailable \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### Chrome\n\nSender, Cast unavailable\n\nThe Cast icon displays in Chrome to provide access to the Cast extension regardless of the connection state. \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n**Images used in this design guide**\nare courtesy of the Blender Foundation, shared under copyright or Creative Commons license.\n\n- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org\n- Sintel: (c) copyright Blender Foundation \\| www.sintel.org\n- Tears of Steel: (CC) Blender Foundation \\| mango.blender.org\n- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org"]]
