テキストリンク(アンカーテキスト)は、CSS で何も指定しなければ「青色 #0000ee +下線」となる。WordPress テーマやブログサービスによっては別の色になっていることもあるし、CSS で指定すればどんな色にでも変更可能だ。

リンクの色と下線の有無は、クリック率に大きく影響する。もしリンクがクリックされていないようであれば、デザインを調整するだけで良い結果が得られるかもしれない。

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

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

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

前述のとおり、リンクの色は「青」が基本だ。

ブラウザやバージョンによって多少違う場合があるものの、デフォルトでは HTML タグ <a> を使うと「#0000ee」が指定され、下線も付く。現時点では Chrome / Firefox / Edge いずれも同じスタイルとなっている。

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

これは昔から変わっておらず、一般的にも「青色+下線であればリンク」と認識されている可能性が高い。ヒートマップツールで検証すると、同スタイルが適用された文字列はクリックが集中している。

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

逆に強調としてテキストを装飾するとき、青系を使ったり下線をつけたりしてしまうと、そこはリンクだと思われる可能性がある。クリックできそうなのにできない、という状態はユーザーにストレスを与えてしまうので注意しよう。

これはリンクじゃないよ

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

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

リンクカラーはブラウザのデフォルトそのままでもよいが、主要サイトを見ると少し色味を変えているところが多い。

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

検索サイトのリンクカラー

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

サイトスマホPC
Google#1558d6#1a0dab
Yahoo! JAPAN#0b62e5#000d99
Bing#1a0dab#1a0dab
エキサイト#0000cc#193ecf
goo#0033cc#1a0dab
BIGLOBE#0033cc#1a0dab
2021 年 3 月現在
サイトスマホPC
Google#1558d6#1a0dab
Yahoo! JAPAN#0b62e5#000d99
Bing#1a0dab#1a0dab
エキサイト#0000cc#193ecf
goo#0033cc#1a0dab
BIGLOBE#0033cc#1a0dab
2022 年 3 月現在

2021 年と 2022 年で変化は見られなかった。

配色は定期的にテストされており、そのなかでクリック率の高いものが採用されていると見てよい。過去には、Bing が色の変更によって 8000 万ドルの売上増につながったと公表した。

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

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

現時点で Bing は Google と同じ色を採用しており、おそらく goo や BIGLOBE もそれに倣っている。検索結果の配色は今のところ #1a0dab が正解なのだろう。

調査してみて初めてわかったのが、「PC 表示」と「スマホ表示」で色を変更しているところが多い、という点だ。画面が小さい端末では、水色に近い青のほうが結果は良かったのかもしれない。

下線の有無やフォントサイズなどで印象は異なるが、トコトンまでクリック率を高めたいなら検証してみる価値はある。

なお、2018 年までの変遷は「パソ活ラボ」さんの記事でまとめられている。

読みもの系のリンクカラー

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

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

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

検索サイトと同じく、2021 年と 2022 年で変化は見られない。

サイトによってバラバラだが、明るめにしているところが多いようだ。検索結果のリンク色と同じく、PC とスマホで色を変更しているサイトもある。

これは、本文のテキストカラーとの兼ね合いもあると思う。検索結果と違い、基本的に黒系の文章のなかにリンクが入るため、それがリンクだとハッキリ認識してもらわなければならない。

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

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

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

note は色を変えず下線を付けただけになっているが、これは埋め込み型リンク(カード型リンク)をメインで使うよう考えているからなのかもしれない。

結論:リンクは青系を使うのが無難

下線の有無・フォントの種類・サイト全体の配色も影響してくるため、「リンクの色はこれがベスト」という正解はない。ただ、デフォルトカラーである青系を使うのが無難、というのは間違いないだろう。

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

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

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

リンクカラーに関する Q&A

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

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

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

クリック率はそのサイトによって異なるので、どちらがよいとは言えない。全体のデザインやユーザー層によっても変わってくるから、両方を掲載してテストしてほしい。

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

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