UX ヒューリスティクス フレームワーク

ユーザーインターフェイスを評価・改善するための実用的なユーザビリティの原則です。基本的な事実に基づいています。ユーザーは読まない、スキャンする。最適な選択をしない、満足できる選択をする。どのように機能するかを理解しない、適当にやり過ごす。

コア原則

「考えさせない」 - すべてのページは自明であるべきです。何か考える必要があれば、それはユーザビリティの問題です。

基礎： ユーザーは忍耐力と認知能力に限りがあります。最高のインターフェイスは目立たない — ユーザーが「何をクリックすればいい？」や「今どこにいる？」と思い悩むことなく、目標を達成できるようにします。ユーザーの頭に浮かぶ疑問符はすべて、認知負荷を増やし、離脱する可能性を高めます。ユーザーが実際に行うこと — スキャン、満足できる選択、適当にやり過ごす — に合わせてデザインしてください。

スコアリング

目標：10/10。 ユーザーインターフェイスをレビューまたは作成するときは、以下の原則への準拠に基づいて 0～10 でスコアを付けてください。10/10 はすべてのガイドラインに完全に整合していることを意味し、低いスコアは対処する必要があるギャップを示しています。常に現在のスコアと 10/10 に到達するために必要な具体的な改善を提供してください。

Krug の3つのユーザビリティの法則

1. 考えさせない

コア概念： ユーザーの頭に浮かぶ疑問符はすべて、認知負荷を増やし、タスクから注意をそらします。

なぜ機能するのか： ユーザーはミッション中です。ラベルについて悩んだり、リンクが何をするのか疑問に思ったり、巧妙なマーケティング言語をデコードしたりしたくありません。必要な思考が少ないほど、タスクを完了する可能性が高くなります。

主要な洞察：

• 巧妙な名前は明確な名前に常に負ける
• マーケティング用語は摩擦を生じさせ、プレーンな言語は摩擦を取り除く
• 不慣れなカテゴリとラベルはユーザーを立ち止まらせ、解釈させる
• どこにでも行く可能性があるリンクは不確実性を生む
• あいまいなラベルを持つボタンはためらいを引き起こす

製品応用：

コンテキスト	応用	例
ナビゲーション ラベル	自明な名前を使用する	「ルートを計算」ではなく「道順を取得」
CTA	ユーザーが理解できるアクション動詞を使用	「アカウント ポータルにアクセス」ではなく「サインイン」
e-commerce	ユーザーのメンタル モデルに合わせる	「購入選択に進む」ではなく「カートに追加」
フォーム ラベル	必要なものを明確に説明する	「電子通信識別子」ではなく「メール アドレス」
エラー状態	ユーザーに次に何をするべきかを伝える	「検証エラー」ではなく「メール形式を確認」

コピー パターン：

• 自明なラベル：「サインイン」、「検索」、「カートに追加」
• アクション指向のボタン：動詞 + 名詞（「アカウントを作成」、「レポートをダウンロード」）
• 専門用語を避ける：「永続化」ではなく「保存」、「関連付け解除」ではなく「削除」
• ラベルに説明が必要な場合は、ラベルを簡略化してください

倫理的な境界線： 明確性はユーザーに役立つべきであり、情報を隠すべきではありません。好ましくない用語を隠すためのヴェニアとしてプレーンな言語を使用しないでください。

参照：references/krug-principles.md Krug の完全な方法論について。

2. クリック数は重要ではない

コア概念： 「ユーザーは3クリック後に去る」という神話。現実は、各クリックが容易で明白で、信頼感を構築していれば、ユーザーはクリック数を気にしません。

なぜ機能するのか： クリックごとの認知努力が、クリック数そのものより重要です。3 回の無思考で確実なクリックは、熟考が必要な 1 回のクリックより遥かに優れています。ユーザーは、クリックが多すぎるときではなく、信頼を失ったときに離脱します。

主要な洞察：

• 各クリックは容易であるべき（速い、簡単）
• 各クリックは明白であるべき（考える必要がない）
• 各クリックは信頼感を構築するべき（ユーザーが正しい道にいることを知っている）
• 3 回の無思考なクリックは、1 回の混乱したクリックに常に勝つ
• ユーザーは混乱したときに離脱し、クリックが多すぎるときではなく

