リンクはひと目でリンクだとわかるようにすべし――SEOのためのユーザビリティ講座

3月以降、YOUmozにはユーザビリティのカテゴリに属する記事が1本も投稿されていなかったので、短いながらもユーザビリティに関する記事を、自分で書いてみようかなと思ったんだ。

SEOを手がけているみなさんなら、リンクが検索エンジンにどう見えなくちゃならないかってことは知ってるよね。でも、そのリンクが、人間にはどのように見えなくちゃならないかってことまで知っているだろうか？ 僕が言う「人間」とは、君のページを訪問して、製品やサービスにお金を使ってくれる人たち、ってことだよ。

1. オンライン世界のリンク

リンクの形っていうのは、何年もの間に変化し続けてきた。初期の頃、リンクはすべて下線付きの青字で表示されて、はっきり言っちゃうと、すごくカッコ悪かったんだ。近頃のリンクは、全体的に見栄えがよくなった。色もそれぞれ違うし、ホバー効果も付けられるしね。リンク先ページのプレビューが表示されるものまである。

でも実は、昔ながらのカッコ悪いリンクが、今でもわかりやすさという点ではいちばんすぐれているっていうことをご存知だろうか？ ちょっとした調査で、下線付きの青字で表示されるリンクが、他のどの色よりも認識されやすいということがわかっているんだ。理屈ばかり並べても仕方ないから、ここでいくつかの例を示していこう。

1.1. リンクのように見えるコンテンツ

※画像はクリックで拡大

上の図では、「Location」などの項目名と左端にあるリンクのフォントが一緒で、まったく同じに見える。左のナビゲーションは普通に考えるとリンクなので、その意識をもったユーザーには、コンテンツエリア内の同じスタイルのコンテンツもリンクのように見えてしまう。クリックできるかできないかは、テキストの上にマウスポインタを持って行かなければわからない。これじゃ、ユーザーに余計な手間を取らせることになる。

どうして、リンクにはきちんと下線を付けてわかりやすくしておかなかったんだろう？ あるいは、リンクはリンクで色を揃えておけばわかりやすかったのに。上のスクリーンショットでは、場所によって見た目の異なるリンクを使いすぎている。次のような感じだ。

• 白と濃紺（トップ・ナビゲーション）
• 黒（サイド・ナビゲーション）
• グレー（「spielen」などのコンテンツの中身）
• オレンジ（右上部）

1.2. リンクのように見える広告

※画像はクリックで拡大

このページを初めて訪れたとき、僕は、左端に表示されているリンクの1つをうっかりクリックしてしまったんだよね。これがコンテンツへのリンクに見えたからなんだけど、実はこれ、グーグルの広告なんだ。こんなのってユーザーをバカにするようなまねだと思ったから、このサイトに行ったのはこれが最初で最後になった。

1.3. ひと目でリンクだとわかるリンク

※画像はクリックで拡大

サイトの使いやすさは、間違いなくアマゾンが持っている大きな長所の1つだ。ちょっと上のスクリーンショットを見てほしいんだけど、下線付き（なおかつ青字）の単語はすべて、実際にリンクになっている。

結論その1

リンクは、

• マウスポインタを持っていかなくてもリンクだとわかるようにするべきだ。
• 下線付きにするべきだ。
• もっとはっきりさせたいなら、青字にするべきだ。
• （「ここ」とか「ここをクリック」ではなくて）適切なアンカーテキストを付けるべきだ。
• 広告とは見た目に明らかな違いをつけるべきだ。

2. 実生活に見るリンク

僕にとってユーザビリティは大きなテーマだったから、実生活でもユーザビリティに関する欠陥が目につくようになった。最近遭遇したある騙しリンク。いや、リンクと言うよりはコマンドリンクとかボタンと言ったほうがいいかな。あれは、オーストリアのインスブルックにあるショッピングセンターでエレベーターを呼んだときのことだった。下の写真を見てほしいんだけど、これを見て、君なら最初にどこを押す？

※画像はクリックで拡大

僕が見ていると、大半の人（変なヤツだと思われたくなかったから、10人くらいしか見てないけど(^_^;)）は、大きく表示された「A」「B」「C」「D」の隣にある「ボタン」を押した。でも実を言うと、これはボタンじゃなくて、どのエレベーターが到着したかを知らせるための単なる案内標示なんだ。だけど、こういうライトの点く標示って、普通はエレベーターのドアの上にあるもんじゃないのかな？

これも、さっきのサイトのリンクと同じで、利用者に余計な手間をかけるよね。たった1個、「エレベーターを呼ぶ」っていうボタンがあれば、誤解が生じることもなかったのに……。ちなみに、本物のボタンはパネルの下の方にある2つの小っちゃな丸いやつだった。

結論その2

もし、君がエレベーターのボタンを設計しなければならなくなったら、ボタンは、きちんとボタンらしく見えるように設計すること（^-^）。

ユーザビリティに関する僕の短い記事は楽しんでもらえたかな？ 気に入ってもらえたなら、そう言ってほしいな。これからももう少し、ユーザビリティに関する記事を書きたいと思っているので。オンラインの間違いもオフラインの欠陥も、ネタはもういくつか準備してあるんだ（^-^）。