ui-ux-audit

UI/UX 監査スキル

🚨 重要：このスキルは実装の前に実行します

目的： まず現状を監査することで、重複した実装や雑然としたデザインを防ぎます。

呼び出すタイミング： ユーザーが次のような内容に言及したときに自動的に呼び出します。

• UI/UX に関する作業：「UI を改善」「UX を強化」「より良いデザイン」「レイアウトを更新」
• ページに関する作業：「ホームページを修正」「ページを改善」「インターフェースを更新」「再デザイン」
• 見た目の変更：「視覚要素を追加」「ビジュアルを強化」「見た目を改善」
• コンポーネントに関する作業：「コンポーネントを追加」「新機能」「セクションを改善」
• 一般的な改善：「もっと良くする」「体験を改善」「サイトを強化」

実行順序：

1. ✅ このスキルを最初に実行します（監査フェーズ）
2. 次に、調査結果をユーザーに提示します
3. その後、必要に応じて ui-ux-designer エージェントを呼び出します（デザインレビュー）
4. その後、承認された変更を実装します

---

必須の監査プロセス（まず読む、実装はその後）

ステップ 1：現状を読む（必須）

推奨を行う前に、必ず次のファイルを読んでください。

# Target page file
Read: src/app/[target-page]/page.tsx

# Related components (if modifying existing sections)
Read: src/components/sections/[component].tsx

# Related data files
Read: src/data/[related-data].tsx
Read: src/data/page-content/[page]-content.ts

# Check for existing similar functionality
Grep: Search for keywords related to proposed feature

例：

User: "Improve homepage"

MUST READ FIRST:
- src/app/page.tsx
- src/components/sections/Hero.tsx
- src/data/page-content/home-content.ts

THEN analyze what EXISTS before proposing anything

ステップ 2：存在するものを記録する（根拠に基づく）

現状の一覧を作成します。

## Current State Audit: [Page Name]

### Existing Components
- Component 1: [Description, location, purpose]
- Component 2: [Description, location, purpose]

### Existing Data Display
- Portfolio metrics: [Where shown, format]
- CTAs: [Location, text, purpose]
- Content sections: [List all sections]

### Design Characteristics
- Layout: [Grid, flex, columns]
- White space: [Generous, tight, balanced]
- Information density: [Minimal, moderate, dense]
- Visual style: [Clean, busy, colorful, minimal]

### Evidence
[Show actual code snippets proving what exists]

ステップ 3：重複を確認する（重要）

追加を提案する前に、次の点を確認してください。

• このデータはページ上の別の場所にすでに表示されていますか？
• 類似の機能が別の形で存在していますか？
• 既存のコンテンツと重複しませんか？
• シンプルなデザインを雑然とさせませんか？
• 同じ情報が複数回表示されていませんか？

避けるべきアンチパターン（2025 年 10 月の教訓）：

❌ インパクトカードですでにポートフォリオの内訳を示している場合のポートフォリオの可視化 ❌ ヒーローに主要な CTA がすでにある場合の大きな AI アシスタントカード ❌ (/brief のような)ドキュメント形式のページにおける指標サイドバー ❌ (/ai-lab のような)意図的に最小限に抑えたページにおけるダッシュボード ❌ 複数のセクションでのデータ表示の重複 ❌ 明確な価値提案のない一括追加

ステップ 4：本当に存在するギャップを特定する（想定上のギャップではなく）

次の場合に限り、追加を提案してください。

✅ 不足している機能（コード監査で確認済み） ✅ 実際の UX の問題（想定ではなく、実証されている） ✅ 明確な付加価値（具体的なメリットを説明できる） ✅ シンプルなデザインを尊重している（余計な要素を増やさない）

テンプレート：

## Genuine Gaps Identified

