Moz - SEOとインバウンドマーケティングの実践情報
リンクはひと目でリンクだとわかるようにすべし――SEOのためのユーザビリティ講座

この記事はもともとSEOmozのYOUmozセクションに掲載したものですが、非常に優れているのでこちらのブログに格上げしました。

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

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

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

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

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

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

content that looks like links
※画像はクリックで拡大

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

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

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

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

mixing content-links with ads
※画像はクリックで拡大

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

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

amazon
※画像はクリックで拡大

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

結論その1

リンクは、

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

2. 実生活に見るリンク

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

calling an elevator in Innsbruck
※画像はクリックで拡大

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

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

結論その2

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

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

この記事が役に立ったらシェア!
tweet4このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

今日の用語

ワイヤーサービス
プレスリリースを、メディアに配信し、さらにサービス事業者のWebサイトや提携メデ ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore