Google・Yahoo・Bingのリンク色の変化を比較してまとめてみた

リンク色

リンクの色は基本的に青色が良いとは言われていますが青色とひと言で言っても微妙に違うので大手のサイトでもそれぞれ試行錯誤を続けています。

そんな「青色のリンク」を大手検索エンジンの色を例にして比較して一覧表にしてみました。

果たしてどんな色がリンク色に適していて認識してもらいやすい色なんでしょうか。2010年から2016年までのリンク色をまとめてみました。

広告

検索エンジンのテキストリンク色変化

まず、この記事を書くよりも昔のリンク色については参考記事があるのでこちらをどうぞ。

参考:クリック率の高いテキストリンクの色は?【2013年版】 | ウェブ力学

Bingではリンク色を2010年6月(0033cc)から2013年1月(0044cc)に変えることによって売上高が増加したという記事がありました。

参考:「Bing」の検索リンクが青い理由–マイクロソフトが配色決定の裏側を説明 – ZDNet Japan

それらの過去データを参考にさせてもらい、自分で2014年12月と2016年4月に確認した色を追記して一覧にしてみました。

2010.6 2013.1 2014.12 2016.4
Google 1111cc 1122cc 1A0DAB 1A0DAB
Yahoo! 0000de 0e1bbb 0F0AD1 0E1BBB
Bing 0033cc 0044cc 1020D0 001BA0

うーん、どういう理由で色の変化があったのかわかりませんがけっこう変わってますね。もしかしたらもっと頻繁に変わってたのかもしれません。

Google・Yahoo!・Bingどれもそうですが最近になるほど青色を弱くする傾向のようです。

訪問済みやマウスオーバーも含めたリンク色変化

↓これはこの記事を書いた2014年12月時点の、マウスオーバーも含めたリンク色の詳細です。

 2014年12月 リンク色 訪問済み 下線 マウスオーバー
Google 1A0DAB 660099 無し 下線
Yahoo! 0F0AD1 4C2472 あり CC3434
Bing 1020D0 600090 あり 変化無し

↓こちらは2016年4月時点の色。

 2016年4月 リンク色 訪問済み 下線 マウスオーバー 前回から
Google 1A0DAB 660099 無し 下線 変化なし
Yahoo! 0E1BBB 4C2472 あり CC3434 リンク色変化
Bing 001BA0 600090 あり そのまま リンク色変化

Googleは前回と同じで、Yahoo!・Bingは変わっていました。

2014年12月から2016年4月までの間が結構空いてるのでもっと頻繁に変化していた可能性もあります。

こうしてみると各検索エンジンごとのリンク色については微妙な違いですけど下線の有無やマウスオーバー時のスタイルは結構違いますね。

テキストリンク色に最適な色は?

テキストリンクに使われる色っていくらでも種類がありますがどんな色が適しているんでしょうか。

一般的な感覚だとこんな感じでしょうか。

  • 読者がリンクだと認識しやすい色
  • 通常のテキスト色と違いすぎてストレスを与えない色

そして一般的には昔から「青色に下線=リンク」というのが標準となっていてインターネットが始まった時からの習慣のようになっています。

検索エンジンの場合は「リンク部分はサイトへ飛ぶ」ということがあらかじめ分かっているためそんなに目立たないリンク色でも問題無いかもしれません。

でもブログの場合は本文中に突然テキストリンクが貼られたりすることもあるのでテキストと見分けが付きにくいと見逃してしまう可能性があります。

逆に目立ちすぎると文章を読んでいる途中で目が奪われすぎてしまい文章の流れをぶった切ってしまうことがありそうです。最終的には自分のブログでバランスを確かめないといけません。

検索エンジンのリンク色で文章を書いてみる

試しに2016年4月のリンク色を本文中にテキストリンクとして使った場合どんな見た目になるのか書いてみます。なお色を付けるだけでリンクは貼っていないのでクリックしても何も起きません。

Google

Googleのリンク色1A0DABだと本文中にテキストリンクとして貼ってみるとあまり目立ちません。しかも通常は下線がついてなくてマウスオーバーした時に下線がつくので、ブログのテキストリンクとしては使いにくそうです。

Yahoo!

Yahoo!のリンク色0E1BBBだと下線があるのでリンクだとわかります。むしろ色の違いよりも下線の有り無しのほうがリンクを見分けやすさに違いが出そうです。

Bing

Bingのリンク色001BA0は青がA0と弱めなため少し暗く見えます。前回の1020D0のほうが青色が強かったので何か根拠があっての変更か検証中なんでしょうか。

ブログのリンク色は青色を強くしたほうが良いかも

上記のように検索エンジンに使われている青色はちょっと青が弱めなのでブログでテキストの中に使うリンク色の場合は青色をもうちょっと強くしたほうが良いんじゃないかなと思いました。

完全に青色0000FFにすると太字にした時に青が強すぎるので0000D0とかちょっと青を弱くしたり昔のBingのように1020D0で青以外の色も少し入れて柔らかくするとか。

まぁほんのちょっとの違いでしかないし読者側の液晶モニタ環境にもよって発色が違うので青系統で下線付きという基本さえ守っていれば間違いなくそれがリンクだということは認識してもらえます。

リンクは色よりも下線のほうが重要

基本的には下線を付ければどんな色にしてもリンクだということが分かってもらいやすいのでブログの中で使われるリンク色が統一されていれば青以外の色を使っても問題はありません。

下線を付けない場合は青色でもリンクだと気づいてもらえないこともありそうなのでよく確かめてから色を決める必要があります。

下線を付けずに青系でリンクだと分かってもらうとしたら薄めで明るい色にしたり太字にすればわかりやすくなりますかね?

青を強くすれば見分けは付くようになりますがまぶしくなったり通常色とケンカしないように気をつけないといけません。フォントの線が細いと難しいです。

スマホにはマウスオーバーがないので注意

スマホはマウスオーバーという概念がありません。指を載せた時にマウスオーバーの変化は現れますがパソコンのマウスと同じような機能としては役に立ちません。

ということはマウスオーバーで下線を付ける設定にしていても画面を触らないとリンクかどうか判断できないためマウスオーバーを頼りにしているとユーザビリティを損なう可能性があるので注意が必要です。

まとめ

個人ブログだったらそこまでこだわらなくてもとりあえずリンクだと認識してもらえれば何でも良いと思いますけどね。

アクセス数の大きいサイトやターゲット層がインターネットに不慣れな場合はABテストなどしてみたら改善できる部分が見つかるんじゃないでしょうか。

ーーー

ヒアリングみたいなこともしてみました。⇒「検索ユーザーの離脱率について

広告

このページのシェア・保存はこちら

コメント(本文のみでOK。URL含むコメントは承認待ちになります)

メールアドレスが公開されることはありません。