製品応用：

コンテキスト	応用	例
情報アーキテクチャ	深さより明確性を優先	曖昧な深いナビゲーションより浅い明確なナビゲーション
チェックアウト フロー	各ステップを明白にする	説明的なラベル付きの明確なステップ インジケーター
設定	明確なカテゴリに整理	「アカウント > セキュリティ > パスワード変更」（3 回の確実なクリック）
検索結果	ユーザーが自信を持って掘り下げられるようにする	結果を段階的に絞り込むカテゴリ フィルター
オンボーディング	小さく、明確なステップでガイド	ステップごとに 1 つの明確なアクションを持つウィザード

コピー パターン：

• 進捗インジケーター：「ステップ 2/4：配送詳細」
• パンくずリスト：「ホーム > 製品 > シューズ > ランニング」
• 各ステップでの確認：「完了、メール確認されました。では、プロフィールを設定しましょう」
• 明確なリンク テキスト：「ここをクリック」ではなく「すべてのランニング シューズを表示」

倫理的な境界線： キャンセル フローを埋めるか、オプトアウトを難しくするために余分なステップを使用しないでください。すべてのクリックは、ユーザーをその目標に向かわせるべきであり、離れさせるべきではありません。

参照：references/krug-principles.md Krug のクリック哲学とスキャン動作について。

3. 単語の半分を削除する

コア概念： 各ページの単語の半分を削除し、残りの半分をさらに削除します。簡潔さはノイズを減らし、有用なコンテンツをより目立たせ、ユーザーの時間を尊重することを示します。

なぜ機能するのか： ユーザーはスキャンします。読みません。すべての不要な単語は、重要な単語と競合します。不要な言葉を削除すると、重要なコンテンツがより見つけやすくなり、ページが短くなります。

主要な洞察：

• ハッピー トークは空間を浪費する（「ウェブサイトへようこそ！」）
• 誰も読まない指示は削除すべき
• 「お願いします」「親切にお願いします」と礼儀正しい不要な言葉がノイズを追加
• 冗長な説明はメッセージを薄める
• 短いページはスクロール が少なく、スキャンが速い

製品応用：

コンテキスト	応用	例
ランディング ページ	ウェルカム コピーを削除し、価値を先導	「へようこそ...」段落を削除
エラー メッセージ	問題と修正を説明、それ以上はなし	段落ではなく「パスワードが短すぎる（最小 8 文字）」
ツールチップ	最大 1 文	完全な説明ではなく「カードの最後の 4 桁」
空の状態	アクション指向、最小限	「結果がありません。別の検索を試してください。」
オンボーディング	画面ごとに 1 つの指示	説明テキストの壁ではなく「興味を選択」

コピー パターン：

• 前：「次のステップに進むためにパスワードを入力する必要があることにご注意ください。」
• 後：「パスワードを入力して続行してください。」
• 前：「メッセージを受け取りました。できるだけ早くご返信させていただきます。」
• 後：「メッセージを送信しました。24 時間以内に返信します。」

倫理的な境界線： 簡潔性は重要な情報を省略することを意味するものではありません。価格設定、利用条件、データ使用に関する簡潔な開示はユーザーの権利です。

参照：references/krug-principles.md Krug の単語削減方法論について。

4. トランク テスト

コア概念： ナビゲーション明確性のテスト：ユーザーがランダムなページに落とされた場合（車のトランクに閉じ込められてランダムな場所で解放された場合のように）、6 つの主要な質問にすぐに答えることができるでしょうか？

なぜ機能するのか： 優れたナビゲーションはユーザーに常に向き付けを与えます。ユーザーが自分がどこにいるのか、何が選択肢なのかを特定できない場合、彼らは迷ったように感じ、去ります。

主要な洞察：

• ユーザーはどのサイトにいるのかを知る必要があります（ブランド/ロゴが表示される）
• ユーザーはどのページにいるのかを知る必要があります（明確な見出し）
• メジャー セクションが表示される必要があります（ナビゲーション）
• このレベルのオプションは明確である必要があります（リンク/ボタン）
• 階層内の位置は明白である必要があります（パンくずリスト）
• 検索は見つけられる必要があります

製品応用：

