watchos-design-guidelines

watchOS のデザインガイドライン

Apple Watch は、手首に装着する、ひと目で情報を確認できるパーソナルデバイスです。操作は分単位ではなく、秒単位で行われます。あらゆるデザイン上の判断で、理解の速さと操作の簡潔さを最優先してください。

---

1. ひと目でわかるデザイン（最重要）

watchOS を特徴づける制約です。手首を上げてから 2 秒以内に重要な情報を読み取れない場合、デザインは失敗です。

ルール

• W-GL-01：主要な情報はスクロールせずに表示してください。最初の画面だけが、確実に表示できる画面です。
• W-GL-02：操作セッションは 5 秒以内を目標にしてください。手首を上げて、ひと目で確認し、下ろす使い方を想定して設計してください。
• W-GL-03：大きくコントラストの高いテキストを使用してください。本文の実用上の最小サイズは 16pt（システムフォント）です。タイトルは 18pt 以上にしてください。
• W-GL-04：テキストは必要な内容に限定してください。積極的に省略または短縮してください。意味が明確な場合は、テキストラベルの代わりに SF Symbols を使用してください。
• W-GL-05：手首を下ろしている時間を考慮してください。手首を下ろすと、アプリは非アクティブ状態になります。ユーザーが継続して注目していると想定しないでください。
• W-GL-06：画面ごとに 1 つの情報を優先してください。複数のデータを表示する場合は、サイズ、太さ、色で明確な視覚的階層を設けてください。

画面サイズの参考

デバイス	画面幅	画面の高さ	角の半径
41mm (Series 9)	176px	215px	36px
45mm (Series 9)	198px	242px	39px
42mm (Series 10)	180px	220px	37px
46mm (Series 10)	205px	251px	40px
49mm (Ultra 2)	205px	251px	40px

避けるべきパターン

• 文脈を理解するためにスクロールが必要な、長文の羅列
• 小さくて情報が詰め込まれたデータテーブル
• 有益な情報を表示する前に複数回のタップを要求すること
• iPhone の画面レイアウトを Watch にそのまま再現すること

---

2. Digital Crown（重要）

Digital Crown は、スクロールや値の精密な選択に使う主要な物理入力です。触覚フィードバックを提供し、意図のある操作感にしてください。

ルール

• W-DC-01：縦方向のコンテンツをスクロールする際は、Digital Crown を主要な操作方法として使用してください。スクロールをスワイプ操作だけに頼らないでください。
• W-DC-02：値の選択機能（時刻、数量、スライダー）では、Crown を精密な調整に割り当て、値を 1 つずつ切り替えるたびに触覚フィードバックを与えてください。
• W-DC-03：システムの Crown 操作を上書きしたり、競合させたりしないでください。システムはメディア再生中の音量調整、システム UI のスクロール、コンプリケーションの Time Travel に Crown を使用します。
• W-DC-04：Crown の回転に同期した視覚的フィードバックを提供してください。UI は Crown の入力に対して、知覚できる遅延なくフレーム単位で応答する必要があります。
• W-DC-05：Crown を回すたびに更新してください。値、選択状態、ハイライト状態は、回転の刻みごとに移動する必要があります。ジェスチャーが終わるまで Crown の入力を間引かないでください。

正しい例 — 触覚フィードバックの刻みを伴う Crown の割り当て：

struct VolumePickerView: View {
    @State private var volume: Double = 0.5

    var body: some View {
        VStack {
            Text("\(Int(volume * 100))%")
                .font(.title.bold())
            Image(systemName: "speaker.wave.3")
        }
        .focusable()
        .digitalCrownRotation(
            $volume,
            from: 0.0,
            through: 1.0,
            by: 0.05,
            sensitivity: .medium,
            isContinuous: false,
            isHapticFeedbackEnabled: true
        )
    }
}

誤った例 — Crown を無視し、タッチのみの操作を強いる：

struct VolumePickerView: View {
    @State private var volume: Double = 0.5

