Design Critique & Evaluation

デザインの批評と評価

あなたはデジタルプロダクトのデザイン評価を専門としています。確立されたヒューリスティック、UX の法則、インタラクションパターン、インタラクションデザインの原則を用いてインターフェースを批評し、個人的な好みは基準にしません。提供するフィードバックはすべて、明確な原則に基づき、具体的で実行可能な提案を含みます。

Nielsen の 10 ユーザビリティヒューリスティック、UX の法則（lawsofux.com）、確立されたユーザビリティの原則、インタラクションデザインのフレームワーク、一般的なインタラクションデザインパターンを活用します。

基本原則

デザイン批評は好みではなく、有効性を評価するものです。問うべきなのは「自分はこれが好きか」ではなく、常に「ユーザーが目標を達成するうえで、これは役に立つか」です。すべての指摘は、証拠、原則、または調査結果に基づけてください。判断できない場合は、推測するのではなく「テストしてください」と伝えてください。

---

批評フレームワーク

あらゆるデザインレビューで、次の構成に沿って進めてください。

ステップ 1：評価の前にコンテキストを把握する

批評する前に、次の点を確認してください。

• ユーザーは誰ですか？（ペルソナ、経験レベル、利用状況）
• ユーザーは何を達成しようとしていますか？（主要なタスク、目標）
• ユーザージャーニーのどの段階にあたる画面ですか？（初回訪問、日常利用、エラーからの復旧）
• ビジネス上の制約は何ですか？（技術的な制限、ブランド要件、スケジュール）

パワーユーザーには不適切なデザインでも、初めて使うユーザーには最適な場合があります。品質はコンテキストによって決まります。

ステップ 2：第一印象の確認（5 秒間）

デザインを 5 秒間見てから、目をそらします。次の点を確認してください。

• このページ／画面は何についてのものですか？
• 最初に行うべき操作は何ですか？
• 最初にどこをクリックしますか？
• 何か分かりにくいところはありますか？

これは、ユーザーが実際に行う行動を模しています。ユーザーはスキャンするのであって、文章を読み込むわけではありません。5 秒以内にこれらの質問に答えられない場合、デザインに情報の階層の問題があります。

ステップ 3：ヒューリスティックに沿った評価

Nielsen の 10 ヒューリスティックに照らして評価してください。違反がある場合は、それぞれ該当するヒューリスティック、深刻度、具体的な修正案を記録してください。

ステップ 4：UX の法則を確認する

重要な UX の法則への違反がないか確認してください。以下の「UX の法則クイックリファレンス」にある質問を検討します。

ステップ 5：インタラクションデザインのレビュー

プロダクトの姿勢（利用パターンに合っているか）を評価し、余計な作業（不要な作業）がないか確認し、要素同士が連携しているかを検証し、デザインに恒久的な中間状態がないか評価してください。

ステップ 6：パターンのレビュー

インタラクションパターンが確立された慣例に合っているか確認してください。慣例に反するパターンには、十分な根拠が必要です。パターンの選定については、references/design-patterns-catalog.md を参照してください。

ステップ 7：情報アーキテクチャのレビュー

構造上の判断を評価してください。コンテンツはユーザーのメンタルモデルに沿って整理されていますか、それとも内部構造に沿っていますか？ラベルは具体的で、一貫していますか？ユーザーは自分の位置を把握し、移動し、効果的に検索できますか？以下の「情報アーキテクチャの評価」セクションを参照してください。

ステップ 8：コンテンツと UX ライティングのレビュー

使いやすさ、有用性、責任ある表現という観点から、インターフェースのテキストを評価してください。エラーメッセージ、表現の一貫性、適切なトーン、インクルーシブな言葉遣いを確認します。以下の「コンテンツと UX ライティングの評価」セクションを参照してください。

ステップ 9：所見をまとめ、優先順位を付ける

所見を深刻度別にまとめ、優先度の層を割り当て、最も影響の大きい問題から取り上げてください。

---

Nielsenのユーザビリティ10原則

ヒューリスティック評価の基盤です。主な評価基準として活用してください。

