【2024年最新データ】主要サイトのテキストリンク色比較

テキストリンク(アンカーテキスト)は、CSS で何も指定しなければ「青色 #0000ee +下線」で表示されます。

そこから CSS で好きな色に変えられますが、リンクの色と下線の有無はクリック率に大きく影響する、ということは覚えておきましょう。もしリンクがクリックされていないようであれば、デザインを調整するだけでクリック率が上がるかもしれません。

アンカーテキスト(テキストリンク)の CSS デザインサンプル

本記事では、主要サイトのリンクカラーを調査して比較しています。リンクを何色にすればよいか迷ったときのご参考になれば幸いです。

本記事内のデータは、毎年 3 月に調査して更新しています

リンクの色は「青」が基本

リンクの色は「青」が基本です。

HTML タグ <a> を使うと「#0000ee」が指定され、さらに下線も付きます。

リンクは下線付きで #0000ee が反映されます

もう少し細かく擬似クラスまで見ると、Google Chrome の初期値は下表のとおりとなっています。

擬似クラス初期値備考
:link#0000ee未訪問のリンク
:active#ff0000アクティブな状態(クリックしてから離すまで)
:hover#0000eeカーソルを載せたとき
:visited#551a8b訪問済みのリンク

青+下線の表示は昔からずっと変わっていないので、一般的にも「青色+下線であればリンク」と認識されていると思います。ヒートマップツールで検証すると、同スタイルが適用されたテキストはクリックが集中していますしね。

つまり、とくに理由がなければリンクは青色が最適、ということ。青以外の色にすると、読者がそれをリンクだと認識しないかもしれないのです。

逆に、強調としてテキストを装飾するとき、青系にしたり下線をつけたりしてしまうと、そこはリンクだと思われる可能性があります。クリックできそうなのにできない、という状態は読者にストレスを与えかねません。

これはリンクじゃないよ

また、パソコンだとカーソルを乗せればリンクかどうかわかりますが、スマホでは実際にタップしてみないとリンクかどうかわからない、という点も忘れないようにしましょう。

主要サイトのリンクカラー比較

リンクの色はブラウザの初期値そのままでも問題ありませんが、メジャーなサイトを見ると少し色味を変えているところが多いようです。

いくつかピックアップしてみたので、比較してみましょう。

検索サイトのリンクカラー変更履歴

下表は検索サイト(検索結果)を比較したもの。下線は反映していません。

変更があった箇所は を入れてあります。


サイトスマホPC
Google#1558d6#1a0dab
Yahoo! JAPAN#0b62e5#000d99
Bing#1a0dab#1a0dab
エキサイト#0000cc#193ecf
goo#0033cc#1a0dab
BIGLOBE#0033cc#1a0dab
2021 年 3 月 / 2022 年 3 月(変化なし)
サイトスマホPC
Google#1558d6#1a0dab
Yahoo! JAPAN#0b62e5#000d99
Bing#4007a2 #4007a2
エキサイト#0000cc#193ecf
goo#0033cc#1a0dab
BIGLOBE#0033cc#1a0dab
2023 年 3 月
サイトスマホPC
Google#1558d6#1a0dab
Yahoo! JAPAN#0b62e5#000d99
Bing#4007a2#4007a2
エキサイト#0000cc#193ecf
goo#0033cc#1a0dab
BIGLOBE#0033cc#1a0dab
2024 年 3 月現在

2021 年と 2022 年で変化は見られず、2023 年は Bing のみ紫に近い色に変わっていました。2024 年は各サイト変化なしです。

Bing は過去に「色の変更によって 8000 万ドルの売上増につながった」と発表していましたが、配色を定期的にテストし、そのなかでクリック率の高いものを採用していると思われます。

