テキストリンク(アンカーテキスト)のブラウザデフォルトカラーは、「青色 #0000ee +下線」です。

このデフォルトカラーをそのまま使用しているサイトは少なく、わずかながら色味を変えていることがほとんどです。
リンクの色と下線の有無はクリック率に大きく影響するため、もしリンクがクリックされていないようであれば、CSS でデザインを調整してみてください。
本記事では、大手サイトのリンクカラーを調査して比較しています。リンクを何色にすればよいか迷ったときのご参考になれば幸いです。
本記事内のデータは、毎年 3 月に調査して更新しています。
リンクの色は「青」が基本
リンクの色は「青」が基本です。
HTML タグ <a>
を使うと「#0000ee」が指定され、さらに下線も付きます。
もう少し細かく擬似クラスまで見ると、Google Chrome の初期値は下表のとおりとなっています。
疑似クラス | 初期値 | 備考 |
---|---|---|
:link | #0000ee | 未訪問のリンク |
:active | #ff0000 | アクティブな状態(クリックしてから離すまで) |
:hover | #0000ee | カーソルを乗せたとき |
:visited | #551a8b | 訪問済みのリンク |
リンク色は CSS で自由に指定できますが、まったく違う色にするのはあまりおすすめしません。
/* CSS 例 */
a { color: #0000ee; }
a:hover { color: #0000ee; }
このデザインは昔からずっと変わっておらず、一般的にも「青色+下線であればリンク」と認識されていると思います。
もし青以外の色にすると、読者がリンクだとわからず、クリック率が大幅に下がるかもしれません。
逆に、単なる装飾に青系や下線を付けるのもやめたほがよいでしょう。そこがリンクだと思われて、クリックできそうなのにできない、というストレスを与えるためです。
これはリンクじゃないよ
パソコンだとカーソルを乗せればリンクかどうかわかりますが、スマホでは実際にタップしてみないとリンクかどうかわからない、という点も忘れないようにしてください。
大手サイトのリンクカラー比較
リンクの色はブラウザの初期値そのままでも問題ありませんが、背景が白だと少しキツイかもしれません。メジャーなサイトも、青系ではあるものの少し色味を変えています。
いくつかピックアップしてみたので、比較してみましょう。
検索サイトのリンクカラー変更履歴
下表は検索サイト(検索結果)を比較したものです。下線は反映していません。
2021 年 / 2022 年
サイト | スマホ | PC |
---|---|---|
#1558d6 | #1a0dab | |
Yahoo! JAPAN | #0b62e5 | #000d99 |
Bing | #1a0dab | #1a0dab |
エキサイト | #0000cc | #193ecf |
goo | #0033cc | #1a0dab |
BIGLOBE | #0033cc | #1a0dab |
2023 年
サイト | スマホ | PC |
---|---|---|
#1558d6 | #1a0dab | |
Yahoo! JAPAN | #0b62e5 | #000d99 |
Bing | #4007a2 | #4007a2 |
エキサイト | #0000cc | #193ecf |
goo | #0033cc | #1a0dab |
BIGLOBE | #0033cc | #1a0dab |
2024 年
サイト | スマホ | PC |
---|---|---|
#1558d6 | #1a0dab | |
Yahoo! JAPAN | #0b62e5 | #000d99 |
Bing | #4007a2 | #4007a2 |
エキサイト | #0000cc | #193ecf |
goo | #0033cc | #1a0dab |
BIGLOBE | #0033cc | #1a0dab |
サイト | スマホ | PC |
---|---|---|
#1558d6 | #1a0dab | |
Yahoo! JAPAN | #0b62e5 | #000d99 |
Bing | #671bc7 | #671bc7 |
エキサイト | #0000cc | #193ecf |
goo | #0033cc | #1a0dab |
BIGLOBE | #0033cc | #1a0dab |
ここ数年でリンク色を変更しているのは Bing のみで、2023 年に紫に近い色に変わり、2025 年はもう少し明るい紫色になっていました。
ブラウザデフォルトの「訪問済み」に似ていますね。
Bing は過去に「色の変更によって 8000 万ドルの売上増につながった」と発表していましたが、配色を定期的にテストし、そのなかでクリック率の高いものを採用していると思われます。
複数の色合いの中から特定の青色(色に詳しい人のために紹介しておくと、「#0044CC」)を選ぶことで、広告クリック数の増加やユーザー関与の増大により、年間売上高が8000万ドル増加したという。
「Bing」の検索リンクが青い理由–マイクロソフトが配色決定の裏側を説明 – ZDNet Japan
Bing のカラー変更がその後どのように影響しているかわかりませんが、Google をはじめとして goo や BIGLOBE も同じ色なので、検索結果の配色は今のところ #1a0dab が無難なのでしょう。
比較表を見てわかるように、「PC 表示」と「スマホ表示」で色を変更しているところが多いのもポイントです。画面が小さい端末では、水色に近い青のほうがクリック率は高いのかもしれません。
全体の配色・下線の有無・フォントサイズなどで印象は変わってきますが、トコトンまでクリック率を高めたいなら検証してみてはどうでしょうか。
2018 年までの変遷は「パソ活ラボ」さんの記事をご覧ください。
読みもの系のリンクカラー変更履歴
検索結果のリンク色は、「ユーザーがリンクをクリックする目的で訪れている」ことを前提に考えられているはずです。
では、ブログ記事など「ユーザーが文章を読みにきている」場合はどうなのでしょうか。下表は、日本国内でアクセスの多いサイトを中心にピックアップして調査した結果です。
2021 年 / 2022 年
サイト | スマホ | PC |
---|---|---|
Wikipedia | #3366cc | #0645ad |
Google 検索セントラル | #1a73e8 | #1a73e8 |
Yahoo! ニュース | #006ccc | #0033cc |
note | #222222 | #222222 |
価格.com ニュース | #011b8f | #006cc7 |
2023 年
サイト | スマホ | PC |
---|---|---|
Wikipedia | #3366cc | #3366cc |
Google 検索セントラル | #1a73e8 | #1a73e8 |
Yahoo! ニュース | #006ccc | #0033cc |
note | #08131a | #08131a |
価格.com ニュース | #011b8f | #006cc7 |
2024 年
サイト | スマホ | PC |
---|---|---|
Wikipedia | #3366cc | #3366cc |
Google 検索セントラル | #1a73e8 | #1a73e8 |
Yahoo! ニュース | #006ccc | #0033cc |
note | #08131a | #08131a |
価格.com ニュース | #006cc7 | #006cc7 |
サイト | スマホ | PC |
---|---|---|
Wikipedia | #3366cc | #3366cc |
Google 検索セントラル | #1a73e8 | #1a73e8 |
Yahoo! ニュース | #006ccc | #0033cc |
note | #08131a | #08131a |
価格.com ニュース | #011b8f | #006cc7 |
Wikipedia は 2023 年にスマホと PC の配色をそろえ、そこから変化はありません。
一方、価格.com は 2024 年に配色をそろえたものの、再び変更したようです。
下表は同サイトでテキストカラーとリンクカラーを抜き出してみた結果です(スマホ表示)。
サイト | 本文 | リンク |
---|---|---|
Wikipedia | #202122 | #3366cc |
Google 検索セントラル | #202124 | #1a73e8 |
Yahoo! ニュース | #333333 | #006ccc |
note | #08131a | #08131a |
価格.com ニュース | #333333 | #011b8f |
こうして比較してみると、リンク色は少し明るめにしたほうが目立つ気がしますね。
デフォルトカラーの #0000ee から少し明るめにしてテストしてみると、良い結果が得られるかもしれません。
なお、当サイトでは、Google 検索セントラルと同じ配色にしています。この記事が少しでも読みやすいと思ったら、ぜひ真似してみてください。
リンク色に関する Q&A
まとめ:リンクは少し色味を変えた青系がおすすめ
テキストリンクに関するベストプラクティスは以下の通りです。
- テキストリンクは青系がおすすめ
- ブラウザのデフォルトカラーをそのまま使っているサイトは少ない
- 全体の配色や文字色とのバランスを考え、一目でリンクとわかるようにする
何色にしようか迷ったときは、本記事の調査結果を参考にしてみてください。大勢が見ているサイトですから、それに近い色を使っていればリンクと認識される可能性は高くなります。
どのような色・形状にするにしても、それがリンクだと認識されなければ意味がありません。きれいな配色にこだわりすぎて、本質を見失わないよう気をつけたいですね。