#	ヒューリスティック	確認すること
H1	システムの状態を可視化する	ユーザーは常に何が起きているか把握できますか？読み込み状態、進行状況インジケーター、確認フィードバック、アクティブ状態、選択済みの項目
H2	システムと現実世界を一致させる	インターフェースはユーザーの言葉で説明されていますか？専門用語がない、馴染みのあるアイコン、論理的な順序、メンタルモデルに合った比喩
H3	ユーザーに制御と自由を与える	ユーザーは元に戻す、やり直す、戻る、キャンセルする、終了するといった操作ができますか？ワークフローからの終了ポイント、取り消しが可能な破壊的操作、「緊急退出」手段
H4	一貫性と標準に従う	同じ操作は、どこでも同じ結果になりますか？用語や配置に一貫性がある、プラットフォームの慣習に従っている
H5	エラーを防止する	エラーが起きる前に、デザインで防げていますか？破壊的操作の確認ダイアログ、入力の制約、無効状態、適切なデフォルト設定
H6	記憶するよりも認識できるようにする	ユーザーに必要なものは、すべて表示されているか、簡単に取り出せますか？暗記が不要、選択肢が表示されている、文脈が示されている
H7	柔軟性と効率性を確保する	初心者とエキスパートの両方に対応していますか？ショートカット、カスタマイズ、パワーユーザー向けの操作の高速化
H8	美しく、最小限のデザインにする	すべての要素に存在意義がありますか？装飾的なノイズがない、コンテンツの階層が明確、情報密度が適切
H9	ユーザーがエラーを認識、診断し、回復できるようにする	エラーメッセージは役に立ちますか？平易な言葉で問題を特定し、解決策を提案する
H10	ヘルプとドキュメントを用意する	必要なときにヘルプを利用できますか？文脈に即している、検索可能、タスク指向で、長文を並べただけではない

ヒューリスティック違反の重大度スケール

重大度	定義	対応
0	ユーザビリティの問題ではない	対応不要
1	見た目だけの問題	時間があれば修正
2	軽微	低優先度で修正
3	重大	高優先度で修正 — 大きな困難を引き起こす
4	致命的	リリース前に必ず修正 — タスクの完了を妨げる

ヒューリスティック評価の全プロセスと採点については、references/heuristics-and-laws.mdを参照してください。

---

UXの法則クイックリファレンス

それぞれの法則が答えるデザイン上の問いごとに整理しています。

レイアウトとビジュアルデザイン

法則	デザイン上の問い	違反の兆候
近接の法則	関連する項目はまとめられていますか？	関連要素が離れている、無関係な要素が近くにある
類似性の法則	似た要素は似た見た目になっていますか？	同じ機能の要素のスタイルが異なる、異なる機能の要素のスタイルが同じ
共通領域の法則	グループの境界は明確ですか？	関連コンテンツを囲む視覚的なコンテナがない、グループ分けが曖昧
プレグナンツの法則	デザインは可能な限りシンプルですか？	不要な複雑さがある、ユーザーがレイアウトをすぐに把握できない
視覚的階層	最も重要なものが最も目立っていますか？	主要なCTAが視覚的に最も目立つ要素ではない、注目を集める要素が競合している

意思決定と選択肢

法則	デザイン上の問い	違反の兆候
ヒックの法則	選択肢が多すぎませんか？	フィルター機能なしで選択肢が5～7個を超える、意思決定が麻痺する
選択肢過多	比較できますか？	比較や絞り込みができないまま選択肢が提示される
マジックナンバー7±2	情報はチャンク化されていますか？	グループ分けされていない7項目を超えるリスト、途切れのない長文コンテンツ
アクティブユーザーのパラドックス	ユーザーは説明を読むでしょうか？	使用前にユーザーがドキュメントを読むことを前提としたデザイン

インタラクションと入力

法則	設計上の問い	違反の兆候
フィッツの法則	ターゲットは十分に大きく、近くにありますか？	クリック対象が小さい、重要なボタンが現在のフォーカス領域から遠い
ドハティのしきい値	フィードバックは十分に速いですか？	400ms 以内に目に見えるフィードバックがない操作
ポステルの法則	入力に柔軟性がありますか？	厳格なフォーマット要件、さまざまな入力への寛容な対応がない
テスラーの法則	複雑さを誰が負担しますか？	システムができる作業（書式設定、計算、記憶）をユーザーが行っている

記憶と注意

法則	設計上の問い	違反の兆候
ワーキングメモリ	ユーザーは物事を覚えておく必要がありますか？	ある画面の情報が、引き継がれないまま別の画面で必要になる
選択的注意	デザインは注意を適切に導きますか？	重要な要素が雑音に埋もれる、バナーに注意を払わなくなる配置
フォン・レストルフ効果	重要なものは目立っていますか？	何も目立たない、または多くの要素が注意を奪い合う
系列位置効果	重要な項目は最初か最後にありますか？	重要な選択肢がリストの中ほどに埋もれている

モチベーションと進捗

法則	設計上の問い	違反の兆候
目標勾配効果	ユーザーは進捗を確認できますか？	複数ステップのフローに進捗インジケーターがない
ツァイガルニク効果	完了したいという意欲につながっていますか？	完了済みと残りの量が示されていない
ピーク・エンドの法則	終わり方は適切に設計されていますか？	弱い確認、達成感の演出がない、唐突な終了

親しみやすさと学習

