ux-heuristics

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

ユーザーインターフェースを評価し、改善するための実践的なユーザビリティ原則です。ユーザーは読まずにざっと目を通します。最適な選択ではなく、満足できる選択をします。仕組みを解明するのではなく、手探りで使いこなします。

コア原則

「考えさせない」 — すべてのページはひと目でわかる必要があります。考える必要があるなら、それはユーザビリティの問題です。ユーザーの忍耐力と認知的な余裕には限りがあるため、上記のようにざっと目を通し、満足できる選択をし、手探りで使いこなす行動を前提に設計してください。

スコアリング

目標：10/10。 インターフェースを監査し、以下の重大度スケールですべての問題を評価したうえで、クイック診断の結果からインターフェースのスコアを算出します。10点から始め、診断項目の失敗ごとに、その項目が該当する最も高い重大度に応じて差し引きます（壊滅的／重大な項目は約2点、軽微／表面的な項目は約1点）。評価帯：9-10 = 重大度3以上の問題がなく、失敗した診断項目が1件以下、6-8 = 重大な問題がいくつかある、または失敗した診断項目が複数ある、3-5 = 壊滅的な問題がある、または失敗した診断項目が多数ある、≤2 = 中核的なタスクが妨げられている。現在のスコア、最も重大度の高い問題、10/10にするために必要な具体的な修正を必ず示してください。

Krug のユーザビリティ原則

法則1〜3は Krug の「ユーザビリティの3法則」です。#4 の「トランクテスト」は、ナビゲーションの中で自分の位置を把握できるかを確かめるものです。

1. 考えさせない

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

効果がある理由： ユーザーには目的があります。ラベルに悩んだり、気の利いたマーケティング表現を読み解いたりしたいわけではありません。考える必要が少ないほど、タスクを完了する可能性が高まります。

重要なポイント：

• 気の利いた名前より、わかりやすい名前が常に優れています
• マーケティング用語は使いにくさを生みます。平易な言葉なら取り除けます
• なじみのないカテゴリーは、ユーザーに立ち止まって意味を考えさせます
• あいまいなリンクやボタンは、ユーザーをためらわせます

プロダクトへの適用例：

コンテキスト	適用方法	例
ナビゲーションラベル	ひと目でわかる名前	「道順を表示」。「目的地までのルートを計算」ではなく
CTA	ユーザーが理解できる動詞で表す	「サインイン」。「アカウントポータルにアクセス」ではなく
エラー状態	次に何をすべきか伝える	「メールアドレスの形式を確認してください」。「検証エラー」ではなく

コピーのパターン：

• 行動を促すボタン：動詞＋名詞（「アカウントを作成」「レポートをダウンロード」）
• 専門用語を避ける：「永続化」ではなく「保存」、「関連付け解除」ではなく「削除」
• ラベルの説明が必要なら、そのラベルを簡潔にする

倫理的な境界： わかりやすさはユーザーのために役立ててください。不利な条件を隠すために、平易な言葉を表面的に使ってはいけません。

参照：references/krug-principles.md。ざっと目を通す／満足できる選択をする／手探りで使いこなす心理、善意の蓄え、ホームページとタグラインに関するガイダンス、そしてユーザビリティテストを0ドルで実施する手順（ユーザー数、テスト用台本）など、Krug の手法全体を確認できます。

2. クリック数は重要ではありません

中心となる考え方：「ユーザーは3回クリックすると離脱する」という俗説があります。しかし実際には、クリックが簡単で、分かりやすく、安心感を与えるものであれば、ユーザーはクリック数を気にしません。

**効果がある理由：**重要なのはクリック数より、クリックごとの認知的負荷です。ユーザーが離脱するのは、クリックする忍耐力が尽きたときではなく、確信を失ったときです。

主なポイント：

• クリックはそれぞれ簡単で、分かりやすく、安心感を与えるものにします
• 考えずに済むクリックが3回あるほうが、熟考が必要なクリックが1回あるより優れています
• 曖昧なラベルの深いナビゲーションより、明確なラベルの浅いナビゲーションが優れています

プロダクトへの応用：

コンテキスト	応用	例
購入手続き	各ステップを分かりやすくする	説明的なラベルが付いた明確なステップ表示
設定	一覧表示より、明確なカテゴリ分けにする	「アカウント > セキュリティ > パスワードの変更」（確信を持って進める3回のクリック）
オンボーディング	小さく、分かりやすいステップにする	各ステップに明確な操作が1つあるウィザード

コピーのパターン：

• 進捗表示：「ステップ 2／4：配送先の詳細」
• 各ステップで確認：「メールアドレスを確認しました。次にプロフィールを設定しましょう。」
• 明確なリンクテキスト：「ここをクリック」ではなく「ランニングシューズをすべて見る」

