見やすいリンク色とは?デフォルト値#0000EEの青色は全く使われていない!参考になる大手サイトのリンク色を調査。

Optimal link color_eyecatch

クリック率が上がるかも?見やすいWebページのリンク色についてです。

インターネットでテキストリンクと言えば青色です。
これは日本だけではなく、世界共通の認識と言えます。

リンク色の初期値は#0000EEですが、実はこの色は全然使われていません。
現在のインターネットにおいてデフォルト値は明るすぎると言われています。

青色が目につきやすく、読みやすいので青色になっているそうです。

リンク色におすすめの青色とは?

今回、大手検索エンジンや動画サイトなどが設定しているリンク色を調査しました。

この調査結果も踏まえておすすめのリンク色をご案内したいと思います。

リンク色のデフォルト値(初期値)

スタイルシートなどでリンク色の設定をしていない場合、初期値は#0000EEです。

#0000EEのテキストリンクのサンプル
こんな色です。
青色ですが、今現在のインターネット上では目にすることが少ないはずです。

それぞれのサイトで個別にリンク色の設定がされているためです。
一般Webサイトだけでなく、検索エンジンでの検索結果も同じでその検索エンジンによってスタイルが決められています。

もしスタイルが読み込めない場合はブラウザのデフォルト値が適用されるはず…

大手サイトのリンク色まとめ

リンクといっても青色に設定してある部分で調査しました。
サイトに合うように全く違う色に設定してあるサイトも多いので参考までにどうぞ。

サイト名カラーコードRGB値
デフォルト値あいうえお#0000EE0, 0, 238
Googleあいうえお#1a0dab26, 13, 171
Microsoft Bing
Yahooトップあいうえお#1d399429, 57, 148
Yahoo検索結果あいうえお#000d990, 13, 153
gooトップあいうえお#1d56a529, 86, 165
goo検索結果あいうえお#1a0dab26, 13, 171
Baidu(百度)あいうえお#2440b336, 64, 179
DuckDuckGoあいうえお#00278e0, 39, 142
Yandexあいうえお#0000800, 0, 128
livedoorトップあいうえお#2355a535, 85, 165
Youtubeあいうえお#065FD46, 95, 212
ニコニコ(動画)あいうえお#0080ff0, 128, 255
FC2動画あいうえお#2A5CBD42, 92, 189
Dailymotionあいうえお#00aaff0, 170, 255
Amazonあいうえお#0066c00, 102, 192
価格.comあいうえお#0000dd0, 0, 221
楽天市場あいうえお#0066CC0, 102, 204
Twitterあいうえお#1b94e027, 149, 224
Facebookあいうえお#38589856, 88, 152
Wikipediaあいうえお#0645ad6, 69, 173

ぱっと見でデフォルト値と比べると、結構違いますね。
青色と言っても千差万別と言えるのではないでしょうか?

・検索エンジン:暗めの青色
・動画サイト:明るめの青色
・SNS:薄め?の青色

という特徴がありそうな感じです。

リンク色の決め方

では個人ブログのようなサイトでのリンク色はどの青色がオススメか?
遜色ないところではGoogleが使っている「#1a0dab」やYahooの「#000d99」が無難ではあります。
背景色によってはもう少し明るくしても良いかもしれません。

青色や紺色以外に独自の色にしても良いですが、青色=リンクという認識が効かないため、下線を付けるスタイルにしておくとリンクと認識してもらいやすくなります。

コントラストと可読性に注意する

SEOというカテゴリにしたので可読性についても執筆します。
ユーザビリティを高めることはSEOに影響します。
ページの読みやすさ=文字の読みやすさ=可読性も重要です。

リンク色についても例外ではなく、背景色と文字色のコントラストに気を付けなくてはなりません。

ただ見た目の判断は難しく、自分が読みやすいコントラストだと思っていても他の人には少し読みにくいかもしれません。
そこでGoogle Chromeブラウザを使ったコントラストの検証方法をご紹介します。

Chromeでコントラストを検証する

Chromeのデベロッパーツールにはコントラストを数値で判定できる機能があります。

デベロッパーツールを開き、検証したい要素にマウスオンするだけでOKです。

ACCESSIBILITY項目内のContrastを見ます。

最適なリンク色_001

緑のチェックマークはOK!

緑色のチェックマークはコントラストについて問題なし。

最適なリンク色_002

ビックリマークは改善した方が良い

オレンジっぽいビックリマークはコントラストについて改善の余地ありです。

ポイント

・白背景に黒文字などコントラスト比が高い場合は数字が大きくなります。
・黄色背景に黄色文字などコントラスト比が低い場合は数値が小さくなります。
・1~21の数字でコントラストを測ることが出来ます。
・4.5以上の数値から緑色のチェックマークになります。
・7以上のコントラスト比ならばなお良いみたい。

デベロッパーツールの開き方が分からない方は別の記事をご参照ください。

お気に入りのリンク色が決まったら念のためコントラストチェックもしておくと良いですね・w・

まとめ

リンク色のデフォルト値と大手サイトの採用カラー、そしてコントラストのチェック方法のまとめでした。

テキストメインのWebページは文字色一つ違うだけで見た目が結構変わります。
ご自身のサイトに合ったリンク色に設定すると可読性が上がるだけでなく愛着も上がりますね・w・

より適切な色にすればページ内リンクのクリック率が上がるかもしれません。

WordPressのテーマでは始めからリンク色のCSS設定がされているテーマがほとんどですが、中にはコントラスト比のチェックでダメなものもあります。
意外とこういうところまでは配慮されていないのでしょうか...

リンクは青色ですが、その青色の選び方だけでも奥が深いです。

-SEO

© 2021 ソロ学