ux-usability-review

UX ユーザビリティレビュー

概要

Steve Krug の著書『Don't Make Me Think』に基づく、体系的なユーザビリティ監査手法です。8 つの段階を順に進め、インターフェースの認知負荷、一覧性、ナビゲーションの明確さ、コンテンツの品質、モバイルでの使いやすさ、アクセシビリティ、そして全体的なユーザーエクスペリエンスを体系的に評価します。基本原則は、ユーザーがインターフェースの使い方を考えるために手を止める必要があるなら、何かを再設計する必要があるということです。

使用するタイミング

• 製品、機能、または再設計をリリースする前
• ユーザーから、基本的なタスクについての混乱、離脱、サポートへの問い合わせが報告されたとき
• ユーザーフローに影響するデザインレビューやコードレビューの際
• 競合他社のインターフェースの長所と短所を評価するとき
• 新しいチームメンバーに UX の基準を伝えるとき
• ui-polish-review スキルを補完するものとして（このスキルはユーザビリティを対象とし、ui-polish-review スキルは視覚的な品質を対象とします）

使用しないタイミング

• 視覚的・美的な評価のみを行う場合（その場合は ui-polish-review スキルを使用してください）
• パフォーマンスや技術面の監査を行う場合
• 実際のユーザーを対象としたユーザビリティテストの代わりとして（これはヒューリスティックレビューであり、ユーザーテストではありません）
• コンテンツ戦略やコピーライティングのプロジェクトの場合（ただし、コンテンツの明確さは対象に含まれます）

プロセス

各段階を順番に進めます。各段階では次の手順を実施します。

1. レビュー対象のインターフェースについて、具体的な質問をします
2. 詳細なガイダンスを得るため、front-end-design/dont-make-me-think/ にある該当章の概要を読みます
3. 具体的なテスト（ソースコード内の grep パターン、手動での確認作業、簡易ユーザーテスト）を提案して実施します
4. 重要度を CRITICAL ／ HIGH ／ MEDIUM ／ LOW ／ INFO として、発見事項にフラグを付けます
5. 次の段階に進む前に、発見事項をまとめます

ある段階に該当する画面がアプリケーションにない場合（例：社内ツールにホームページがない場合）は、その旨を認め、理由を示してスキップします。

digraph audit_phases {
  rankdir=TB;
  node [shape=box, style=rounded];

  p1 [label="Phase 1\nDon't Make Me Think"];
  p2 [label="Phase 2\nVisual Hierarchy\n& Scanning"];
  p3 [label="Phase 3\nNavigation"];
  p4 [label="Phase 4\nWords & Content"];
  p5 [label="Phase 5\nHomepage Clarity"];
  p6 [label="Phase 6\nMobile Usability"];
  p7 [label="Phase 7\nGoodwill & Courtesy"];
  p8 [label="Phase 8\nAccessibility"];
  report [label="Usability\nReport", shape=note];

  p1 -> p2 -> p3 -> p4 -> p5 -> p6 -> p7 -> p8 -> report;
}

---

段階 1：「考えさせない」テスト

参考資料： front-end-design/dont-make-me-think/ch01-dont-make-me-think.md、ch02

目標： 各画面が一目で理解できるか評価します。ユーザーが頭を使わなくても、画面が何であり、次に何をすべきかをすぐに理解できる状態が理想です。

確認する質問：

• 各画面について、初めて訪れたユーザーが、それが何であり次に何をすべきかをすぐに理解できますか？
• 一般的なラベルの方が明確なのに、気の利いたラベル、独創的なラベル、ブランド名を使ったラベルがありませんか？（「Job-o-Rama」ではなく「Jobs」、「Quick Procurement Module」ではなく「Shopping Cart」）
• クリックできるものとできないものが明確ですか？（リンクはリンクらしく、ボタンはボタンらしく見え、操作できない要素はクリックできるように見えない。）
• ユーザーは文章を読んで理解する必要がありますか。それとも、ざっと見て操作できますか？
• 5 秒テスト：誰かがこのページを 5 秒だけ見た場合、このサイトの機能と主要な操作を説明できますか？

実施するテスト：

# Find potentially clever/non-standard labels and navigation items
grep -rn "nav\|Nav\|navigation\|menu\|Menu\|sidebar\|Sidebar" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Find link/button text to review for clarity
grep -rn ">.*<\/a>\|>.*<\/button>\|>.*<\/Link>" --include="*.tsx" --include="*.jsx" --include="*.html"

# Check for elements styled to look clickable but are not (or vice versa)
grep -rn "cursor:\s*pointer" --include="*.css" --include="*.scss"
grep -rn "cursor-pointer" --include="*.tsx" --include="*.jsx" --include="*.html"

