Google・Yahoo・Bingのリンク色変化のまとめと、ブログにおすすめの色を考える

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

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

そして、ブログで使うリンク色はどんな色が最適なのか、下線やマウスオーバーをどうするのかなど、実際にデザインを変えながら見比べられるようにまとめています。

果たしてどんな色がリンク色として良いんでしょうか。

これは人によって最適な色が変わってくると思うので、ここから先の内容を読んで考えてみてください。

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

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

参考：最適なテキストリンクの色は？ | ウェブ力学（2010/6/21）

参考：クリック率の高いテキストリンクの色は？【2013年版】 | ウェブ力学（2013/1/28）

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

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

それらの過去データを参考にさせてもらい、自分でそれ以降の色を追記して一覧にすると以下のようになります。

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

検索結果のリンク色では、通常の色以外にも「訪問済み」「マウスオーバーした時」のリンク色が用意されているので、時系列で表にしました。

↓2014年12月時点。

↓2016年4月。Yahoo!とBingが変化。

↓2018年8月時点。Yahoo!とBingが変化。

↓2021年3月時点。BingがGoogleと同じに。

↓2022年7月（コメントより情報提供）GoogleとBingの訪問済色変化。（Twitterを検索すると、2月か4月に変化していたかも）

ーーー

こうしてみると、ヤフーは独自のリンク色で、下線やマウスオーバーの違いがはっきりあります。

2021年3月時点ではGoogleとBingの色がまったく同じでしたが、2022年7月時点で、訪問済みの色がどちらも変わっていました。

※なお、Googleはユーザーによって表示させる色を変えるテストをしているかもしれないので、この情報が確定したものとは限りません。情報を知っている方は、コメントやTwitterにて情報提供してくださると助かります。

ブログのリンク色に最適な色は？

さて、検索エンジンとブログでは、最適な色が同じとは限りません。

ブログでリンクに適しているのはどんな色でしょうか。

まず基本的なことを箇条書きにします。

一応、「青色に下線＝リンク」というのが共通認識になっていますが、青色と言ってもいろいろあります。

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

でもブログの場合は読んでいる文章の途中にリンクが出てくるので、本文とリンクは見分けやすいほうが良さそうです。（※逆に目立ちすぎて目がチカチカしないように注意）

最終的には自分のブログでバランスを確かめないといけません。

検索エンジンのリンク色比較

例として、2016年4月のリンク色でテキストリンクを貼るとどんな見た目になるのか書いてみます。

たぶんですが、検索エンジンの色をそのままブログに利用するのは、最適解にはならないでしょう。

※なお、色を付けるだけでリンクは貼っていないので、クリックしても何も起きません。

Googleのリンク色

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

Yahoo!のリンク色

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

Bingのリンク色

Bingのリンク色001BA0は青がA0と弱めなため少し暗く見えます。前回の1020D0のほうが青色が強かったので、太字ではない本文中のリンクとしては適しているのではないかと感じました。

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

上記のように、検索エンジンのリンクは青が弱めなので、ブログ本文中ではあまり目立たないことがあります。

というのも、検索エンジンの検索結果は「そこにリンクがある」ということがわかっていますが、ブログはどこにリンクがあるのか読むまでわからないかもしれません。

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

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

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

また、色覚異常がある場合は、WordPressでよく見かける緑色のリンクが見にくい可能性があるので、下線があるだけでだいぶ見分けやすさが変わってくるだろうと思われます。

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

下線を付けずに青系でリンクだと分かってもらうとしたら、薄めで明るい色にしたり太字にすればわかりやすくなりますね。※また、下線を付けない場合は必ず、マウスオーバーで下線を表示するようにしましょう。

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

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

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

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

スマホの閲覧がさらに増える現状だと、ブログ（特に本文中）のリンクは最初から下線付きにしておいたほうが無難と言えそうです。

まとめ

ここまで細かいことをいろいろ書きましたが、個人ブログだったらそこまでこだわらなくても、とりあえずリンクだと認識してもらえれば何でも良いと思います。

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

ーーー

関連：検索ユーザーの離脱率について

関連：エックスサーバーX10プランの強さ（55,000PV/日）

関連：ブログを効率よく書くためのパソコン・周辺機器の環境

関連：WorkFlowyをブログエディタとして使う方法

関連：Screenpressoの使い方（スクリーンショット加工ソフト）