**倫理的な境界線：**解約手続きを見つかりにくくするために、余分なステップを追加してはいけません。クリックはすべて、ユーザーの目標に近づくためのものであり、遠ざけるためのものであってはなりません。

3. 言葉を半分に減らす

**中心となる考え方：**各ページの言葉を半分に減らし、さらに残った言葉を半分に減らします。簡潔にすることで、有用なコンテンツが目立ち、ユーザーの時間を尊重できます。

主なポイント：

• 愛想だけの文言（「ウェブサイトへようこそ！」など）はスペースの無駄です
• 誰も読まない説明は削除します
• 「どうか」「何卒」といった丁寧すぎる表現や不要な言葉はノイズになります
• ページが短いほど、スクロールが減り、素早く内容を把握できます

プロダクトへの応用：

コンテキスト	応用	例
ランディングページ	歓迎の文言を削り、価値を最初に伝える	「ようこそ……」という段落を削除する
エラーメッセージ	問題と解決方法だけを伝える	「パスワードが短すぎます（8文字以上）」
空の状態	行動を促す、最小限の文言にする	「結果がありません。別のキーワードで検索してください。」

コピーのパターン：

• 変更前：「次のステップに進むにはパスワードの入力が必要となりますので、何卒ご注意ください。」→ 変更後：「続けるにはパスワードを入力してください。」
• 変更前：「メッセージを受け付けました。できるだけ早くご返信いたします。」→ 変更後：「メッセージを送信しました。24時間以内に返信します。」

**倫理的な境界線：**簡潔にするあまり、重要な情報を省いてはいけません。料金、規約、データの利用について簡潔に説明することは、ユーザーの権利です。

4. トランクテスト

**中心となる考え方：**ユーザーがどのページにいても（車のトランクから適当な場所に降ろされたように）、次の6つの疑問にすぐ答えられる必要があります。どのサイトか？どのページか？主なセクションは何か？ここでできることは何か？階層のどこにいるのか？検索はどこにあるのか？

**効果がある理由：**優れたナビゲーションは、常に現在地を把握できるようにします。自分がどこにいるのか分からないユーザーは、迷って離脱します。

ナビゲーションのチェックに活用します。ページタイトルはユーザーがクリックしたリンクと一致させ、「現在地」を示す表示（選択状態のナビゲーション項目、太字のパンくずリストなど）を設け、セクション見出しで現在の場所を分かりやすく示します（「設定」だけでなく「アカウント > 請求」など）。

**倫理的な境界線：**ナビゲーションのラベルはサイト構造を正確に表す必要があります。ユーザーをマーケティングページへ誘導するために、誤解を招くラベルを使ってはいけません。

参照：references/krug-principles.md。トランクテストの実施やナビゲーションの設計に使います。6つの質問それぞれに答えるページ要素に加え、パンくずリストと常設ナビゲーションのルールをまとめています。

Nielsenのユーザビリティに関する10のヒューリスティクス

1. システムの状態を視認できるようにする

適切なタイミングでフィードバックを提供し、ユーザーに状況を知らせます。アップロード時の進捗バー、送信時の確認メッセージ、読み込み中のスケルトンスクリーンなど、すべての操作に応答が必要です。何も応答しないまま失敗すると、信頼が損なわれます。コピーのパターン：「保存中…」→「保存しました」。

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

ユーザーの言葉を使います。「認証する」ではなく「サインイン」、「クエリ」ではなく「検索」とします。現実世界のメタファー（ゴミ箱、ショッピングカート）や自然な順序（通り → 市 → 州 → 郵便番号）に従います。

3. ユーザーのコントロールと自由

明確な「緊急脱出口」を用意します。「本当によろしいですか？」というダイアログより、取り消し機能を優先します。ユーザーは確認を読まずにクリックして進んでしまうためです。すべてのフローにキャンセル／終了の手段を設け、戻るボタンが決して使えなくならないようにします。

4. 一貫性と標準

同じ言葉、スタイル、動作は、どこでも同じ意味になるようにします。アプリ内の一貫性に加えて、プラットフォームの慣例（ロゴは左上、検索は右上）との一貫性も保ちます。概念ごとに用語を一つに統一し、どこでも「プロジェクト」を使い、「ワークスペース」と混在させないようにします。

5. エラーの予防

問題が起きる前に防ぎます。入力を制限する（テキストフィールドより日付ピッカー）、オートコンプリート、適切なデフォルト値、「未保存の変更」の警告などが有効です。スリップ（誤って間違った操作をすること）とミステイク（意図そのものが間違っていること）には、それぞれ異なる予防策が必要です。

