テキストリンク（アンカーテキスト）は、CSS で何も指定しなければ「青色 #0000ee ＋下線」となる。WordPress テーマやブログサービスによっては別の色になっていることもあるし、CSS で指定すれば運営者の好みに変更できる。
リンクの色と下線の有無は、クリック率に大きく影響する。もしリンクがクリックされていないようであれば、デザインを調整するだけで良い結果が得られるかもしれない。
本記事では、主要サイトのリンクカラーを調査して比較している。リンクを何色にすればよいか迷ったときは参考にしてほしい。
本記事内のデータは、毎年 3 月に調査して更新しています
目次
リンクの色は「青」が基本
前述のとおり、リンクの色は「青」が基本。
ブラウザやバージョンによって多少違う場合があるものの、デフォルトでは HTML タグ <a> を使うと「#0000ee」が指定され、下線も付く。現時点では Chrome / Firefox / Edge いずれも同じスタイルとなっている。
リンクは下線付きで #0000ee が反映されます
これは昔から変わっておらず、一般的にも「青色＋下線であればリンク」と認識されている可能性が高い。ヒートマップツールで検証すると、同スタイルが適用された文字列はクリックが集中している。
つまり、とくに理由がなければリンクは青色が最適、ということだ。青以外の色にすると、読者がそれをリンクだと認識しないかもしれない。
逆に強調としてテキストを装飾するとき、青系を使ったり下線をつけたりしてしまうと、そこはリンクだと思われる可能性がある。クリックできそうなのにできない、という状態はユーザーにストレスを与えてしまうので注意しよう。
これはリンクじゃないよ
PC だとカーソルを乗せればリンクかどうかわかるが、スマホでは実際にタップしてみないとリンクかわからない、という点も忘れないようにしてほしい。
re-inx.com主要サイトのリンクカラー比較
リンクカラーはブラウザのデフォルトそのままでもよいが、主要サイトを見ると少し色味を変えているところが多い。
いくつかピックアップしてみたので、比較していこう。
検索サイトのリンクカラー
下表は検索サイト（検索結果）を比較したものだ。下線は反映していない。
| サイト | スマホ | 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
文中以外のリンクも青色にすべきですか？
それがリンクだと認識されるなら、何色でもよい。たとえば記事一覧が並んでいるページでは、「記事タイトルをクリックすれば記事に飛ぶ」と認識されている可能性が高いので、青以外でも問題ないだろう。
テキストとブログカード（カード型リンク）はどちらがクリックされますか？
クリック率はそのサイトによって異なるので、どちらがよいとは言えない。全体のデザインやユーザー層によっても変わってくるから、両方を掲載してテストしてほしい。
リンクが青色になりません
CSS で a {color: #0000ee} と指定すれば好きな色に変更できるが、利用しているテーマ・テンプレートによってはもう少し強めにあてないと上書きできない。デベロッパーツールで調べるか、テーマ制作者に確認してほしい。
記事執筆：Reinx 編集部 瀬尾 真
Web 業界歴 20 年の知見をもとに、初心者でも楽しくブログ運営に取り組んでいただけるよう、WordPress や SEO のノウハウを提供しています。ブログ診断無料サービスもご利用ください。
ブログ運営でお悩みの方へ
ブログ初心者を対象に、無料でブログ診断を行っています。
「アクセス数が伸びない」「検索にインデックスされない」「Google AdSense 審査に通らない」といったお悩みがあればぜひご利用ください。問題の原因を探り、それぞれに合わせた解決策をご提案します。
