ux-friction-analyzer

UX 摩擦分析器

認知心理学、ADHD に配慮したデザイン、フロー状態のエンジニアリングを通じて、ユーザーエクスペリエンスを分析・最適化する包括的なスキルです。

有効化

次の場合にこのスキルを使用します。

• 新しいインターフェースやユーザーフローを設計するとき
• 既存の UX を監査し、摩擦の原因を特定するとき
• ニューロダイバージェントなユーザー（ADHD、自閉症）向けに最適化するとき
• 構築前にユーザージャーニーをシミュレーションするとき
• 複雑なアプリケーションの認知負荷を軽減するとき

トリガーフレーズ：「UX を分析」「摩擦の監査」「ユーザージャーニー」「ADHD に配慮した設計」「フローを最適化」「認知負荷を軽減」

---

コアフレームワーク

1. ADHD に配慮したデザイン原則

すべてのインターフェースに次のパターンを適用します。

原則	実装	重要な理由
段階的な情報開示	一度に1つのタスクを表示し、後続のステップは非表示にします	圧倒されるのを防ぎ、集中力を保ちます
コンテキストの保持	キー入力ごとに自動保存し、作業内容を失わないようにします	進捗を失う不安を軽減します
穏やかなリマインダー	アラームではなくステータス更新を使い、赤色で緊急性を示しません	パニックを避け、落ち着いた状態を保ちます
一時停止と再開	セッションの状態を数日から数週間にわたって保持します	不規則なスケジュールに配慮します
気を散らす要素を最小限にする	焦点領域を1つにし、アクティブでないパネルを暗くします	競合する刺激を軽減します
進捗を小分けにする	終わりのないスクロールではなく、視覚的なカードやステップを使います	完了時のドーパミン報酬を生み出します
予測可能なナビゲーション	常に同じレイアウトにし、予想外の変更を避けます	再適応にかかる負担を軽減します
カームモードのオプション	必要に応じてアニメーションを減らし、色を抑えます	感覚過敏に配慮します

2. ゲシュタルト心理学

次の知覚原則を適用します。

PROXIMITY
─────────
Elements close together = perceived as related
White space creates natural boundaries

┌─────────┐  ┌─────────┐     ┌─────────┐  ┌─────────┐
│ Related │  │ Related │     │ Other   │  │ Other   │
│ Item A  │  │ Item B  │     │ Group A │  │ Group B │
└─────────┘  └─────────┘     └─────────┘  └─────────┘
     ↑ CLOSE = GROUPED            ↑ SEPARATE = DISTINCT

SIMILARITY
──────────
Same color/shape/size = perceived as related function

┌──────┐  ┌──────┐  ┌──────┐     ┌──────┐  ┌──────┐
│ BLUE │  │ BLUE │  │ BLUE │     │ CORAL│  │ CORAL│
│ Save │  │ Copy │  │ Edit │     │ Del  │  │ Clear│
└──────┘  └──────┘  └──────┘     └──────┘  └──────┘
     ↑ SAME = Related actions         ↑ DIFFERENT = Destructive

CONTINUITY
──────────
Eye follows lines/paths naturally

Step 1 ──→ Step 2 ──→ Step 3 ──→ Complete
   ●──────────●──────────●──────────●

CLOSURE
───────
Brain completes incomplete shapes
Use for progress indicators, loading states

[ ████████░░░░░░░░ ] 50% - brain "sees" the end

3. 認知負荷理論

管理すべき3種類の精神的負荷：

種類	定義	戦略
内在的	タスク自体の複雑さ	排除はできません。複雑さを認識します
外在的	不適切なデザインによって増える負担	これを排除します。これがあなたの役割です
学習関連	学習や理解に伴う負荷	繰り返し利用するユーザーには最小限にします

ワーキングメモリの限界：

• 最大7±2項目（ミラーの法則）
• 複雑なタスクでは4つのチャンクが最適
• 25分ごとに短い休憩を取ります

外在的負荷を軽減する方法：

• 不要な選択肢を取り除きます
• 想起よりも認識を活用します
• 適切なデフォルトを用意します
• 情報を伝えない装飾要素を取り除きます

4. フィッツの法則

ターゲットに到達するまでの時間 = f（距離 / サイズ）

IMPLICATIONS FOR BUTTONS:
─────────────────────────

  ┌───────────────────┐          vs          ┌──┐
  │     GENERATE      │                      │Go│
  │                   │                      └──┘
  └───────────────────┘
         ↑                                     ↑
  44px+ touch target                   Hard to hit
  Easy to acquire                      Frustrating

MINIMUM SIZES:
- iOS: 44x44 CSS pixels
- Android: 48x48 CSS pixels
- Desktop: 32x32 minimum, 44x44 preferred