# Find tooltips (may indicate UI is not self-explanatory)
grep -rn "tooltip\|Tooltip\|title=\"\|data-tip\|aria-label" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for instructional text that might indicate confusing UI
grep -rn "Click here\|click here\|Please note\|Note:\|Instructions:\|How to\|how to\|Steps:" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

5 秒テスト（手動）：

1. ページを開き、ちょうど 5 秒間見ます。その後、目をそらします。
2. 次の質問に答えられますか？このサイト／アプリは何ですか？主に何ができますか？どこから始めればよいですか？
3. いずれかが明確でなければ、このページはテストに不合格です。

目視確認のチェックリスト：

• すべてのインタラクティブ要素は、操作できない要素と視覚的に区別できますか？
• ラベルは一般的で、すぐに理解できますか（専門用語や凝った表現がない）？
• 各画面の主要な操作を 2 秒以内に見つけられますか？
• ページは一目で理解できますか（説明は不要ですか）。少なくとも、少し見れば理解できる状態ですか？
• 「使い方」の文章や説明を削除すると、使いにくくなりますか？（はいの場合、必要なのは説明の追加ではなく UI の再設計です。）

発見事項のテンプレート：

[SEVERITY] Cognitive Load: [description]
  Affected: [screen/component]
  Issue: [what makes the user think]
  User question: [the question mark in the user's head — e.g., "Is this clickable?" or "What does 'Synergy Hub' mean?"]
  Fix: [specific recommendation — e.g., "rename 'Synergy Hub' to 'Team Dashboard'"]

---

フェーズ 2：視覚的な階層構造とスキャンしやすさ

参考資料： front-end-design/dont-make-me-think/ch03-billboard-design-101.md

目標： ページがスキャンする行動に対応しているかを確認します。ユーザーはウェブページを読まず、スキャンします。最も重要なコンテンツをすぐに見つけられるようにデザインする必要があります。

確認する質問：

• 最も重要なものが最も目立つ、明確な視覚的階層構造がありますか？
• ページは、明確に定義され、見た目で区別できる領域に分割されていますか？
• テキストはスキャンしやすい形式になっていますか？（意味のある見出し、短い段落、重要な用語の太字、箇条書きなど）
• 視覚的なノイズが多すぎませんか？（競合する要素が多すぎる、背景パターン、不要な装飾、アニメーションの多用など）
• 関連する項目は視覚的にグループ化され（近接）、関連しない項目は視覚的に分離されていますか？

実行するテスト：

# Check for heading structure (are headings used to break up content?)
grep -rn "<h[1-6]\|<Heading\|role=\"heading\"" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Find long text blocks without headings or formatting (walls of text)
# Look for paragraphs or text blocks without structure
grep -rn "<p>" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for bullet/ordered lists (good for scanning)
grep -rn "<ul\|<ol\|<li" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Find text formatting helpers (bold for key terms)
grep -rn "<strong\|<b>\|<em>\|font-bold\|font-semibold\|fontWeight.*bold" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for potential noise: excessive decoration, patterns, animations
grep -rn "background-image:\|background-pattern\|animation:\|@keyframes" --include="*.css" --include="*.scss"

目視確認チェックリスト：

• ページを見てから 3 秒以内に、ページの目的と主要なコンテンツを把握できますか？
• 明確な境界がある視覚的な領域（ヘッダー、メインコンテンツ、サイドバー、フッター）に分かれていますか？
• 本文は、説明的な見出しを付けた短い段落（最大 3～4 文）に分割されていますか？
• キーワードは、スキャンする人が見つけやすいよう太字などで強調されていますか？
• 過剰な視覚的ノイズ（競合する要素、不要な装飾、注意をそらすアニメーション）がありませんか？
• 余白を効果的に使って、ゆとりと視覚的なグループ化を生み出していますか？

指摘事項のテンプレート：

[SEVERITY] Scanning & Hierarchy: [description]
  Affected: [screen/section]
  Issue: [e.g., "400-word paragraph with no headings, no bold, no lists"]
  Impact: [users will skip this content entirely rather than read it]
  Fix: [e.g., "break into 3 short paragraphs with descriptive headings, bold key terms, use bullet list for features"]

---

フェーズ 3：ナビゲーション

参考資料： front-end-design/dont-make-me-think/ch06-street-signs-and-breadcrumbs.md

目標： ナビゲーションが明確かつ常に表示され、ユーザーが次の 3 つの基本的な質問にいつでも答えられるようにすることを確認します。今どこにいるか？どこへ行けるか？どうすれば戻れるか？

確認する質問：

• すべてのページで常に表示されるグローバルナビゲーションがありますか？
• ユーザーはいつでも「今どこにいるか？」「どこへ行けるか？」「どうすれば戻れるか？」に答えられますか？
• ナビゲーションに「現在地」を示す明確な表示（アクティブ状態、ハイライト、太字）がありますか？
• すべてのページに、そこへ移動するためにクリックした項目と一致する名前やタイトルがありますか？
• 階層が深い場合（3 階層以上）、パンくずリストがありますか？
• 常に表示され、アクセスしやすい検索機能がありますか？
• ロゴからホームページに移動できますか？

実行するテスト：

# Check for navigation component
grep -rn "<nav\|<Nav\|role=\"navigation\"\|Navbar\|Header\|AppBar\|TopBar" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for "you are here" indicators (active/current state in navigation)
grep -rn "active\|current\|isActive\|aria-current\|selected\|activeClassName\|pathname" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.css" --include="*.scss"

# Check for breadcrumbs
grep -rn "breadcrumb\|Breadcrumb\|aria-label=\"breadcrumb\"\|role=\"navigation\".*breadcrumb" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for search functionality
grep -rn "search\|Search\|type=\"search\"\|role=\"search\"\|searchParams\|useSearch" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for back/home navigation
grep -rn "back\|Back\|home\|Home\|logo.*href\|logo.*link\|Logo.*Link" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for page titles/headings matching navigation labels
grep -rn "<title\|<h1\|document\.title\|useTitle\|Head>" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

トランクテスト（単独で行える簡易チェック）： サイトの内部ページをランダムに開きます（ホームページ以外）。次の質問にすぐ答えられますか？

1. これはどのサイトですか？（サイトの識別情報やロゴが見える）
2. 今どのページにいますか？（ページ名やタイトルが見える）
3. 主なセクションは何ですか？（グローバルナビゲーションが見える）
4. この階層で選べる項目は何ですか？（ローカルナビゲーションが見える）
5. 全体の構成の中で、今どこにいますか？（パンくずリストまたは「現在地」の表示がある）
6. どのように検索できますか？（検索ボックスが見える、または簡単に見つけられる）

これらの質問に 5 秒以内に答えられない場合は、指摘事項として記録してください。

目視確認チェックリスト：

• グローバルナビゲーションはすべてのページで常に表示されていますか（デスクトップでハンバーガーメニューの中に隠れていませんか）？
• 現在のページやセクションを示す「現在地」の表示がありますか？
• ページタイトルは、そこへ移動するためのナビゲーションラベルと一致していますか？
• 2 階層より深いコンテンツにパンくずリストがありますか？
• ロゴはクリックでき、ホームページにリンクされていますか？
• ユーザーは常に元の場所に戻れますか（戻るボタン、パンくずリスト、または明示的な戻るリンクが機能しますか）？

指摘事項のテンプレート：

[SEVERITY] Navigation: [description]
  Affected: [screen/flow]
  Trunk test: [which questions could not be answered]
  Issue: [e.g., "no 'you are here' indicator — active nav item has no visual distinction"]
  Fix: [e.g., "add font-weight: 600 and a left border accent to the active navigation item"]

---

フェーズ 4：言葉とコンテンツ

参考資料： front-end-design/dont-make-me-think/ch04、ch05-omit-needless-words.md

目標： インターフェース上のすべてのテキストが簡潔で役に立ち、「ハッピートーク」、不要な説明、マーケティング色の強い表現がないことを確認します。すべての言葉に意味があるべきです。

確認する質問：

• 削除すべき「ハッピートーク」はありませんか？（「革新的なプラットフォームへようこそ……」、「私たちは情熱を持って……」、「お選びいただきありがとうございます……」など）
• インターフェースのデザインを改善すれば不要になる説明はありませんか？
• ページ上の言葉を半分にしても意味が失われない箇所はありませんか？
• ラベルは明確で一般的に使われる表現で、ユーザーの言葉になっていますか？（マーケティング用語や内部用語ではなく）
• エラーメッセージは、何が起きたのか、次に何をすればよいのかを平易な言葉で伝えていますか？

実行するテスト：

# Find happy talk and filler text patterns
grep -rni "welcome to\|we're passionate\|we believe\|our mission\|thank you for\|we're excited\|innovative\|cutting-edge\|world-class\|best-in-class\|leverage\|synergy\|empower\|revolutionize" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.md"

# Find instructional text that might indicate confusing UI
grep -rni "please\s\+\(enter\|click\|select\|choose\|note\)\|in order to\|you must\|make sure to\|don't forget\|remember to\|follow these steps\|instructions:" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Find generic/unhelpful error messages
grep -rni "something went wrong\|an error occurred\|unexpected error\|oops\|try again later\|contact support\|error:\s*true" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.ts" --include="*.js"

# Find button/link text that could be clearer
grep -rni "click here\|learn more\|read more\|submit\|go\|here\b" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Find long text blocks (potential walls of text)
grep -rn "<p>" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

目視確認チェックリスト：

• 情報を加えない「ハッピートーク」はありませんか？（マーケティング色の強い表現、ウェルカムメッセージ、UI 内のミッションステートメントなど）
• インターフェースを再設計すれば削除できる説明はありませんか？
• ページ上の段落を、重要な意味を失わずに半分の長さにできませんか？
• ボタンのラベルは、クリック後に何が起きるのかを明確に説明していますか？（「送信」ではなく「変更を保存」、「進む」ではなく「アカウントを作成」など）
• エラーメッセージは具体的で、次に取るべき行動を示していますか？（「エラーが発生しました」ではなく「このメールアドレスはすでに登録されています。代わりにサインインしてください。」など）

指摘テンプレート：

[SEVERITY] Content: [description]
  Affected: [screen/section]
  Current text: "[the problematic text]"
  Issue: [e.g., "happy talk — provides no useful information"]
  Suggested text: "[concise alternative]" or "Remove entirely"

---

フェーズ 5：ホームページの明瞭さ

参考資料： front-end-design/dont-make-me-think/ch07-the-first-step-in-recovery.md

目標： 初めて訪れた人に対して、ホームページがサイトの内容、ユーザーができること、そして利用する価値を5秒以内に伝えていることを確認します。

確認する質問：

• ホームページは5秒以内に、次の3つの質問に答えていますか？「これは何か？」「ここで何ができるか？」「なぜここを利用するのか（ほかの場所ではなく）？」
• ロゴの近くに、サイトの目的を説明する明確で簡潔なタグラインはありますか？
• ホームページは相反する優先事項でごちゃごちゃしていますか？それとも重要度の明確な階層がありますか？
• 初めて訪れた人は、スクロールせずにサイトの目的を理解できますか？
• 主要な行動喚起は明確で、魅力的ですか？
• ホームページは、あらゆる要素を一度に見せようとする罠を避けていますか？

実行するテスト：

# Check for tagline/value proposition near the top
grep -rn "tagline\|slogan\|hero\|Hero\|headline\|Headline\|value-prop\|subtitle\|subheading" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check the homepage/landing page component
grep -rn "HomePage\|LandingPage\|Landing\|index\.\(tsx\|jsx\)\|page\.\(tsx\|jsx\)" --include="*.tsx" --include="*.jsx"

# Find the primary call-to-action on the homepage
grep -rn "cta\|CTA\|call-to-action\|get-started\|GetStarted\|sign-up\|SignUp\|try-free\|hero.*button\|Hero.*Button" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for competing CTAs (too many primary actions)
grep -rn "btn-primary\|variant=\"primary\"\|variant='primary'" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Look for logo + tagline proximity
grep -rn "logo\|Logo\|brand\|Brand" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

5秒間のホームページテスト（手動）：

1. ホームページを開き、5秒のタイマーを開始します。タイマーが切れたら、画面から目をそらします。
2. 次の質問への答えを書き留めます。このサイトは何をするのか？主にどんな操作ができるのか？誰のためのサイトなのか？
3. どれか一つでも答えが曖昧、または間違っていたら、ホームページを改善する必要があります。

目視確認チェックリスト：

• サイトの目的は、スクロールせずに見える範囲で伝わっていますか？
• ロゴの近くにタグラインまたは価値提案はありますか？
• 主要な行動喚起（CTA）は一つだけ明確になっていますか？（競合するボタンが5つも並んでいませんか？）
• ホームページは「あれもこれも詰め込む」状態になっていませんか？
• ターゲット層の初めての訪問者は、5秒以内に目的を理解できますか？
• ホームページの階層は明確ですか？主要メッセージ > 二次的な機能 > 詳細情報

指摘テンプレート：

[SEVERITY] Homepage Clarity: [description]
  Affected: [homepage section]
  The 3 questions:
    What is this? [clear / unclear — what a user might guess]
    What can I do? [clear / unclear — what the primary action appears to be]
    Why here? [clear / unclear — is the value proposition communicated?]
  Fix: [e.g., "add a tagline under the logo: 'Project management for remote teams' and make the 'Start free trial' button the sole primary CTA above the fold"]

---

フェーズ 6：モバイルでの使いやすさ

参考資料： front-end-design/dont-make-me-think/ch10-mobile-usability.md

目標： インターフェイスがモバイルデバイスで快適に使えることを確認します。タップ領域が十分に大きいこと、テキストが読みやすいこと、アクセシビリティ機能があること、機能を削った体験ではなく、完全な体験を提供することを確認します。

確認する質問：

• タップ領域は少なくとも 44x44 ポイント（Apple HIG）／48x48dp（Material）あり、互いに十分な間隔がありますか？
• 主要な機能はモバイルで利用できますか？隠されたり削除されたりしていませんか？
• インターフェイスは片手でも快適に使えますか？
• 拡大しなくてもテキストを読めますか？（本文の最小サイズは 16px）
• モバイルで機能がすべて使えますか？（デスクトップ版の機能を削ったものではありませんか？）
• 意図しない拡大の問題を防ぐため、viewport のメタタグは正しく設定されていますか？
• フォーム入力には適切なモバイルキーボードの種類（メール、電話番号、数値）が使われていますか？

実行するテスト：

# Check for viewport meta tag
grep -rn "viewport" --include="*.html" --include="*.tsx" --include="*.jsx"

# Check for responsive design (media queries, responsive utilities)
grep -rn "@media\|breakpoint\|responsive\|sm:\|md:\|lg:\|xl:" --include="*.css" --include="*.scss" --include="*.tsx" --include="*.jsx"

# Check touch target sizes (minimum 44x44 / 48x48)
grep -rn "min-height:\s*\(4[0-3]\|3[0-9]\|[12][0-9]\|[0-9]\)px\|min-width:\s*\(4[0-3]\|3[0-9]\|[12][0-9]\|[0-9]\)px" --include="*.css" --include="*.scss"
grep -rn "h-[0-9]\b\|w-[0-9]\b\|h-1[0-1]\b\|w-1[0-1]\b" --include="*.tsx" --include="*.jsx" --include="*.html"

# Check for appropriate input types on mobile
grep -rn "type=\"email\"\|type=\"tel\"\|type=\"number\"\|type=\"url\"\|type=\"search\"\|inputMode\|inputmode\|autocomplete" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for mobile navigation patterns (hamburger, bottom nav, sheet)
grep -rn "hamburger\|menu-toggle\|mobile-menu\|drawer\|Drawer\|Sheet\|BottomNav\|bottom-nav\|MobileNav" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for horizontal scrolling issues (content wider than viewport)
grep -rn "overflow-x:\s*hidden\|overflow-x:\s*auto\|overflow-x:\s*scroll\|overflow-hidden\|overflow-x-auto" --include="*.css" --include="*.scss" --include="*.tsx" --include="*.jsx"

# Check font sizes (body text should be at least 16px on mobile to prevent zoom)
grep -rn "font-size:\s*1[0-5]px\|font-size:\s*[0-9]px\|text-xs\b\|text-\[1[0-3]px\]" --include="*.css" --include="*.scss" --include="*.tsx" --include="*.jsx"

目視確認用チェックリスト（実際のモバイルデバイスまたはデバイスエミュレーションでテスト）：

• すべてのボタンとリンクを親指で正確にタップできますか？（最小 44x44pt）
• タップ対象どうしの間隔は十分で、誤タップを防げますか？
• 本文は 16px 以上で、拡大しなくても読みやすいですか？
• デスクトップのすべての機能をモバイルで利用できますか？（削除されたり隠されたりしていませんか？）
• 重要な操作（サインアップ、ログイン、購入手続き、検索）をモバイルで完了できますか？
• フォーム入力で適切なモバイルキーボード（メール、数値、電話番号）が表示されますか？
• 横スクロールが発生しませんか？（コンテンツが画面からはみ出していませんか？）
• モバイルのナビゲーションは片手で簡単に表示して使えますか？

問題の記録テンプレート：

[SEVERITY] Mobile Usability: [description]
  Affected: [screen/component]
  Issue: [e.g., "secondary navigation links are 28x28px with 4px spacing — too small to tap accurately"]
  Device tested: [device or viewport size]
  Fix: [e.g., "increase tap targets to 44x44px minimum with 8px spacing between items"]

---

フェーズ 7：善意と思いやり

参考資料： front-end-design/dont-make-me-think/ch11-usability-as-common-courtesy.md

目標： インターフェイスがユーザーの時間を尊重し、必要な情報をあらかじめ提供し、間違いから簡単に回復できることを確認します。あらゆる摩擦要因がユーザーの「善意の蓄え」を減らし、思いやりのある対応がその蓄えを補います。

確認する質問：

• ユーザーがよく必要とする情報をすぐに見つけられますか？（料金、送料、連絡先、サポート、よくある質問などが、3クリックも先に隠されていませんか？）
• フォームでは本当に必要な情報だけを尋ねていますか？（電話をかける予定がないのに電話番号を求めていませんか？個人アカウントなのに会社名を求めていませんか？）
• エラーメッセージは役に立ち、具体的で、問題解決につながる内容ですか？（「入力が無効です」だけでなく、「メールアドレスには @ 記号が必要です」のように）
• ユーザーは間違いから簡単に回復できますか？（取り消し、機能する戻るボタン、明確なエラー状態、破壊的な操作の確認）
• 読み込み中、空、エラーの各状態は適切に設計され、役に立ちますか？（ブラウザーのデフォルトの動作に任せていませんか？）
• インターフェイスに「ダークパターン」はありませんか？（ユーザーをだまして登録させる、配信停止を隠す、同意チェックボックスをあらかじめ選択しておくなど）

実行するテスト：

# Find form fields — check if all are necessary
grep -rn "<input\|<Input\|<textarea\|<Textarea\|<select\|<Select\|type=\"text\"\|type=\"email\"\|type=\"tel\"\|type=\"number\"" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for required fields (are they all truly required?)
grep -rn "required\|isRequired\|\*\|aria-required" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Find error message patterns
grep -rni "error\|invalid\|required\|must\|cannot\|failed\|incorrect\|wrong" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue" --include="*.ts" --include="*.js"

# Check for undo/recovery mechanisms
grep -rn "undo\|Undo\|revert\|Revert\|restore\|Restore\|confirm\|Confirm\|are you sure\|Are you sure" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for loading states
grep -rn "loading\|Loading\|isLoading\|isPending\|skeleton\|Skeleton\|spinner\|Spinner\|progress\|Progress" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for empty states
grep -rn "empty\|Empty\|no-data\|noData\|no-results\|noResults\|nothing\|zero-state\|emptyState" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for dark patterns
grep -rni "pre-check\|prechecked\|default.*checked\|checked.*default\|opt.out\|unsubscribe\|cancel.*hidden\|hidden.*cancel" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for confirmation dialogs on destructive actions
grep -rn "delete\|Delete\|remove\|Remove\|destroy\|Destroy" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

目視確認用チェックリスト：

• どのページからでも 1～2 回のクリックで、料金、連絡先、送料、サポートを見つけられますか？
• フォームでは必要な情報だけを尋ねていますか？（自分がこのフォームに入力して不快に感じませんか？）
• エラーメッセージは具体的で、問題の解決方法をユーザーに伝えていますか？
• アカウント削除やデータ削除などの破壊的な操作の前に確認ステップがありますか？
• 読み込み中の状態は、処理中であることをユーザーに伝えていますか？（スケルトン画面、進行状況インジケーターなど）
• 空の状態では、役に立つメッセージと明確な次の操作が示されていますか？
• インターフェイスにダークパターンはありませんか？（あらかじめ選択されたチェックボックス、隠された配信停止、わかりにくいオプトアウトの表現など）

問題の記録テンプレート：

[SEVERITY] Goodwill: [description]
  Affected: [screen/flow]
  Issue: [e.g., "registration form asks for phone number, company name, and job title — none required for the service"]
  Goodwill impact: [depletes / neutral / builds]
  Fix: [e.g., "remove phone, company, and title fields — ask only for name, email, and password"]

---

フェーズ 8：アクセシビリティ

参考資料： front-end-design/dont-make-me-think/ch12-accessibility-and-you.md

目標： さまざまな能力を持つ人々がインターフェースを利用できることを確認します。適切な見出し構造、代替テキスト、キーボード操作、コントラスト、フォームラベル、フォーカスインジケーター、スキップナビゲーションを確認します。

確認する質問：

• 適切な見出し階層（h1 > h2 > h3 で、レベルを飛ばさない）になっていますか？
• 意味のある画像すべてに、内容を説明する代替テキストがありますか？（装飾画像の alt="" は空にします。）
• すべてのインタラクティブ要素にキーボードだけでアクセスして操作できますか？
• 十分なカラーコントラストがありますか（WCAG AA：通常のテキストは 4.5:1、大きなテキストは 3:1）？
• すべてのフォーム入力に、プログラムから関連付けられたラベルがありますか？
• フォーカスインジケーターは見やすく、明確ですか？
• キーボードユーザー向けに「メインコンテンツにスキップ」リンクがありますか？
• ARIA は正しく使用されていますか（過剰に使用したり、セマンティック HTML の代わりに使用したりしていませんか）？

実行するテスト：

# Check heading hierarchy (should be sequential, no skipping)
grep -rn "<h1\|<h2\|<h3\|<h4\|<h5\|<h6" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for images without alt text
grep -rn "<img\|<Image" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"
grep -rn "alt=" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for empty alt text on images that might need descriptions
grep -rn "alt=\"\"\|alt=''" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for form labels associated with inputs
grep -rn "<label\|htmlFor=\|for=\"\|aria-label=\|aria-labelledby=\|<Label" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Find inputs without labels (accessibility violation)
grep -rn "<input\|<Input\|<textarea\|<Textarea\|<select\|<Select" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for focus styles
grep -rn ":focus\|focus:\|focus-visible\|focus-within\|outline:\|ring-\|focus-ring" --include="*.css" --include="*.scss" --include="*.tsx" --include="*.jsx"

# Check for outline removal (anti-pattern unless replaced with alternative)
grep -rn "outline:\s*none\|outline:\s*0\|outline-none" --include="*.css" --include="*.scss" --include="*.tsx" --include="*.jsx"

# Check for skip navigation link
grep -rn "skip\|Skip\|skip-nav\|skipNav\|skip-to-main\|skip-to-content\|skipToContent" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for ARIA usage
grep -rn "aria-\|role=\"" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for keyboard event handlers (should have keyboard equivalents for mouse events)
grep -rn "onClick\|onclick\|onMouseDown\|onmousedown" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"
grep -rn "onKeyDown\|onkeydown\|onKeyPress\|onkeypress\|onKeyUp\|onkeyup" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

# Check for tabIndex usage (negative tabindex removes from tab order)
grep -rn "tabIndex\|tabindex" --include="*.tsx" --include="*.jsx" --include="*.html" --include="*.vue"

目視確認チェックリスト：

• 見出し階層は、レベルを飛ばさず h1 > h2 > h3 の順になっていますか？
• 情報を伝える画像すべてに、意味のある代替テキストがありますか？
• すべてのインタラクティブ要素を、論理的な順序で Tab キーを使って移動できますか？
• すべてのインタラクティブ要素で、フォーカスインジケーターがはっきり見えますか？
• すべてのテキストが WCAG AA のコントラスト要件（通常のテキストは 4.5:1、大きなテキストは 3:1）を満たしていますか？
• すべてのフォーム入力に、表示されるラベルがありますか（プレースホルダーテキストだけではありませんか）？
• キーボードでフォーカスしたときに表示される「メインコンテンツにスキップ」リンクがありますか？
• マウスイベントで実行されるすべての機能を、キーボードでも実行できますか？
• 色だけで情報を伝えないようにしていますか？

指摘事項テンプレート：

[SEVERITY] Accessibility: [description]
  Affected: [component/screen]
  WCAG criterion: [e.g., "1.1.1 Non-text Content" or "2.4.7 Focus Visible"]
  Issue: [e.g., "product images have no alt text — screen readers announce 'image' with no context"]
  Users impacted: [e.g., "screen reader users, keyboard-only users"]
  Fix: [e.g., "add descriptive alt text: alt='Red leather notebook, 5x7 inches, 200 pages'"]

---

重大度の評価ガイド

重大度	基準	例
CRITICAL	あるユーザーグループにとって利用できない、中核機能にアクセスできない、ユーザーが重要なタスクを完了できない	フォームでキーボード操作ができない、主要なアクションが見えない、またはアクセスできない、モバイルユーザーが登録できない、重要なテキストのカラーコントラストがゼロ
HIGH	ナビゲーションが分かりにくい、目的が不明確、大きなアクセシビリティ上の問題がある、ユーザーが迷う、または行き詰まる	「現在地」の表示がない、ホームページが 5 秒テストに失敗する、見出し階層がない、フォームラベルがない、3 つ以上の質問でトランクテストに失敗する
MEDIUM	テキストが多すぎる、パターンに一貫性がない、小さなアクセシビリティ上の問題がある、ユーザーの作業は遅くなるが続行できる	すべてのページに無意味な宣伝文句がある、基本的なタスクに説明が必要、一部の代替テキストがない、一部の要素でフォーカスインジケーターがない
LOW	仕上げに関する問題、さらに分かりやすくできる、小さな使いにくさ	一部のエラーメッセージが一般的すぎる、空の状態に「データなし」と表示される、ボタンのラベルをもっと具体的にできる、一部のモバイル用タップ領域がやや小さい
INFO	ユーザビリティテストの提案、改善の可能性、まだ適用されていないベストプラクティス	「実際のユーザーを対象に 5 秒テストを実施することを検討してください」、「スケルトンローディング状態を追加すると、体感パフォーマンスが向上します」、「パンくずリストを追加すると、階層の深いページのナビゲーションに役立ちます」

よくある間違い

間違い	修正方法
流し読みではなく、じっくり読むことを前提に設計する	見出し、短い段落、重要な用語の太字、箇条書きを使います。ユーザーは流し読みするのであって、じっくり読むわけではありません
一般的なラベルではなく、気の利いたラベルを使う	「求人」は「キャリア機会ポータル」より常に優れています。最もシンプルで一般的なラベルを使います
デスクトップでナビゲーションをハンバーガーメニューの中に隠す	画面に十分なスペースがある場合は、常にナビゲーションを表示しておくほうが、隠しておくより望ましいです
「現在地」を示すインジケーターがない	ナビゲーション内で現在のページやセクションを視覚的に区別して強調します（太字、下線、アクセントカラーなど）
デザインを改善する代わりに、使い方を説明する	何かの使い方を説明する必要があるなら、必要なのはドキュメントではなくデザインの改善です
汎用的なエラーメッセージ	「エラーが発生しました」では何の役にも立ちません。何が問題で、どう修正すればよいかを伝えます
不要なフォーム項目を求める	項目を追加するたびに完了率は下がります。本当に必要な情報だけを求めます
プレースホルダーテキストだけをラベルとして使う	フォーカスするとプレースホルダーは消えます。すべての入力欄に、常に表示されるラベルが必要です
見た目のためにフォーカスアウトラインを削除する	デフォルトのアウトラインをカスタムのフォーカスインジケーターに置き換えます。完全に削除してはいけません
モバイル対応を後回しにする	モバイルを優先するか、並行して設計します。後付けのレスポンシブ対応は、必ず後付けに見えます

---

単独で実施できるクイックチェック：トランクテスト

どのサイトのどのページにも使える、手早く独立して実施できるチェックです。30秒で完了し、よくあるナビゲーションの問題を見つけられます。

手順： サイト内の任意のページ（ホームページ以外）に移動します。スクロールもクリックもせずに、次の6つの質問に答えてください。

#	質問	確認する項目	合格／不合格
1	これは何のサイトですか？	ロゴまたはサイト名が、決まった場所に表示されている
2	今どのページにいますか？	クリックした内容と一致する、わかりやすいページタイトル／見出しがある
3	主なセクションは何ですか？	セクション名が明確なグローバルナビゲーションが表示されている
4	この階層で選べる項目は何ですか？	ローカルナビゲーション／サブナビゲーション、または明確なコンテンツの選択肢が表示されている
5	全体の中で、今どこにいますか？	「現在地」を示すインジケーター、パンくずリスト、または強調表示されたナビゲーション項目がある
6	検索するにはどうすればよいですか？	スクロールしなくても検索ボックスまたは検索アイコンが見える

採点：

• 6/6：優れたナビゲーションです。ユーザーは現在地を把握し、安心して操作できます。
• 4～5/6：良好ですが、改善の余地があります。不合格の項目に対処してください。
• 2～3/6：ナビゲーションに大きな問題があります。ユーザーは迷ってしまいます。
• 0～1/6：ナビゲーションに致命的な問題があります。ユーザーは離脱します。

---

フェーズ9：レビューと報告

ユーザビリティレポートを作成します：

# UX Usability Review Report: [Application/Site Name]
**Date:** [date]
**Reviewer:** [name]
**Scope:** [what was reviewed — screens, flows, user types]
**Method:** Heuristic review based on Don't Make Me Think principles

## Executive Summary
[1-2 paragraph summary of overall usability and key findings. State whether the interface passes the "don't make me think" standard and the trunk test.]

## Trunk Test Results
| Question | Answer | Pass/Fail |
|----------|--------|-----------|
| What site is this? | [answer] | [pass/fail] |
| What page am I on? | [answer] | [pass/fail] |
| Major sections? | [answer] | [pass/fail] |
| Options at this level? | [answer] | [pass/fail] |
| Where am I? | [answer] | [pass/fail] |
| How to search? | [answer] | [pass/fail] |
**Trunk Test Score:** [X/6]

## 5-Second Homepage Test Results
| Question | Answer | Clear? |
|----------|--------|--------|
| What is this site? | [answer] | [yes/no] |
| What can I do here? | [answer] | [yes/no] |
| Why should I be here? | [answer] | [yes/no] |

## Findings Summary
| # | Severity | Finding | Phase |
|---|----------|---------|-------|
| 1 | CRITICAL | [title] | [phase] |
| 2 | HIGH     | [title] | [phase] |
| ... | ... | ... | ... |

## Detailed Findings

### Finding 1: [Title]
**Severity:** CRITICAL / HIGH / MEDIUM / LOW / INFO
**Phase:** [which phase found it]
**Affected Component:** [screen, flow, component]

**Description:**
[What the usability issue is — describe the user's experience, not just the technical problem]

**User Impact:**
[How this affects real users — confusion, abandonment, errors, frustration, exclusion]

**Evidence:**
[What you observed — specific screens, text, interactions, test results]

**Recommended Fix:**
[Specific, actionable improvement — include before/after if helpful]

**Reference:**
[Don't Make Me Think chapter/principle reference]

---
[Repeat for each finding]

## Improvement Priority
1. **Fix CRITICAL findings immediately** — users are blocked or excluded
2. **Fix HIGH findings before launch** — users are confused or lost
3. **Fix MEDIUM findings in the next sprint** — users are slowed down
4. **Fix LOW findings as polish** — users are mildly inconvenienced
5. **Consider INFO suggestions** — for the next round of usability improvement

## Recommended Usability Tests
[Suggest specific usability tests to run with real users, based on findings:
- 5-second test on the homepage with 5 participants
- Task-based test: "Find [X] and complete [Y]" with 3-5 participants
- Navigation test: trunk test on 5 interior pages with 3 participants
- Mobile-specific test on [key flows] with 3 participants]

## Out of Scope / Not Reviewed
[What was explicitly excluded and why]