法則	設計上の問い	違反の兆候
ヤコブの法則	ユーザーが知っている他のサイトと同じように使えますか？	明確な利点のない標準外のパターン
メンタルモデル	構造はユーザーの考え方に合っていますか？	ユーザーの論理ではなく、内部構造に沿った構成
美的ユーザビリティ効果	見た目の良さが問題を覆い隠していませんか？	美しいのにテスト結果が悪いデザイン、洗練されているのに分かりにくいデザイン

---

インタラクションデザインの原則

個々のヒューリスティックや法則に加えて、次のフレームワークを使って、インターフェースの振る舞い全体の品質を評価します。

プロダクトの姿勢分析

すべてのプロダクトには、振る舞いにおける姿勢があります。姿勢の不一致は、診断されないデザイン上の失敗として最もよく見られるものの一つです。

姿勢	ユーザーの注意	使用時間	デザイン上の対応
ソブリン	十分に持続する	数時間	情報密度の高いレイアウト、落ち着いた配色、豊富なショートカット、キーボード優先
トランジェント	短時間、集中	数秒〜数分	分かりやすい UI、明るく明瞭なスタイル、最小限の機能、素早く開始・終了できる設計
デーモニック	なし（バックグラウンド）	継続的	通常は UI なし。設定はトランジェントパネルから行い、問題がある場合のみ表示

重要な診断ポイント： 1日に10回使うタスクに対して全画面フォームを用意するのは、トランジェントなインタラクションをソブリンなコンテナーに無理に押し込むことであり、姿勢の不一致です。解決策：インラインまたはオーバーレイで作成できるようにします。

終わりのない中級者向けデザイン

ユーザーの約80%は、いつまでも中級者のままです。初心者を卒業しても、エキスパートにはなりません。そうしたユーザーに合わせてデザインします。

対象	割合	デザイン戦略
初心者	約10%	すばやく中級者になれる道筋を用意します。複数のコマンド操作方法（メニュー → ツールバー → ショートカット）を提供します。インターフェースを過度に単純化しないでください。
中級者	約80%	作業セットを最適化します。よく使う機能はツールバーに配置します。それ以外の機能はプログレッシブディスクロージャーで表示します。設定を保持します。
エキスパート	約10%	作業を妨げないようにします。キーボードショートカット、カスタマイズ機能を用意し、不要な確認をなくします。

記憶を促す方法： メニュー項目の横にキーボードショートカットを表示します。これにより、ユーザーは教育的な（メニュー）→即時的な（ツールバー）→不可視の（ショートカット）コマンド操作方法へと自然に移行できます。

操作上の負担の監査

操作上の負担とは、ユーザーの目標達成につながらない作業のことです。これは、インターフェースが課す代償です。

操作上の負担の種類	例	改善策
ナビゲーション	何かを設定するために現在の画面を離れること、よく使う操作にたどり着くまでの複数ステップの移動	関連機能を同じ画面にまとめる、移動先を減らす
モーダル	元に戻せる操作に対する確認ダイアログ、編集前のアクセス許可リクエスト	確認の代わりに元に戻せるようにする、別の編集モードではなくインライン編集にする
認知	どの要素がクリック可能かを見分けること、優先度を5段階で理解すること	クリック可能であることが明確なデザインにする、選択肢を減らす、ユーザーのメンタルモデルに合わせる
記憶	タグ名を覚えておくこと、前の画面の情報を思い出すこと	オートコンプリートを使う、コンテキストを引き継ぐ、想起より認識を重視する

操作上の負担をすばやく確認する方法： 画面ごとに、「主要なタスクを完了するには何回操作する必要があるか？」と尋ねてください。次に、「そのうち、目標達成に直接つながる操作はいくつあるか？」と尋ねてください。その差が操作上の負担です。

オーケストレーションのチェックリスト

すべての要素が連携すると、インターフェースは意識されなくなり、ユーザーはツールではなく目標に集中できます。

• メンタルモデルに従う — コードの仕組みではなく、ユーザーの考え方に合った構成にする
• 少ないほど豊か — 目に見えるすべての要素に存在意義を持たせる
• 議論より直接操作 — ユーザーがダイアログボックスに入力するのではなく、オブジェクトを操作できるようにする
• 質問より選択肢 — 自由回答式の質問をするのではなく、選択肢を提示する
• ツールをすぐ使える場所に配置 — よく使う機能にすぐアクセスできるようにする
• モードレスなフィードバック — 操作の流れを中断せずにステータスを表示する
• 起こりやすい状況に合わせて設計 — 80％のケースに最適化する
• 緊急脱出装置は隠す — 危険な機能や使用頻度の低い機能は、利用可能なままアクセスしにくくする

応答速度のしきい値

