ウェブユーザビリティの法則 第2版（2014年）は、オンラインでの行動を支配する基本原則を説明し、優れたユーザー体験を提供するウェブサイトの構築方法を解説します。さらに、開発の各段階でサイトをテストするためのシンプルなガイドも紹介されています。
あなたが得られること：ユーザーが夢中で探索したくなるウェブサイトの作り方とテスト方法
知らないデパートに入ったとき、まず何をしますか？多くの人は、どこに行けばいいのかを確かめるためにフロアマップを見るでしょう。
でも、もしマップがなく、スポーツ用品売り場を見つけるまで無駄に歩き回らなければならなかったら？あるいは、先に出口を見つけて店を出てしまうかもしれません。
オンラインの世界も同じです。きちんとデザインされたウェブサイトなら、必要な情報が数秒で見つかります。ごちゃごちゃして整理されていないサイトなら、すぐに離脱してしまうでしょう。
この要約では、ウェブサイトを作るときに考えるべきポイントを正確に説明し、サイトを使いやすく、そして人気にするためのヒントやコツを紹介します。
この要約から、以下のようなことがわかります。
- 世界中の埋め立て地になぜ読まれなかった取扱説明書があふれているのか
- 他のウェブデザイナーの真似をすることが、決して悪いことではない理由
- ピザ（と少額の現金）が優れたウェブサイト作りにどう役立つのか
システムの仕組みを学ぶより、私たちは実際に触って自分で理解することを好む
最近買った電子機器の取扱説明書を読みましたか？おそらく読んでいないでしょう。
エンジニアでもない限り、たいていの人は物事の仕組みなど気にしません。
道行く人に、ブラウザや検索エンジンがどう動くか説明してもらう場面を想像してみてください。ほとんどの人はインターネットの基本的な仕組みすら知りませんが、それでも問題なくウェブサイトを閲覧できています。
新しいデバイスを買ったとき、使い方を説明したマニュアルを読む代わりに、ただ触って操作することがよくあります。そして、自分に合った操作方法を見つけたら、それに固執します。
たとえば、ブラウザのアドレスバーに直接URLを入力する代わりに、検索エンジンでその完全なURLを検索する人を見たことがあるかもしれません。これがその典型的な例です。
これは「サティスファイシング」と呼ばれる、よくある意思決定の戦略です。問題に直面すると、人間は理性的に情報を探し、解決策を見つけ、比較して最善のものを選ぶと思うかもしれません。しかし実際には、サティスファイシングのほうがずっと一般的なアプローチなのです。
たとえば消防士は、素早くエラーをチェックし、最初に見つけた解決策をそのまま実行するという研究結果があります。しかも彼らは、高いプレッシャーとリスクの中で働いているのです。
一方、普通のネットユーザーは、間違ったリンクをクリックしても、ブラウザの「戻る」ボタンを押せば済みます。私たちはオンラインではたいてい素早く決断します。それが楽なだけでなく、自分で答えを見つけるのはゲームのように楽しいからです。
つまり、インターネット上での私たちのデフォルトの行動は、最初に目を引いたものをクリックすることです。それで欲しいものが手に入ると、賢くなった気分になり、快適で、自信がつくのです。
ユーザーが重要なメッセージや情報を素早く見つけられるように、サイトをスキャンしやすくしよう
次のような文言がトップページに書かれたウェブサイトを想像してください。「XYZコーポレーションへようこそ！私たちは革新的な製品とカスタマイズ可能なソリューションを世界中の一流クライアントに提供します…」
こんなプロモーション用の企業 jargon は誰もが知っていますが、誰も読んだりしません。
なぜなら、ネット上ではたいてい何か目的があって、それをさっさと済ませたいからです。だから長い文章をじっくり読む代わりに、ざっとスキャンするのです。
もしサイト運営者として特定のメッセージを伝えたいなら、短い段落、見出し、強調されたキーワードを使いましょう。
さらに、視覚的な階層を使ってこれらの要素を整理すれば、ユーザーはどこに注目すべきかをすぐに判断できます。これは重要です。なぜなら、視線追跡の研究によると、私たちはどこを見るかを瞬時に決め、広告ブロックのような関係ないエリアは完全に無視するからです。
新聞を思い浮かべてください。一面では、見出し、テキスト、画像が考え抜かれてレイアウトされ、読者は何が一番重要かをすぐに把握できます。
ウェブサイトも同じように考えるべきです。何が重要かを一目でわかるようにし、ユーザーがその情報を素早く見つけてクリックできるようにしましょう。
ここでもう一つ重要なポイントがあります。よくある思い込みとは違い、ほとんどの訪問者は、迷わず選択できて結果が明確なら、クリックすることをまったく気にしません。
だから、サイト内の動線をわかりやすく、理解しやすいものにしましょう。でも、送料のような重要な情報を何度もクリックさせて隠してはいけません。それは訪問者をいらだたせるだけです。
私たちはつい、ウェブサイト作りは興味を持った買い手のためのパンフレットを作るようなものだと考えがちです。しかし実際は、時速60マイルで走り去る車に向けた看板を作るようなものなのです。
ナビゲーションはすべてのウェブサイトの中核。だからこそ、明確でシンプル、かつ一貫している必要がある
新しいウェブサイトを訪れるのは、知らないスーパーマーケットに足を踏み入れるのに少し似ています。ただし決定的な違いが一つあります。ネットでは、店内を歩き回ってすべての通路を見ることができない、という点です。そこが難しいところです。
なぜなら、もし探しているものが見つからなかったり、サイトがどう構成されているか理解できなければ、たった一度のクリックで離脱（そして二度と戻らない）できてしまうからです。
もう一つの難しさは、そのサイトの規模が100ページなのか、500ページなのか、12,000ページなのか判断するのが困難なことです。だからこそ、訪問者がどうナビゲートすればいいかわかるようにデザインすることが極めて重要なのです。
そのために、ページの上部に「セクション」バーを設けて、サイトに何が含まれているかを明確に伝えると効果的です。さらに、すべてのページに以下の4つのナビゲーション要素を盛り込むことで、訪問者がサイト内を移動しやすくなります。
まず、検索バーを忘れずに設置しましょう。検索バーがあれば、訪問者はサイトの構成を理解しなくても、探しているものをすぐに見つけられます。
次に、「現在地」表示を検討しましょう。ショッピングモールのマップにある赤い点のように、この小さな表示があるだけで、訪問者は各ページを簡単に行き来できます。
3つ目は、会社のロゴにトップページへのリンクを張ることです。この要素は、必要に応じて「ホーム」に簡単に戻れるように、すべてのページに配置する必要があります。
そして4つ目は、ユーティリティ要素を設けることです。このスペースには、ログインエリア、FAQセクション、サイトマップなど、サイトの使い方に関する細かい情報をすべてまとめます。
これら4つの要素が適切に実装されていれば、訪問者は格段に安心し、サイトの背後にある人々や会社を信頼しやすくなります。
これを確実にするために、次の章では、これらのナビゲーション要素をいかに自明なものにするかを探っていきます。
慣習は、訪問者がすでに知っていることを活用し、ストレスなくサイトをナビゲートできるようにする
アメリカに住んでいる人がロンドン（左側通行）で車を運転したことがあれば、慣習が破られたときにどれほど混乱するか痛感しているでしょう。
だからこそ、ウェブサイトをデザインするときは慣習を積極的に取り入れるべきなのです。
ユーザーは、どこに何があって、どう動くかについて一定の期待を持っています。つまり、何かが違う形で提示されるとイライラしやすいのです。
もしお気に入りの雑誌がページ番号を印刷しなくなったら、どれほど戸惑うか想像してみてください。
ページ番号は印刷メディアの慣習ですが、ウェブにも慣習があります。たとえば、ページの上部に水平に言葉が並んでいれば、それがサイトの主要セクションのリストだと私たちは自然に推測します。
ウェブデザイナーはしばしば、何か新しく革新的なことをしたい誘惑にかられて、慣習を捨てようとします。しかし慣習は、たいてい何年もの改良の末に確立されたものであり、現時点で最も優れた効果的なプラクティスを表していることが多いのです。
タブの仕切りは良い例です。タブは、他のウェブサイトや従来のファイリングシステムを通じて人々がすでにコンセプトに慣れ親しんでいるため、優れたナビゲーションの選択肢です。だからそれを見れば、どう使えばいいかすぐにわかります。
もちろん、特にニーズに合った適切な慣習が常にあるわけではないため、革新の余地はあります。ただ、自分が作るものは何であれ使いやすいものにすることを忘れないでください。
言い換えれば、創造性を抑え込むのではなく、ユーザー体験を優先させるということです。
一貫性と慣習は味方です。明快さと使いやすさを保てるなら、少しだけ道を外れても構いません。ただし、一つの重要な例外があります。それについては次の章で説明します。
トップページは良い第一印象を与え、サイトが何であるかを明確に伝えるべきだ
TwitterやFacebookのリンクをたどると、サイトの奥深くに直接飛ばされることがよくあります。しかし、自分がどこにいるのかを把握し、そのサイトのコンテンツを信頼していいか判断したいとき、私たちはたいていそのサイトのトップページに向かいます。
トップページはそれほど重要な役割を担っているため、完璧な例をデザインするのはほとんど不可能です。チームの全員が意見を持っているからです！
しかも、トップページからリンクされているアイテムはたいていクリック数が増えるため、あらゆる関係者がその場所を奪い合います。もし全員の希望を聞き入れれば、トップページは雑然として理解しづらいものになってしまいます。
プレッシャーに負けてはいけません！トップページをデザインする際に最優先すべきは、正確な第一印象を作り出すことです。これは非常に重要です。あるウェブデザインの研究によると、サイトの第一印象は、訪問者が後でそのサイトにもっと長く時間を費やした後でも、変わりにくいことが示されています。
なぜなら、私たちは何か新しいものに出会うと、想像力が過度に働くからです。私たちはその新しいものがどう機能するかという大きなイメージを作り上げ、後から得た新しい情報を、その先入観に合うように無理やり当てはめようとします。
だから、訪問者が最初に混乱してしまうと、サイト全体を誤解し始めます。そして、サイトに長くいればいるほど、混乱は深まるばかりです。
これを避けるにはどうすればいいでしょうか？トップページでユーザーにメッセージを伝える最も効果的な方法は、タグライン（ロゴの隣に置く、サイト全体の目的を要約した短い一文）を使うことです。
良いタグラインは生き生きとして親しみやすく、サイトの価値を伝えます。たとえば、ニュースサイトThe Daily Beastは「Read this, skip that（これを読んで、あれをスキップ）」というタグラインを使っています。カーシェアリングサービスのZipcarは「Wheels where you want them（欲しい場所にクルマを）」です。
どちらのタグラインも、一目でその会社のサイトが何を提供しているのかを明快に伝えています。
友人や同僚に頼ってサイトを評価してはいけない。テスト、テスト、またテストを。
こうして、あなたのウェブサイトは理解しやすく、ナビゲートしやすいものになるはずです。しかし、最終的な製品が実際にその目標を満たしているか、どうやって確かめればいいのでしょう？友人に尋ねたり、単に自分の判断を信じたりすればいいと思うかもしれません。
残念ながら、自分の判断だけに頼るわけにはいきません。何しろ、自分で作ったサイトなのですから、その素晴らしい機能やユーザビリティの流れはあなたにとっては明白です。客観的になることは不可能です！
友人とサイトについて話し合うのも、同じく実りがありません。結局のところ、人はウェブサイトがどうあるべきかについて、非常に主観的な意見を持っているからです。
デザイナーに尋ねれば、彼らは美しいページ、十分な余白、心地よい視覚体験をもたらす繊細なタッチが好きだと言うでしょう。一方、開発者は、訪問者があれこれいじれるような革新的な機能がたくさんあるサイトを好みます。そして、開発者もデザイナーも、みんなが自分と同じ見方をしていると思い込んでいます。
私たちは皆そうです！カラフルな画像がたくさんあるサイトでも、ストイックなミニマリズムでも、自分が好きなものは、デフォルトで他の誰かにとっては忌避すべきものなのです。そして、ほとんど誰も別の視点から物事を見ようとせず、自分が「正しい」と思い込んでいます。
しかし実際には、ウェブデザインに「正解」も「不正解」もありません。だからこそ、少数の人に意見を求めること自体がうまくいかないのです。
その代わりに、テストを実施しましょう。あなたのサイトを操作しようとする人々を観察することこそが、自分が作ったものを評価し、意図したとおりに機能しているかどうかを判断する、最も客観的な方法です。
テストが価値を持つのは、「正しい」「間違っている」というカテゴリーを取り除き、何が機能していて何が機能していないかに注意を向けさせてくれるからでもあります。さらに、ウェブユーザーがいかに多様であるかをまざまざと見せてくれるのです！
ユーザーがサイトを操作する様子を観察し、機能が理解できない場所やその理由を突き止めよう
テストは必要ですが、多くの人にとってはあまり楽しそうには聞こえません。だからこそ、テストに参加してくれる人に報酬やちょっとしたご褒美を用意することが大切です（たとえば開発者はピザが特に好きです）。できるだけ多くの人にテストしてもらうためです。
あなたのウェブサイトは、バックグラウンドに関係なく誰にでも理解できるものであるべきです。だから、対象読者だけから被験者を選ぶ必要はありません。どんな人でも大丈夫です。ただし、時間を割いてくれたテスターにはお礼を忘れずに――時間給を支払いましょう。
グループを選んだら、あなたか、進行役（忍耐強く共感的な人）が観察してメモを取りながら、サイトを操作してもらいます。進行役の目標の一つは、ユーザーが集中し、リラックスしていられるようにすることです。
まずはトップページから始めましょう。テスターにクリックしながら、見ているものについて話してもらいます。そうすれば、彼女がサイトの大まかな趣旨を理解しているかどうかがわかります。「今、何を考えていますか？」「どこを見ていますか？」といった質問をしてみましょう。
ただし、テスターの行動に影響を与えないように注意してください。もし助けを求められたら、「もし私がいなかったら、どうしますか？」のように返しましょう。
テストグループには、ログイン、プロフィール作成、商品の返品など、サイト内のすべての機能を試してもらいましょう。もしテスターがタスクに失敗したら、彼女がそれを解決しようとする様子を観察し、挫折しすぎてしまったり、そのセッションからこれ以上学べることがないと判断するまで、クリックを続けさせてください。
重要なヒントは、マネージャーやチームメンバー、その他の関係者にもテストのプロセスを一緒に観察してもらうことです。よくあるのは、人々はテストの意味を理解しておらず、サイトは十分にできていると思い込んでいることです。
しかし、誰かがサイトを使いこなせず苦労するのを目の当たりにすると、それは意識を変える体験になりえます。たとえば重役たちがユーザビリティを真剣に考え始めるきっかけになるのです。おそらく、マネージャーの口から次に出る言葉は「なぜもっと早くこれをやらなかったんだ？！」でしょう。
テストは、時間やコストをかけなくても有益な洞察を生み出せる
多くのウェブ開発チームがテストを避けるのは、テストに多大な時間、お金、専門知識が必要だと思い込んでいるからです。しかし、そうではありません。
何しろ、何百人もテストする必要はないのです。あなたは科学的研究をしているわけでも、統計的に有意な結果を出そうとしているわけでもありません。ただ、意思決定の材料にし、ユーザーがサイトのどこでつまずくかを理解したいだけです。
そのためには、普通の日常的なウェブユーザーを3人テストし、観察している人全員が、参加者を困らせたり混乱させたりした上位3つの問題点についてメモを取ればよいのです。
著者の経験では、合理的に修正できる以上の数の問題が常に見つかります。したがって、優先順位をつけ、修正が必要なことだけに集中しなければなりません。
言い換えれば、テスターが自力で素早く回復した問題を修正しようと心配する必要はありません。そうした小さな障害は、新しいウェブサイトを探索する楽しみの一部です。
テストグループを小さく保つもう一つの利点は、プロセスを早期に始められることで、テストがはるかに効果的になる点です。問題を早期に発見すればするほど、変更を実装するのが容易になります。
既に完成し、複雑に絡み合って稼働しているサイトよりも、ベータ版のサイトを調整するほうがはるかに簡単なことを考えてみてください！（さらに、長期運営されているサイトに慣れたユーザーに対して変更を説明したり正当化したりする必要もありません。）
サイトを構築する前からテストを始めることもできます。競合他社のサイトをユーザーが操作する様子を観察するのです。そうすることで、自分たちの開発プロセスに役立つ有益な知見を得られます。
最終的に、テストを早期に実施することで、開発プロセス全体を通じてより良い意思決定ができます。そして、最後にすべてをやり直す必要がなくなるため、時間の節約になります。必要なのは、数時間の時間と、ほんの少しの先行投資だけです。
サイトのモバイル版は高速に読み込まれ、よく使われる機能が優先されるようにしよう
スマートフォン以前の時代を覚えていますか？当時でも一部の携帯電話にはウェブブラウザが搭載されていましたが、ほとんど使われていませんでした。アップルがスワイプやピンチといったタッチスクリーンを導入して初めて、モバイルブラウジングがここまで普及したのです。
今日では、人々はより速く移動し、オンラインで読む量は減りました。さらに、少しでもつまずけばすぐにサイトを去る傾向が強まっています。モバイルのダウンロード速度は不安定で、パフォーマンスのばらつきも大きいことを忘れないでください。だからこそ、サイトが素早く読み込まれるようにすることが重要なのです。
また、デザインはスマートフォンの小さな画面に対応する必要があります。同じ量の情報を伝えるスペースが少ないため、妥協が求められます。
優先順位をつけて、よく使われる機能がすぐに見つけられるようにしましょう。残りの情報は数回のタップでたどり着けるようにし、どうやってそこにアクセスすればよいかユーザーにとって明白であるようにします。
もう一つ重要な点として、人々はあらゆる場所でインターネットを使い、そこで何でもやりたがっているということです。スマートフォンは移動中にしか使わず、基本的な機能しか必要としない、というのはよくある誤解です。実際は、ユーザーが家のソファに座りながらスマートフォンでネットをすることも同じくらいあり、その場合、サイトの全機能にアクセスすることを期待します。
だからこそ、常に完全版ウェブサイトへのリンクを提供し、ズーム機能を実装しておくべきです。リピーターの訪問者はあなたのサイトに慣れているので、ページ全体を見なくてもナビゲーションの方法がわかるかもしれません。
全体として、モバイルコンピューティングは未来であり、オンラインインタラクションの新たな可能性は、素晴らしいユーザー体験を創造するための驚くべき機会をもたらすでしょう。
ただ、使いやすいものを作れたかどうかを確認する唯一の方法は、テストすることだということを忘れないでください。
最後のまとめ
本書のキーメッセージ：
ユーザビリティは、訪問者を最優先に考え、ウェブサイトで情報を見つけるのをできるだけ簡単にします。開発プロセスのあらゆる段階でシンプルなテストを行うことで、あなたのサイトが優れたユーザー体験を提供できているかを確認できます。
実践的なアドバイス：
ユーザビリティテストが上司を退屈させるなら、自分の時間でやろう。
最初のユーザビリティテストに重役全員を招く必要はありません。最初のステップはシンプルで、かつインフォーマルであるべきです。あなたがやるべきなのは、テストがどれほど実りある洞察をもたらすかを正確に示すことです。たとえば、誤ったラベルのボタンを修正した後に、サポートに届くメールの数を測定します。そして、そのデータと、その問題にあなたが最初に気づくきっかけとなったテストの動画を上司に送りましょう。
さらなる読書案内：ジョン・マエダ著『シンプリシティの法則』
『シンプリシティの法則』は、著者がシンプルさの意味と本質をつかむためにまとめ上げた「法則」のセットです。それに沿って、日常生活やビジネス、プロダクトデザインにシンプルさを取り入れるための有益なアドバイスを提供します。
