Android ユーザーは、オーディオブック、音楽、ポッドキャスト、ラジオなど、さまざまなメディアタイプを利用しています。ユーザーがスマートウォッチでメディア コンテンツに手軽にアクセスできるアプリを設計することが重要です。スマートウォッチは、スマートフォンやタブレットと比べて操作時間がはるかに短いため、操作のしやすさと速さを重視する独自のサーフェスです。
詳しくは、GitHub のメディア ツールキットをご覧ください。
メディアアプリのアーキテクチャ
Wear OS の設計要件を満たすメディアアプリを作成します。多くの場合、メディアアプリには、参照ページとエンティティ ページがあります。
![](https://developer.android.com/static/wear/images/media-apps/MP_2_Browse.png?authuser=9&hl=ja)
探す
再生するメディアを検索できます。ダウンロードしたアイテムを優先して、ユーザーが再生をすばやく開始または再開できるようにします。
![](https://developer.android.com/static/wear/images/media-apps/MP_3_Entity.png?authuser=9&hl=ja)
Entity(エンティティ)
特定のメディア アイテムに関する詳細情報をユーザーに提供します。ダウンロード、再生、シャッフルなどの重要なコンテキストや重要なアクションを、すぐに利用できるようにする必要があります。
アプリ階層を削減して、ユーザーにメディアを公開します。フラットな情報アーキテクチャで設計し、ユーザーがすばやくリストにアクセスしてサムネイルを表示できるようにします。Wear OS にはカスタム デザイン コンポーネントの使用を検討してください。詳しくは、チップとカードのデザインに関する推奨事項をご覧ください。
メディア コントロール画面
メディアアプリには、メディア コントロール用の画面も必要です。5 ボタン レイアウトを使用してメディア コントロールを作成します。これは、最小タップ ターゲット数を満たすためです。以下に、音楽アプリとポッドキャスト アプリのメディア コントロールの例を示します。
コンテンツの種類に応じて、表示するメディア コントロールを変更します。アクションの数が 5 つを超える場合は、追加ページにユーザーを誘導するオーバーフロー アイコン(3 つの点)を使用します。アプリにカスタムのアイコンやフォントを使用することもできます。
![](https://developer.android.com/static/wear/images/media-apps/Image-MediaVolume.png?authuser=9&hl=ja)
音量を調整する
音量調節は、スマートウォッチを使用するユーザーにとって最も重要なメディア コントロールの 1 つです。メディア コントロールには、音量コントロール画面を表示するための音量ボタンを含める必要があります。
ほとんどの Wear OS デバイスには、回転サイドボタン(RSB)またはベゼルが搭載されています。一部の Wear OS デバイスには、音量を調整するための追加ハードウェア ボタンも搭載されています。音量の調整には、RSB、ベゼル、または追加ボタンを使用します。例に示すように、RSB またはベゼルが回転したときにのみインジケーターを表示します。
一般的なユースケース
メディアアプリを設計する際は、次の重要なユースケースを優先してください。
- ダウンロードしたメディアを聞く
- スマートウォッチから音楽をストリーミングする
ダウンロードしたメディアを聴く
ユーザーがエンティティ ページからメディア アイテムを手動でダウンロードできるようにする必要があります。
次の例に示すように、コンテンツをダウンロードする場所、ダウンロードの進行状況、ダウンロードにかかった時間、ダウンロードのサイズをユーザーに伝えます。
ユーザーがメディアをブラウジングしたら、最後にダウンロードしたメディアを表示します。
コンテンツがすでにダウンロードされている場合は、ウォッチからダウンロードを削除するアクションを表示して、これを明確にします。この場合は、次の画像に示すように、ダウンロードがスマートウォッチで占有している容量も示す必要があります。
ソースデバイスがスマートウォッチの場合は、音楽を聴き始める前にヘッドセットを接続するようユーザーに促します。ヘッドセットが接続されたら、メディアを再生し、メディア コントロールを開きます。
スマートウォッチから音楽をストリーミングする
スマートウォッチからメディアをストリーミングすると、Wear OS デバイスのバッテリーに大きな影響を与えます。最近使用したダウンロード コンテンツがブラウズリストに表示されるようにすることで、ユーザーが Wear OS デバイスで再生することを選択した場合に、ダウンロードしたコンテンツを優先します。次の画像に示すように、ダウンロードの全一覧にユーザーを誘導するボタンを追加することを検討してください。
詳しくは、GitHub のメディア ツールキットをご覧ください。
アダプティブ レイアウト
メディアアプリの大画面適応は、メディア プレーヤーのエクスペリエンスのみに焦点を当てています。その他の要素はすべて、チップ、ボタン、ダイアログ、リストの各ページでキャプチャされ、大画面に対応するためのアプリの適切な動作について説明しています。
ボタンの構成
タップ ターゲットのサイズの原則に沿って、225 dp 未満の Wear OS デバイスでは 2 ボタン レイアウトを、画面の大きいデバイスでは 3 ボタン レイアウトを表示します。次の図は、1 ボタン レイアウトや、ロゴ付きの 2 ボタン レイアウトなど、その他の例の概要を示しています。
![](https://developer.android.com/static/wear/images/media-apps/MP_11_BC1.png?authuser=9&hl=ja)
![](https://developer.android.com/static/wear/images/media-apps/MP_11_BC2.png?authuser=9&hl=ja)
![](https://developer.android.com/static/wear/images/media-apps/MP_11_BC3.png?authuser=9&hl=ja)
![](https://developer.android.com/static/wear/images/media-apps/MP_11_BC4.png?authuser=9&hl=ja)
![](https://developer.android.com/static/wear/images/media-apps/MP_11_BC5.png?authuser=9&hl=ja)
![](https://developer.android.com/static/wear/images/media-apps/MP_11_BC6.png?authuser=9&hl=ja)
レスポンシブ コントロール ボタン
225 dp より大きい Wear OS デバイスでは、メイン コントロール(再生/一時停止)が 60 dp から 80 dp にスケーリングされます。これにより、中央のセクションの高さが 80 dp になるため、その中のすべてのコントロールのタップ ターゲットが増加します。これはレスポンシブ動作に組み込まれており、メディア プレーヤー テンプレートから継承されます。
![](https://developer.android.com/static/wear/images/media-apps/MP_12_Atom.png?authuser=9&hl=ja)
さまざまな画面サイズでのスケーリング:
<225 dp: 60 dp x 60 dp
>225 dp: 80 dp x 80 dp
マーキーの動作
ヘッダー内では、共通するマージンとして 9.38%、追加の曲のタイトルのマージンを 4.16% とします。スクロールするタイトルには 8 dp のグラデーションを使用し、アイコンが存在する場合はさらに 8 dp のギャップを追加します。アイコンの下に、位置が固定されたマーキー スクロール遷移を含めます。
![](https://developer.android.com/static/wear/images/media-apps/MP_13_MB1.png?authuser=9&hl=ja)
ヘッダーの Atom マージン
9.38%
曲タイトルの内部マージン
4.16%
グラデーション
8 dp ブリード
アイコンのギャップ
8 dp
![](https://developer.android.com/static/wear/images/media-apps/MP_13_MB2.png?authuser=9&hl=ja)
![](https://developer.android.com/static/wear/images/media-apps/MP_13_MB3.png?authuser=9&hl=ja)
![](https://developer.android.com/static/wear/images/media-apps/MP_13_MB4.png?authuser=9&hl=ja)
![](https://developer.android.com/static/wear/images/media-apps/MP_13_MB5.png?authuser=9&hl=ja)
ターゲットをタップ
画面の大きな Wear OS デバイスでは、中央セクションとフッター セクションにあるアイコンで追加のスペースを活用して、タップ ターゲットのサイズを大きくします。つまり、固定の制御アトム以外では、「利用可能なスペースを埋める」ことができます。各プロパティはアイコン コンテナに適用されます。
![](https://developer.android.com/static/wear/images/media-apps/Content Shot.png?authuser=9&hl=ja)
Wear OS の小さな画面
<225 dp
![](https://developer.android.com/static/wear/images/media-apps/media-tap-target-3.png?authuser=9&hl=ja)
より大きな Wear OS 画面
>225 dp