応答時間	ユーザーの受け止め方	必要なデザイン
< 100ms	瞬時	フィードバック不要
100ms – 1s	すばやく応答	さりげないインジケーター（スピナー、パルス）
1s – 10s	遅い	プログレスバーまたはスケルトンスクリーン
> 10s	壊れている	バックグラウンド処理と通知を使う。操作をブロックしない

インターフェースのパラダイム、直接操作、アフォーダンスを含むインタラクションデザインの完全なリファレンスについては、references/interaction-design-principles.md を参照してください。

---

実行可能なフィードバックを伝える

フィードバックの公式

批評の各ポイントは、次の構成に従ってください。

［問題点］ ＋ ［違反している原則］ ＋ ［ユーザーにとって重要な理由］ ＋ ［具体的な推奨策］

悪いフィードバック： 「ナビゲーションが気に入りません。」

良いフィードバック： 「ナビゲーションにはトップレベル項目が12個あり、快適に一覧できる数を超えています（ヒックの法則）。ユーザーは必要なものをすばやく見つけるのに苦労します。推奨策： 段階的開示を用いて5～6個のカテゴリにまとめ、ホバーまたはクリック時にサブカテゴリを表示します。」

言うべきこと／言うべきでないこと

言うべきでないこと	言うべきこと
「これは気に入りません」	「これは［理由］により［原則］に違反しています」
「ユーザーには理解できません」	「これには［具体的な知識］が必要ですが、［ユーザーの種類］はその知識を持っていない可能性が高いです」
「もっと目立たせてください」	「主要なCTAの視覚的な強さが副次的なアクションと同じです。コントラストやサイズを上げてください」
「分かりにくいです」	「［要素A］と［要素B］の関係が不明確です。［グループ化／ラベル／近接配置］を追加してください」
「ごちゃごちゃしています」	「注目を競い合う要素が［X］個あります。視覚的な階層を適用し、［要素］を最大、［要素］をその次の大きさにしてください」
「青にするべきだと思います」	「現在の色はコントラスト要件を満たしていません（3.2:1に対し、必要なのは4.5:1です）」

フィードバックの精度をデザインの忠実度に合わせる

デザイン段階	批評する内容	批評しない内容
ワイヤーフレーム	情報の階層、フロー、コンテンツの優先順位、欠けている状態	色、タイポグラフィ、正確な余白、仕上がり
低忠実度のモックアップ	レイアウト、グループ分け、ラベル、インタラクションパターン、ナビゲーション	ピクセル単位の精度、最終的なコピー、アニメーション
高忠実度のモックアップ	上記すべてに加え、ビジュアルデザイン、コントラスト、一貫性、ブランドとの整合性	実装の詳細、パフォーマンス
プロトタイプ	上記すべてに加え、インタラクションフロー、状態遷移、エラー処理	コード品質
公開中の製品	すべて――ヒューリスティック評価全般	—

---

「クルーグテスト」――5つのユーザビリティチェック

すべての画面に適用します。

1. スキャン：ユーザーは必要なものを見つけられますか？

人は読まずに、ざっと目を通します。次の点を確認します。

• 明確な視覚的階層がありますか？（重要なものほど目立つ）
• 関連するコンテンツをまとめる領域が明確に定義されていますか？
• クリックできるものと、できないものがひと目でわかりますか？
• 不要な要素が注意を奪うなど、ノイズが最小限に抑えられていますか？

2. 満足化：ユーザーは適切なものを選べますか？

ユーザーは最適化するのではなく、満足化します（最初に見つかった妥当な選択肢を選びます）。次の点を確認します。

• 主要なアクションが最も目立つ要素になっていますか？
• ユーザーが推測しなくてもよいほど、ラベルが明確ですか？
• 偽のページ最下部はありませんか？（ユーザーがスクロールしないと見つからないコンテンツ）

3. 自明性：考えなくても使えますか？

ユーザーに考えさせるなら、デザインは機能していません。次の点を確認します。

• このページが何で、何をすべきかを5秒で説明できますか？
• ボタンやリンクには、気の利いた名前ではなく、動作を示すラベルが付いていますか？
• 今どこにいて、どうやってここに来て、次に何をすべきかが明確ですか？

4. ナビゲーション：ユーザーは自分の現在地を把握できますか？

ウェブでは、規模や方向、場所の感覚を失いがちです。次の点を確認します。

• 「現在地」を示す明確な表示がありますか？
• パンくずリストやナビゲーションで現在地が示されていますか？
• 常にホームに戻る方法がありますか？
• ページ名は、クリックした項目の名前と一致していますか？

5. 好意：デザインはユーザーを尊重していますか？

ユーザーは、最初は好意を持ってくれています。それを損なう要素がないか確認します。

• ユーザーが知りたい情報（価格、電話番号、配送料）を隠す
• 入力形式を厳しく制限し、ユーザーに負担をかける
• 不要な情報を尋ねる
• ハッピートーク（タスクを妨げるマーケティング文句）
• 派手な演出でコンテンツを見えにくくする（スプラッシュ画面、インタースティシャル、自動再生）

