Sensory Design

---
user-invocable: false
description: "感覚デザイン（サウンド/ハプティクス/空間知覚）を「アクセシビリティを損なわず、誰もが楽しめる体験」として設計するための判断軸。Web/モバイル/デスクトップ/AR・VRを横断し、将来デバイスへの拡張性も備える。"
---

# sensory-design

視覚以外の感覚チャネル（サウンド・ハプティクス・空間知覚）を活用し、**すべてのユーザーが不快にならず、より楽しく体験できる**感覚フィードバックを設計するための判断軸。

## いつ適用する？

- UI/UXにサウンド（効果音・通知音・空間音響）を導入する相談
- ハプティクス（振動・触覚フィードバック）の設計・実装相談
- マルチモーダルフィードバック（視覚+音+触覚の組み合わせ）の設計
- AR/VR/スマートグラス向けの感覚体験設計
- 既存UIに感覚フィードバックを追加してUXを向上させたいとき
- アクセシビリティを保ちながら感覚的な豊かさを加えたいとき

## 連携スキル

| スキル | 連携ポイント |
|--------|------------|
| `accessibility-engineer` | WCAG準拠・感覚の代替性設計 |
| `animation-principles` | 視覚モーションとサウンド/ハプティクスの同期 |
| `creative-coder` | 感覚フィードバックの実装・パフォーマンス |
| `ui-designer` | 情報設計における感覚チャネルの位置づけ |
| `usability-psychologist` | 認知負荷と感覚刺激のバランス |

---

## 判断軸（5つの共通原則）

すべてのプラットフォーム・感覚チャネルに共通する最上位の設計原則。

### 原則1: 感覚の冗長性（Sensory Redundancy）

> 重要な情報を単一の感覚チャネルに依存させない

- 視覚・聴覚・触覚のうち**1つが利用不可でも同等の情報が得られる**設計にする
- WCAG 1.3.3（感覚的特性）: 「丸いボタンを押して」「ビープ音が鳴ったら」等、感覚だけに依存する指示を避ける
- 音で伝える情報は必ず視覚でも伝え、振動で伝える情報は必ず視覚か音でも伝える
- これはアクセシビリティの基盤であると同時に、全ユーザーの体験を強化する

### 原則2: ユーザー制御の保証（User Control & Opt-in/Off）

> すべての感覚フィードバックはユーザーが制御できなければならない

- 音声・振動・アニメーションには**独立したON/OFF制御**を提供する
- **OSレベルの設定を尊重する**: `prefers-reduced-motion`、サイレントモード、アクセシビリティ設定
- **デフォルトは控えめに**: 強い感覚フィードバックはオプトイン（ユーザーが明示的に有効化）が安全
- ON/OFFだけでなく、**強度レベルの調整**（弱・中・強等）も検討する
- 設定はセッション間で永続化する

### 原則3: 頻度と控えめさの反比例（Frequency-Subtlety Inverse）

> インタラクションが高頻度であるほど、フィードバックは控えめにする

- スクロール・キー入力 → 最小限（微弱な触覚 or なし）
- ボタンタップ・トグル → 軽い確認（短い音 + 軽い振動）
- フォーム送信・状態変化 → 明確な確認（はっきりした音 + 振動）
- エラー・重要通知 → 強調（注意を引く音 + 強い振動）
- **沈黙はビジュアルのネガティブスペースと同等** — 音を使わない選択にも意味がある（Material Design）

### 原則4: マルチモーダルの同期と一貫性（Cross-modal Coherence）

> 視覚・音・触覚は同時にトリガーされ、強度と意味が整合していなければならない

- **同期性**: ボタン押下時は視覚変化 + 音 + 振動を**同時に**トリガーする（遅延は不快を生む）
- **強度の一致**: 柔らかい音には柔らかい振動を、強い視覚エフェクトには強い音を
- **意味の整合**: 対応する視覚/音声キューなしにハプティクスだけを再生しない（ユーザーが混乱する）
- 感覚フィードバックは**後付けではなく設計初期から統合的に**デザインする

### 原則5: コンテキスト適応（Context Awareness）

> デバイスの状態・環境・ユーザーの状況に応じてフィードバックを自動調整する

- サイレントモード/DND → 音を抑制、振動も最小限
- 画面OFF/ロック中 → 通知音のみ、UI音は不要
- 運動中/睡眠中（ウェアラブル）→ 振動強度を自動調整
- AR/VR環境 → Passthrough/Immersionレベルに応じた空間オーディオ調整
- 10フィート体験（TV/ゲーム）→ サウンドの比重を上げる（Windows: デフォルトAutoモード）

---

## 感覚チャネル別ガイド

