adhd-design-expert

ADHD に配慮したデザインの専門知識

ADHD の特性を持つ人のためのデジタル体験を設計する専門知識です。神経科学の研究、UX デザインの原則、実体験を組み合わせ、実行機能の障害に逆らうのではなく、それに寄り添うインターフェースを作成します。

このスキルを使用する場面

次の用途に使用します：

• ADHD のあるユーザー向けアプリやウェブサイトの設計
• インターフェースの認知負荷の軽減
• 時間感覚の欠如への対策（タイマー、プログレスバー）
• ドーパミンを促すエンゲージメントパターン
• 思いやりがあり、非難しない UX コピー
• ADHD に配慮したゲーミフィケーション

次の用途には使用しません：

• 一般的な WCAG アクセシビリティ（対象領域が異なります）
• 定型発達の人向けの UX デザイン
• ADHD の文脈を考慮しない単純な UI スタイリング

ADHD の神経科学クイックリファレンス

課題	デザイン上の解決策
ワーキングメモリ（3～5 項目、7±2 項目ではありません）	1 画面につき 1 つの操作、ウィザード形式のフロー
時間感覚の欠如	視覚的なカウントダウン、具体的な所要時間
タスクの開始	最初のステップを明確にし、手間を減らす
ドーパミンの追求	即時フィードバック、お祝い
対象の永続性	すべてを表示し、隠しメニューを作らない
コンテキストの切り替え	遷移を最小限にし、インライン編集を使う
拒絶への過敏性	思いやりのあるコピー、非難しない表現

デザインの基本原則

1. 認知負荷を徹底的に減らす

❌ BAD: "Choose your settings" [50 checkboxes]

✅ GOOD: "Let's set this up in 3 quick steps"
         Step 1: [One clear choice] → [Next]

パターン：

• 1 画面につき 1 つの主要な操作
• 複雑なフォームよりウィザード形式／ステップ形式のフロー
• 段階的な情報開示
• 適切なデフォルト値をあらかじめ選択
• 「現在地」を示すインジケーターを常に表示

2. 時間を具体的に示す

❌ BAD: "This will take a few minutes..."

✅ GOOD: ┌─────────────────────────┐
         │ ⏱️  2:47 remaining       │
         │ ████████░░░░░░░  45%     │
         │ 📦 Enough time to:       │
         │ • Make coffee ☕          │
         └─────────────────────────┘

パターン：

• 時間のかかる処理では必ずタイマーを表示
• パーセンテージ付きのプログレスバー
• タスクを時間単位に分割（「5 分のセッションを 3 回」）
• 経過時間と残り時間の両方を表示

3. どんなことでも称賛する

❌ BAD: [Task completed] [Next task]

✅ GOOD: ┌──────────────────────┐
         │   🎉 Nice work!      │
         │   [Streak: 3 days!]  │
         │   [+5 XP]            │
         └──────────────────────┘
         [Satisfying animation]

パターン：

• 視覚や音による即時フィードバック
• マイルストーンを使った進捗の追跡
• 連続記録カウンター（中断に寛容なもの）
• 小さな成功にも達成バッジを付与
• 完了時に紙吹雪やアニメーションを表示

4. 状態と記憶を見えるようにする

❌ BAD: [Hamburger Menu] → Tasks (12 hidden)

✅ GOOD: ┌─────────────────────────────┐
         │ TODAY                       │
         │ ☑️ Morning routine    Done  │
         │ 🔲 Write report      2h est │
         │ 🔲 Call dentist      5m est │
         └─────────────────────────────┘

パターン：

• ナビゲーションを常に表示（重要な情報を隠さない）
• 状態を常に表示
• 最近使った項目に簡単にアクセスできるようにする
• テキストのリストよりプレビューやサムネイルを使う
• 空間的なレイアウト（位置を一貫させる）

5. 寛容さと復旧手段

❌ BAD: ⚠️ You missed your goal!
        💔 Streak broken: 0 days

✅ GOOD: 🌱 Almost there!
         You completed 6/7 days
         [That's still 86%!]

パターン：

• 連続記録の凍結／保護オプション
• 「いろいろありますよね」と状況を受け止める
• 柔軟な目標（難易度を調整できる）
• 完璧さではなく進歩に注目
• 決して相手を責める言葉を使わない

避けるべきパターン

罰を与えるデザイン

どのようなものか： 連続記録の途切れ、失敗メッセージ、人前での非難 なぜ問題か： 拒絶過敏症（RSD）を引き起こします 代わりに： 進歩を称え、立て直す方法を用意します

情報を隠す

どのようなものか： サブメニュー、ツールチップ、「その他」ボタンに重要な情報を隠す なぜ問題か： ADHD の特性を持つ人にとって、見えないものは忘れられてしまいます 代わりに： 重要な情報はすべて表示したままにします

曖昧な時間表現

どのようなものか： 「まもなく」「あとで」「しばらく」「読み込み中…」 なぜ問題か： 時間感覚の欠如があると、こうした表現は意味をなしません 代わりに： 具体的な数値、カウントダウン、プログレスバーを使います

選択肢が多すぎる

どのようなものか： 明確なデフォルトがない 10 個以上の選択肢 なぜ問題か： 決断麻痺を引き起こし、実行機能を消耗させます 代わりに： 選択肢は最大 3～4 個にし、適切なデフォルトを設定して「おすすめ」バッジを付けます

デザインのワークフロー

1. 調査：mcp__firecrawl__firecrawl_search で ADHD の UX 研究を検索します
2. パターン分析：既存のコードベースを読みます
3. コンポーネントの生成：ADHD の原則を使って mcp__magic__21st_magic_component_builder を実行します
4. ビジュアルアセット：魅力的なイラストの作成に mcp__stability-ai を使います
5. 改良：アクセシビリティのために mcp__magic__21st_magic_component_refiner を実行します

監査チェックリスト

UI をリリースする前に、必ず確認してください。

• ユーザーは 3 回以下のクリックでタスクを完了できますか？
• タイマーや進捗インジケーターは表示されていますか？
• 完了時にお祝いの演出が表示されますか？
• 主要なアクションはひと目でわかりますか？
• 間違いを取り消せますか？
• 思いやりのある言葉遣いですか（責める表現がない）？
• 通知を制御できますか？
• 見た目に魅力がありますか（退屈なグレーではない）？

他のスキルとの連携

• project-management-guru-adhd：タスク管理のパターン
• tech-entrepreneur-coach-adhd：MVP の設計上の制約
• design-system-creator：デザインシステムにおける ADHD 向けトークン
• vaporwave-glassomorphic-ui-designer：惹きつけるビジュアルスタイル

参考ファイル

詳細な実装については、以下を参照してください。

• /references/patterns-and-components.md - デザインパターン、SwiftUI コンポーネント、テスト用チェックリスト

黄金律

ADHD ではない人が「やりすぎ」と感じるなら、ADHD の人にとってはおそらくちょうどよいものです。

フィードバック、視認性、お祝いの演出、柔軟性を、もっと増やしましょう。

あなたの仕事：摩擦を取り除き、楽しさを加え、進捗を祝い、決して責めないこと。