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

リンク色

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

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

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

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

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

スポンサーリンク

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

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

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

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

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

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

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

どういう理由で色の変化があったのかわかりませんが、昔は結構頻繁に変わってたみたいですね。

Google・Yahoo!・Bingどれもですが、青色を弱くする傾向のようです。

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

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

約4年間の間では、Googleの変化が最も少ないようです。

↓2014年12月時点。

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

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

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

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

 2018年8月 リンク色 訪問済み 下線 マウスオーバー 前回から
Google 1A0DAB 660099 無し 色同じ、下線 変化なし
Yahoo! 000D99 4C2472 あり CC3434 変化なし
Bing 001BA0 600090 無し 色同じ、下線 下線変化

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

個人的には普段Googleを使っていて慣れているというのもあって、Yahoo!の下線とマウスオーバー時の色変化がうるさく感じて使いにくいと感じました。

でも逆に普段からYahoo!を使っている人にとっては、Googleが使いにくいのかもしれません。

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

テキストリンクに使われる色はサイトによって違いますが、ブログにはどんなリンク色が適しているんでしょうか。

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

  • 読者がリンクだと認識しやすい色
  • ストレスを与えない色

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

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

でもブログの場合は読んでいる文章の途中に突然テキストリンクが出てくるので、通常のテキストとリンクの見分けが付きにくいと見逃してしまう可能性があります。

逆に目立ちすぎると文章を読んでいる途中で目が奪われすぎてしまい、文章の流れをぶった切ってしまうことにもなります。

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

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

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

Googleのリンク色

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

Yahoo!のリンク色

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

Bingのリンク色

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

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

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

というのも、検索エンジンの検索結果は「そこにリンクがある」ということが最初からわかっているので、どんな色でも大丈夫っちゃ大丈夫ですが、ブログの場合はどこにリンクがあるのか読むまでわからないので、リンクだということがわかる色じゃないといけません。

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

ーーー

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

関連:エックスサーバーX10プランの強さ(55,000PV/日)

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

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

関連:Screenpressoの使い方(スクリーンショット加工ソフト)

スポンサーリンク

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

スポンサーリンク

著者のフォローはこちら

名前:
Twitter
YouTube

ーーー

制作物:「ノイズレスサーチ

プロフィール
問い合わせフォーム
当サイトご利用時の注意事項

記事が良いと思ったら、Twitterでツイートしたり、ブログなどで紹介してくださると嬉しいです。よろしくお願いします。

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

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