【2021年最新データ】主要サイトのテキストリンク色比較

アンカーテキスト

Web サイトで使用するリンクの色は何がよいのか、どの色だとクリック率が高くなりそうか、悩みどころだと思います。

テーマやテンプレートのデフォルトカラーをそのまま使うか、より目立つような色にするのか、サイト運営者の考えが反映されるところですね。

悩んだときは結果を出しているサイトの真似をしてみましょう。主要サイトのリンクカラーを調べてみましたので、ご参考になれば幸いです。

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

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

ブラウザはデフォルトでリンクに青色を適用しており、CSS で指定しなければ以下のように表示されます。

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

ブラウザやバージョンによって多少違うかもしれませんが、2021 年 3 月時点では 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 月現在

配色は定期的にテストされており、そのなかでクリック率の高いものが採用されていると思います。過去には、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#202122#3366cc
Google 検索セントラル#202124#1a73e8
Yahoo! ニュース#333333#006ccc
note#222222#222222
価格.com ニュース#333333#011b8f
スマホ表示の配色

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

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

結局、リンクは何色がよいのか

下線の有無・フォントの種類・サイト全体の配色も影響してくるので、「リンクの色はこれがベスト」という正解はありません。青系を使うのが無難、といったところですね。

迷ったときは、主要サイトを参考にしてみてください。大多数が見ているサイトですから、それに近い色を使っていればリンクと認識される可能性は高いはずです。

同ジャンルの競合サイトをチェックしてみるのもよいでしょう。テキストリンクのみ使っているのか、埋め込み型リンクにしているのか、などなどヒントがたくさん見つかると思います。

ちなみに、当サイトは今回の調査を機に Google 検索セントラルと同じ配色にしてみました。

CSSの調べ方

他サイトの CSS は、ブラウザのデベロッパーツールですぐ調べられます。

Chrome 拡張機能「CSS Used」を併用すると、その要素に適用されている CSS を抽出できるのでおすすめです。

CSS Used

上の画像だと、a { color: #1a73e8; } がリンク色です。

CSS で色を変更する方法とデザインサンプルは以下の記事で取り上げていますので、合わせてご覧ください。

まとめ

ブログではブログカード(埋め込み型リンク)を使うことも多いと思いますし、アフィリエイトリンクをボタン型にしているサイトもよく見かけます。

どのような色・形状にするにせよ、それがリンクだと認識してもらうのが重要です。

もっと重要なのは、リンク先が読者の興味をひくものになっているか、ですね。どんなにリンクが目立っていても、興味がなければだれもクリックしません。

スマホと PC でリンク色を変更して検証してみるのは面白そうなので、いずれテストしてみたいと思います。

それでは、また。

Naifix Limited

Naifix Limited

Naifix Limited に無料登録すると、会員限定コンテンツ「ブログのアクセス数を最大限に増やす SEO 施策」ほか、ライブ配信やメールマガジンでブログ運営に役立つ最新情報を入手できます。

Naifix 編集部

Web コンサルティング業務を中心に、サイト制作・コンテンツ販売・メディア運営代行業務を行っております。本ブログ(Naifix)では、おもにブログ初心者向けのノウハウを無料で配信しています。

執筆・監修 Direx Marketing, Inc.