### A. サウンド（UI音 / 効果音 / 空間音響）

#### 設計原則

1. **注意を「引く」のではなく「稼ぐ」** — サウンドはユーザーの注意を要求するのではなく獲得すべき（Material Design）
2. **UI音の長さは150〜350ms** — 約1/6〜1/3秒が適切。長すぎると煩わしい（Windows）
3. **フォーカスサウンドはローテーション** — 同じ音の繰り返しは単調。4種程度の変種を用意する（Windows）
4. **Earcon（聴覚アイコン）は最小限** — 1インターフェースで使う種類は少なく保つ（学習負荷軽減）
5. **自動再生は禁止** — ブラウザ制約もあり、必ずユーザーのジェスチャーをトリガーにする

#### 音の種類と使い分け

| 種類 | 用途 | 特徴 |
|------|------|------|
| **Auditory Icon（聴覚アイコン）** | ゴミ箱に入れる音、送信音 | 実世界の音に基づく。直感的 |
| **Earcon** | ナビゲーション遷移、状態変化 | 合成音パターン。体系的に構造化可能 |
| **Spearcon** | メニュー読み上げの短縮版 | 音声を圧縮。正確性・反応速度で優れる |
| **空間オーディオ** | AR/VR、没入環境 | 音源を3D空間に配置。方向・距離で情報伝達 |

#### プラットフォーム別注意点

| プラットフォーム | ガイドライン/API | 注意点 |
|----------------|----------------|--------|
| **iOS/macOS** | AVAudioSession, AVFoundation | サイレントモード尊重。AVAudioSession構成がハプティクス再生にも影響 |
| **Android** | SoundPool, AudioManager | 音量はシステム設定に従う。AudioFocus管理が重要 |
| **Windows** | ElementSoundPlayer (XAML) | ONにするとデフォルトコントロールが自動サウンド再生 |
| **Web** | Web Audio API | 自動再生制限あり。ユーザージェスチャー必須。スクリーンリーダーとの干渉に注意 |
| **visionOS** | PHASE framework | 空間オーディオがデフォルト。UI要素から直接音が聞こえるように配置 |

#### アクセシビリティ制約

- WCAG 1.4.2: **3秒以上の音声**には停止/一時停止/音量コントロールが**必須**
- 再生/停止/音量ボタンに**ARIAラベル**を付与する（`role="switch"`でON/OFF状態を伝える）
- スクリーンリーダーもシステム音量で制御されるため、**背景音がスクリーンリーダーと干渉**する可能性がある
- **聴覚障害者**向けにテキスト書き起こし（トランスクリプト）/ 字幕を提供する

### B. ハプティクス（振動 / 触覚フィードバック）

#### 設計原則

1. **Less is More** — 過剰な振動は不快で感覚の麻痺を招く（Android Haptics Principles）
2. **システム定義の定数を優先** — 独自パターンより、OS提供のプリセットで一貫性を保つ
3. **Buzzy（ブザー的）振動は避ける** — 着信等の注意喚起のみ。UI操作にはClear/Rich Hapticsを使う
4. **視覚・音声との協調** — ハプティクスを単独で設計せず、アニメーションや音と同期する
5. **フォールバック必須** — ハプティクス非対応デバイスでは視覚/音声で代替する

#### プラットフォーム別API選択指針

| プラットフォーム | 基本API | 高度なAPI | 注意点 |
|----------------|---------|----------|--------|
| **iOS** | `UIFeedbackGenerator` (3種) | `Core Haptics` (CHHapticEngine) | iPhone 7以降のTaptic Engine必須。prepare/releaseのライフサイクル管理 |
| **Android** | `HapticFeedbackConstants` | `VibrationEffect` (API 26+) | `createOneShot()`は避ける（ブザー感）。デバイスのアクチュエータ差が大きい |
| **Web** | `Vibration API` | — | **iOS非対応**。Android Chrome/Firefox のみ。精度が低い。フォールバック必須 |
| **Meta Quest** | Haptics SDK | Meta Haptics Studio | Quest 2(LRA)とQuest 3(VCM)で表現力が異なる。ランタイムでコントローラー検出 |

##### iOS UIFeedbackGenerator 3階層

| クラス | 用途 | 強度 |
|--------|------|------|
| `UIImpactFeedbackGenerator` | ボタンタップ、トグル、衝突 | .light / .medium / .heavy / .soft / .rigid |
| `UINotificationFeedbackGenerator` | 成功/警告/エラーの通知 | .success / .warning / .error |
| `UISelectionFeedbackGenerator` | ピッカー、スライダーの選択変更 | 固定（軽い刻み） |

