概要
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
Android ユーザーは、音楽、ポッドキャスト、オーディオブック、ラジオなどのさまざまなメディアタイプを利用しています。ユーザーがスマートウォッチでメディアに簡単にアクセスできるアプリを設計します。スマートウォッチは、スマートフォンやタブレットと比べて操作時間がかなり短いため、操作のしやすさや速さを優先します。

メディアアプリのアーキテクチャ
メディアアプリには特定の制約と要件があるため、利用可能なメディアの閲覧や特定のメディア エンティティの詳細の表示などの主なユースケースに焦点を当ててください。
参照
ダウンロードしたアイテムを優先して、ユーザーがメディアやコンテンツを見つけやすくします。
エンティティ ページ
メディア アイテムに含まれる情報をユーザーに提供します。重要なコンテキストとアクション(手動ダウンロード、再生、シャッフルなど)をすぐに利用できるようにします。
アプリ階層を削減して、ユーザーにメディアを公開します。フラットな情報アーキテクチャを使って、ユーザーがすばやくリストにアクセスしてサムネイルが表示されるようにします。Wear OS ではカスタムのデザイン コンポーネントの使用をご検討ください。
メディア コントロール画面
メディアアプリには、メディア コントロール用の画面が含まれます。メディア コントロールの作成には 5 ボタン レイアウトを使用します。5 ボタン レイアウトは、最小タップ ターゲット数を満たすのに役立ちます。以下に、音楽アプリとポッドキャスト アプリまたはオーディオブック アプリのメディア コントロールの例を示します。
音楽
ポッドキャストまたはオーディオブック
アクションの数が 5 つを超える場合は、追加ページにユーザーを誘導するオーバーフロー アイコン(3 つの点)を使用します。コンテンツの種類に応じて、表示するメディア コントロールを変更します。アプリにカスタムのアイコンやフォントを使用することもできます。
音楽
ポッドキャストまたはオーディオブック
音量を調整する
音量コントロールは、スマートウォッチのユーザーにとって重要なメディア コントロールです。メディア コントロールには、音量コントロール画面に移動して、使用中の出力デバイス(ヘッドフォンなど)を示すデバイスの音量ボタンが含まれます。
ほとんどの Wear OS デバイスには、回転サイドボタン(RSB)またはベゼルが搭載されています。一部の Wear デバイスには、音量を調整するための追加ハードウェア ボタンも搭載されていることがあります。音量の調整には、RSB、ベゼル、または追加ボタンを使用します。メディア コントロール画面で、次の例に示すように、RSB またはベゼルが回されたときのみ音量インジケーターを表示します。
RSB またはベゼルが回されたときのみインジケーターを表示します。
Stepper コンポーネント: 音量と出力の操作
再生キューを管理する
再生キューには次の 2 種類があります。
- 前の曲のない再生キュー。
- 前の曲を含む再生キュー。
ユーザーが再生キューを効果的に操作できるようにするには、次の例に示す一貫したパターンを使用します。

前の曲が
ない再生キュー