コンテキスト	応用	例
グローバル ナビゲーション	永続的なサイト ID とセクション	ロゴ左上、メイン ナビゲーションは常に表示
ページ ヘッダー	明確で説明的なページ タイトル	単なる「製品」ではなく「ランニング シューズ - メンズ」
パンくずリスト	すべての内部ページの階層を表示	「ホーム > 製品 > シューズ > ランニング」
モバイル ナビゲーション	ハンバーガー メニューの向き付けを保つ	現在のセクションをハイライト、パンくずを表示
検索	すべてのページで検索を表示	フッターに埋もれていない、ヘッダーの検索ボックス

コピー パターン：

• ユーザーがクリックしたリンクと一致するページ タイトル
• 「ここにいます」インジケーター（ハイライトされたナビ項目、太字のパンくず）
• 向き付けするセクション見出し：「設定」ではなく「アカウント > 請求」
• 二次的な発見のためのフッター ナビゲーション

倫理的な境界線： ナビゲーションはサイト構造を正直に表すべきです。ユーザーをマーケティング ページに誘導するために誤解を招くラベルを使用しないでください。

参照：references/krug-principles.md 完全なトランク テスト方法論について。

Nielsen の 10 のユーザビリティ ヒューリスティクス

1. システムの状態の可視性

タイムリーなフィードバックを通じてユーザーを常に情報を持たせてください。すべてのアクションには確認が必要です。アップロード用のプログレス バー、送信の確認、読み込み用のスケルトン スクリーン。サイレント エラーは信頼を破壊します。コピー パターン：「保存中...」→「保存済み」（直近の状態遷移）。

2. システムと現実世界の一致

ユーザーの言語を話してください、システム言語ではなく。「認証」ではなく「サインイン」、「クエリー」ではなく「検索」を使用してください。現実世界のメタファー（ゴミ箱、ショッピング カート）と自然な順序（通り → 市 → 州 → 郵便番号）に従ってください。概念ごとに 1 つの用語、すべての場所で。

3. ユーザー管理と自由度

明確な「緊急出口」を提供してください。「よろしいですか？」ダイアログより元に戻すが勝ちます。ユーザーは確認を読まずにクリックします。すべてのフローにキャンセル/終了、戻るボタンは決して壊れてはいけません。ソフト削除と元に戻すは永続削除より優れています。

4. 一貫性と標準

同じ単語、スタイル、動作は全体で同じことを意味するべきです。内部一貫性（アプリ）と外部一貫性（プラットフォーム慣例：ロゴ左上、検索右上）。概念ごとに 1 つの用語を選択。「ワークスペース」と混在させない「プロジェクト」。

5. エラー防止

問題が発生する前に防止してください。制約されたインプット（テキスト フィールドではなく日付ピッカー）、オートコンプリート、合理的なデフォルト、「保存されていない変更」警告。2 つのエラー タイプは異なる防止が必要：スリップ（偶発的な間違ったアクション）と間違い（間違った意図）。

6. 想起より認識

メモリ負荷を最小化する。選択肢を表示してください、暗記を要求しないでください。パンくずリスト、最近の検索、事前入力されたフィールド、デコード済みの値（コード ではなく国名）を含むドロップダウン。人間の作業メモリは約 7 項目を保有します。認識は想起より遥かに簡単です。

7. 柔軟性と使用効率

初心者とエキスパートの両方に対応してください。キーボード ショートカット、タッチ ジェスチャー、一括アクション、保存済み検索、コマンド パレット（Cmd+K）はパワー ユーザーをスピードアップさせます。漸進的な開示は初心者にとってシンプルを保ちながら、エキスパートが完全な機能にアクセスできます。

8. 美的でミニマルなデザイン

すべての要素はその場所を獲得する必要があります。シグナル対ノイズ比はユーザビリティを決定します。すべてが注目を求めると、何も目立ちません。今重要なものを表示し、そうでないものを隠します。ページごとに 1 つのプライマリ CTA、5 つの競合するものではなく。

9. ユーザーがエラーを認識、診断、回復するのを支援

エラー メッセージは 3 つの部分が必要です：何が起きたのか、なぜ、どのように修正するのか。プレーン言語は常に（「ECONNREFUSED」ではなく「接続失敗」）、具体的に（「無効」ではなく「パスワードは 8 文字以上である必要があります」）、ユーザーを非難しないで、入力を保持してください。