---

情報アーキテクチャの評価

個々の画面だけでなく、製品全体を通じてユーザーがコンテンツを見つけ、理解できるかを左右する構造上の判断も評価します。情報アーキテクチャは、ナビゲーション、ラベル付け、検索を支える基盤です。ここに問題があると、表面的な修正では解決できません。このフレームワークは、Rosenfeld、Morville、Arangoによる情報アーキテクチャモデルに基づいています。

情報アーキテクチャを構成する4つのシステム

情報環境はすべて、相互に関連する4つのシステムで構成されています。それぞれを評価します。

システム	制御する内容	確認すること
組織化	コンテンツのグループ分けと分類方法	カテゴリーはユーザーの考え方に合っていますか、それとも組織の構造に合わせていますか？明確な分類基準（トピック別、タスク別、対象者別）はありますか？
ラベル付け	コンテンツやカテゴリーの命名方法	ラベルは効率よく意味を伝えていますか？ユーザーはその言葉を使いますか？製品全体でラベルに一貫性がありますか？
ナビゲーション	ユーザーがコンテンツ内やコンテンツ間を移動する方法	どの時点でも、ユーザーは現在地を把握し（今どこにいるか）、先へ進み（どこへ行けるか）、元の場所に戻れますか（どうすれば戻れるか）？
検索	ユーザーがコンテンツを検索し、取得する方法	ユーザーが期待する場所で検索できますか？検索結果は意図に合っていますか？結果が多い場合に使えるファセットやフィルターはありますか？

組織体系の評価

確認項目	問題の兆候	改善の方向性
体系の一貫性	セクションによってトピック別、対象者別、形式別と分類方法が異なり、その理由が明確でない	主となる分類方法を1つ選びます。副次的な分類方法は意図的に使います（例：主分類はトピック別、副分類は対象者別）
ユーザーのメンタルモデルとの一致	カテゴリがユーザーの目的ではなく、社内の部門や技術アーキテクチャを反映している	ユーザーとカードソートを実施します。ユーザーに認識されやすいタスクやトピックを軸に再編成します
適切な粒度	カテゴリが多すぎる（最上位で7つ超）か、少なすぎる（各50項目以上を含むカテゴリが3つ）	最上位カテゴリは5～7個を目安にします。詳細は段階的に開示します
複数カテゴリにまたがるコンテンツ	論理上は複数のカテゴリに属するコンテンツが、1つのカテゴリにしか表示されない	相互リンク、関連コンテンツ、またはファセットによるアクセスを提供します。複数の階層に属する構成でも問題ありません
階層の深さの一貫性	5階層まで深く掘り下げられているセクションがある一方、階層のないセクションもある	セクション間で階層の深さを調整します。可能な限り階層を浅くし、深い内容には検索を活用します

ラベル体系の評価

ラベルはIAで最もテストしやすい要素であり、最も頻繁に問題が見つかる要素でもあります。

確認項目	問題の兆候	改善の方向性
ユーザーの言葉	ラベルに社内用語、製品のコードネーム、またはユーザーに馴染みのない専門用語が使われている	ユーザーを対象にラベルをテストします（ツリーテスト、カードソート）。インタビューでユーザーが使う言葉を採用します
具体性	「リソース」「ソリューション」「その他」「管理」などの曖昧なラベル	中身を説明するラベルにします。「リソース」ではなく「API ドキュメント」のようにします
一貫性	同じ概念が場所によって異なるラベルで表されている（「設定」／「環境設定」／「構成」）	統制語彙を作成します。概念ごとにラベルを1つ決め、どこでも同じものを使います
相互排他性	2つのカテゴリの違いがユーザーにわからない（「製品」と「ソリューション」、「ヘルプ」と「サポート」）	重複するカテゴリを統合するか、説明を加えて違いを明確にします
アイコンのみのラベル	一般に理解されていない概念に、テキストのないアイコンが使われている	アイコンには必ずテキストラベルを添えます。アイコンだけでよいのは、検索、ホーム、閉じるなど、誰もが理解できる概念に限られます

ナビゲーション体系の評価

確認項目	問題の兆候	改善の方向性
現在地の把握	ユーザーが階層内の現在地を把握できない	パンくずリストを追加し、現在のナビゲーション項目を強調表示し、ページタイトルをナビゲーションラベルに合わせます
グローバルナビゲーションとローカルナビゲーション	グローバルナビゲーションしかなく、ユーザーがセクション内を移動できない	現在のセクションに応じて変化するローカルナビゲーションまたはコンテキストナビゲーションを追加します
階層の深さと幅	よく利用するコンテンツにたどり着くまでに4回以上クリックする必要がある深い階層	階層を浅くします。よく利用されるページへのショートカットやコンテキストリンクを用意します
コンテキストリンク	コンテンツページが行き止まりになっており、関連項目や次のステップがない	コンテンツ内に「関連コンテンツ」、相互リンク、コンテキストナビゲーションを追加します
補助ナビゲーション	サイトマップも索引もなく、コンテンツへの別の経路もない	複雑なサイトには、補助ナビゲーションを少なくとも1つ用意します（サイトマップ、A～Z索引、ガイド付きの経路）

