【保存版】全訳：Webサイトユーザビリティーチェックリスト25項目

本質的な知識というものは時が経っても価値が失われません。

User Effect の 「25-point Website Usability Checklist（Webサイトユーザビリティーチェックリスト25項目）」は2009年に公開されてから数年が経過していますが、今でも十分価値のあるWebサイトのチェックリストです。

今後も長く使えそうな知識でしたので、本家サイトの説明文を和訳（意訳）してみました。

当初は自分が見返す用にざっとメモしておく程度で考えていたのですが、予想以上に和訳に時間を取られて悔しくなったので自分ひとりだけで使うのではもったいないと思いましたので、このブログの読者の方に共有します。

※最後に日本語版のチェックリスト（PDF・A4一枚）を用意しています。手っ取り早くチェックリストだけご覧になりたい方はこちらをクリックして先へお進みください。

以下、本家サイトの説明を和訳したものです。

概要

このリストは、おおまかに次の４つのセクションで構成されています。

• (I) Accessibility（アクセスのしやすさ）
• (II) Identity（身元の証明）
• (III) Navigation（ナビゲーション／導線）
• (IV) Content（コンテンツ）

全てのセクションと項目を以下に筋道立てて説明していきますが、単にPDF1ページにまとめたチェックリストをダウンロードしていただいても構いません。評価方法はシンプルにすべく３つのレーティングにしています。

• (1) 緑のチェックマーク = 良い／合格
• (2) 赤のチェックマーク = 要努力だが致命的ではない
• (3) 赤のバツマーク = 悪い／不合格

必ずしも全てのWebサイトがこの全項目に適合している必要はありません。

Section I. Accessibility（アクセスのしやすさ）

このセクションは従来からの”アクセスのしやすさの問題”にとどまらず、サイト訪問者がWebサイト上の情報にアクセス可能なように保つことにつながりそなことも含みます。もし誰もあなたのサイトをブラウザで読み込むことができず、または文字が小さすぎて読めないなら、そもそもユーザビリティーについての話はどうでも良いということになるでしょう。

1. Site Load-time Is Reasonable
（サイトの読み込み時間は適切か？）

古典的だと言われるかもしれませんが、私は未だに100KB以下（できれあば60KB以下）のサイトを見るのが好きです。延々と読み込み時間がかかるサイトなら、ほとんどの人はすぐ立ち去るでしょう。もちろん今では大多数がブロードバンド環境なのですが、むしろそのせいで我慢できなくなってきています。

2. Adequate Text-to-Background Contrast
（文字と背景のコントラストは適切か？）

薄いグレーの上に濃いグレーだとスタイリッシュに見えるかもしれませんが、私はあなたのブログを読んで視力を落としたくありません。目とモニターは多岐に渡るものですから、メインのコピー文はコントラストを高くするようにしてください。そう、昔ながらの白黒がベストなことが多いのです。

3. Font Size/Spacing Is Easy to Read
（フォントサイズ／余白は読みやすいものになっているか？）

理想的な文字の大きさについての意見は様々ですが、若干大き過ぎるくらいの方がマシです。読み辛さはイライラを煽りますし、イライラさせることはサイトから離脱することにつながります。また、行間が適切なことにも配慮してください。余白はデザイナーの親友ですよ。

4. Flash & Add-ons Are Used Sparingly
（フラッシュとアドオンは控えめか？）

どんなに見栄えの良いサイトであろうと、プラグインの読み込みで5分待ってくれる人はいないでしょう。新しい技術を使うのは控えめにして、目的達成のためここぞ、というときのみ使うようにしてください。標準的なHTMLとCSSを堅持することは、検索エンジン対策としてもプラスです。

5. Images Have Appropriate ALT Tags
（画像には適切なALTタグが設定されているか？）

ALTタグは弱視の人のためだけではなく、検索エンジンが何の画像なのかを理解するのにも必要なものです。特に画像がメニューアイテムなどの重要なコンテンツの場合には必須のものですよ。

6. Site Has Custom Not-found/404 Page
（独自のNot-found/404ページが用意されているか？）

該当ページが存在しないときに白紙の “404 Not Found”ページが表示されるようなら、顧客は去っていくでしょう。独自の404ページ、できればサイト訪問者をコンテンツに誘導するものを用意しましょう。

Section II. Identity（身元の証明）

初めてあなたのサイトを訪れた人が抱く疑問「あなたは何者なの？」に対してすぐ答えられるようにしておくこと、そして「何をしている人なの？」「信じてもいい根拠は？」などの関連質問についてもクリアにしておくことが肝要です。