EDGE TARGETS ARE INFINITE:
  ┌─────────────────────────────────────────────────────┐
  │ ■ LOGO                                    MENU ■   │
  │                                                     │
  │   Screen edges = can't overshoot                   │
  │   Place critical actions at corners/edges          │
  │                                                     │
  │ ■ HELP                                  EXPORT ■   │
  └─────────────────────────────────────────────────────┘

ICON + LABEL > ICON ALONE:
- Larger target area
- Reduced ambiguity
- Faster acquisition

5. フロー状態のエンジニアリング

主な指標：

• フロー状態に入るまで15～25分
• 中断から回復するまで23分
• 中断が頻繁にあると生産性が40％低下
• フロー状態での作業時間は全体のわずか41％（McKinsey）

フロー状態の条件：

1. 現在のタスクに対する明確な目標
2. 操作に対する即時のフィードバック
3. 挑戦とスキルのバランス
4. 失敗に対する不安がないこと

フロー状態を保つ方法：

• バックグラウンド処理（UI をブロックしない）
• 準備ができたらプッシュ通知を送り、ユーザーが早く作業に戻れるようにします
• 休憩後に素早く状況を把握できるパネルを用意します
• 自動保存で「保存しなければ」という不安をなくします
• すべての操作を元に戻せるようにし、安心して試せるようにします

---

分析方法

ステップ1：決定木を作成する

確率を付けて、すべてのユーザーパスをマッピングします。

                    ┌─────────────┐
                    │ USER LANDS  │
                    └──────┬──────┘
                           │
           ┌───────────────┼───────────────┐
           ▼               ▼               ▼
     ┌──────────┐   ┌──────────┐   ┌──────────┐
     │ Action A │   │ Action B │   │ Action C │
     │  (40%)   │   │  (45%)   │   │  (15%)   │
     └────┬─────┘   └────┬─────┘   └────┬─────┘
          │              │              │
          ▼              ▼              ▼
        [Next]         [Next]         [Next]

各エッジについて、次の項目を記録します。

• 確率（％）
• 摩擦スコア（1～10）
• 完了までの時間（秒／分）
• 認知負荷（低／中／高）

ステップ2：ユーザージャーニーをシミュレーションする

各ペルソナについて、詳細なシミュレーションを作成します。

テンプレート：

TIME    ACTION                           COGNITIVE STATE           FRICTION
─────────────────────────────────────────────────────────────────────────────
0:00    [User action]                    [Mental state]            Low/Med/High
        └─ [System response or UI shown]

0:15    [Next action]                    [How they feel]           Low/Med/High
        └─ [What happens]
        └─ PROBLEM: [Friction point if any]

...continue...
─────────────────────────────────────────────────────────────────────────────
TOTAL TIME: X minutes
FRICTION POINTS: N (list them)
ABANDONMENT RISKS: N (critical moments)
DELIGHT MOMENTS: N (positive surprises)

シミュレーションするペルソナ：

1. エキスパートユーザー - システムを熟知し、素早く操作する
2. 新規ユーザー - 初めて利用し、案内を必要としている
3. 注意散漫なユーザー - コンテキストの切り替えや中断が多い
4. 探索者 - 目標を定めず、できることを探している
5. 完了を目指すユーザー - 作業を終わらせようとしているが、障害に直面している

ステップ 3：摩擦分析マトリックス

定量化して優先順位を付けます。

摩擦要因	影響を受けるユーザー	深刻度（1〜10）	修正の難易度	優先度スコア
[Issue 1]	X%	N	Easy/Med/Hard	HIGH/MED/LOW
[Issue 2]	X%	N	Easy/Med/Hard	HIGH/MED/LOW

優先度の計算式：

Priority = (Users Affected × Severity) / Fix Difficulty

ステップ 4：インピーダンスマッピング

現状と理想を比較します。

TASK                          CURRENT IMPEDANCE     IDEAL IMPEDANCE
────────────────────────────────────────────────────────────────────
[Task 1]                      Low (X sec)           ✓ Optimal
[Task 2]                      Medium (X sec)        Could be Y sec
[Task 3]                      HIGH (X min)          Should be Y sec

ステップ 5：時間損失分析

コンテキストスイッチのコストを計算します。

Action                        Frequency    Time Lost Each    Total Impact
─────────────────────────────────────────────────────────────────────────
[Interruption type 1]         X/session    Y min             Z min
[Interruption type 2]         X/session    Y min             Z min
─────────────────────────────────────────────────────────────────────────
TOTAL CONTEXT SWITCH LOSS                                    Z min/session

---

最適化パターン

すぐにできる修正（労力が少なく、効果が大きい）

1. ランディングページに大きな CTA を配置

   <button class="cta" style="min-height: 60px; min-width: 200px;">
     Primary Action
     <span class="subtext">Supporting text</span>
   </button>
   