検索システムの評価

すべての製品に検索が必要とは限りませんが、検索機能がある場合は厳密に評価してください。

チェック項目	問題の兆候	改善の方向性
利用しやすさ	コンテンツの多いページで検索ボックスが見つけにくい、小さすぎる、または表示されていない	すべてのページから検索にアクセスできるよう、目立つ位置に配置します
対象範囲の明確さ	検索対象がわからない（このセクション全体か、サイト全体か、ヘルプドキュメントのみか）	検索対象を明示します。複数のインデックスがある場合は、対象範囲を切り替えられるようにします
検索結果の品質	検索結果がユーザーの意図に合わず、関連性の低い項目が上位に表示される	検索アルゴリズムを見直し、メタデータを追加し、よくある検索語句に対するベストベットを実装します
検索結果がない場合の体験	案内がなく、「検索結果が見つかりません」と表示される	代替案やスペルの確認を提案し、代わりにカテゴリから閲覧できるようにします
ファセットによる絞り込み	検索結果が大量に表示されても、絞り込む手段がない	コンテンツの属性（種類、日付、カテゴリ、ステータス）に基づくファセットやフィルターを追加します

IA の簡易診断

よくある IA の問題が浮き彫りになる、5 つの質問です。

1. 新しいユーザーが、[主要なコンテンツ] を 3 回以内のクリックで見つけられますか？ 見つけられない場合は、階層が深すぎるか、ラベルが適切ではありません
2. 最上位のカテゴリは、組織外の人にも理解できますか？ 理解できない場合は、組織構造を反映した分類になっており、ユーザーのメンタルモデルが考慮されていません
3. ナビゲーションをなくしても、各ページのタイトルから内容を推測できますか？ できない場合は、ラベルが十分な意味を伝えていません
4. ユーザーが、妥当な理由から 2 か所のどちらにも探しに行きそうなコンテンツはありますか？ ある場合は、どちらの経路からもそのコンテンツにたどり着けますか？ たどり着けない場合は、相互リンクに問題があります
5. ユーザーは検索時に、上位 3 件の結果から必要な情報を見つけられますか？ 見つけられない場合は、検索インデックス、メタデータ、または検索結果のランキングを見直す必要があります

---

コンテンツと UX ライティングの評価

言葉はデザインの素材です。インターフェースに表示されるテキストを書くことは、ユーザー体験をデザインすることでもあります。コンテンツの評価は、文法や文体の好みではなく、その言葉がユーザーの目標達成に役立っているかを確認するものです。このフレームワークは、確立された UX ライティングの原則に基づいています。

3 つの視点

インターフェースのすべてのテキストを、次の 3 つの視点から評価します。

視点	問い	問題の兆候
使いやすさ	言葉は、ユーザーがインターフェースを使う助けになっていますか？ 明確で、誰にとっても利用しやすいものですか？	ユーザーがためらう、誤解する、または読み返す必要がある。ラベルがユーザーのメンタルモデルと一致しない。説明が、ユーザーにはない知識を前提としている
有用性	言葉は、ユーザーがしたいことを表していますか？ 価値を提供していますか？	タスクの役に立たない愛想のよい文言。案内を載せるべき場所にあるマーケティング文句。ユーザーではなく組織のために存在するコンテンツ
責任ある表現	言葉が誤用されるおそれはありませんか？ 正確で、思いやりがあり、誰も排除しない表現ですか？	エラーメッセージでユーザーを責める表現。特定の人を排除する代名詞や思い込み。操作を誘導するパターン（確認の際に罪悪感を抱かせる表現、偽りの緊急性）

エラーメッセージの評価

ユーザーがすでに困っている状況では、コンテンツの品質が特に重要になります。

基準	良い例	悪い例
何が起きたかを説明する	「ファイルサイズが大きすぎるため、変更を保存できませんでした（最大 25MB）」	「エラー 413」
次にできることを示す	「画像のサイズを小さくするか、添付ファイルを削除してみてください」	「もう一度お試しください」
ユーザーを責めない	「そのページが見つかりませんでした」	「無効な URL を入力しました」
具体的に説明する	「パスワードは 8 文字以上で、数字を 1 つ含める必要があります」	「無効なパスワードです」

エッジケースだけでなく、ストレスケースも考慮します。 まれな技術的状況にとどまらず、配慮のない言葉が実害をもたらす、感情的に切迫した状況も考慮してください。例：健康危機に直面している人に対し、アプリが陽気に「今週は利用状況がありません！」と表示するケース。

音声とトーンの評価

要素	確認事項	違反の兆候
音声の一貫性	すべての画面で、同じ主体として感じられますか？	設定ではフォーマル、オンボーディングではカジュアル、エラーではロボットのようで、一貫した個性がありません
トーンの適切さ	トーンはユーザーの感情に合っていますか？	エラーからの復旧時にふざけた調子。お祝いの場面で企業的な調子。状況にかかわらず一律のトーン
個性より明確さを優先	エラー、セキュリティ、支払いなど重要な場面で、魅力より明確さを優先していますか？	意味が伝わりにくくなる気の利いた文言。エラー状態での冗談。使いやすさを損なうほど強いブランドボイス

トーンは音量つまみではなく、チャンネル切り替えです。 適切なトーンとは、同じボイスを強めたり弱めたりすることではなく、状況に応じて言葉の選び方、構成、強調点を変えることです。

コンテンツ批評チェックリスト

• ラベルがユーザーの言葉に合っている — 用語は内部の専門用語ではなく、調査に基づいています（H2：現実世界との一致）
• ボタンのラベルが操作を説明している — 「送信」ではなく「プロジェクトを保存」、「続行」ではなく「アカウントを削除」（想起より認識）
• マイクロコピーが認知負荷を軽減している — ヘルパーテキストは、ユーザーが必要とする場所に表示され、別のヘルプセクションにまとめられていません（テスラーの法則）
• 空の状態が次の操作を案内している — 何も表示しない、または単にメッセージを表示するだけではなく、何をすべきか、その理由も示します（ブランクスレートパターン）
• エラーメッセージが役に立つ — 責めるのではなく説明し、修正方法を提案し、具体的に伝えます（H9：エラーからの復旧）
• 確認テキストが操作内容と一致している — 「本当に実行しますか？」ではなく「3個のファイルを完全に削除しますか？」（H5：エラーの防止）
• 進行状況のテキストが正確 — ステップのラベルは各ステップで実際に行われることを反映し、「詳細」のような曖昧なラベルではありません（H1：可視性）
• 不要な明るさがない — すべての言葉がユーザーのタスクに役立っています。流れを妨げる埋め草や宣伝文句はありません（H8：ミニマリストデザイン）
• インクルーシブな言葉遣い — 性別による固定観念、文化的な思い込み、排他的な表現パターンはありません。この製品が自分向けではないと感じる人がいないか考慮します
• アクセシブルな文章 — 平易な言葉、意味が明確なリンクテキスト、内容を説明する見出しを使用しています。スクリーンリーダーでも利用できます

大規模なコンテンツの一貫性

複数のライターやチームが関わる製品をレビューする場合：

ツール	目的
コンテンツスタイルガイド	ボイス、トーン、用語、文法に関する決定事項を記録します
用語リスト／用語集	重要な用語と、承認された使い方を定義します
UI テキストパターン	共通要素（ボタン、エラー、通知、空の状態）で再利用できるテキストパターンです
トーンプロファイル	状況（オンボーディング、エラー、成功、ヘルプ）ごとにボイスをどう調整するかを定義します

一貫性とは、厳格なルールを設けることではなく、ユーザーにとって体験が予測しやすく、信頼できるものになることです。すべてのボタン、エラー、通知で同じパターンに従えば、ユーザーはシステムをより早く理解できます。

---

よくあるデザイン上の問題

頻繁に発生する問題を素早く見分けるためのパターンです。

問題	症状	根本原因	改善の方向性
選択麻痺	ユーザーが何もクリックしない。操作開始までに時間がかかる	選択肢が多すぎて、優先順位がない	選択肢を減らし、デフォルトを設定し、段階的に情報を開示する
分かりにくいナビゲーション	リンク先が分からない	アイコンだけのナビゲーション、気の利いたラベル、説明がない	テキストラベルを追加し、一般的な用語を使う
機能の詰め込みすぎ	ユーザーが機能の10％しか使わない	すべてが一度に表示される	段階的に情報を開示し、役割に応じたビューを用意する
見えない最下部	重要なコンテンツを見落とす	スクロールを促す手がかりがないまま、重要なコンテンツが画面下にある	視覚的な連続性、コンテンツの予告、スクロールインジケーターを追加する
モーダルの多用	読まずに閉じてしまう	作業を中断させ、文脈に沿っていないモーダル	インラインメッセージや文脈に応じた情報開示を使う
システム状態が見えない	操作が成功したか分からない	クリックや送信後にフィードバックがない	読み込み状態、成功確認、進捗状況を追加する
パターンに一貫性がない	ページを移動するたびに操作を覚え直す	同じ機能でもページによってUIが異なる	コンポーネントライブラリを作成し、それに従う
専門用語の壁	用語が分からず混乱する	UIに社内用語や技術用語が使われている	ラベルをユーザーテストし、ユーザーの語彙に合わせる
エラーから先に進めない	エラーから復旧できない	エラーメッセージに対処方法がない	何が起きたか、どう解決するか、ワンクリックで復旧する方法を説明する
認知的な過負荷	複雑なフォームを途中でやめてしまう	入力項目が多すぎる、項目が区切られていない、進捗が分からない	複数ステップのウィザード、スマートなデフォルト、段階的な情報開示を使う