10. ヘルプとドキュメンテーション

ヘルプは検索可能で、タスク指向（技術リファレンスではなく「方法...」）、コンテキスト的（ツールチップ、インライン ヒント）である必要があります。タイプ：インライン ヘルプ、コンテキスト「?」アイコン、検索可能なナレッジ ベース、ガイド ツアー、ライブ サポート。

参照：references/nielsen-heuristics.md すべての 10 のヒューリスティクスの詳細な例、製品応用、コピー パターン、倫理的な境界線について。

重大度評価スケール

インターフェイスを監査するときは、各問題を評価してください。

重大度	評価	説明	優先度
0	問題ではない	非同意、ユーザビリティの問題ではない	無視
1	美的	軽微な不便、低影響	時間があれば修正
2	軽微	遅延またはフラストレーション原因	修正をスケジュール
3	大	タスク失敗が重大	すぐに修正
4	致命的	タスク完了を防止	すぐに修正

評価要因

すべての 3 つを考慮してください。

1. 頻度： どのくらい頻繁に発生しますか？
2. 影響： 発生したときどの程度重大ですか？
3. 永続性： 一度限りか継続的な問題ですか？

一般的な間違い

間違い	なぜ失敗するのか	修正
ミステリー ミート ナビゲーション	ラベルのないアイコンは推測を強制	アイコンの横にテキスト ラベルを追加
選択肢が多すぎる	決定麻痺がユーザーをスローダウン	7±2 項目に削減
「ここにいます」インジケーターなし	ユーザーは階層内で迷った感じ	ナビゲーションとパンくずの現在のセクションをハイライト
インライン検証なし	送信、エラー、スクロール サイクルがフラストレーション	ぼかしで検証し、具体的なメッセージを表示
必須フィールドが不明確	ユーザーは何が必須なのか混乱	必須ではなく、オプション フィールドをマーク（ほとんどのフィールドは必須）
テキストの壁	誰も密集した段落を読まない	見出し、箇条書き、空白で分割
ラベル内の専門用語	ユーザーは内部言語を話さない	すべてのラベルをユーザー テストし、プレーン言語を使用
読み込みインジケーターなし	ユーザーはシステムが壊れていると思う	スピナー、プログレス バー、またはスケルトン スクリーンを表示
小さなタップ ターゲット	モバイル ユーザーは定期的に誤クリック	最小 44x44 px タッチ ターゲット
ホバーのみの情報	モバイルとキーボード ユーザーが完全に逃す	ホバー状態で重要な情報を隠さない
元に戻すなし	ユーザーはアクションを取るのを恐れる	すべての非破壊的なアクションの元に戻すを提供
悪いエラー メッセージ	「無効な入力」はユーザーに何も伝えない	何が間違っていて、どのように修正するかを説明
低コントラスト テキスト	多くのユーザーに読めない	WCAG AA 最小（4.5:1 コントラスト比）
一貫性のないナビ位置	ユーザーはナビゲーションを見つけることができない	固定位置、すべてのページで同じ位置
壊れた戻るボタン	基本的なブラウザー契約違反	ブラウザー履歴をハイジャックまたは壊さないでください

クイック診断

任意のインターフェイスを監査してください。

質問	いいえの場合	アクション
このサイト/ページが何であるかすぐに伝わりますか？	ユーザーは迷った、方向感覚を失った	明確なロゴ、ページ タイトル、パンくずリストを追加
メイン アクションは明白ですか？	ユーザーは何をすべきかわからない	ビジュアル階層、単一のプライマリ CTA を作成
ナビゲーションは明確ですか？	ユーザーは道を見つけることができない	トランク テストを適用し、「ここにいます」インジケーターを追加
検索を見つけることができますか？	特定の目標を持つユーザーはブロック	ヘッダーに表示検索ボックスを追加
システムは何が起きているかを私に示していますか？	ユーザーは信頼を失い、再度クリック	読み込み状態、確認、進捗インジケーターを追加
エラー メッセージは役立ちますか？	ユーザーはエラーで止まる	プレーン言語、具体的な修正を使用して書き直す
ユーザーは元に戻すか戻れますか？	ユーザーはアクションを取るのを恐れる	元に戻す、キャンセル、戻るオプションをすべての場所に追加
ホバーなしで機能しますか？	モバイルとキーボード ユーザーは除外	ホバーのみのインタラクションを目に見える代替案に置き換える
すべての対話型要素がラベル付きですか？	ユーザーはアイコンの意味を推測	テキスト ラベルまたは説明的なツールチップを追加
「え？」と思わせるものはありますか？	認知負荷が高すぎる	シンプルにする。説明が必要な場合は、デザインし直す