### Gap 1: [Specific missing element]
- Evidence: [Code shows this doesn't exist]
- User need: [Why user needs this]
- Value: [Specific benefit]
- Simple solution: [Minimal approach]
- No redundancy: [Confirmed doesn't duplicate X]

### Gap 2: [Next gap]
...

ステップ 5：デザイン方針を確認する

このポートフォリオは、意図的にすっきりとしたミニマルな美しさを採用しています。

次の原則に照らして確認してください。

• シンプルで、ざっと見渡しやすいレイアウト
• 余白を戦略的に活用する
• 情報は繰り返さず、一度だけ表示する
• ドキュメント形式のページは、ドキュメントらしさを保つ
• 明確な必要性がない限り、余計な要素を追加しない

確認する質問：

• これは価値を加えますか、それとも単に余計な要素を増やすだけですか？
• これが最もシンプルな解決策ですか？
• 既存のすっきりとしたデザインを尊重していますか？
• ユーザーのレビューを通過しますか、それとも却下されますか？

---

監査結果のテンプレート

次の形式で調査結果を提示してください。

# UI/UX Audit Report: [Page Name]

## Current State Summary
[2-3 sentences describing current design]

## What Already EXISTS
1. [Component/feature]: [Description with code location]
2. [Component/feature]: [Description with code location]
3. [Component/feature]: [Description with code location]

Evidence: [Code snippets proving these exist]

## Redundancy Check Results
✅ No redundancy detected: [Explain]
OR
⚠️ Potential redundancy: [Show what duplicates what]

## Genuine Gaps Identified
### Priority 1: [Most important gap]
- Evidence: [Why this is missing]
- User impact: [Specific problem it solves]
- Proposed solution: [Minimal approach]
- No redundancy: [Confirmed]

### Priority 2: [Next gap]
...

## NOT Recommended (Would Create Redundancy)
❌ [Proposed feature]: Already exists as [existing feature]
❌ [Proposed feature]: Would duplicate [existing data]

## Design Philosophy Compliance
✅ Respects clean, minimal aesthetic
✅ Adds value without adding bulk
✅ No information duplication
OR
⚠️ Concerns: [List any design philosophy violations]

## Recommendation
**Recommended:** Implement Priority 1 gap ([brief description])
**Not Recommended:** [List features that would add redundancy]

**Next Steps:**
1. User review of findings
2. (Optional) Invoke ui-ux-designer agent for design critique
3. Implement approved changes incrementally

---

検証チェックリスト

監査を完了する前に、次の点を確認してください。

• 対象のページやコンポーネントのファイルを最初にすべて読みましたか？
• 不足していると思い込んだものではなく、存在するものを記録しましたか？
• 重複を体系的に確認しましたか？
• 想定上のギャップではなく、本当に存在するギャップを特定しましたか？
• 情報が重複していないことを確認しましたか？
• 推奨内容は、すっきりとしたミニマルなデザインを尊重していますか？
• 最もシンプルな解決策を提案しましたか？
• ユーザーのレビューを通過する内容になっていますか？

どれか一つでも「いいえ」の場合は、作業を止めて再検討してください。

---

例：良い監査と悪い監査

❌ 悪い監査（避けるべき例）

User: "Improve homepage"

Bad Response:
"I recommend adding:
1. Portfolio visualization showing $156M breakdown
2. Large dashboard with metrics
3. Section transitions between content
4. Enhanced testimonials with animations"

Problem: Didn't read current state, didn't check for redundancy

✅ 良い監査（望ましい例）

User: "Improve homepage"

Good Response:
"Let me audit the current homepage first..."

[Reads src/app/page.tsx]

"Current State Audit:

What EXISTS:
- Impact cards already display portfolio breakdown ($156M, $91M, etc.)
- Hero has primary CTAs (View Work, See Skills, Get In Touch)
- Testimonials section exists
- EKG dividers separate sections

Redundancy Check:
⚠️ Adding portfolio visualization would DUPLICATE impact card data

GENUINE Gap:
✅ No CTA after testimonials section (natural conversion point)

Recommendation:
- Add single strategic CTA after testimonials
- Do NOT add portfolio visualization (redundant)
- Keep clean, minimal design

Would you like to proceed with the CTA addition?"

---

CLAUDE.md のルールとの連携

このスキルは、CLAUDE.md に定められた必須ルールを徹底します。

1. ✅ まず読む、実装はその後（ステップ 1 で徹底）
2. ✅ 重複の確認（ステップ 3 で徹底）
3. ✅ デザイン方針の尊重（ステップ 5 で徹底）
4. ✅ UI/UX 作業前の必須監査（このスキル全体）
5. ✅ 検証チェックリスト（最後のチェックリストで徹底）

---

トリガーキーワードのリファレンス

ユーザーが次のように言ったとき、このスキルを自動的に呼び出します：

UI/UX 用語：

• UI を改善、UX を向上、デザインを良くする、レイアウトを更新
• ユーザーエクスペリエンスを改善、インターフェースを向上、ビジュアルを改善
• 再デザイン、UI をリファクタリング、デザインを更新、現代化
• 見た目を良くする、外観を改善、ビジュアルを改善

ページに関する用語：

• ホームページを修正、ページを改善、ページを更新、ページを向上
• ホームページの改善、ページの再デザイン、レイアウトの変更
• ランディングページを改善、ホーム画面を良くする

コンポーネントに関する用語：

• コンポーネントを追加、新機能、セクションを改善
• ヒーローを改善、ヘッダーを更新、フッターを改善
• ビジュアライゼーションを追加、ダッシュボードを追加、メトリクスを追加
• 新しい UI 要素、インターフェースコンポーネントを追加

全般的な改善：

• より良くする、エクスペリエンスを改善、サイトを向上
• ポートフォリオを改善、見せ方を良くする、プレゼンテーションを向上
• コンバージョンを改善、エンゲージメントを高める、インパクトを強める

質問形式：

• 「X を改善するにはどうすればよいですか？」
• 「X に何を追加すべきですか？」
• 「ページに X を追加すべきですか？」

---

重要：このスキルは、2025 年 10 月のセッションでの失敗を防ぎます

その日に起きたこと：

• ページを読まずに、フェーズ 3 の UI/UX に関する推奨事項を実装した
• インパクトカードと同じデータを表示する PortfolioVisualization を追加した
• 主要な CTA を目立たなくする、大きな AI Assistant カードを追加した
• AI Lab ページに要素を詰め込み、「1 つのページに 2 つのページがあるように」した
• ユーザーはすべてを元に戻す必要があった

このスキルは、次の方法でこうした失敗を防ぎます：

• まず現状を確認する（常に）
• 提案する前に重複がないか確認する
• すっきりとしたミニマルなデザイン方針を尊重する
• 真に不足しているものを特定する（不足していると思い込まない）
• 実装前に、根拠に基づく調査結果をユーザーに提示する

---

補足ファイルとリソース

このスキルには、包括的な監査のための追加リソースが含まれています：

REFERENCE.md - 詳細な UX リサーチ

参照する場面：

• WCAG 2.1 AA の要件を詳しく知りたい
• UX リサーチの出典（Nielsen Norman Group など）を確認したい
• デザインパターンとアンチパターンを理解したい
• 監査手法を詳しく調べたい

内容：

• 左側への注意パターンに関する研究（80/20 ルール）
• F パターンの読み取り原則
• 認知負荷の原則（Miller の法則、Hick の法則）
• WCAG 2.1 AA の全要件
• デザインパターンライブラリ
• 測定フレームワーク

参照方法： Read: [skill-directory]/REFERENCE.md

---

FORMS.md - 事前入力済みテンプレート

参照する場面：

• 新しい監査を始める（テンプレートをコピーする）
• 構造化されたチェックリスト形式が必要
• 標準化された監査結果を作成したい

内容：

• クイック監査テンプレート（5～10 分）
• 包括的な監査テンプレート（30 分以上）
• 重複チェックリスト
• ギャップ分析テンプレート
• WCAG 準拠チェックリスト
• モバイル最適化チェックリスト
• パフォーマンス監査テンプレート

参照方法： Read: [skill-directory]/FORMS.md

---

resources/ - 例とケーススタディ

参照する場面：

• UI/UX 監査を初めて実施する
• アプローチが正しいか確信が持てない
• 実例から学びたい
• 他の人をトレーニングする

内容：

• examples/good-audit-example.md - 監査の模範例
• examples/bad-audit-example.md - 避けるべき例
• case-studies/october-2025-incident.md - このスキルのきっかけとなった実際の事例
• README.md - ナビゲーションガイド

参照方法： Read: [skill-directory]/resources/[filename]

---

補足ファイルの使用ガイド

クイック監査（10 分未満）：

1. 手順には SKILL.md（このファイル）を使用する
2. FORMS.md からテンプレート（クイック監査テンプレート）をコピーする
3. 5 つのステップに沿って、テンプレートに記入する

包括的な監査（30 分以上）：

1. 全体の手順には SKILL.md を使用する
2. FORMS.md からテンプレート（包括的な監査テンプレート）をコピーする
3. 詳細な要件については REFERENCE.md を参照する
4. 作業内容を resources/examples/good-audit-example.md と比較する

学習／トレーニング：

1. resources/examples/good-audit-example.md を読みます（ゴールドスタンダードを確認します）
2. resources/examples/bad-audit-example.md を読みます（避けるべきことを学びます）
3. resources/case-studies/october-2025-incident.md を読みます（このスキルが存在する理由を理解します）
4. FORMS.md のテンプレートを使って練習します

---

最後に

これは必須です。 ユーザーがUI／UX作業に言及した場合、実装を始める前に現状を監査するため、このスキルを必ず最初に実行します。

目標：重複した実装を防ぎ、既存のデザインを尊重し、対象を絞った改善のみを提案します。

UI／UX監査は初めてですか？ resources/examples/good-audit-example.md から始めて、実際の進め方を確認してください。