前の曲を含む再生キュー
常に表示状態のディスプレイ(AOD)
デベロッパーは、カスタムのアンビエント モード レイアウトを作成することもできます。これにより、メディア コントロールなどの継続的なエクスペリエンスがサポートされます。これらのレイアウトは長時間画面に表示されるため、点灯するピクセルの数を制限します。
メディア プレーヤー
アンビエント アクティブ AOD モード(デベロッパーが処理)
コンテンツの電力効率を高めながらユーザーのニーズも満たすため、メディア セッションで頻繁に更新される進行状況インジケーターを削除します。
ユーザーに価値を提供するために進行状況インジケーターを 1 分間に数回更新する必要がある場合は、削除します。たとえば、3 分間の短いオーディオ トラックの進行状況リングは、常時オンモードでは更新頻度が低すぎて役に立ちません。
読み込み状態を処理する
認識されるレイテンシを減らすため、システムは、コンテンツが読み込まれたときに表示される場所を示すプレースホルダと読み込み状態をサポートしています。このアニメーション処理では、読み込み中のコンテンツがオーバーレイされ、読み込み中のレイアウトとコンポーネントと同じ構造が維持されます。読み込み中と読み込み完了の状態間の移行により、自然な移行が実現します。
読み込み中またはプレースホルダの状態
読み込み済み状態
読み込み中またはプレースホルダの状態
読み込み済み状態
タイルをデザインする
メディア タイルでは、選択可能なメディアを表示し、アプリ エクスペリエンスにすばやくアクセスできる効果的な方法を含めます。タイルのメディアデータの更新のデバイス レイテンシは、最大 20 秒になることがあります。そのため、アプリ内機能を制御する一時停止や再生などの直接アクション ボタンは避けてください。
詳細
選択可能なメディア オプション
メディアの再生
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-07-26 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2025-07-26 UTC。"],[],[],null,["# Overview\n\nAndroid users engage with different media types, such as music, podcasts,\naudiobooks, and radio. Design apps that allow users to quickly access media on\ntheir watch. On the watch, prioritize ease and speed of interactions, because\nusers spend much less time interacting with their watch than their phone or\ntablet.\n\nMedia app architecture\n----------------------\n\nMedia apps have specific constraints and requirements, so focus on key use cases\nlike browsing available media or viewing details of a specific media entity. \n\n\u003cbr /\u003e\n\n**Browse**\n\nHelps users find media and content by prioritizing downloaded items.\n\n\u003cbr /\u003e\n\n**Entity page**\n\nGive users more information about what a media item contains. Provide important\ncontext and actions---such as manual download, play, or shuffle---readily.\n\n\u003cbr /\u003e\n\nReduce your app hierarchy and expose media for the user. Design with a flat\ninformation architecture that allows users to quickly access lists and showcase\nthumbnails. Consider using custom design components for Wear OS.\n\nMedia controls screen\n---------------------\n\nMedia apps include media controls screens. Create media controls using a\n5-button layout. The 5-button layout helps meet minimum tap targets. The\nfollowing are examples of media controls for a music app and a podcast or\naudiobook app. \n**Music** \n**Podcasts or audiobooks**\n\n\u003cbr /\u003e\n\nIf you include more than 5 actions, use a three-dot overflow icon to take users\nto an additional page. Adapt the media controls that you display, depending on\nthe type of content. You can use custom icons and fonts for your app. \n**Music** \n**Podcasts or audiobooks**\n\n\u003cbr /\u003e\n\nControl the volume\n------------------\n\nVolume controls are a key media control for users on the watch. Media controls\ninclude a device volume button to enter the volume controls screen and indicate\nthe output device in use, such as headphones.\n\nMost Wear OS devices have a rotating side button (RSB) or a bezel. Certain Wear\ndevices can also have additional hardware buttons to control volume. Use the\nRSB, bezel, or the additional button to control the volume. On the media\ncontrols screen, show the volume indicator only when the RSB or bezel is\nrotated, as shown in the example. \n\n\u003cbr /\u003e\n\nShow the indicator only when the RSB or bezel is rotated\n\n\u003cbr /\u003e\n\nStepper component: Volume and output controls\n\n\u003cbr /\u003e\n\nManage playback queue\n---------------------\n\nPlayback queues have two types:\n\n- Playback queue without previous songs.\n- Playback queue with previous songs.\n\nTo help users interact effectively with the playback queue, use the consistent\npattern shown in the following example. \nPlayback queue **without** previous songs \nPlayback queue **with** previous songs\n\n\u003cbr /\u003e\n\nAlways on Display (AOD)\n-----------------------\n\nDevelopers can also create a custom ambient mode layout. This supports ongoing\nexperiences, such as media controls. Because these layouts remain on the screen\nfor long time periods, limit the number of pixels that are illuminated. \n**Media player** \n**Ambiactive AOD mode** (handled by developers)\n\n\u003cbr /\u003e\n\nTo make content power efficient while also meeting user needs, remove progress\nindicators that update frequently for media sessions.\n\nIf a progress indicator needs to update several times a minute to provide value\nto the user, remove it. For example, a progress ring for a short 3-minute audio\ntrack would update too infrequently to be helpful in always-on mode.\n\nHandle loading states\n---------------------\n\nTo reduce perceived latency, the system supports placeholder and loading states\nthat hint at where content appears once it loads. This animated treatment\noverlays the loading content and follows the same structure of the layout and\ncomponents that are loading. The transition between loading and loaded states\ncreates a natural transition. \n**Loading or Placeholder state** \n**Loaded state**\n\n\u003cbr /\u003e\n\n**Loading or Placeholder state** \n**Loaded state**\n\n\u003cbr /\u003e\n\nDesign tiles\n------------\n\nFor media tiles, show selectable media and include an effective way to quickly\naccess the app experience. Device latency for media data updates on tiles can\nlast up to 20 seconds. Therefore, avoid direct action buttons, such as pause\nor play, that control in-app functions.\n\n[Learn more](/design/ui/wear/guides/surfaces/tiles) \n**Selectable media options** \n**Media playing**\n\n\u003cbr /\u003e"]]