ユーザビリティの10原則は、ヤコブ・ニールセンが1990年代に提唱した評価の枠組みです。30年近く経った今も使われ続けているのは、技術ではなく人の認知の仕組みに基づいているためです。画面の見た目が変わっても、人が迷う理由は変わりません。
この枠組みの実務的な価値は、専門家でなくても自社サイトを一定の観点で点検できることにあります。「なんとなく使いにくい」を、具体的な項目に分解できます。
この記事では、10の原則がWebサイトで何を指すのか、どう確認するのか、違反すると何が起きるのかを整理します。
この記事でわかること
・10原則は人の認知に基づくため、今も有効
・専門家でなくても点検に使える
・原則ごとに確認する箇所が決まっている
・違反したときに起きる具体的な問題
・すべてを満たす必要はない
・点検の後は、実際の利用で検証する
状態の可視化と、現実世界との一致
最初の2つは、今どうなっているかが分かること、そして言葉が通じることです。
| 原則 | Webサイトでの意味 | 確認方法 |
|---|---|---|
| システム状態の可視化 | 処理中や送信完了が分かる | フォーム送信後の表示を確認 |
| 現実世界との一致 | 業界用語ではなく利用者の言葉 | 初見の人にメニュー名を見せる |
フォーム送信後に何も表示されないサイトは、いまだに存在します。利用者は送信できたか分からず、二重に送信するか離脱します。また、社内でしか通じない言葉をメニューに使うと、探している人が見つけられません。
フォームの設計は入力フォームの離脱率を改善するデザインの工夫｜商談化まで見た設計を参照してください。
送信後の状態が分からないと、二重送信か離脱が起きる。
社内用語をメニューに使うと、探している人が見つけられない。
利用者の自由と、一貫性
次の2つは、やり直せること、そして同じものが同じ意味で使われることです。
| 原則 | Webサイトでの意味 | 確認方法 |
|---|---|---|
| 利用者の主導権と自由 | 戻れる、やめられる | 各画面から前へ戻れるか確認 |
| 一貫性と標準化 | 同じ意味の要素が同じ形 | 全ページのボタンの形を比較 |
入力途中で前の画面に戻れないフォームは、間違いに気づいても直せません。また、ページごとにボタンの色や形が違うと、それがボタンだと認識するまでに時間がかかります。
一貫性の設計はデザインシステムとは？導入するメリットと作り方の基本を参照してください。
戻れないフォームは、間違いに気づいても直せない。
要素の見た目が揃っていないと、認識に時間がかかる。
エラーの防止と、記憶に頼らせない設計
この2つは、間違えさせないこと、そして覚えさせないことです。
| 原則 | Webサイトでの意味 | 確認方法 |
|---|---|---|
| エラーの防止 | そもそも間違えない設計 | 入力欄の形式を確認 |
| 記憶より認識 | 覚えずに選べる | 前の画面の情報が必要か確認 |
電話番号の入力でハイフンの有無を指定しながら、入力欄が自由記述のままという設計は、エラーを誘発します。形式を限定するか、どちらでも受け付けるようにしてください。
また、確認画面で内容を修正しようとしたときに、前の画面の入力が消えるのは記憶に頼らせる設計です。
エラーを表示するより、間違えない設計にする。
前の画面の内容を覚えていないと進めない設計は避ける。
柔軟性と、無駄のないデザイン
この2つは、慣れた人が速く使えること、そして余計なものがないことです。
| 原則 | Webサイトでの意味 | 確認方法 |
|---|---|---|
| 柔軟性と効率性 | 慣れた人の近道がある | 再訪者の操作を確認 |
| 美的で最小限のデザイン | 必要な情報だけを置く | 1画面の要素数を数える |
最小限とは、装飾を削ることではなく、その画面の目的に不要な情報を置かないことです。すべてを目立たせようとすると、何も目立たなくなります。
情報量の設計は余白のデザインが与える印象｜詰め込みが読みにくさを生む理由も参考になります。
最小限とは、目的に不要な情報を置かないこと。
すべてを目立たせると、何も目立たなくなる。
エラーからの回復と、ヘルプ
最後の2つは、間違えたときに直せること、そして困ったときに助けがあることです。
| 原則 | Webサイトでの意味 | 確認方法 |
|---|---|---|
| エラーからの回復 | 何が問題で、どう直すか分かる | わざと誤入力して確認 |
| ヘルプとドキュメント | 必要なときに見つかる | 疑問が生じる箇所を確認 |
「入力内容に誤りがあります」とだけ表示されるフォームは、どこを直せばよいか分かりません。該当箇所を示し、どう直せばよいかを書いてください。
実際に誤った入力をして、表示されるメッセージを確認する作業を推奨します。開発時に想定した内容と、実際の表示が違うことがあります。
エラーは、場所と直し方まで示す。
実際に誤入力して、表示を確認する。
すべてを満たす必要はない
10原則は点検の観点であり、達成すべき目標ではありません。
- サイトの目的によって、重要度の高い原則は変わる
- 問い合わせが主目的なら、エラー関連の原則が重い
- 情報提供が主目的なら、一貫性と最小限の原則が重い
- すべてを完璧にしようとすると、工数が見合わない
- 違反していても実害がない箇所は、優先度を下げてよい
点検した結果、修正の優先順位をつけてください。成果に影響する箇所から着手するのが基本です。
10原則は点検の観点であり、達成目標ではない。
成果に影響する箇所から優先的に直す。
点検の後は実際の利用で検証する
この枠組みによる点検は問題の候補を洗い出すものであり、実際に問題かどうかは利用で確認します。
| 方法 | 分かること | コスト |
|---|---|---|
| 10原則での点検 | 問題の候補 | 低い |
| 実際の利用者による操作 | 本当に迷うか | 中程度 |
| 行動データの確認 | どこで離脱しているか | 低い（計測があれば） |
点検で見つかった候補のうち、実際に離脱が起きている箇所を優先してください。検証の方法はユーザビリティテストのやり方｜低コストで始める実践手順、離脱箇所の把握はヒートマップ分析のやり方｜何を見て、どこを直すのかを参照してください。
点検は問題の候補を出すもの。実際の利用で確認する。
離脱が起きている箇所を優先して直す。
工程全体の中で見る
この工程の前後には、情報の分類と構造の設計があります。全体の流れは情報設計（IA）とは？わかりやすいサイト構成の作り方を参照してください。
よくある失敗
すべての原則を完璧に満たそうとする
工数が見合いません。成果に影響する箇所から優先してください。
エラーメッセージを確認しない
実際に誤入力して表示を確認してください。想定と違うことがあります。
最小限を装飾の削減と誤解する
目的に不要な情報を置かないことです。必要な情報まで削ると判断できなくなります。
社内用語をそのままメニューに使う
探している人が見つけられません。利用者が使う言葉に置き換えてください。
点検だけで終わらせる
問題の候補が出るだけです。実際の利用や行動データで確認してください。
よくある質問
誰が点検すべきですか
複数名で行うことを推奨します。1人だと見落としが生じ、また自社サイトに慣れた人は迷わないため問題に気づけません。可能であれば、そのサイトを初めて見る人を含めてください。
どのくらいの頻度で行うべきですか
大きな変更を行った後と、定期的に年1回程度が目安です。ページを追加し続けると、一貫性が崩れていくためです。
スマートフォンでも同じ観点でよいですか
同じ観点ですが、確認すべき箇所が変わります。特にタップ領域の大きさ、入力のしやすさ、戻る操作の挙動は、スマートフォン特有の確認点になります。
競合サイトの点検にも使えますか
使えます。同じ観点で比較すると、自社の相対的な位置が分かります。ただし競合が優れている点をそのまま真似ると、自社の目的に合わないことがあります。分析の考え方は競合サイト分析のやり方｜何を見て、どう自社の判断に変えるかを参照してください。
この原則は古くないですか
提唱されたのは1990年代ですが、人の認知の仕組みに基づいているため、技術が変わっても有効性は保たれています。むしろ画面の形式が多様化した現在のほうが、共通の観点として使いやすい面があります。
まとめ
ユーザビリティの10原則は、30年近く前に提唱されたものですが今も使われ続けています。技術ではなく人の認知の仕組みに基づいているため、画面の見た目が変わっても人が迷う理由は変わらないからです。この枠組みの実務的な価値は、専門家でなくても自社サイトを一定の観点で点検できることにあります。
点検を通じて「なんとなく使いにくい」を具体的な項目に分解できます。フォーム送信後の状態が分からない、社内用語がメニューに使われている、エラーメッセージが場所を示していない。こうした問題は、指摘されれば誰でも理解できますが、観点がないと気づけません。
ただし10原則はすべてを満たすべき目標ではなく、点検の観点です。サイトの目的によって重要度の高い原則は変わり、違反していても実害がない箇所は優先度を下げて構いません。また点検で出るのは問題の候補であり、実際に問題かどうかは利用者の操作や行動データで確認する必要があります。離脱が実際に起きている箇所から優先して直してください。
当社ではホームページ制作において、既存サイトの点検と改善をご相談いただけます。デザイン面の見直しはデザイン制作とあわせてご検討ください。