##### Android ハプティクス3分類

| 分類 | 用途 | 推奨API |
|------|------|---------|
| **Clear Haptics** | 明瞭で離散的なイベント（ボタン等） | `HapticFeedbackConstants` |
| **Rich Haptics** | テクスチャ感等の表現豊かなフィードバック | `VibrationEffect.Composition` |
| **Buzzy Haptics** | 着信・アラーム等の注意喚起のみ | レガシーVibrator API（UI操作には使わない） |

#### アクセシビリティ制約

- **ハプティクスに依存しない** — 触覚フィードバックは補完手段。唯一の情報伝達手段にしない
- **前庭障害への配慮** — 強い振動パターンがめまい・吐き気を誘発する可能性（特に頭部装着型デバイス）
- **感覚過敏への対応** — 振動の強度カスタマイズと完全OFF設定を必ず提供する
- **キークリックフィードバック**: 10〜20ms程度が適切。長時間振動はアクチュエータのリンギング（20〜50ms残響）に注意

### C. 空間知覚（AR/VR/スマートグラス）

#### 設計原則

1. **空間オーディオを主軸にする** — visionOSでは空間オーディオがデフォルト体験。音源をUI要素の空間位置に配置する
2. **視覚+空間音+ハプティクスの三位一体** — 仮想オブジェクトの操作は3チャネル同期で現実感を高める
3. **Passthrough/Immersionの段階制御** — 没入度に応じてフィードバック強度を調整する
4. **環境テクスチャの触覚模倣** — 仮想表面（草・雪・木等）を振動パターンで表現（Meta Quest）
5. **エルゴノミクス考慮** — 長時間の空間オーディオ/ハプティクスは疲労を招く。休憩の促しを組み込む

#### XRアクセシビリティ（W3C XAUR準拠）

- **マルチモーダル入力**: 音声・キーボード・スイッチ・ジェスチャー・視線追跡を同時サポート
- **モノラルオプション**: 片耳聴覚障害者向けにモノラルオーディオ出力を提供する
- **非必須コンテンツのミュート**: 環境アニメーション・音声・非重要メッセージのOFF機能
- **仮想補助技術**: ハプティクスデバイスによる仮想白杖等の可能性

#### 参照標準

| 標準 | 内容 | 状態 |
|------|------|------|
| W3C XAUR | XRアクセシビリティユーザー要件 | 発行済 |
| ISO 9241-910 | 触覚インタラクションの基本フレームワーク | 発行済 |
| ISO 9241-920:2024 | 触覚ハードウェア/ソフトウェアの要件・推奨 | 改訂済 |
| ISO 9241-971:2020 | 触覚システムのアクセシビリティ | 発行済 |
| ISO/IEC 23090-31:2025 | MPEGハプティクスコーディング | 発行済 |
| ISO 9241-930 | マルチモーダル触覚インタラクション | **策定中** |

### D. 将来参考: 嗅覚・温覚

> 現時点では研究段階。原則のみ記載し、実装指針は将来デバイスの普及時に拡充する。

- **嗅覚ディスプレイ**: OVR Technology等のデバイスが研究用途で存在。コンシューマ向けは未成熟
- **温覚フィードバック**: ペルチェ素子を利用した温冷覚デバイスが研究中。XR手袋等での応用が見込まれる
- **共通原則は同じ**: 感覚の冗長性・ユーザー制御・コンテキスト適応は嗅覚・温覚にも適用される
- **安全性が最優先**: 嗅覚は化学物質、温覚は温度による身体リスクがあり、厳格な安全基準が必要

### E. アドバイザリー: AI生成コンテンツ（音楽・イラスト・動画）

> AI生成ツールで作成できるコンテンツは、ここでは「どういうものが良いか」のアドバイスに留める。
> 制作自体はSUNO（音楽）、AI画像生成（イラスト）、AI動画生成等のツールに委ねる。
> **動き・アニメーションはプログラミングで実装する**（→ `animation-principles`, `creative-coder` を参照）。

#### 音楽・BGM

- **ループ可能な構成**にする（シームレスなリピートで違和感がないこと）
- **ダイナミックレンジを控えめに** — 突然大きい音が出ないようにする（感覚過敏への配慮）
- **テンポとUIリズムの整合** — ゆったりしたUIに速いBGMは不協和。体験全体のトーンに合わせる
- **ジャンル選択は文化を考慮** — 地域・文脈によって音楽の受け取り方は異なる
- **必ずミュート可能にする** — BGMは全ユーザーに好まれるわけではない

#### イラスト・ビジュアル