ヒューリスティクス競合

ヒューリスティクスが相互に矛盾することがあります。そのような場合：

• シンプル性 対 柔軟性：漸進的開示を使用
• 一貫性 対 コンテキスト：一貫したパターン、コンテキスト プロミネンス
• 効率 対 エラー防止：確認ダイアログより元に戻すを優先
• 発見可能性 対 最小主義：プライマリ アクションは表示、セカンダリーは非表示

参照：references/heuristic-conflicts.md 解決フレームワークについて。

ダーク パターン認識

ダーク パターンはユーザーを操作するためにヒューリスティクスを意図的に違反します。

• 強制継続（キャンセルが難しい）
• ゴキブリ ホテル（簡単に入入、難しく出る）
• 確認 Shaming（罪悪感ベースのオプション）
• 隠れたコスト（チェックアウト時の予期しない料金）

参照：references/dark-patterns.md 完全な分類と倫理的な代替案について。

いつ各方法を使用するか

方法	いつ	時間	調査結果
ヒューリスティク評価	ユーザー テストの前	1～2 時間	大きな違反
ユーザー テスト	ヒューリスティク修正の後	2～4 時間	実際の動作
A/B テスト	最適化時	日数～週数	統計検証
分析レビュー	継続的	30 分	パターンと問題

リファレンス ファイル

• krug-principles.md：完全な Krug 方法論、スキャン動作、ナビゲーション明確性
• nielsen-heuristics.md：例を含む詳細なヒューリスティク説明
• audit-template.md：構造化ヒューリスティク評価テンプレート
• dark-patterns.md：カテゴリ、例、倫理的な代替案、規制
• wcag-checklist.md：完全な WCAG 2.1 AA チェックリスト、テスト ツール
• cultural-ux.md：RTL、色の意味、フォーム慣例、ローカライズ
• heuristic-conflicts.md：ヒューリスティクスが矛盾するとき、解決フレームワーク

さらに詳しく

このスキルは Steve Krug と Jakob Nielsen によって開発されたユーザビリティの原則に基づいています。

• 「考えさせない、改訂版」 Steve Krug 著
• 「ロケット サージェリー 簡単に」 Steve Krug 著（DIY ユーザビリティ テスト）
• 「ユーザー インターフェイス デザイン用の 10 のユーザビリティ ヒューリスティクス」 Jakob Nielsen 著（Nielsen Norman Group）

著者について

Steve Krug はユーザビリティ コンサルタントで、1990 年代からユーザーにとってより直感的な製品を作成するのをお手伝いしています。著書『考えさせない』（初版 2000 年、改訂 2014 年）は web ユーザビリティで最も広く読まれている本であり、インターフェイス設計に関わる誰もが必読と考えられています。アクセス可能でユーモア満載の執筆スタイルと低コストのユーザビリティ テストの提唱で知られている Krug は、ユーザビリティが研究室や大きな予算を必要としないこと、ただ数人の実際のユーザーがタスクを完了しようとするのを見ることで証明しました。

Jakob Nielsen, PhD は Nielsen Norman Group（NN/g）の共同創設者であり、「ユーザビリティの王」として広く認識されています。1994 年に発表された彼の 10 のユーザビリティ ヒューリスティクスは、現在でも世界で最も使用されているヒューリスティク評価フレームワークのままです。Nielsen は The New York Times 「web ページユーザビリティのグル」と呼ばれており、ユーザビリティ エンジニアリング関連の多くの影響力のある本の著者です。インターフェイス デザインへの彼の研究駆動型アプローチは、ユーザビリティをソフトウェア開発で認識された規律として確立するのに役立ちました。