    var body: some View {
        Slider(value: $volume)
        // No .digitalCrownRotation — Crown input is ignored
        // Users must use touch-only, which is imprecise and frustrating on Watch
    }
}

避けるべきパターン

• Crown を無視し、すべての操作をタッチで行わせること
• システムの想定と競合する独自の Crown 操作
• 値を 1 つずつ変更する際の触覚フィードバックがないこと
• Crown の回転に対する応答が遅い、またはまとめて処理されること

---

3. ナビゲーション（重要）

Watch のナビゲーションは浅く、予測しやすいものにしてください。ユーザーが迷ったり、既知の状態に戻れなくなったりしてはいけません。

ルール

• W-NV-01: コンテンツのナビゲーションには、縦スクロールをデフォルトとして使用します。ページは Digital Crown で上から下へスクロールします。
• W-NV-02: 最上位のセクションには TabView を使用します（タブは最大 5 つ）。タブ間は横にスワイプして移動します。各タブは、それぞれ独立した機能領域にします。
• W-NV-03: 階層的な詳細表示には NavigationStack を使用します。階層は最大 2～3 レベルに制限します。プッシュされるすべてのビューには、戻るボタン（システムが自動で提供）を設けます。
• W-NV-04: 主要なワークフローでは、モーダルシートを避けます。モーダルは、確認や簡単な入力など、目的を絞った単一のタスクに限定します。
• W-NV-05: アプリで最も重要なアクションには、起動後 1 回のタップでアクセスできるようにします。メニューやナビゲーションの奥に主要な機能を隠さないでください。

ナビゲーションパターンのリファレンス

パターン	使用例	ジェスチャー
縦スクロール	1 つのビュー内の長文コンテンツ	Digital Crown／上下にスワイプ
TabView（横ページ）	アプリの最上位セクション	左右にスワイプ
NavigationStack（プッシュ／ポップ）	階層的な詳細表示	タップしてプッシュ、右にスワイプまたは戻るボタンでポップ
モーダルシート	確認、目的を絞った入力	プログラムで表示し、ボタンまたは下へのスワイプで閉じる

アンチパターン

• 深いナビゲーション階層（4 レベル以上）
• ハンバーガーメニューや非表示のナビゲーションドロワー
• 項目が 5 つを超えるタブバー
• 重要なアクションを見つけるために、長いリストをスクロールさせること

---

4. コンプリケーション（HIGH）

コンプリケーションは、Watch アプリで最も目につく表示領域です。文字盤に表示され、アプリを起動しなくてもデータをひと目で確認できます。

ルール

• W-CP-01: 文字盤との互換性を最大限に高めるため、複数のコンプリケーションファミリーをサポートします。最低限、accessoryCircular、accessoryCorner、accessoryRectangular（WidgetKit、watchOS 9 以降）をサポートします。
• W-CP-02: 単色のバリエーションとフルカラーのバリエーションを両方用意します。単色のコンプリケーションは、システムが単一の色合いを適用した場合でも、読みやすさを保つ必要があります。
• W-CP-03: TimelineProvider でコンプリケーションを更新します。データを予測できる場合（次のカレンダーイベントや天気予報など）は、将来のタイムラインエントリーを用意します。データを最新の状態に保ってください。古いコンプリケーションは信頼を損ないます。
• W-CP-04: コンプリケーションのコンテンツは、背景情報がなくても意味が伝わる必要があります。文字盤をひと目見たユーザーが、データをすぐに理解できるようにします（例：「72」ではなく「72F」）。
• W-CP-05: コンプリケーションをタップしたときは、アプリのルートビューではなく、関連するコンテキストを表示してアプリを起動します。

正しい例 — accessoryCircular コンプリケーション向けの WidgetKit TimelineProvider：

struct StepCountProvider: TimelineProvider {
    func placeholder(in context: Context) -> StepEntry {
        StepEntry(date: Date(), steps: 5000)
    }

