ui-audit

UI 監査スキル

実証済みの UX 原則に照らしてインターフェースを評価します。Tommy Geoco による Making UX Decisions に基づいています。

このスキルを使う場面

• 時間的プレッシャーの中で UI/UX 設計の意思決定を行うとき
• ビジネス文脈を踏まえて設計のトレードオフを評価するとき
• 特定の問題に対して適切な UI パターンを選ぶとき
• 設計の完全性と品質をレビューするとき
• 新しいインターフェースのための設計思考を構造化するとき

基本哲学

スピード ≠ 無謀。 素早く設計することは、自動的に無謀であることを意味しません。無謀に素早く設計することが無謀なのです。違いは意図性にあります。

超高速意思決定の 3 本の柱

1. スキャフォールディング — 繰り返し発生する意思決定を自動化するために使うルール
2. 意思決定 — 新しい意思決定を行うために使うプロセス
3. クラフティング — 意思決定を実行するために使うチェックリスト

クイックリファレンス構成

基盤となるフレームワーク

• references/00-core-framework.md — 3 本の柱、意思決定ワークフロー、マクロベット
• references/01-anchors.md — 設計のレジリエンスのための 7 つの基本的マインドセット
• references/02-information-scaffold.md — 心理学、経済学、アクセシビリティ、デフォルト

チェックリスト（実行）

• references/10-checklist-new-interfaces.md — 新しいインターフェースを設計するための 6 ステップのプロセス
• references/11-checklist-fidelity.md — コンポーネントの状態、インタラクション、スケーラビリティ、フィードバック
• references/12-checklist-visual-style.md — スペーシング、色、エレベーション、タイポグラフィ、モーション
• references/13-checklist-innovation.md — 独創性スペクトラムの 5 つのレベル

パターン（再利用可能なソリューション）

• references/20-patterns-chunking.md — カード、タブ、アコーディオン、ページネーション、カルーセル
• references/21-patterns-progressive-disclosure.md — ツールチップ、ポップオーバー、ドロワー、モーダル
• references/22-patterns-cognitive-load.md — ステッパー、ウィザード、ミニマリストナビ、簡略化フォーム
• references/23-patterns-visual-hierarchy.md — タイポグラフィ、色、余白、サイズ、近接性
• references/24-patterns-social-proof.md — testimonial、UGC、バッジ、ソーシャル連携
• references/25-patterns-feedback.md — プログレスバー、通知、バリデーション、コンテキストヘルプ
• references/26-patterns-error-handling.md — フォームバリデーション、元に戻す/やり直す、ダイアログ、自動保存
• references/27-patterns-accessibility.md — キーボードナビ、ARIA、代替テキスト、コントラスト、ズーム
• references/28-patterns-personalization.md — ダッシュボード、適応型コンテンツ、設定、l10n
• references/29-patterns-onboarding.md — ツアー、コンテキストに応じたヒント、チュートリアル、チェックリスト
• references/30-patterns-information.md — パンくずリスト、サイトマップ、タグ付け、ファセット検索
• references/31-patterns-navigation.md — プライオリティナビ、オフキャンバス、固定、ボトムナビ

使用手順

設計の意思決定のために

1. 00-core-framework.md を読んで意思決定ワークフローを確認する
2. これが繰り返し発生する意思決定（スキャフォールドを使う）か、新しい意思決定（プロセスを使う）かを特定する
3. 3 段階の比較検討を適用する：組織的知識 → ユーザーの慣れ → リサーチ

新しいインターフェースのために

1. 10-checklist-new-interfaces.md の 6 ステップのチェックリストに従う
2. 特定の UI コンポーネントについては、関連するパターンファイルを参照する
3. フィデリティとビジュアルスタイルのチェックリストを使って品質を高める

パターンの選択のために

1. 中核となる問題（チャンキング、開示、認知負荷など）を特定する
2. 関連するパターンリファレンスを読み込む
3. 利点、ユースケース、心理学的原則、実装ガイドラインを評価する

意思決定ワークフローのまとめ

UI の意思決定に直面したとき：

1. WEIGH INFORMATION
   ├─ What does institutional knowledge say? (existing patterns, brand, tech constraints)
   ├─ What are users familiar with? (conventions, competitor patterns)
   └─ What does research say? (user testing, analytics, studies)

2. NARROW OPTIONS
   ├─ Eliminate what conflicts with constraints
   ├─ Prioritize what aligns with macro bets
   └─ Choose based on JTBD support

