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

リンク色

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

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

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

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

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

スポンサーリンク

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

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

参考:最適なテキストリンクの色は? | ウェブ力学(2010/6/21)

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

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

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

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

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

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

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

↓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月時点。Yahoo!とBingが変化。

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

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

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

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

Googleは2014年くらいから仕様が固まっていて変化なし。

Bingは独自の路線に行くかと思いきや、完全にGoogleと同じにしてきました。

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

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

↓ブログの本文中に使うとしたらこんな感じ?

リンク色に適している色
  • 本文の途中でも認識しやすい色
  • ストレスを与えない色
  • 色覚異常の影響を受けにくい色(赤と緑は影響を受けやすい)

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

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

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

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

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

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

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

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

Googleのリンク色

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

Yahoo!のリンク色

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

Bingのリンク色

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

ーーー

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

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

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

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

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

スポンサーリンク

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

Amazonでの買い物について

大きな買い物をするならAmazonチャージがおすすめ。チャージ金額に応じて余分にポイントがもらえます。
プライム会員ならさらにポイント上乗せ(学生はPrime Student

スポンサーリンク
スポンサーリンク

著者のフォローはこちら

名前:
Twitter
YouTube

ーーー

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

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

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

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

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