    func getSnapshot(in context: Context, completion: @escaping (StepEntry) -> Void) {
        completion(StepEntry(date: Date(), steps: HealthStore.shared.todaySteps))
    }

    func getTimeline(in context: Context, completion: @escaping (Timeline<StepEntry>) -> Void) {
        let entry = StepEntry(date: Date(), steps: HealthStore.shared.todaySteps)
        // Refresh in 15 minutes
        let nextUpdate = Calendar.current.date(byAdding: .minute, value: 15, to: Date())!
        completion(Timeline(entries: [entry], policy: .after(nextUpdate)))
    }
}

struct StepCountComplicationView: View {
    let entry: StepEntry

    var body: some View {
        Gauge(value: Double(entry.steps), in: 0...10000) {
            Image(systemName: "figure.walk")
        } currentValueLabel: {
            Text("\(entry.steps / 1000)k")
        }
        .gaugeStyle(.accessoryCircular)
    }
}

コンプリケーションファミリーのリファレンス

WidgetFamily の値を使用します。

ファミリー	形状	一般的なコンテンツ
accessoryCircular	小さな円形	単一の値、アイコン、またはゲージ
accessoryCorner	上部の角が丸い形状	ラベル付きゲージ、またはアイコン付きテキスト
accessoryRectangular	横長の長方形	複数行のテキスト、グラフ、または詳細ビュー
accessoryInline	テキスト行	短いラベルまたは値

アンチパターン

• 1 つのコンプリケーションファミリーのみをサポートする
• 数時間にわたって更新されない古いデータ
• コンプリケーションをタップすると、関連するコンテンツではなく一般的なアプリのホーム画面が開く
• 色合いモードで読みづらいコンプリケーション（コントラスト不足）

---

5. 常時表示（MEDIUM）

ユーザーが手首を下げると、watchOS は現在のアプリを暗く表示する常時表示状態になります。この状態には、意図的に対応する必要があります。

ルール

• W-AO-01：常時表示状態では視覚的な複雑さを軽減します。アニメーション、二次的な UI 要素、必須ではない詳細を取り除きます。最も重要な情報だけを表示してください。
• W-AO-02：暗くなった状態では、機密情報やプライベートなデータ（メッセージ内容、健康情報、財務情報など）を非表示にします。伏せ字またはプレースホルダーのコンテンツを使用してください。
• W-AO-03：常時表示状態では更新頻度を下げます。ディスプレイの更新は1分に1回までにしてください。時間に応じて変わるコンテンツには、.everyMinute スケジュールを指定した TimelineView を使用してください。
• W-AO-04：システムが提供する減光動作を使用してください。カスタムの減光は実装しないでください。システムは自動的に明るさを下げ、色合いを適用する場合があります。明るさが下がってもコンテンツを読みやすく保ってください。
• W-AO-05：アクティブ状態と常時表示状態の両方をテストしてください。状態間の切り替えはシームレスに感じられる必要があります。手首を上げたときにレイアウトがずれたり、飛んだりしないようにしてください。

アンチパターン

• アクティブ状態と常時表示状態で同一の UI を表示する（バッテリーを無駄にし、プライベートなデータが漏れる可能性があります）
• 常時表示状態でアニメーションを表示したり、頻繁に更新したりする
• アクティブ状態と暗くなった状態の切り替え時にレイアウトがずれる
• 機密情報の伏せ字処理を忘れる

---

6. ワークアウトとヘルス（中）

ワークアウトやヘルスアプリには、長時間のセッション、ライブメトリクス、身体の状態を把握する機能など、独自の要件があります。

ルール

