Wear OS 向けのデザインのスタートガイド
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
Wear OS 向けのマテリアル デザインにより、魅力的なアプリ エクスペリエンスを実現できます。
ユースケースを把握する
スマートウォッチでは、健康やフィットネスの目標に対する進捗状況の確認など、情報を一目で確認することができます。また、インスタント メッセージへの応答などをすばやく行えます。スマートウォッチ向けアプリをデザインする際は、こうしたユースケースに着目してください。
スマートウォッチのインターフェースには、モバイル デバイスにはない、以下のような固有の使用機会があります。
- 体に密着していることで（センサー、モーション検知により）可能になる入力
- ウォッチフェイスの追加機能、通知、タイルなど、ひと目でわかる情報とアクションに対するすばやいアクセス
スマートウォッチには制約もあります。
- 画面スペースが狭い
- 情報密度が低い
- バッテリー駆動時間が短い
スマートウォッチ向けアプリを設計する際は、プラットフォームの機能と制約の両方を考慮してください。
check_circle
すべきこと
スマートウォッチ インターフェースを使用してタスクを簡単に達成できるエクスペリエンスを設計する。
cancel
すべきでないこと
スプレッドシートのようなアイテムを含む複雑で詳細なアプリを作成する（スマートウォッチでの編集や表示が困難であるため、これは避けてください）。
デザインをテストする
Wear OS デバイスの大半は丸い画面を備えており、正方形のディスプレイより UI のスペースが 22% 少なくなっています。また、円形の画面で文字を読みやすくするには余白を大きくとる必要があります。
Wear OS 向けのマテリアル デザインにより、魅力的なアプリ エクスペリエンスを実現できます。このガイドで説明している原則に沿った Wear OS アプリの例を、スクリーンショットで以下に示します。
check_circle
すべきこと
まず、円形のデバイス向けに設計し、小さなサイズという制約がある中でも、レイアウトに支障がないようにします。
cancel
すべきでないこと
スマートウォッチを着用している人は、立っているとき、手振りをしているとき、バスに乗ろうと走っているときなど、いつでも動いています。ユーザーの動きが伴う状況でデザインをテストし、ひと目で使用できるデザインであることを確認する。
アプリの例
Wear OS 向けのマテリアル デザインにより、魅力的なアプリ エクスペリエンスを実現できます。このガイドで説明している原則に沿った Wear OS アプリの例を、スクリーンショットで以下に示します。
図 1. メディアアプリの例。
図 2. タスク管理アプリの例。
図 3. インスタント メッセージ アプリの例。
図 4. ストップウォッチ アプリの例。
図 5. 電話アプリの例。
図 6. 電卓アプリの例。
このページのコンテンツやコードサンプルは、コンテンツ ライセンスに記載のライセンスに従います。Java および OpenJDK は Oracle および関連会社の商標または登録商標です。
最終更新日 2025-07-27 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-27 UTC。"],[],[],null,["# Getting started designing for Wear OS\n\nMaterial Design for Wear OS helps you design engaging app experiences.\n\nUnderstand use cases\n--------------------\n\nWatches allow users to get information at a glance, such as seeing\nprogress towards health and fitness goals, and to act quickly, like responding\nto an instant message. Focus on use cases like these when designing apps for\nsmartwatches.\n\nThe watch interface presents unique opportunities that are not available\non mobile devices, including:\n\n- Input enabled by a physical body connection (through sensors and motion detection).\n- Quick access to glanceable information and actions, such as complications, notifications, and Tiles.\n\nThe watch also comes with limitations:\n\n- Smaller screen space\n- Lower information density\n- Limited battery life\n\nConsider both the capabilities and limitations of the platform when designing\napps for watches. \ncheck_circle\n\n### Do\n\nDesign experiences where tasks can be accomplished easily using the watch interface. \ncancel\n\n### Don't\n\nDon't create complex, detailed apps that include items like spreadsheets, as this is difficult to edit and view on a watch.\n\nTest designs\n------------\n\nThe majority of Wear OS devices have round screens, which have 22% less UI\nspace than square displays. Round screens also need larger margins for text to\nbe more readable.\n\nMaterial Design for Wear OS helps you design engaging app experiences. The\nfollowing screenshots show a few illustrated examples of Wear OS apps that\nfollow the principles described in this guide. \ncheck_circle\n\n### Do\n\nDesign for round devices first to make sure your layout works within the smaller size constraints. \ncancel\n\n### Don't\n\nPeople wearing watches are regularly in motion, whether they are standing, gesturing, or running to catch a bus. Test your designs in situations that involve user movement to make sure the design is usable at a glance.\n\nApp examples\n------------\n\nMaterial Design for Wear OS helps you design engaging app experiences. The\nfollowing screenshots show a few illustrated examples of Wear OS apps that\nfollow the principles described in this guide.\n\n\n**Figure 1.** An example of a media app.\n\n**Figure 2.** An example of a task management app.\n\n\u003cbr /\u003e\n\n\n**Figure 3.** An example of an instant messaging app.\n\n**Figure 4.** An example of a stopwatch app.\n\n\u003cbr /\u003e\n\n\n**Figure 5.** An example of a dialer app.\n\n**Figure 6.** An example of a calculator app.\n\n\u003cbr /\u003e"]]