6. 想起より認識

選択肢を表示し、記憶を必須にしないことで、記憶への負荷を最小限に抑えます。パンくずリスト、最近の検索、事前入力されたフィールド、意味を表示したドロップダウンなどが有効です。作業記憶で保持できる項目は約7つです。想起より認識のほうがはるかに容易です。

7. 柔軟性と効率性

初心者とエキスパートの両方に対応します。キーボードショートカット、一括操作、保存済みの検索、コマンドパレット（Cmd+K）を用意します。段階的な情報開示により、初心者にはシンプルさを保ちつつ、エキスパートはすべての機能を利用できます。

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

すべての要素に、そこにある理由が必要です。すべてが注目を集めようとすると、何も目立たなくなります。今重要なものを表示し、そうでないものは隠します。ページごとに主要な CTA は1つにします。

9. ユーザーがエラーを認識し、診断し、回復できるようにする

エラーメッセージには、何が起きたか、なぜ起きたか、どうすれば解決できるかの3つの要素が必要です。平易な言葉（「ECONNREFUSED」ではなく「接続に失敗しました」）、具体的な説明（「無効です」ではなく「パスワードは8文字以上である必要があります」）を使い、ユーザーを責めず、入力内容を保持します。

10. ヘルプとドキュメント

ヘルプは検索可能で、タスクを中心とした内容（技術リファレンスではなく「〜の方法」）にし、状況に応じて表示します（ツールチップ、インラインヒント、ガイド付きツアー）。

参照：references/nielsen-heuristics.md。特定のヒューリスティックに照らして監査する際にご覧ください。10項目それぞれについて、適切な実装／よくある違反／重大度の表と、文言のパターン、倫理的な境界を詳しく説明しています。

重大度評価基準

監査で見つかった各問題を評価します。

重大度	評価	説明	優先度
0	問題なし	意見の相違であり、ユーザビリティの問題ではない	対応不要
1	表面的	軽微な煩わしさ、影響は小さい	時間があれば修正
2	軽微	遅延や不満の原因になる	修正を予定
3	重大	タスクの遂行に大きな支障がある	早急に修正
4	致命的	タスクの完了を妨げる	直ちに修正

3つの要素を考慮します。頻度（どのくらいの頻度で発生するか）、影響（発生した際の深刻さ）、持続性（一度限りか、継続的か）です。

参照：references/audit-template.md。ヒューリスティック評価を全面的に行う際にご覧ください。画面ごとに問題、重大度、推奨される修正を一貫した形式で記録できる構造化テンプレートです。

よくある間違い

間違い	失敗する理由	修正方法
正体不明のナビゲーション	ラベルのないアイコンでは推測を強いられます	アイコンの横にテキストラベルを追加します
選択肢が多すぎる	決断できず、ユーザーの操作が遅れます	項目を7±2個に絞ります
「現在地」の表示がない	ユーザーは階層の中で迷子になります	ナビゲーションとパンくずリストで現在のセクションを強調します
入力欄内での検証がない	送信、エラー、スクロールの繰り返しでユーザーが不満を感じます	フォーカスが外れたときに、具体的なメッセージとともに検証します
必須項目が不明確	何が必須なのかユーザーがわかりません	必須項目ではなく、任意項目に印を付けます
文字の壁	密度の高い段落は読まれません	見出し、箇条書き、余白で区切ります
ラベルに専門用語を使用	ユーザーは社内用語を理解していません	すべてのラベルをユーザーテストし、平易な言葉を使います
読み込みインジケーターがない	ユーザーはシステムが壊れたと思います	スピナー、プログレスバー、またはスケルトンスクリーンを表示します
タップ対象が小さすぎる	モバイルユーザーは頻繁に誤タップします	タップ対象は最低44x44 pxにします
ホバー時にしか情報を表示しない	モバイルユーザーやキーボードユーザーに情報が伝わりません	重要な情報をホバー時だけ表示しないでください
元に戻せない	ユーザーはあらゆる操作を恐れます	破壊的でない操作にはすべて元に戻す手段を用意します
わかりにくいエラーメッセージ	「入力が無効です」では何もわかりません	問題の内容と修正方法を説明します
テキストのコントラストが低い	多くのユーザーにとって読みにくくなります	WCAG AAの最低基準（コントラスト比4.5:1）を満たします
ナビゲーションの位置が一定でない	ユーザーがナビゲーションを見つけられません	固定位置に配置し、すべてのページで同じ場所に置きます
戻るボタンが機能しない	ブラウザーの基本的な操作性に反します	ブラウザーの履歴を乗っ取ったり、壊したりしないでください