7. Company Logo Is Prominently Placed
（会社ロゴは目立つ場所に配置されているか？）

ロゴやブランド名をわかりやすいところ（通常は画面の左上）に配置しましょう。サイト訪問者はロゴやブランド名が存在することを期待していますし、安心感があれば好感を持つものです。

8. Tagline Makes Company’s Purpose Clear
（キャッチコピーは会社の目的を明確に表しているか？）

説明的なキャッチコピーで「あなたは何をしている人（企業）なのか？」という疑問に簡潔に答えるようにしてください。マーケティング用語や、少しの言葉で独自の価値を提案することはやめておきましょう。これはSEOの面でもプラスです。

9. Home-page Is Digestible In 5 Seconds
（トップページは5秒で要点を掴めるか？）

ユーザビリティーの世界では、しばしば5秒ルールについて語られます。何秒が上限なのかについては反対意見もあるでしょうが、いずれにせよWebサイトを訪れる人たちは気まぐれで、トップページをほんの数分見て要点が得られることを求めています。

10. Clear Path to Company Information
（会社情報がどこにあるかが明確か？）

古き良き「会社概要」ページは退屈に見えるかもしれませんが、Webでは信用が重要ですし、サイト訪問者はあなたのことを簡単に知る方法を求めているものです。

11. Clear Path to Contact Information
（お問い合わせがどこにあるかが明確か？）

前項と同じく、サイト訪問者は必要なときあなたに連絡を取る方法を求めています。もしあなたに問い合わせをする方法が無ければ、ビジネスを行うことも難しいでしょう。可能であれば、連絡先は画像ではなく文字で掲載してください。そうすれば（ローカル情報を探している人たちも使う）検索エンジンに拾ってもらえます。

Section III. Navigation（ナビゲーション／導線）

サイト訪問者はあなたが何者で何をしている人なのかがわかった後、自身の興味・関心があるコンテンツへたどり着く経路を必要とします。情報設計は大きなトピックですが、以下のポイントで基本的な点を押さえることができます。

12. Main Navigation Is Easily Identifiable
（メインナビゲーションがカンタンに識別できるか？）

初期のブラウザが登場した頃から、ほとんど全てのWebサイトがメインメニューを持っています。あなたのサイトのメインナビゲーションを見つけやすく、読みやすく、使いやすいものにしましょう。もし２つ以上ナビゲーションエリアがあるのなら、それらの違いが何なのかを明確にしてください。

13. Navigation Labels Are Clear & Concise
（ナビゲーションのラベルは明確かつ簡潔か？）

「お問い合わせ」がきちんとしていないのに「オンラインで私たちにお問い合わせください」なんて言ってはダメですよ。メインナビゲーションは短く、的確で、ごく普通の人が手探りでカンタンに使えるようにしましょう。

14. Number of Buttons/Links Is Reasonable
（ボタンやリンクの数は適切か？）

心理学者たちは人間がいくつの情報を処理できるか議論するのが好きですが、メニューアイテムが7個かそれ以上になりそうなら本当にそれらが必要なのかを真剣に考えてみてください。もしあなたがjavascriptを使った3層のメニューを使っているなら、悪いことは言わないからやり直しましょう。

15. Company Logo Is Linked to Home-page
（会社ロゴはトップページにリンクされているか？）

これは些細な話に聞こえるかもしれませんが、人はロゴがトップページにリンクされていることを期待していますし、そうでないと混乱を招きます。私が見たことのある動画では、ユーザーがロゴを何度もクリックした挙げ句、次にどうすればいいかわからない状態に陥ってしまいました。

16. Links Are Consistent & Easy to Identify
（リンクに統一感があり、かつ容易にリンクであると分かるか？）

青の下線が引かれたリンクはWebの要です。多少手を加えるのは構いませんが、少なくともリンクを青色にするか下線を引くことを考えてみてください。リンクは目立つべきで、かつコンテンツを壊さないよう控えめに扱うべきです。

17. Site Search Is Easy to Access
（サイト内検索はカンタンにたどり着けるか？）

もしサイト内検索を設置しているなら、目立つようにしてください。ユーザビリティーのガイドラインではページの右上が好ましい傾向にあります。ボタンはシンプルかつ明確にしておきましょう。- “検索する”がほとんどのサイトにとってベストです。

Section IV. Content（コンテンツ）

あなたも聞いたことがあるでしょう – コンテンツが王様だと。王宮をボロボロにしたくないのなら、品質が安定していて、整理されており、それでいて流し読みしやすいコンテンツが必要になります。