- **アニメーション可能な構造**で生成する — レイヤー分離、ベクター形式を推奨
- **アクセシビリティ**: alt属性、十分なコントラスト、色だけに依存しない情報伝達
- **文化的配慮**: 手のジェスチャー、色の意味、シンボルの解釈が地域で異なることに注意

#### 動画

- **字幕・キャプション必須** — 聴覚障害者、音を出せない環境のユーザーのため
- **自動再生は避ける** — 特にモバイルでのデータ消費・バッテリーへの配慮
- **`prefers-reduced-motion` を尊重** — 動画の自動再生も対象になりうる
- **WCAG 2.3.1**: 1秒間に3回以上の閃光を含むコンテンツは禁止

---

## 障害種別ごとの配慮一覧

| 障害種別 | 配慮事項 |
|---------|---------|
| **聴覚障害** | 音声フィードバックに必ず視覚/触覚の代替を提供。字幕・テキスト書き起こし |
| **前庭障害** | `prefers-reduced-motion`尊重。パララックス/高速アニメーション回避。振動強度制限 |
| **光過敏（光感受性てんかん）** | 1秒間に3回以上の閃光禁止。赤色閃光の閾値遵守。視覚エフェクト強度制御 |
| **感覚過敏（感覚処理障害）** | 全感覚フィードバックの強度カスタマイズ。輝度・音量・コントラスト・速度のON/OFF |
| **認知障害** | 感覚的手がかりをシンプルに。一度に過剰なモダリティを使わない。一貫したパターン |
| **視覚障害** | 音声・触覚による代替フィードバック。スクリーンリーダーとの干渉回避 |

---

## WCAG 関連基準クイックリファレンス

| 基準 | レベル | 内容 |
|------|--------|------|
| 1.3.3 感覚的特性 | A | 指示を感覚的特性だけに依存させない |
| 1.4.2 音声の制御 | A | 3秒以上の自動再生音声には停止/音量コントロール必須 |
| 2.3.1 3回の閃光 | A | 1秒間に3回以上の閃光を禁止 |
| 2.3.3 インタラクション起因のアニメーション | AAA | 無効化メカニズムの提供 |

---

## やること / やらないこと

| やること | やらないこと |
|----------|------------|
| サウンド/ハプティクス/マルチモーダルの**設計判断** | 作曲・音源制作・波形の詳細設計 |
| プラットフォーム別API**選択の指針** | 特定APIの実装チュートリアル |
| アクセシビリティとの**両立設計** | WCAG全体の網羅（→ `accessibility-engineer`） |
| 新興デバイス（AR/VR）への**拡張性設計** | 特定デバイスSDKの詳細手順 |
| 感覚フィードバックの**オプトイン/オフ設計** | ビジュアルアニメーション設計（→ `animation-principles`） |
| AI生成コンテンツの**品質アドバイス** | AI生成ツールの操作方法 |

---

## 参考リソース

### 公式ガイドライン
- [Apple HIG - Playing Audio](https://developer.apple.com/design/human-interface-guidelines/playing-audio)
- [Apple HIG - Playing Haptics](https://developer.apple.com/design/human-interface-guidelines/playing-haptics)
- [Apple - Designing for visionOS](https://developer.apple.com/design/human-interface-guidelines/designing-for-visionos)
- [Material Design - Sound](https://m2.material.io/design/sound/about-sound.html)
- [Android - Haptics Design Principles](https://developer.android.com/develop/ui/views/haptics/haptics-principles)
- [Windows - Sound](https://learn.microsoft.com/en-us/windows/apps/design/style/sound)
- [Meta - Haptics Overview](https://developers.meta.com/horizon/design/haptics-overview/)

### Web標準・アクセシビリティ
- [W3C WCAG 2.1/2.2](https://www.w3.org/WAI/WCAG21/Understanding/)
- [W3C XAUR（XRアクセシビリティユーザー要件）](https://www.w3.org/TR/xaur/)
- [MDN - Web Audio API Best Practices](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Best_practices)
- [MDN - Vibration API](https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API)
- [W3C WAI - Making Audio and Video Accessible](https://www.w3.org/WAI/media/av/)

### ISO標準
- ISO 9241-910:2011（触覚インタラクション フレームワーク）
- ISO 9241-920:2024（触覚インタラクション 要件・推奨）
- ISO 9241-971:2020（触覚システムのアクセシビリティ）
- ISO/IEC 23090-31:2025（MPEGハプティクスコーディング）

### 学術・業界リソース
- [ICAD（International Community for Auditory Display）](https://icad.org/)
- [Google Design - Sound & Touch](https://design.google/library/ux-sound-haptic-material-design)
- [Haptic Labs - Design Principles](https://www.hapticlabs.io/principles)