1. ホーム
  2. ニールセン博士のAlertbox

2005年 Webデザインの間違い・トップ10

2005年、ユーザをうんざりさせてきたWebデザインの間違いをリストアップしてみると、古くから言われているものがランクイン。悪さをし続けていることがわかった。

Webデザインの間違いをリストアップするにあたり、今年は趣向を凝らしてみることにした。私が発行しているニュースレターの読者にお願いして、今年、もっとも腹立たしいと思ったユーザビリティ上の問題点を投票してもらったのだ。

読者の参加によって、ユーザテストでは気付かなかった多くの課題が浮き彫りになるだろうと思っていたが、そうはならなかった。30位までにランクインした問題点は、ユーザビリティガイドラインの中で指摘済みのものばかりだったのだ。今年のトップ10を読んで、“聞き覚えがあるぞ！”と思われる方がいたら、それはその通りなのだ。

以前からわかっていた問題点を再確認し、修正候補の上位に持ってくることには大きな意味がある。間違いがいまだに修正されていない以上、人々が、不満をもらし続けているのは当然である。

1. 読みやすさに関する問題

フォントに関する問題点が、2位に約2倍の差をつけて圧倒的勝利となった。投票してくれた人の約2/3は、フォントサイズが小さいことやフォントサイズが固定になっていることに不満を漏らした。約1/3は、テキストと背景とのコントラストが弱い点を不満とした。

フォントサイズを変更できるようにすることや、読みやすさに関しては、2002年に書いたコラム“フォントサイズはユーザにまかせよう”を参照いただきたい。

2. 非標準的なリンク

リンクに関して、以下に5つの主なガイドラインを示す：

  • クリックできる部分はどこなのかを明確に示すこと。テキストリンクであれば、色を変え、下線を引いておくことだ。（テキストリンクではない部分には下線を引かないこと。）
  • 訪問済みのリンクと訪問していないリンクを区別すること。
  • リンクの先に何があるかを前もってユーザに知らせること。アンカーテキストには、リンク先に何があるのかを一言で伝えられるような表現を用いてユーザが情報を読みとりやすくすると同時に、検索エンジン最適化（SEO）を図る。“click here（ここをクリック）”のような、ありきたりで意味を持たない表現は使わないこと。
  • ユーザがリンクを行き来するときの標準的なインタラクションを受け付けなくするJavaScriptに代表されるテクニックは使わないようにすること。
  • リンク先のページを新しいウィンドウで開かないようにすること（PDFのようなドキュメントの場合は除く）。

リンクは、Web上のインタラクションエレメントとして首位の座を誇る。誰もが考えるリンクの仕方が少しでも崩されると、間違いなくユーザは困惑し、余分な時間を費やすことになる。あなたのWebサイトが使ってもらえなくなる恐れもある。

3. Flash

ユーザを苛立たせるという意味でFlashが銅メダルをとってしまうのは、個人的には非常に残念である。Flashに起因する問題をなんとかなくそうと、Flashを正しく使うためのガイドラインを出版するなどして世間に訴え始めてから3年が過ぎた。Flashの開発者達が集うカンファレンスで話をしたとき、そこに居合わせたほぼ全員が同意してくれたのは、これまでのような過剰なFlashの利用はあるべき姿ではないということ、そして、将来的にはFalshが有用なユーザインターフェイスを提供するようになること、などだった。

この素晴らしい決意にもかかわらず、ユーザが目にするものの多くは、イライラさせる以外になんの目的も持たず作られている出来の悪いFlashなのである。スプラッシュページやFlashを使ったイントロがほぼ絶滅したという点は、一つ喜ばしいことである。これらはあまりにも良くないので、事情をきちんと理解していないWebデザイナーでさえ、今ではほとんどお薦めしないはずだ。（もっと事情に疎い）クライアントの中には未だにそのようなデザインをリクエストする人もいるようだが。

Flashは、一つのプログラミング手法であり、動きを持たないページでは実現できない付加価値や機能をユーザに提供するために使われるべきものである。単にページを華やかに演出するために使われるべきではない。退屈なページになってしまっているなら、まずはテキストを書き直して、ユーザの関心を引いてみよう。プロのカメラマンを雇ってもっと良い写真を載せることもできるはずだ。ページに動きを盛り込んではいけない。ユーザの関心を引くどころか、追い出すことになりかねない。多くのユーザが、アニメーションは見る価値のないものと考えている。

ナビゲーションにFlashを使うのも好ましくない。ユーザは、ありきたりのナビゲーションと動きのないメニューを好むのである。

4. Webページ向けに書かれていないコンテンツ

Webページ向けに書くということは、つまり、

  • 短く、
  • 読みとりやすく、そして
  • 的を射た（あやふやなマーケティング用語だらけではない）