18. Major Headings Are Clear & Descriptive
（大見出しが明確かつ説明的になっているか？）

Webでは、ほとんどの人はきちんと読まず、流し読みします。コンテンツを分けて整理するために、大小の見出しを使いましょう。見出しは明確に、かつSEOのためにh1やh2などのhタグを使うべきです。

19. Critical Content Is Above The Fold
（重要なコンテンツがページを開いて最初に見える画面の範囲内に配置されているか？）

“折り返し”は一画面に収まる範囲の下限になる、想定上のページ区切り線のことです。折り返しより下にコンテンツを置くことはできますが、あなたが何者なのか、または何をしている人なのかを知るのに重要なものは、（特にトップページでは）最初に目に入る一画面の範囲内に配置すべきです。どのような人が訪れるサイトなのかにもよりますが、画面サイズを1024×768くらいで想定しておくのが近頃の平均的な考え方です。

20. Styles & Colors Are Consistent
（様式と配色は一貫性があるか？）

サイト訪問者は、サイトの一貫性によってあなたのサイト内にいることを認識することを忘れないでください。- サイト訪問者を混乱させれば、彼ら・彼女らは去っていくでしょう。レイアウト、見出し、装飾はサイト全体で首尾一貫しているべきで、各色が持つ意味も通常は同じであるべきです。あるページでは赤い見出しを使い、他のページでは赤いリンクを使い、また別のところで赤い文字を使うようなことはやめましょう。

21. Emphasis (bold, etc.) Is Used Sparingly
（太字などの強調は控えめにしているか？）

人間の認識力についての事実：全てのものに注目しようとすると、実際は何についても注目することができません。我々は皆、そのようなサイトを目にしてきました – 赤く、点滅していて、下線付きで”NEW!”、のようなものを。そのようなことをする人になってはいけませんよ。

22. Ads & Pop-ups Are Unobtrusive
（広告やポップアップが出しゃばっていないか？）

広告は避けては通れないものではありますが、サイトにうまくフィットさせるようにしましょう。広告やポップアップを無理に押し付けようとはしないでください。併せて、サイト訪問者に断りを入れて広告であることを明確にしましょう。広告とコンテンツの境目をあいまいにし過ぎると、あなたのコンテンツに傷が付くかもしれませんよ。

23. Main Copy Is Concise & Explanatory
（メインのコピー文は簡潔で説明的か？）

コピーライティング講座ではありませんが、トップページに目をやってください – 同じことを半分の言葉で言い表せませんか？具体的かつ説明的にして、専門用語を避けるようにしてください – もしあなたが”シナジー効果にレバレッジを効かせる”ことができると言っても、誰も気に留めません。

24. URLs Are Meaningful & User-friendly
（URLは意味のある文字列かつサイト訪問者にやさしいものか？）

これは議論を呼ぶポイントではありますが、一般的に意味のあるキーワードをもとにしたURLはサイト訪問者にも検索エンジンにも良いものです。URLを更新するためだけにサイト全体を改修する必要はありませんが、できることをやるということで（URLは）説明的かつ親しみやすいものにしましょう。

25. HTML Page Titles Are Explanatory
（HTMLページのタイトルは説明的か？）

さらに重要なこととして、ページタイトル（TITLEタグの中身）は説明的で、他と重複しておらず、たくさんのキーワードを詰め込んでいないものにしてください。ページタイトルは検索エンジン経由で来る人たちが最初に見るもので、タイトルが意味をなしていなかったりスパムのようなものだったりすると、彼ら・彼女らは次の検索結果へ行ってしまうでしょう。

日本語訳付きチェックリストのダウンロードはこちら

本家のチェックリストを流用して、日本語訳付きのチェックリストを作ってみました。こちらをクリックするとPDFファイルをダウンロードできます。

WebサイトユーザビリティチェックリストPDFファイルをダウンロード

印刷するとA4一枚で収まるようにしていますので、ぜひ手元に置いて使ってみてください。

ひとこと

計25個のチェック項目を見てきましたが、いかがでしたでしょうか？

こうしたチェックリストを手元に置いておけば、漏れなくダブり無く効率的にサイト診断ができそうですね。

なお私の拙い英語力では元記事の意図どおり訳せていない可能性もありますので、誤訳などお気付きの点があればご指摘ください。

この記事がWebサイト制作やユーザービリティーに関わる方の参考になれば幸いです。

以上、「【保存版】全訳：Webサイトユーザビリティーチェックリスト25項目」でした。

◎参考

25-point Website Usability Checklist