アクセシビリティ（コントラスト、キーボード、スクリーンリーダー、フォーカス）を監査する際は、references/wcag-checklist.mdを参照してください。テストツール付きの、WCAG 2.1 AA完全チェックリストです。世界中のユーザー向けにデザインする際は、references/cultural-ux.mdを参照してください。RTLレイアウト、色の意味、フォーム／名前／日付の慣習、ローカライズの落とし穴について説明しています。

クイック診断

質問	いいえの場合	対応
このサイト／ページが何か、すぐにわかりますか？	ユーザーが迷います	わかりやすいロゴ、ページタイトル、パンくずリストを追加します
主な操作が明確ですか？	ユーザーは何をすればよいかわかりません	視覚的な階層構造を作り、主要なCTAを1つに絞ります
ナビゲーションは明確ですか？	ユーザーは目的の場所にたどり着けません	トランクテストを実施し、「現在地」の表示を追加します
検索機能を見つけられますか？	目的を持って訪れたユーザーが先に進めません	ヘッダーに見つけやすい検索ボックスを配置します
システムの状態が表示されますか？	ユーザーの信頼が損なわれ、何度もクリックされます	読み込み状態、確認、進行状況を表示します
エラーメッセージは役に立ちますか？	ユーザーが先に進めません	具体的な修正方法を平易な言葉で示します
ユーザーは操作を元に戻したり、前の画面に戻ったりできますか？	ユーザーは操作を恐れます	どこでも元に戻す、キャンセル、戻る手段を用意します
ホバーなしでも機能しますか？	モバイルユーザー／キーボードユーザーが利用できません	ホバー操作の代わりとなる手段を表示します
すべてのインタラクティブ要素にラベルが付いていますか？	ユーザーはアイコンを見て推測します	テキストラベルまたは説明的なツールチップを付けます
「えっ？」と思って手が止まるところはありませんか？	認知負荷が高すぎます	簡素化します。説明が必要なら、設計し直してください

ヒューリスティックの競合

ヒューリスティックが互いに矛盾することがあります。その場合は、次のようにします。

• シンプルさと柔軟性：段階的開示を使います
• 一貫性と文脈：パターンに一貫性を持たせ、文脈に応じて強調します
• 効率性とエラー防止：確認ダイアログよりも、元に戻す機能を優先します
• 見つけやすさとミニマリズム：主要な操作は表示し、二次的な操作は隠します

2つのヒューリスティックが正反対の方向に働き、上記の4つのルールでも解決できない場合は、references/heuristic-conflicts.mdを参照してください。具体的なトレードオフの例を使った、解決のためのフレームワークを説明しています。

ダークパターンの認識

ダークパターンは、ユーザーを意図的に操るためにヒューリスティックに違反します。たとえば、強制継続（解約しにくい）、ローチモーテル（簡単に入れるが、抜け出しにくい）、確認時の罪悪感を利用した選択肢、隠れたコスト（チェックアウト時に突然請求される手数料）があります。

デザインがユーザーの役に立つのではなく、ユーザーを操っていると疑われる場合は、references/dark-patterns.md を参照してください。完全な分類、倫理的な代替案、関連する規制が記載されています。

各手法を使う場面

手法	タイミング	所要時間	得られる知見
ヒューリスティック評価	ユーザーテストの前	1-2時間	重大な違反
ユーザーテスト	ヒューリスティック評価での修正後	2-4時間	実際の行動
A/Bテスト	最適化するとき	数日〜数週間	統計的な検証
アナリティクスのレビュー	継続的に	30分	パターンと問題

参考資料

Steve Krug と Jakob Nielsen が提唱したユーザビリティの原則に基づいています。

• "Don't Make Me Think, Revisited"、Steve Krug 著
• "Rocket Surgery Made Easy"、Steve Krug 著（自分で行うユーザビリティテスト）
• "10 Usability Heuristics for User Interface Design"、Jakob Nielsen 著（Nielsen Norman Group）

著者について

Steve Krug はユーザビリティコンサルタントです。著書 Don't Make Me Think（2000年、2014年改訂版）は、ウェブユーザビリティに関する書籍として最も広く読まれています。ユーザビリティテストには研究室も多額の予算も必要なく、数人の実際のユーザーがタスクを達成しようとする様子を観察するだけでよいことを示しました。

Jakob Nielsen, PhD は Nielsen Norman Group の共同創設者であり、10 Usability Heuristics（1994年）の著者です。このフレームワークは、現在も世界中でヒューリスティック評価に最も広く使われています。The New York Times は彼を「ウェブページのユーザビリティの第一人者」と呼びました。