テキストリンク（アンカーテキスト）は、CSS で何も指定しなければ「青色 #0000ee ＋下線」で表示されます。
そこから CSS で好きな色に変えられますが、リンクの色と下線の有無はクリック率に大きく影響する、ということは覚えておきましょう。もしリンクがクリックされていないようであれば、デザインを調整するだけでクリック率が上がるかもしれません。
本記事では、主要サイトのリンクカラーを調査して比較しています。リンクを何色にすればよいか迷ったときのご参考になれば幸いです。
本記事内のデータは、毎年 3 月に調査して更新しています
Google コアアップデート対策の教科書
最近になってブログのアクセス数が激減したならぜひご一読ください。初心者向けにコアアップデートの傾向と対策をわかりやすく解説しています。
リンクの色は「青」が基本
リンクの色は「青」が基本です。
HTML タグ <a> を使うと「#0000ee」が指定され、さらに下線も付きます。
リンクは下線付きで #0000ee が反映されます
もう少し細かく擬似クラスまで見ると、Google Chrome の初期値は下表のとおりとなっています。
| 擬似クラス | 初期値 | 備考 |
|---|---|---|
| :link | #0000ee | 未訪問のリンク |
| :active | #ff0000 | アクティブな状態（クリックしてから離すまで） |
| :hover | #0000ee | カーソルを載せたとき |
| :visited | #551a8b | 訪問済みのリンク |
青＋下線の表示は昔からずっと変わっていないので、一般的にも「青色＋下線であればリンク」と認識されていると思います。ヒートマップツールで検証すると、同スタイルが適用されたテキストはクリックが集中していますしね。
つまり、とくに理由がなければリンクは青色が最適、ということ。青以外の色にすると、読者がそれをリンクだと認識しないかもしれないのです。
逆に、強調としてテキストを装飾するとき、青系にしたり下線をつけたりしてしまうと、そこはリンクだと思われる可能性があります。クリックできそうなのにできない、という状態は読者にストレスを与えかねません。
これはリンクじゃないよ
また、パソコンだとカーソルを乗せればリンクかどうかわかりますが、スマホでは実際にタップしてみないとリンクかどうかわからない、という点も忘れないようにしましょう。
主要サイトのリンクカラー比較
リンクの色はブラウザの初期値そのままでも問題ありませんが、メジャーなサイトを見ると少し色味を変えているところが多いようです。
いくつかピックアップしてみたので、比較してみましょう。
検索サイトのリンクカラー
下表は検索サイト（検索結果）を比較したもの。下線は反映していません。
| サイト | スマホ | PC |
|---|---|---|
| #1558d6 | #1a0dab | |
| Yahoo! JAPAN | #0b62e5 | #000d99 |
| Bing | #1a0dab | #1a0dab |
| エキサイト | #0000cc | #193ecf |
| goo | #0033cc | #1a0dab |
| BIGLOBE | #0033cc | #1a0dab |
| サイト | スマホ | PC |
|---|---|---|
| #1558d6 | #1a0dab | |
| Yahoo! JAPAN | #0b62e5 | #000d99 |
| Bing | #4007a2 | #4007a2 |
| エキサイト | #0000cc | #193ecf |
| goo | #0033cc | #1a0dab |
| BIGLOBE | #0033cc | #1a0dab |
2021 年と 2022 年で変化は見られず、2023 年は Bing のみ紫に近い色に変わっていました（訪問済みリンクの色にも似ていますね）。
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 |
| サイト | スマホ | PC |
|---|---|---|
| Wikipedia | #3366cc | #3366cc |
| Google 検索セントラル | #1a73e8 | #1a73e8 |
| Yahoo! ニュース | #006ccc | #0033cc |
| note | #08131a | #08131a |
| 価格.com ニュース | #011b8f | #006cc7 |
検索サイトと同じく 2021 年と 2022 年で変化は見られず、2023 年の調査では Wikipedia が PC のリンク色をスマホと同じ色に変えていました。
note は以前から本文の色とリンクの色が同じで、下線を付けただけのスタイル。本文の色が変わったため、リンク色も変わっています。
サイトによってバラバラですが、明るめにしているところが多いようです。検索結果のリンク色と同じく、PC とスマホで色を変更しているサイトもありました。
これは、本文のテキストカラーとの兼ね合いもあると思います。検索結果と違い、基本的に黒系の文章のなかにリンクが入るため、それがリンクだとハッキリ認識してもらわなければなりません。
下表は同サイトでテキストカラーとリンクカラーを抜き出してみた結果（スマホ表示）。
| サイト | 本文 | リンク |
|---|---|---|
| Wikipedia | #202122 | #3366cc |
| Google 検索セントラル | #202124 | #1a73e8 |
| Yahoo! ニュース | #333333 | #006ccc |
| note | #08131a | #08131a |
| 価格.com ニュース | #333333 | #011b8f |
こうして比較してみると、やはりリンク色は少し明るめにしたほうが目立つ気がしませんか？
リンク色に関する Q&A
それがリンクだと認識されるなら、何色でも OK です。たとえば記事一覧が並んでいるページでは、「記事タイトルをクリックすれば記事に飛ぶ」と認識されている可能性が高いので、青以外でも問題ないでしょう。
クリック率はそのサイトによって違いますから、どちらがよいとは言えません。全体のデザインや読者層によっても変わってくるため、両方を掲載してテストするのが一番です。
ちなみに、当サイトではテキストもブログカードもクリック率はほぼ同じでした。テキストのほうがやや高いかな、というぐらいです。
CSS で a {color: #0000ee} と指定すれば好きな色に変更できますが、利用しているテーマ・テンプレートによってはもう少し強めにあてないと上書きできません。デベロッパーツールで調べるか、テーマ制作者・有識者に聞いてみてください。
まとめ：リンクは青系を使うのが無難
「リンクの色はこれがベスト」という正解はないものの、デフォルトカラーである青系を使うのが無難、というのは間違いないと推測されます。
何色にしようか迷ったときは、本記事の調査結果を参考にしてみてください。大勢が見ているサイトですから、それに近い色を使っていればリンクと認識される可能性は高くなります。同じジャンルの競合サイトをチェックしてみるのもよいですね。
どのような色・形状にするにしても、それがリンクだと認識されなければ意味がありません。きれいな配色にこだわりすぎて、本質を見失わないよう気をつけましょう。
色の見え方が一般の人と違う人もいますからね。青系を識別できない人でも、下線が付いているとリンクだと認識しやすいと思います。
色覚型と特徴 – NPO法人 カラーユニバーサルデザイン機構 CUDO
「リンク先がユーザーの興味をひくものになっているか」は、さらに重要です。どんなに色を変えたところで、興味のないアフィリエイトリンクを載せていればクリックされません。
気になったものは、実際にテストして試すのが一番ですよ。