• W-WK-01：ライブのワークアウトメトリクスは、大きくコントラストの高いテキストで表示します。心拍数、継続時間、距離、消費カロリーは、運動を中断せずに読み取れる必要があります。
• W-WK-02：マイルストーン（ラップの完了、目標の達成、心拍ゾーンの変化）には触覚フィードバックを使用します。運動中は画面を見ていない場合があるため、触覚フィードバックは欠かせません。
• W-WK-03：該当するワークアウトの種類（ランニング、ウォーキング）では、自動一時停止の検出に対応します。ユーザーは、動きを止めるとワークアウトが一時停止し、再び動き始めると再開することを期待します。
• W-WK-04：水泳のワークアウト中は WaterLock を有効にします。これにより、画面に水が触れても操作されないよう、タッチスクリーンが無効になります。水を排出してロックを解除するには、Digital Crown を使用します。
• W-WK-05：ワークアウトの完了時には、主要なメトリクスを含む分かりやすい概要画面を表示します。1回の操作でワークアウトを保存または破棄できるようにします。

アンチパターン

• 目を細めたり、読むために立ち止まったりする必要がある小さなメトリクスのテキスト
• 重要なワークアウトのイベントに対する触覚フィードバックがない
• 屋外でのワークアウトで自動一時停止に対応していない
• ワークアウトの終了や保存に複雑な操作を求める

---

7. 通知（中）

Watch の通知は簡潔で、すぐに操作できるものである必要があります。ユーザーが手首を上げるのはほんの一瞬です。

ルール

• W-NT-01：Short Look 通知には、タイトル、アプリアイコン、アプリ名だけを表示するように設計します。これは、ユーザーが手首を上げたときに最初に目にする内容です。通知の目的が瞬時に伝わる必要があります。
• W-NT-02：Long Look 通知には全内容を表示し、最大4つのアクションボタンを設けるように設計します。ユーザーは通知を見続けることで Long Look に移行します。最も役立つアクションを通知内に含めてください。
• W-NT-03：適切な触覚通知タイプを使用します。緊急度に応じて、通常の通知には .notification、肯定的なイベントには .directionUp、否定的なイベントには .directionDown、結果の通知には .success／.failure／.retry を使用します。
• W-NT-04：通知を送りすぎないようにします。通知が多すぎると、ユーザーは通知をすべて無効にしてしまいます。緊急ではない更新はまとめて送信します。Watch の通知は、時間的制約がある情報や操作が必要な情報に限って使用してください。

触覚タイプのリファレンス

触覚	用途
.notification	一般的な通知
.directionUp	肯定的なイベント（目標達成、株価上昇）
.directionDown	否定的なイベント（株価下落、気象警報）
.success	アクションが正常に完了した
.failure	アクションが失敗した
.retry	再試行を促す
.start	アクティビティの開始
.stop	アクティビティの終了
.click	個別の選択（Crown のクリック感、ピッカー）

アンチパターン

• iPhone のすべての通知を Watch に送る
• アクションボタンのない通知（アプリの起動を強制する）
• 内容に関係なく、すべての通知に同じ種類の触覚フィードバックを使用する
• 大量にスクロールしないと読めない長い通知テキスト

---

8. アクセシビリティ（重要）

Apple Watch は VoiceOver などの支援技術に対応しています。コンプリケーションとアプリの UI はアクセシブルである必要があります。

ルール

• W-AC-01：すべての操作可能な要素に、意味のあるアクセシビリティラベルを設定してください。SF Symbol の名前だけでは十分なラベルになりません。画像のみのボタンには .accessibilityLabel() を使用してください。
• W-AC-02：VoiceOver ですべてのアプリコンテンツを移動できる必要があります。アクセシビリティ階層から重要な情報を隠さないでください。
• W-AC-03：カスタムコントロール（ゲージ、進行状況インジケーター、カスタムピッカーなど）には、アクセシビリティ値とヒントを設定してください。.accessibilityValue() と .accessibilityHint() を使用してください。
• W-AC-04：視差効果を減らす設定に対応してください。有効な場合は、装飾的なアニメーションを無効にするか、別の表現に置き換えてください。@Environment(\.accessibilityReduceMotion) を使用してください。
• W-AC-05：太字テキストに対応してください。ユーザーが太字テキストを有効にしたとき、カスタムテキストも適応する必要があります。SwiftUI のダイナミックタイプは自動的に対応しますが、独自に描画するテキストでは @Environment(\.legibilityWeight) を確認してください。
• W-AC-06：コントラストを上げる設定に対応してください。ユーザーがコントラストを上げる設定を有効にしたとき、カスタムカラーにはより高いコントラストのバリエーションを用意する必要があります。@Environment(\.colorSchemeContrast) を使用して、ユーザーの設定を検出してください。

