テキストリンク(アンカーテキスト)のブラウザデフォルトカラーは、「青色 #0000ee +下線」です。
そこから CSS で好きな色に変えられますが、リンクの色と下線の有無はクリック率に大きく影響する、ということは覚えておきましょう。
もしリンクがクリックされていないようであれば、デザインを調整するだけでクリック率が上がるかもしれません。
本記事では、主要サイトのリンクカラーを調査して比較しています。リンクを何色にすればよいか迷ったときのご参考になれば幸いです。
リンクの色は「青」が基本
リンクの色は「青」が基本です。
HTML タグ <a>
を使うと「#0000ee」が指定され、さらに下線も付きます。
リンクは下線付きで #0000ee が反映されます
もう少し細かく擬似クラスまで見ると、Google Chrome の初期値は下図のとおりとなっています。
青+下線の表示は昔からずっと変わっていないので、一般的にも「青色+下線であればリンク」と認識されていると思います。ヒートマップツールで検証すると、同スタイルが適用されたテキストはクリックが集中していますしね。
つまり、とくに理由がなければリンクは青色が最適、ということ。青以外の色にすると、読者がそれをリンクだと認識しないかもしれないのです。
逆に、強調としてテキストを装飾するとき、青系にしたり下線をつけたりしてしまうと、そこはリンクだと思われる可能性があります。クリックできそうなのにできない、という状態は読者にストレスを与えかねません。
これはリンクじゃないよ
また、パソコンだとカーソルを乗せればリンクかどうかわかりますが、スマホでは実際にタップしてみないとリンクかどうかわからない、という点も忘れないようにしましょう。
主要サイトのリンクカラー比較
リンクの色はブラウザの初期値そのままでも問題ありませんが、メジャーなサイトを見ると少し色味を変えているところが多いようです。
いくつかピックアップしてみたので、比較してみましょう。
検索サイトのリンクカラー変更履歴
下表は検索サイト(検索結果)を比較したもの。下線は反映していません。
変更があった箇所は
を入れてあります。サイト | スマホ | 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 |
サイト | スマホ | PC |
---|---|---|
#1558d6 | #1a0dab | |
Yahoo! JAPAN | #0b62e5 | #000d99 |
Bing | #4007a2 | #4007a2 |
エキサイト | #0000cc | #193ecf |
goo | #0033cc | #1a0dab |
BIGLOBE | #0033cc | #1a0dab |
2021 年と 2022 年で変化は見られず、2023 年は Bing のみ紫に近い色に変わっていました。2024 年は各サイト変化なしです。
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 |
サイト | スマホ | PC |
---|---|---|
Wikipedia | #3366cc | #3366cc |
Google 検索セントラル | #1a73e8 | #1a73e8 |
Yahoo! ニュース | #006ccc | #0033cc |
note | #08131a | #08131a |
価格.com ニュース | #006cc7 | #006cc7 |
検索サイトと同じく 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
まとめ:リンクは青系を使うのが無難
テキストリンクに関するベストプラクティスは以下の通りです。
- テキストリンクは青系がおすすめ
- ブラウザのデフォルトカラーをそのまま使っているサイトは少ない
- 全体の配色や文字色とのバランスを考え、一目でリンクとわかるようにする
何色にしようか迷ったときは、本記事の調査結果を参考にしてみてください。大勢が見ているサイトですから、それに近い色を使っていればリンクと認識される可能性は高くなります。
どのような色・形状にするにしても、それがリンクだと認識されなければ意味がありません。きれいな配色にこだわりすぎて、本質を見失わないよう気をつけたいですね。
色の見え方が一般の人と違う人もいますから、色を識別できないケースを考慮して、下線を付けておくほうがよいと思います。
色覚型と特徴 – NPO法人 カラーユニバーサルデザイン機構 CUDO