コンテンツを用意するということである。また、Webページは、

  • ユーザの疑問に答えるものであり、
  • 独自の言葉ではなく、ユーザの言葉を使って書かれているべきである。（そうすれば、検索エンジンのヒット率もあがるだろう。なぜなら、ユーザは作り手の言葉ではなく、自分の言葉で検索をするのだから。）

5. 検索性能の低さ

他の問題点は、比較的容易に改善が可能である。しかし、残念ながら、検索性能をあげるには相当の労力とソフトウェアへの投資が求められる。そうは言っても、やってみる価値はある。検索は、Webを使ったときのユーザエクスペリエンスを決定づけるとも言える重要な構成要素であり、年々、その重要度は増してきていると考えられるからだ。

6. ブラウザ間の非互換性

確かに、2004年の春に行ったセミナーの中で、プラットフォーム間の互換性向上については、一つ星のガイドラインに下げてご紹介した。（つまり、“時間に余裕があるならば検討に値するが、優先順位は低い”という意味だ。）当時は誰もがInternet Explorerを使っており、他のブラウザを支援することは、ROI（投資対効果）の側面からかなり難しい状況にあった。

しかしながら、昨今では、Firefox（や、少数派ブラウザとされるOpera、Safariなど）を使うユーザもかなり増えてきて、ビジネスチャンスは広がりつつある。別のプラットフォームを好んで使っているユーザだからといって、そっぽを向くわけにはいかないのだ。

7. 扱いにくいフォーム

多くのユーザが、フォームに関係するたくさんの問題点を指摘している。どんな問題点かって？ Web上には、フォームがごく頻繁に登場し、さほど必要とは思われない質問や選択肢のおかげで巨大なフォームと化している場合が多い。長い目で見れば、インターネット上のインタラクションデザインにはもっとアプリケーションのメタファが求められるようになるだろう。しかし、おびただしい数のフォームに出くわすのが現状であり、時間をかけずに処理できるようにしてあげなければならない。このためのガイドラインには、主に以下の5つがある：

  • 必要のない質問を省くこと。たとえば、敬称（Mr/Ms/Mrs/Missなど）は本当に確認する必要があるだろうか？
  • 必須の入力項目は、本当に必要なものに限定すること。
  • 特異な項目名は使わないようにして（氏名、住所などを使えば良い）、自動入力を最大限活用できるようにしてあげること。
  • フォームを開くと、最初の入力欄に自動的にカーソルが置かれているようにすること。そうすれば、クリック1回分を節約してあげられる。
  • 電話番号、カード番号などは、どのように入力しても受け付けるようにしてあげること。括弧や余分なスペースなどを自動削除するようにプログラムすることはさほど難しいことではない。見慣れないフォーマットにデータの入力を求めるWebサイトに苦労しがちな高齢者ユーザにとって、これは特に重要である。16桁のカード番号をそのまま何の区切りもなく、間違えて入力してしまう危険をあえて冒すようなことはせず、4桁ずつに区切りをつけて間違えないように入力しようとしてくれるユーザからの注文を受け付けない理由がどこにあるというのだ？

国際化のガイドラインを守っていないフォームは、海外の大勢のユーザを泣かせている。カナダの郵便番号にエラーメッセージを返しているようなら、カナダとのビジネスがほとんどなかったとしても驚くには値しない。

8. 問合せ方法や企業情報の未掲載

電話番号とメールアドレスの掲載が求められる場合が多いが、あわせて企業の所在地情報をWebサイトに載せておくことは、実はもっと重要である。なぜなら、それが信頼して良い企業かどうかを判断するための指標の一つとなるからだ。住所のない企業に、いったい誰がお金を支払いたいと思うだろう？

問合せ方法はどのように掲載するのが望ましいか、“About Us”ページ、Web上での所在地検索に関して実施したユーザビリティ調査の結果をご覧いただきたい。

9. ページの幅を固定したレイアウト

ユーザの不満は、以下の2つに分類できる：

  • 大きなサイズのモニターを使っている場合、ウィンドウのサイズを調整しないと、Webサイトは非常に読みにくい。逆に、ユーザが小さなウィンドウでWebページを見るとき、そのページがリキッドレイアウトを採用していなければ、あの厄介な水平方向のスクロールをしなければならなくなる。
  • 幅が固定になっているWebページを印刷すると、右端まできちんと印刷されない場合がある。アメリカのレターサイズよりも幅の狭い用紙（A4サイズ）を使うヨーロッパのユーザには特に厄介な問題である。

フォントサイズの問題も関連する。1位の間違いはおかしておらず、フォントサイズが固定になっていないWebサイトを考えてみよう。高解像度のモニターを使っているユーザは、ほぼ間違いなくフォントサイズをあげる。さらに、テキストをもっと大きく、読みやすく表示したいと考え、ウィンドウサイズも大きくした場合、レイアウトが固定になっているとその努力は報われずに終わることとなる。