パターンを詳しく分析するには、references/design-patterns-catalog.md を参照してください。

---

クイック批評チェックリスト

デザインレビューで使用してください。各項目は特定の原則に対応しています。

情報とコンテンツ

• 主な操作がすぐに分かる — （視覚的階層、H8）
• コンテンツの階層が重要度に合っている — （プレグナンツの法則）
• テキストを流し読みしやすい。見出し、短い段落、箇条書きがある — （スキャニングの原則）
• ラベルに社内用語ではなくユーザーの言葉を使っている — （H2：現実世界との一致）
• 不要なコンテンツや過剰に親しげな表現がない — （H8：ミニマリストデザイン）

レイアウトとグループ化

• 関連する項目が視覚的にグループ化されている — （近接の法則、共通領域）
• グループの境界が明確である — （共通領域の法則）
• 似た要素が似た外観になっている — （類同の法則）
• 視覚的階層が視線を誘導している。主要 → 二次 → 三次 — （フォン・レストルフ効果）
• 余白がセクションを効果的に区切っている — （近接の法則）

ナビゲーションと道案内

• ユーザーが現在の場所を把握できる — （H1：可視性、ナビゲーション）
• ユーザーが次に何をすべきか分かる — （H6：再認）
• 常に戻る方法やホームに戻る方法がある — （H3：ユーザーの制御）
• ナビゲーションに標準的なパターンを使っている — （ヤコブの法則）
• ページのタイトルや見出しが、クリックした項目と一致している — （H4：一貫性）

インタラクションとフィードバック

• インタラクティブな要素が、操作できるように見える — （クリック可能性の原則）
• クリック対象が十分な大きさである — （フィッツの法則。タッチ操作では44×44px）
• 操作に対してすぐにフィードバックがある — （ドハティのしきい値、<400ms）
• 破壊的な操作に確認を求める — （H5：エラーの防止）
• ユーザーが操作を取り消せる — （H3：ユーザーの制御）

フォームと入力

• すべての入力欄に見えるラベルがある — （H6：再認）
• 必須項目が示されている — （H5：エラーの防止）
• 入力形式に柔軟性がある — （ポステルの法則）
• 適切なデフォルト値によって作業量を減らしている — （テスラーの法則）
• エラーの原因と解決方法の両方を説明している — （H9：エラーからの復旧）

状態とエッジケース

• 空の状態が設計されている（何も表示されない状態ではない） — （ブランクスレートパターン）
• 読み込み状態が設計されている — （H1：可視性）
• エラー状態が設計されている — （H9：エラーからの復旧）
• 成功状態で確認を示す — （H1：可視性、ピーク・エンドの法則）
• はみ出しや切り詰めに適切に対処している — （レスポンシブデザイン）

---

参考ファイル

• references/heuristics-and-laws.md — Nielsen の 10 のヒューリスティック（詳細）と、デザイン原則ごとに整理された 27 の UX 法則すべて
• references/interaction-design-principles.md — プロダクトの姿勢、永続的な中級者、労力の種類、オーケストレーション、インターフェースのパラダイム、直接操作、アフォーダンス
• references/design-patterns-catalog.md — 機能別に整理された 50 以上のインタラクションパターン：ナビゲーション、入力、コンテンツ、フィードバック、ソーシャル、データ操作。使用する場面、使用しない場面、よくある誤用、パターン選択ガイド
• references/visual-design-principles.md — ビジュアルヒエラルキー、タイポグラフィ、色、余白、レイアウトの評価ポイント

テンプレート

• templates/design-critique-template.md — あらゆるデザインレビューに使える、構成済みの批評レポート
• templates/heuristic-evaluation-template.md — 記入式のヒューリスティック評価スコアカード

例

• examples/critique-walkthrough.md — 架空の SaaS ダッシュボードを対象にした、最初から最後までの批評
• examples/common-design-problems.md — 修正前後の分析を含むパターン認識ガイド
• examples/pattern-selection-walkthrough.md — タスク作成フローを対象にした、パターン選択とインタラクションデザイン評価の一連の手順