適切な例：

Button(action: startWorkout) {
    Image(systemName: "play.fill")
}
.accessibilityLabel("Start workout")

不適切な例：

Button(action: startWorkout) {
    Image(systemName: "play.fill")
}
// VoiceOver reads "play" — not clear what action this performs

アンチパターン

• アクセシビリティラベルのない、画像のみのボタン
• アクセシビリティ値やヒントのないカスタムコントロール
• 視差効果を減らす設定に対応しないアニメーション
• 目の見えるユーザーには表示されるコンテンツを、アクセシビリティツリーから隠す

---

評価チェックリスト

watchOS のデザインや実装をレビューするときは、このチェックリストを使用してください。

一目で分かること

• ユーザーは 2 秒以内に主要なコンテンツを理解できますか？
• 最も重要な情報は、スクロールせずに見えますか？
• 本文のテキストは十分なコントラストを備えた 16pt 以上ですか？
• 操作は 5 秒以内に完了できますか？

Digital Crown

• Crown で縦方向のコンテンツをスクロールできますか？
• 値を選択するピッカーは、触覚フィードバックによる段階的な区切りを提供しますか？
• システムの Crown の動作と競合していませんか？

ナビゲーション

• 起動後 1 回のタップで主要なアクションに到達できますか？
• ナビゲーション階層は 3 レベル以内ですか？
• プッシュされた各ビューに戻るボタンがありますか？
• 該当する場合、最上位のセクションは TabView で整理されていますか？

コンプリケーション

• 複数のコンプリケーションファミリーに対応していますか？
• 色合い付きモードとフルカラーの両方でコンプリケーションが機能しますか？
• コンプリケーションのデータは TimelineProvider 経由で更新されますか？
• コンプリケーションをタップすると、関連するコンテキストが開きますか？

常時表示

• 暗くなった状態では機密データが非表示になりますか？
• 非アクティブ時に視覚的な複雑さが軽減されますか？
• 更新頻度は 1 分に 1 回以下に制限されていますか？
• アクティブ状態と暗くなった状態の切り替えはスムーズですか（レイアウトがずれませんか）？

ワークアウト

• ライブ指標は大きく、コントラストの高いテキストで表示されますか？
• マイルストーンに触覚フィードバックを使用していますか？
• 該当するワークアウトの種類で自動一時停止に対応していますか？
• ワークアウトの概要に、1 回の操作でアクセスできますか？

通知

• Short Look は意味のある内容（タイトル＋アイコン）になっていますか？
• Long Look にインラインアクションが含まれていますか？
• 通知の緊急度に応じた触覚フィードバックの種類が使われていますか？
• 通知の頻度は適切ですか（過剰ではありませんか）？

アクセシビリティ

• すべてのインタラクティブ要素に意味のあるアクセシビリティラベルが設定されている（SF Symbol の名前をそのまま使用しない）
• カスタムコントロールに .accessibilityValue() / .accessibilityHint() を使ってアクセシビリティ値とヒントが設定されている
• VoiceOver ですべてのアプリコンテンツを操作できる（アクセシビリティツリーから重要なコンテンツが隠されていない）
• アニメーションが視差効果を減らす設定（@Environment(\.accessibilityReduceMotion)）に対応している
• 太字テキストの設定に対応している（SwiftUI では自動的に処理されます。カスタムテキストでは @Environment(\.legibilityWeight) を確認します）
• コントラストを上げる設定に対応している（カスタムカラーでコントラストの高いバリエーションを用意します）