ux-sound-design

UX サウンドデザイン

Audio UX の手法を活用して、通知音から完全なサウンドシステムまで、デジタル製品向けの機能的で心に響く音声を作成します。

このスキルを使う場面

• アプリの通知音をデザインするとき
• デジタル製品向けの完全な音声システムを作成するとき
• UI 操作に音声フィードバックを追加するとき
• アクセシブルな音声キューを構築するとき
• 製品チーム向けの音声ガイドラインを定義するとき
• 既存の製品サウンドを評価し、改善するとき

方法論の基盤

出典：Audio UX ＋ デザイン思考の原則

基本原則：「Audio UX とは、ユーザー体験を向上させるために、サウンドを戦略的かつ意図的に活用することです。」音楽やエンターテインメント向けの音声とは異なり、UX サウンドデザインでは、まず機能を果たすことが重要です。最良の製品サウンドは、正しく機能しているときには意識されず、注意が必要なときだけ認識されます。

重要な理由：サウンドは、デジタル製品のデザインで最も活用されていないツールです。調査によると、音声フィードバックはタスクの完了率を高め、エラーを減らし、ブランドとの結び付きを強めます。それにもかかわらず、ほとんどの製品ではサウンドがまったく使われていないか、ありふれた印象に残らない音声が使われています。

Claude が行うことと、あなたが決めること

Claude が行うこと	あなたが決めること
制作ワークフローを構成する	最終的なクリエイティブの方向性
技術的なアプローチを提案する	機材やツールの選択
テンプレートやチェックリストを作成する	品質基準
ベストプラクティスを特定する	ブランドや声に関する判断
スクリプトの概要を作成する	スクリプトの最終承認

このスキルでできること

1. 機能的な音声キューをデザインする - ステータス、確認、エラーを伝えるサウンド
2. 感情的なつながりを生み出す - ブランドの個性を強める音声
3. 音声システムを構築する - 関連するサウンドの一貫したファミリー
4. アクセシビリティを確保する - 視覚障害のあるユーザー向けの音声
5. 音声ガイドラインを文書化する - 一貫した実装のための仕様

使い方

製品サウンドをデザインする

Help me design audio for [product/feature].
Interaction: [what the user does]
Feedback needed: [what the sound should communicate]
Brand personality: [tone/feeling]

音声システムを作成する

Create an audio system for [app/product].
Key interactions: [list]
Brand: [personality traits]
Constraints: [technical limitations]

既存の音声を確認する