3. EXECUTE
   └─ Apply relevant checklist + patterns

マクロベットのカテゴリー

企業は次の 1 つ以上によって成功します:

ベット	説明	設計上の示唆
速度	より速く機能を市場に投入する	パターンを再利用し、他の市場からメタファーを見つける
効率	無駄をより適切に管理する	システムを設計し、WIP を削減する
正確性	より頻繁に正しくある	より強力なリサーチ、計測
イノベーション	未開拓の可能性を発見する	新しいパターン、領域を越えたインスピレーション

常にミクロの設計上のベットを企業のマクロベットと整合させてください。

重要な原則: 優れた設計判断は相対的である

設計判断が「優れている」と言えるのは、それが次の条件を満たすときです:

• プロダクトの jobs-to-be-done を支えている
• 企業のマクロベットと整合している
• 制約（時間、技術、チーム）を尊重している
• ユーザーの慣れ親しみと差別化の必要性のバランスを取っている

普遍的に正しい UI ソリューションは存在しません — 文脈に応じて適切なものだけが存在します。

---

監査レポートの生成

デザインの監査を求められたら、包括的なレポートを生成してください。常に次のセクションを含めてください:

必須セクション（常に含める）

1. 視覚的階層 — 見出し、CTA、グループ化、阅读の流れ、タイプスケール、色の階層、余白
2. 視覚的スタイル — 間隔の一貫性、色の使用、elevation/奥行き、タイポグラフィ、モーション/アニメーション
3. アクセシビリティ — キーボードナビゲーション、フォーカス状態、コントラスト比、スクリーンリーダー対応、タッチターゲット

文脈に応じたセクション（関連する場合に含める）

4. ナビゲーション — マルチページアプリ向け: ウェイファインディング、パンくずリスト、メニュー構造、情報アーキテクチャ
5. ユーザビリティ — インタラクティブなフロー向け: 発見可能性、フィードバック、エラー処理、認知負荷
6. オンボーディング — 新規ユーザー体験向け: 初回起動、チュートリアル、段階的な情報開示
7. ソーシャルプルーフ — ランディング/マーケティングページ向け: testimonial、信頼シグナル、ソーシャル連携
8. フォーム — データ入力向け: ラベル、バリデーション、エラーメッセージ、フィールドタイプ

監査の出力形式

{
  "title": "Design Name — Screen/Flow",
  "project": "Project Name",
  "date": "YYYY-MM-DD",
  "figma_url": "optional",
  "screenshot_url": "optional - URL to screenshot",
  
  "macro_bets": [
    { "category": "velocity|efficiency|accuracy|innovation", "description": "...", "alignment": "strong|moderate|weak" }
  ],
  
  "jtbd": [
    { "user": "User Type", "situation": "context without 'When'", "motivation": "goal without 'I want to'", "outcome": "benefit without 'so I can'" }
  ],
  
  "visual_hierarchy": {
    "title": "Visual Hierarchy",
    "checks": [
      { "label": "Check name", "status": "pass|warn|fail|na", "notes": "Details" }
    ]
  },
  "visual_style": { ... },
  "accessibility": { ... },
  
  "priority_fixes": [
    { "rank": 1, "title": "Fix title", "description": "What and why", "framework_reference": "XX-filename.md → Section Name" }
  ],
  
  "notes": "Optional overall observations"
}

セクションごとのチェック項目（各 6〜10 項目を目安に）

視覚的階層: 見出しの区別、主要アクションの明瞭さ、グループ化/近接性、阅读の流れ、タイプスケール、色の階層、余白の使用、視覚的重みのバランス

視覚的スタイル: 間隔の一貫性、カラーパレットの遵守、elevation/影、タイポグラフィシステム、境界線/角丸の一貫性、アイコンスタイル、モーションの原則

アクセシビリティ: キーボード操作性、可視フォーカス、色のコントラスト (4.5:1)、タッチターゲット (44px)、代替テキスト、セマンティックマークアップ、視差効果を減らす設定への対応

ナビゲーション: 現在地の明確さ、予測可能なメニュー動作、パンくずリストの有無、検索のアクセシビリティ、モバイルナビゲーションパターン

ユーザビリティ: 機能の発見可能性、アクションへのフィードバック、エラーの防止、復旧オプション、認知負荷の管理、ローディング状態