Wear OS 向けのマテリアル デザインは、魅力的なアプリ エクスペリエンスの設計に役立ちます。
ユースケースを把握する
スマートウォッチでは、健康やフィットネスの目標に対する進捗状況の確認など、情報を一目で確認することができます。また、インスタント メッセージへの応答などをすばやく行えます。スマートウォッチ向けアプリをデザインする際は、こうしたユースケースに着目してください。
スマートウォッチのインターフェースには、モバイル デバイスでは提供されない次のような独自の機能があります。
- 体に密着していることで(センサー、モーション検知により)可能になる入力
- ウォッチフェイスの追加機能、通知、タイルなど、ひと目でわかる情報とアクションに対するすばやいアクセス
スマートウォッチには制約もあります。
- 画面スペースが狭い
- 情報密度が低い
- バッテリー駆動時間が短い
スマートウォッチ向けアプリを設計する際は、プラットフォームの機能と制約の両方を考慮してください。
![](https://developer.android.google.cn/static/wear/images/design/get_started_1.png?authuser=0000&hl=ja)
すべきこと
スマートウォッチ インターフェースを使用してタスクを簡単に達成できるエクスペリエンスを設計します。
![](https://developer.android.google.cn/static/wear/images/design/get_started_4.png?authuser=0000&hl=ja)
すべきでないこと
スプレッドシートなどのアイテムを含む複雑で詳細なアプリは、スマートウォッチでの編集や表示が難しいため作成しないでください。
デザインをテストする
Wear OS デバイスの大半は円形の画面を備えており、正方形のディスプレイよりも UI スペースが 22% 少なくなります。また、円形の画面では、テキストを読みやすくするために余白を大きくする必要があります。
Wear OS 向けのマテリアル デザインにより、魅力的なアプリ エクスペリエンスを実現できます。このガイドで説明している原則に沿った Wear OS アプリの例を、スクリーンショットで以下に示します。
![](https://developer.android.google.cn/static/wear/images/design/get_started_3.png?authuser=0000&hl=ja)
すべきこと
まず円形のデバイス向けに設計し、レイアウトが小さいサイズの制約内で機能することを確認します。
![](https://developer.android.google.cn/static/wear/images/design/get_started_2.png?authuser=0000&hl=ja)
すべきでないこと
スマートウォッチを着用している人は、立っているとき、ジェスチャーをしているとき、バスに乗るために走っているときなど、常に動き回っています。ユーザーの動きを伴う状況でデザインをテストし、デザインがひと目で使用可能であることを確認します。
アプリの例
Wear OS 向けのマテリアル デザインにより、魅力的なアプリ エクスペリエンスを実現できます。このガイドで説明している原則に沿った Wear OS アプリの例を、スクリーンショットで以下に示します。
![](https://developer.android.google.cn/static/wear/images/design/example_app_5.png?authuser=0000&hl=ja)
図 1. メディアアプリの例。
![](https://developer.android.google.cn/static/wear/images/design/example_app_4.png?authuser=0000&hl=ja)
図 2. タスク管理アプリの例。
![](https://developer.android.google.cn/static/wear/images/design/example_app_9.png?authuser=0000&hl=ja)
図 3. インスタント メッセージ アプリの例。
![](https://developer.android.google.cn/static/wear/images/design/example_app_1.png?authuser=0000&hl=ja)
図 4. ストップウォッチ アプリの例。
![](https://developer.android.google.cn/static/wear/images/design/example_app_7.png?authuser=0000&hl=ja)
図 5. 電話アプリの例。
![](https://developer.android.google.cn/static/wear/images/design/example_app_6.png?authuser=0000&hl=ja)
図 6. 電卓アプリの例。