Review these product sounds for UX effectiveness:
[describe current sounds]
Issues: [problems you've noticed]

手順

UX サウンドをデザインするときは、次の方法論に従ってください。

ステップ 1：機能カテゴリを理解する

製品の各サウンドは、次のいずれかの目的を果たします。

## UX Sound Categories

### 1. FEEDBACK SOUNDS
Confirm that an action was registered.

| Type | Purpose | Example |
|------|---------|---------|
| Confirmation | Action completed | Send button click |
| Progress | Something is happening | Upload progress |
| Success | Task finished successfully | Payment confirmed |
| Error | Something went wrong | Form validation error |
| Warning | Attention needed | Low battery |

### 2. NOTIFICATION SOUNDS
Alert user to external events.

| Type | Purpose | Example |
|------|---------|---------|
| Alert | Immediate attention | New message |
| Reminder | Scheduled prompt | Calendar event |
| Update | Information available | Download complete |
| Social | Human interaction | Someone liked your post |

### 3. NAVIGATION SOUNDS
Spatial orientation and movement.

| Type | Purpose | Example |
|------|---------|---------|
| Transition | Moving between views | Screen change |
| Selection | Choosing an option | Menu item hover |
| Boundary | End of scrollable content | List bottom reached |

### 4. AMBIENT/BACKGROUND
Context and mood.

| Type | Purpose | Example |
|------|---------|---------|
| Presence | App is running | Subtle background tone |
| Mode | Current state | Focus mode active |
| Celebration | Achievement | Goal reached |

---

ステップ 2：デザイン原則を適用する

効果的な UX 音声の基本原則です。

## UX Sound Design Principles

### 1. FUNCTION FIRST
- Sound must communicate something useful
- Ask: "What information does this convey?"
- If no clear function, consider no sound

### 2. DISTINCT BUT RELATED
- Each sound should be recognizably different
- All sounds should feel like a family
- Use consistent:
  - Tonal palette (key/scale)
  - Timbral characteristics
  - Duration ranges
  - Dynamic levels

### 3. APPROPRIATE URGENCY
- Match sound urgency to message urgency
- Error ≠ always alarming
- Success ≠ always celebratory
- Scale:
  1. Subtle acknowledgment
  2. Gentle notification
  3. Attention-getting alert
  4. Urgent alarm

### 4. CONTEXT AWARE
- Consider when/where users hear this
- Public spaces: shorter, more subtle
- Private: can be more expressive
- Frequency: often-heard sounds must be less intrusive

### 5. ACCESSIBLE
- Don't rely solely on sound
- Always pair with visual feedback
- Consider frequency range (avoid only high frequencies)
- Ensure distinctiveness for users who can't see visual cues

### 6. CONTROLLABLE
- Users must be able to mute/adjust
- Provide volume controls
- Respect system settings
- Never surprise with unexpected sound

---

ステップ 3：サウンドパレットを作成する

音声システムの基礎となる素材を定義します。

## Sound Palette Development

### Step 3.1: Define Brand Sound Attributes

Translate brand personality into audio terms:

| Brand Attribute | Sound Translation |
|-----------------|-------------------|
| Playful | Bouncy, melodic, varied pitch |
| Professional | Clean, precise, consonant |
| Innovative | Modern synthesis, unique timbres |
| Warm | Rounded, organic, mid-range |
| Energetic | Fast attack, bright, rhythmic |
| Calm | Soft attack, slow decay, filtered |

### Step 3.2: Choose Your Palette Elements

**Tonal Center**
- Pick a key (e.g., C major, F major)
- All sounds should relate to this key
- Create harmonic cohesion

**Timbre Family**
- Acoustic (piano, bells, wood)
- Synthetic (sine, FM, wavetable)
- Hybrid (processed acoustic)
- Choose based on brand

**Duration Range**
- Micro: 50-150ms (feedback)
- Short: 150-500ms (notifications)
- Medium: 500-1500ms (transitions)
- Long: 1500ms+ (celebrations)

**Dynamic Range**
- Define min/max volume levels
- Relative loudness between sound types
- Error > Notification > Feedback (typically)

### Step 3.3: Document the Palette

```markdown
## [Product] Sound Palette

**Tonal Center**: F major
**Character**: Warm, professional, approachable

**Primary Timbre**: Rounded sine with subtle harmonics
**Secondary Timbre**: Soft mallet (marimba-like)
**Accent Timbre**: Clean bell tone

**Durations**:
- Feedback: 80-120ms
- Notification: 200-400ms
- Transition: 300-600ms
- Celebration: 800-1500ms

**Loudness Hierarchy** (relative to baseline):
1. Alerts: +3dB
2. Notifications: 0dB (baseline)
3. Feedback: -6dB
4. Ambient: -12dB

---

### Step 4: Design Individual Sounds

Process for creating each sound.

サウンドデザインのプロセス

各サウンドについて：

1. 機能を定義する

• これは具体的に何を伝えますか？
• どのアクションがきっかけになりますか？
• ユーザーに何を理解してもらう必要がありますか？

2. 緊急度を決める

• 1（控えめ）→ 5（緊急）
• 次の要素に影響します：音量、長さ、音程、複雑さ

3. コンテキストを考慮する

• どのくらいの頻度で聞かれますか？
• 聞くとき、ユーザーはどこにいますか？
• ユーザーはどのような感情状態ですか？

4. パラメーターをデザインする

パラメーター	緊急度が低い	緊急度が高い
長さ	短め	長め
アタック	ソフト	シャープ
音程	中立	高め、または不協和
複雑さ	シンプル	レイヤーを増やす
音量	小さめ	大きめ

5. バリエーションを作成する

• 3～5 種類をデザインする
• 実際のコンテキストでテストする
• ユーザーからフィードバックを得る
• 改良を重ねる

よく使われるパターン

確認／成功：

• 上昇する音程（ポジティブ）
• すっきりとした、解決感のあるハーモニー
• 素早く、心地よい
• 例：3 度上がる 2 つの音

エラー／警告：

• 下降する音程、または不協和音
• より複雑で、耳障り
• 注意を引くが、不安を与えない
• 例：短 2 度の音程、長めの持続時間

通知：

• 識別しやすいメロディーのモチーフ
• バランスの取れた緊急度
• 覚えやすいが、煩わしくない
• 例：3～4 音の連なり

---

### Step 5: Build the System

Create a coherent family of related sounds.

音声システムのアーキテクチャ

基本サウンドセット（最小限の実用セット）

1. 汎用フィードバック - 中立的な応答
2. 成功 - ポジティブな確認
3. エラー - 問題が発生したことを示す
4. 通知 - 新しい情報
5. アラート - 注意が必要

拡張サウンドセット

フィードバックファミリー：

• タップ／クリック（最も軽い）
• 選択
• 確認
• 成功（最も豊か）

通知ファミリー：

• 控えめな更新
• 標準的な通知
• メッセージ受信
• 緊急アラート

ナビゲーションファミリー：

• トランジション開始
• トランジション終了
• 境界に到達
• モード変更

サウンドの関連性

         QUIET ←───────────────────→ LOUD

    Feedback    Notification    Alert    Alarm
      ○            ●             ◉        ◎

         SUBTLE ←────────────────→ URGENT

バリエーション戦略

各コアサウンドについて、次を作成します：

• 標準バージョン
• 控えめなバージョン（-6dB、短め）
• 強調バージョン（+3dB、より豊か）
• これにより、状況に応じて柔軟に使い分けられます

---

### Step 6: Document and Deliver

Specifications for implementation.

オーディオガイドライン文書

概要

[Product] は、明確なフィードバック、穏やかな通知、ブランドの存在感を通じて、ユーザー体験を高めるためにサウンドを使用します。

サウンドファイル

サウンド名	ファイル	長さ	用途
feedback_tap	tap.wav	80ms	ボタンの押下
feedback_success	success.wav	250ms	アクションの完了
feedback_error	error.wav	350ms	検証エラー
notif_message	message.wav	400ms	新着メッセージ
notif_alert	alert.wav	600ms	重要な更新

実装ガイドライン

再生するタイミング：

• サウンドは視覚的なフィードバックの後に再生し、前には再生しません
• ページの読み込み時にサウンドを再生しないでください
• システムのミュート設定を尊重してください
• 短時間に連続するトリガーを制限してください（100msあたり最大1回）

音量コントロール：

• すべてのサウンドはマスター音量に従います
• ユーザーは設定でサウンドを無効にできます
• モバイルではハプティックフィードバックを併用してください

アクセシビリティ：

• すべてのサウンドに視覚的な代替手段を用意します
• スクリーンリーダーの読み上げをオーディオと組み合わせます
• 重要な情報をサウンドだけに頼って伝えないでください

ファイル仕様

• 形式：WAV（開発用）、MP3/AAC（本番用）
• サンプルレート：44.1kHz
• ビット深度：最低16-bit
• チャンネル：モノラル（ファイルサイズを抑え、一貫した再生を実現）
• ピークレベル：-1dB（クリッピングを回避）

## Examples

### Example 1: Mobile App Notification System

**Context**: Designing sounds for a productivity app.

**Input**:
> Help me design an audio system for a task management app. Key moments: task created, task completed, reminder, all tasks done for the day. Brand is calm, focused, professional.

**Output**:

## Task App Audio System

### Brand Sound Translation

**Brand attributes**: Calm, focused, professional
**Sound translation**:
- Calm → Soft attacks, rounded tones, major/neutral harmony
- Focused → Clean, uncluttered, single-element sounds
- Professional → Refined, not playful, no novelty sounds

### Sound Palette

**Tonal Center**: C major (neutral, universal)
**Primary Timbre**: Soft mallet/vibraphone character
**Duration Range**: 100ms - 800ms
**Character**: Clear, wood-like resonance with gentle decay

### Sound Designs

**1. Task Created** (feedback_subtle)
- Function: Confirm task was added
- Urgency: 1/5 (subtle)
- Design: Single mallet note (G4), soft attack, 120ms
- Feeling: Gentle acknowledgment, like a soft "got it"

**2. Task Completed** (feedback_success)
- Function: Celebrate completion, reward action
- Urgency: 2/5 (satisfying but not disruptive)
- Design: Two notes ascending (C4 → E4), 250ms total
- Feeling: Positive, forward momentum, clean resolution

**3. Reminder** (notification_standard)
- Function: Alert user to scheduled reminder
- Urgency: 3/5 (needs attention but not alarming)
- Design: Three-note melodic pattern (G4 → C5 → E5), 400ms
- Feeling: Friendly tap on shoulder, "hey, don't forget"

**4. All Tasks Complete** (celebration)
- Function: Reward daily completion
- Urgency: 2/5 (celebratory but not over the top)
- Design: Ascending arpeggio (C4 → E4 → G4 → C5), 800ms
- With subtle reverb tail for satisfaction
- Feeling: Achievement unlocked, day well done

### Audio Guidelines

```yaml
Sound System: TaskFlow v1.0

Palette:
  tonal_center: C_major
  timbre: mallet_vibraphone
  character: calm_professional

Sounds:
  - name: task_created
    file: sounds/task_created.wav
    duration_ms: 120
    trigger: task.create
    volume: -9dB (relative)

  - name: task_completed
    file: sounds/task_completed.wav
    duration_ms: 250
    trigger: task.complete
    volume: -6dB (relative)

  - name: reminder
    file: sounds/reminder.wav
    duration_ms: 400
    trigger: reminder.fire
    volume: 0dB (baseline)

  - name: daily_complete
    file: sounds/daily_complete.wav
    duration_ms: 800
    trigger: tasks.all_complete
    volume: 0dB (baseline)

Rules:
  - Respect system mute
  - Pair all sounds with haptic (mobile)
  - Throttle: max 1 sound per 200ms
  - No sound on app open

---

例2：Eコマースのチェックアウトサウンド

コンテキスト：チェックアウトフローにオーディオフィードバックを追加します。

入力：

Eコマースのチェックアウト用サウンドをデザインしてください。カートへの追加、カートからの削除、クーポンの適用、決済処理、購入完了に対応します。ブランドはモダンで、信頼感があり、少し遊び心があります。

出力：

Eコマースのチェックアウトオーディオ

ブランドサウンドへの変換

モダン：アコースティックではなく、クリーンなシンセサイザーサウンド
信頼感：協和音で、解決感があり、安定している
少し遊び心がある：少しメロディーの面白さがあるが、無機質ではない

サウンドパレット

調性の中心：Fメジャー（温かく、親しみやすい）
音色：丸みのあるデジタルトーンに、ほのかなきらめきを加えます
特徴：親しみやすくプロフェッショナルで、優秀な販売員のような印象

サウンドデザイン

カートに追加 ✚

• 機能：商品が追加されたことを確認する
• 頻度：高い（1セッションあたり何度も発生）
• デザイン：短い上昇ピッチのスイープ＋柔らかな「ポップ」音（100ms）
• とても軽く、心地よい音で、注意を引きすぎません
• 柔らかいバッグに何かを入れるような音

カートから削除 ✕

• 機能：削除されたことを確認する
• デザイン：追加音の逆となる、短い下降スイープ（80ms）
• 中立的で、否定的ではない（削除は悪いことではありません）
• 追加音より小さくします（-3dB）

クーポン適用 🎟️

• 機能：節約できたことへの報酬と確認
• デザイン：小さなお祝いのモチーフ（C5 → A5 → F5）、200ms
• ちょっとしたきらめきを加え、思いがけないお金を見つけたような感覚にします
• 通常のフィードバックとは区別します

決済処理中 ⏳

• 機能：処理中であることを示し、不安を軽減する
• デザイン：ループ再生できる、控えめなパルス音
• 落ち着きと自信があり、「処理が進んでいる」と感じられます
• 音量は非常に小さくし、背景に溶け込ませます

購入完了 🎉

• 機能：大きな成功の瞬間を演出し、感情のピークを作る
• デザイン：持続する和音を伴う、勝利感のあるアルペジオ（1000ms）
• システム内で最も大きなサウンド
• 心から満足できる反応を引き出します
• 視覚的なお祝いの演出と組み合わせます

実装に関する注意事項

// Sound trigger logic

// Add to cart - play immediately on success
cartAPI.add(item).then(() => {
  playSound('cart_add', { volume: 0.4 });
  // Throttle: won't play again within 150ms
});

// Purchase complete - play after visual confirmation
if (purchaseSuccess) {
  // Short delay so visual leads
  setTimeout(() => {
    playSound('purchase_complete', { volume: 0.8 });
  }, 200);
}

// Processing - loop while waiting
const processingSound = playSound('processing', {
  loop: true,
  volume: 0.2
});
// Stop when complete
paymentAPI.process().finally(() => {
  processingSound.stop();
});

チェックリストとテンプレート

UXサウンド監査チェックリスト

## Current State Assessment

□ What sounds exist currently?
□ Are they consistent (family feel)?
□ Do users complain about any sounds?
□ Are sounds controllable (mute option)?
□ Are visual alternatives provided?

## Function Check

□ Every sound serves a clear purpose
□ Users understand what each sound means
□ Urgency matches message importance
□ Frequency considered (annoying over time?)

## Brand Check

□ Sounds match brand personality
□ Sounds distinct from competitors
□ Consistent with visual design language
□ Appropriate for target audience

## Technical Check

□ Files optimized for platform
□ Plays reliably across devices
□ Respects system audio settings
□ No clipping or distortion

---

サウンドデザイン仕様テンプレート

## Sound: [Name]

### Function
- Purpose:
- Trigger:
- User action that causes this:

### Context
- How often heard:
- User emotional state:
- Environment:

### Design
- Urgency level: _/5
- Duration: _ms
- Tonal content:
- Timbre description:

### Technical
- File: [filename.wav]
- Sample rate: 44.1kHz
- Channels: Mono
- Peak level: -1dB
- Relative volume:

### Relationships
- Replaces: [if replacing existing sound]
- Similar to: [related sounds in system]
- Distinct from: [sounds it must differ from]

スキルの対応範囲

このスキルが得意とすること

• オーディオ制作ワークフローの構成
• 技術的なガイダンスの提供
• 品質チェックリストの作成
• クリエイティブなアプローチの提案

このスキルでできないこと

• オーディオエンジニアリングの専門知識を代替すること
• 主観的なクリエイティブ上の判断を下すこと
• オーディオファイルに直接アクセスしたり、編集したりすること
• 商業的な成功を保証すること

参考資料

• Audio UX. 「The Future of Sonic Branding」（Lippincottとの提携）
• LANDR. 「Audio UX Sound Design」—実践的な手法
• UX Collective. 「How Sound Design Can Make Wonders with Your Brand」
• Apple Human Interface Guidelines — サウンドデザインのセクション
• Material Design — UIにおけるサウンド

関連スキル

• sonic-branding - ブランドレベルのオーディオアイデンティティ
• audio-logo-design - サウンドロゴの制作
• sound-design-murch - 映画のサウンドに関する原則
• voice-design - 音声インターフェース

---

スキルのメタデータ（内部使用）

name: ux-sound-design
category: audio
subcategory: sound-design
version: 1.0
author: MKTG Skills
source_expert: Audio UX
source_work: Audio UX Methodology
difficulty: intermediate
estimated_value: $2,000-10,000 per audio system (equivalent design work)
tags: [ux, sound-design, product, notifications, audio-feedback]
created: 2026-01-26
updated: 2026-01-26