複数の色合いの中から特定の青色(色に詳しい人のために紹介しておくと、「#0044CC」)を選ぶことで、広告クリック数の増加やユーザー関与の増大により、年間売上高が8000万ドル増加したという。

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

Bing のカラー変更がどのように影響しているかわかりませんが、Google をはじめとして goo や BIGLOBE も同じ色なので、検索結果の配色は今のところ #1a0dab が無難なのでしょう。

比較表を見てわかるように、「PC 表示」と「スマホ表示」で色を変更しているところが多いのもポイントです。画面が小さい端末では、水色に近い青のほうがクリック率は高いのかもしれません。

全体の配色・下線の有無・フォントサイズなどで印象は変わってきますが、トコトンまでクリック率を高めたいなら検証してみてはどうでしょうか。

2018 年までの変遷は「パソ活ラボ」さんの記事をご覧ください。

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

読みもの系のリンクカラー変更履歴

検索結果のリンク色は、「ユーザーがリンクをクリックする目的で訪れている」ことを前提に考えられているはずです。

では、ブログ記事など「ユーザーが文章を読みにきている」場合はどうなのでしょうか。下表は、日本国内でアクセスの多いサイトを中心にピックアップして調査した結果です。


サイトスマホPC
Wikipedia#3366cc#0645ad
Google 検索セントラル#1a73e8#1a73e8
Yahoo! ニュース#006ccc#0033cc
note#222222#222222
価格.com ニュース#011b8f#006cc7
2021 年 3 月 / 2022 年 3 月(変化なし)
サイトスマホPC
Wikipedia#3366cc#3366cc
Google 検索セントラル#1a73e8#1a73e8
Yahoo! ニュース#006ccc#0033cc
note#08131a #08131a
価格.com ニュース#011b8f#006cc7
2023 年 3 月
サイトスマホPC
Wikipedia#3366cc#3366cc
Google 検索セントラル#1a73e8#1a73e8
Yahoo! ニュース#006ccc#0033cc
note#08131a#08131a
価格.com ニュース#006cc7 #006cc7
2024 年 3 月現在

検索サイトと同じく 2021 年と 2022 年で変化は見られず、2023 年の調査では Wikipedia が PC のリンク色をスマホと同じ色に変えていました。

note は以前から本文の色とリンクの色が同じで、下線を付けただけのスタイル。本文の色が変わったため、リンク色も変わっています。

2024 年には、価格.com のスマホカラーが PC と同じになっていました。スマホと分ける意味がなかったのかもしれません。

現在スマホと PC でリンク色を変えているのは、Yahoo! ニュース のみです。

下表は同サイトでテキストカラーとリンクカラーを抜き出してみた結果(スマホ表示)。

サイト本文リンク
Wikipedia#202122#3366cc
Google 検索セントラル#202124#1a73e8
Yahoo! ニュース#333333#006ccc
note#08131a#08131a
価格.com ニュース#333333#006cc7
スマホ表示の配色

こうして比較してみると、リンク色は少し明るめにしたほうが目立つ気がしますね。

リンク色に関する Q&A

Q

文中以外のリンクも青色にすべきですか?

A

それがリンクだと認識されるなら、何色でも OK です。たとえば記事一覧が並んでいるページでは、「記事タイトルをクリックすれば記事に飛ぶ」と認識されている可能性が高いので、青以外でも問題ないでしょう。

Q

テキストとブログカード(カード型リンク)はどちらがクリックされますか?

A

クリック率はそのサイトによって違いますから、どちらがよいとは言えません。全体のデザインや読者層によっても変わってくるため、両方を掲載してテストするのが一番です。

ちなみに、当サイトではテキストもブログカードもクリック率はほぼ同じでした。テキストのほうがやや高いかな、というぐらいです。

AB テストが簡単にできる WordPress プラグイン「My WP A/B Testing」の使い方

Q

リンクが青色になりません

A

CSS で a {color: #0000ee} と指定すれば好きな色に変更できますが、利用しているテーマ・テンプレートによってはもう少し強めにあてないと上書きできません。デベロッパーツールで調べるか、テーマ制作者・有識者に聞いてみてください。

まとめ:リンクは青系を使うのが無難

「リンクの色はこれがベスト」という正解はないものの、デフォルトカラーである青系を使うのが無難、というのは間違いないと推測されます。

何色にしようか迷ったときは、本記事の調査結果を参考にしてみてください。大勢が見ているサイトですから、それに近い色を使っていればリンクと認識される可能性は高くなります。同じジャンルの競合サイトをチェックしてみるのもよいですね。

どのような色・形状にするにしても、それがリンクだと認識されなければ意味がありません。きれいな配色にこだわりすぎて、本質を見失わないよう気をつけましょう。

色の見え方が一般の人と違う人もいますからね。青系を識別できない人でも、下線が付いているとリンクだと認識しやすいと思います。

色覚型と特徴 – NPO法人 カラーユニバーサルデザイン機構 CUDO

「リンク先がユーザーの興味をひくものになっているか」は、さらに重要です。どんなに色を変えたところで、興味のないアフィリエイトリンクを載せていればクリックされません。

気になったものは、実際にテストして試すのが一番ですよ。

Author

Naifix 編集部
Web コンサルティング業務を中心に、サイト制作・コンテンツ販売・メディア運営代行業務を行っております。当サイト(Naifix)では、おもにブログ初心者向けのノウハウを無料で配信しています。