2. 編集可能であることを視覚的に示す

   • ホバー時だけでなく、鉛筆／編集アイコンを常に表示する
   • 「クリックして編集」というツールチップを追加する

3. プロンプトの自動入力

   • ユーザーが手動で 1 項目を完了した後、残りを自動入力するか尋ねる
   • 「残り X 項目を入力しましょうか？」

4. フローティングアクションボタン

   • 重要な操作は常に表示し、メニューの中に埋もれないようにする
   • モバイルでは、親指が届く画面右下に配置する

5. 進捗インジケーター

   • 「全 Y ステップ中 X ステップ目」を常に表示する
   • 画面上部に視覚的な進捗バーを表示する

中期的な改善

1. 再認識パネル

   ┌─────────────────────────────────────────────┐
   │  Welcome back! Here's where you left off:  │
   │                                            │
   │  ✓ Step 1: Complete                        │
   │  → Step 2: In progress (60%)               │
   │  ○ Step 3: Not started                     │
   │                                            │
   │  [Continue where I left off]               │
   └─────────────────────────────────────────────┘
   

2. キーボードショートカット

   • 数字キーでモードを切り替える（1、2、3…）
   • Cmd+Enter で主要な操作を実行する
   • Escape でキャンセル／閉じる

3. バックグラウンド処理

   • 時間のかかる処理で UI をブロックしない
   • 進捗を表示し、ユーザーが作業を続けられるようにする
   • 完了時にプッシュ通知を送る

4. スマートなデフォルト設定

   • ユーザーの利用履歴に基づいて事前入力する
   • 最後に使用した設定を記憶する
   • 最も一般的な選択肢を最初に提案する

長期的なビジョン

1. 予測型 UI

   • パターンに基づいて次の操作を予測する
   • 次に表示される可能性が高い画面を事前に読み込む
   • ユーザーが尋ねる前に提案する

2. 複雑さのパーソナライズ

   • 新規ユーザー向けのシンプルモード
   • 時間とともにパワーユーザーモードを利用可能にする
   • ユーザーが複雑さのレベルを選べるようにする

3. アクセシビリティ機能

   • ハイコントラストモード
   • モーションを減らすオプション
   • スクリーンリーダー向けの最適化
   • キーボードのみでの操作

---

新機能のチェックリスト

機能をリリースする前に、次の点を確認してください。

認知負荷

• ユーザーはワーキングメモリに保持する事柄を 4 つ以下にして完了できますか？
• デフォルト設定にできる不要な選択肢はありませんか？
• 想起ではなく、再認を活用していますか？

ADHD に配慮した設計

• コンテキストを失わずに中断・再開できますか？
• 不安をあおらない、穏やかな進捗インジケーターがありますか？
• インターフェースは落ち着いていますか（視覚的に煩雑ではありませんか）？

フィッツの法則

• 主要なボタンの高さは 44px 以上ですか？
• 破壊的な操作は、一般的な操作経路から離れていますか？
• ボタンにはアイコンだけでなくラベルがありますか？

フローの維持

• UI を 2 秒を超えてブロックする操作はありますか？
• 時間のかかる処理をバックグラウンドで実行できますか？
• 明確な「完了」状態がありますか？

エラーからの回復

• すべての操作を取り消せますか？
• エラーメッセージは、単なる「エラー」ではなく、次に取るべき行動を示していますか？
• 自動保存は有効になっていますか？

---

分析出力の例

このスキルを実行する際は、次の内容を含むドキュメントを作成します。

1. エグゼクティブサマリー - 主な調査結果を 3 つの箇条書きで記載
2. 意思決定ツリー - 確率を含む、すべてのユーザー経路
3. ユーザージャーニーのシミュレーション - 3〜5 人のペルソナと詳細なタイムライン
4. 摩擦マトリックス - 優先順位を付けた課題の表
5. 最適化の提案 - すぐにできる改善／中期的な改善／長期的な改善
6. 実装チェックリスト - 実施する具体的な変更

---

連携ポイント

• web-design-expert：UX の提案を視覚的に実装する
• adhd-design-expert：ニューロダイバーシティに配慮した設計パターンを詳しく検討する
• frontend-developer：修正を技術的に実装する
• diagramming-expert：ユーザーフロー図を作成する

---

参考資料

• NN/g：認知負荷を最小限に抑える
• NN/g：フィッツの法則
• UX の法則
• IxDF：ゲシュタルト原則
• Stack Overflow：開発者のフロー状態
• Medium：ADHD に配慮した UX デザイン

---

基本理念：クリックするたび、戸惑うたび、「今どこにいるの？」と思うたびに、ユーザーの時間を奪う摩擦が生じます。気が散りやすい人のためにデザインし、圧倒されている人のために最適化すれば、誰もがその恩恵を受けられます。