一番の反則は、ポップアップウィンドウで何らかの情報を表示するときに、そのウィンドウの幅と高さを両方固定してしまっているWebサイトである。ポップアップウィンドウはそもそも問題の代物だ。どうしても使わなければならないのならば、せめて、小さな穴をのぞくようにコンテンツを読ませるのはやめよう。最低でも、新しく開かれたウィンドウのサイズを、ユーザが自由に変えられるようにしてあげるのだ。

10. 不適切な画像の拡大

投票結果によれば、10位はポップアップウィンドウとなるべきところだが、これについてはすでに随分と書いてきた（特に最近、ポップアップウィンドウが最も嫌われる広告テクニックの1位に選ばれた際にも述べた）。そこで今回は、得票数は若干落ちるが、かなり重要なポイントに繋がる問題点を取り上げたい。

eコマースのユーザビリティに関してまとめてきたガイドラインの一つに、製品の写真を拡大して近影を見られるようにしてあげること、というのがある。細部を見たり、素材を確認したりできれば、お客様は、安心してオンラインで注文を出すことができるようになる。

大変喜ばしいことに、多くのWebサイトがこのガイドラインに従い、ズーム機能を提供している。虫眼鏡のアイコンでそれを示すという工夫も多々見られる。しかし、多くのサイトが、実は、この機能を誤って実装している。

もっともひどいのは、“画像を拡大”ボタンをクリックしたユーザに、まったく同じ画像を表示してしまっているWebサイトだ。クリックして表示されるものが、元のものとまったく変わらないのは、どんな場合でも間違っている。クリックしても何も変わらないリンクやボタンは邪魔なだけで、時間の無駄遣いにつながる。何が起こったんだろう？ 何かマズイことをしてしまっただろうか？ と、ユーザは困惑するばかりだ。（もっとよくみられる同様の間違いとして、ホームページ上に、ホームページへのリンクを置くことが挙げられる。これは、守られていないホームページガイドラインの10位だった。）

もう一つ、同じくらい厄介な間違いは、ユーザに画像を拡大するというオプションを提供してはいるものの、ほんの少ししか拡大をしてあげないような場合だ。ユーザが、大きな写真を見たいと言ったときは、大きな写真を見せるのだ。Webサイトを利用してくれているユーザの大多数が利用しているスクリーンサイズ（本コラム執筆時点で、B2CのWebサイトを利用するユーザであれば1024×768のディスプレイが一番人気である）いっぱいに拡大した写真を見せてあげるのが望ましい。それ以外の場合に、画面いっぱいの大きさの画像を呈示するのは不適当である。スクロールせずに見られる程度の大きさで、細部までしっかり見てもらえる接写の画像を提供するのが良いだろう。

最初のページには、見た目が煩雑になってしまわないように小さな画像を使うべきである。確かに、ダウンロードに要する時間に配慮して、ページの容量を小さくしておきたいというのもわかる。いくらブロードバンドの時代と言っても、反応時間が遅いのは問題で、これはWebサイトデザインにみられる問題の15位である。しかし、ユーザが拡大写真を見たいと明らかに言っている場合、ダウンロードが完了するまでは喜んで待ってくれるはずだ。待った結果、購入するかどうかの決め手になる細部までをしっかりと見せてくれる十分な大きさの画像が表示されるのだとしたら。

基本に忠実なWebデザインを

今年度のWebデザインの間違いトップ10は、基本に忠実なWebデザインに立ち返る必要性を明らかにするものとなった。メーリングリストやWebサイト、カンファレンスに至るまで、インターネット業界では、新しく、魅力的な“Web2.0”機能に関する話題が尽きない。しかし、ユーザはテクノロジーなど気にしておらず、新しい機能など望んでもいない。彼らはただ、基本的な部分での質の向上を求めているのだ。

  • 読むことのできるテキスト
  • 疑問を解消してくれるコンテンツ
  • 欲しいものを見つけるのに役立つナビゲーションや検索
  • 簡潔なフォーム（登録、チェックアウトなどの合理的なワークフロー）
  • バグや誤植、信頼できないデータなどのない、リンク切れや期限切れのないコンテンツ

自分のWebサイトに新しい機能や最新のテクノロジーを導入したいという欲求にかられたときは常に、現状のWebサイトからさらに質を上げるためにリソースを費やしても、高いROI（費用対効果）を得られるかどうかをまず考えよう。企業、eコマースサイト、行政機関、非営利団体、いずれも例外なく、新しいテクノロジーを使わなくとも（検索エンジンの性能を上げるのは、もちろん別の話だ）、コンテンツに磨きをかけることでWebサイトのビジネスゴールに確実に近づくことができるはずだ。

さらに詳しく

これまでのトップ10リスト：

2005 年 10 月 3 日

キーワード