クリック率が上がるかも？見やすいWebページのリンク色についてです。
インターネットでテキストリンクと言えば青色です。
これは日本だけではなく、世界共通の認識と言えます。
リンク色の初期値は#0000EEですが、実はこの色は全然使われていません。
現在のインターネットにおいてデフォルト値は明るすぎると言われています。
青色が目につきやすく、読みやすいので青色になっているそうです。
リンク色におすすめの青色とは？
今回、大手検索エンジンや動画サイトなどが設定しているリンク色を調査しました。
この調査結果も踏まえておすすめのリンク色をご案内したいと思います。
リンク色のデフォルト値（初期値）
スタイルシートなどでリンク色の設定をしていない場合、初期値は#0000EEです。
#0000EEのテキストリンクのサンプル
こんな色です。
青色ですが、今現在のインターネット上では目にすることが少ないはずです。
それぞれのサイトで個別にリンク色の設定がされているためです。
一般Webサイトだけでなく、検索エンジンでの検索結果も同じでその検索エンジンによってスタイルが決められています。
もしスタイルが読み込めない場合はブラウザのデフォルト値が適用されるはず…
大手サイトのリンク色まとめ
リンクといっても青色に設定してある部分で調査しました。
サイトに合うように全く違う色に設定してあるサイトも多いので参考までにどうぞ。
| サイト名 | 色 | カラーコード | RGB値 |
| デフォルト値 | ■あいうえお | #0000EE | 0, 0, 238 |
| ■あいうえお | #1a0dab | 26, 13, 171 | |
| Microsoft Bing | ■〃 | 〃 | 〃 |
| Yahooトップ | ■あいうえお | #1d3994 | 29, 57, 148 |
| Yahoo検索結果 | ■あいうえお | #000d99 | 0, 13, 153 |
| gooトップ | ■あいうえお | #1d56a5 | 29, 86, 165 |
| goo検索結果 | ■あいうえお | #1a0dab | 26, 13, 171 |
| Baidu（百度） | ■あいうえお | #2440b3 | 36, 64, 179 |
| DuckDuckGo | ■あいうえお | #00278e | 0, 39, 142 |
| Yandex | ■あいうえお | #000080 | 0, 0, 128 |
| livedoorトップ | ■あいうえお | #2355a5 | 35, 85, 165 |
| Youtube | ■あいうえお | #065FD4 | 6, 95, 212 |
| ニコニコ（動画） | ■あいうえお | #0080ff | 0, 128, 255 |
| FC2動画 | ■あいうえお | #2A5CBD | 42, 92, 189 |
| Dailymotion | ■あいうえお | #00aaff | 0, 170, 255 |
| Amazon | ■あいうえお | #0066c0 | 0, 102, 192 |
| 価格.com | ■あいうえお | #0000dd | 0, 0, 221 |
| 楽天市場 | ■あいうえお | #0066CC | 0, 102, 204 |
| ■あいうえお | #1b94e0 | 27, 149, 224 | |
| ■あいうえお | #385898 | 56, 88, 152 | |
| Wikipedia | ■あいうえお | #0645ad | 6, 69, 173 |
ぱっと見でデフォルト値と比べると、結構違いますね。
青色と言っても千差万別と言えるのではないでしょうか？
- 検索エンジン：暗めの青色
- 動画サイト：明るめの青色
- SNS：薄め？の青色
という特徴がありそうな感じです。
リンク色の決め方
では個人ブログのようなサイトでのリンク色はどの青色がオススメか？
遜色ないところではGoogleが使っている「#1a0dab」やYahooの「#000d99」が無難ではあります。
背景色によってはもう少し明るくしても良いかもしれません。
青色や紺色以外に独自の色にしても良いですが、青色＝リンクという認識が効かないため、下線を付けるスタイルにしておくとリンクと認識してもらいやすくなります。
後日この下線をCSSで削除したらPageSpeed Insightsで怒られました（↓）。
テキストリンクの下線は極力消さないようにしましょう！
コントラストと可読性に注意する
SEOというカテゴリにしたので可読性についても執筆します。
ユーザビリティを高めることはSEOに影響します。
ページの読みやすさ＝文字の読みやすさ＝可読性も重要です。
リンク色についても例外ではなく、背景色と文字色のコントラストに気を付けなくてはなりません。
ただ見た目の判断は難しく、自分が読みやすいコントラストだと思っていても他の人には少し読みにくいかもしれません。
そこでGoogle Chromeブラウザを使ったコントラストの検証方法をご紹介します。
Chromeでコントラストを検証する
Chromeのデベロッパーツールにはコントラストを数値で判定できる機能があります。
デベロッパーツールを開き、検証したい要素にマウスオンするだけでOKです。
ACCESSIBILITY項目内のContrastを見ます。
緑のチェックマークはOK！
緑色のチェックマークはコントラストについて問題なし。
ビックリマークは改善した方が良い
オレンジっぽいビックリマークはコントラストについて改善の余地ありです。
ポイント
- 白背景に黒文字などコントラスト比が高い場合は数字が大きくなります。
- 黄色背景に黄色文字などコントラスト比が低い場合は数値が小さくなります。
- 1～21の数字でコントラスト比を測ることが出来ます。
- 4.5以上の数値からチェックマークが緑色になります。（WCAG2.1 AA準拠）
- 7以上のコントラスト比ならばなお良いみたい。（WCAG2.1 AAA準拠）
外部リンク
【参考：W3C公式サイト】
Web Content Accessibility Guidelines (WCAG) 2.1
デベロッパーツールの開き方が分からない方は別の記事（↓）をご参照ください。
-
![ブラウザでCSSやHTMLを調べる方法_eyecatch]()
-
サイトに使われているCSSやHTMLをブラウザの開発者ツールで確認する方法。
続きを見る
お気に入りのリンク色が決まったら念のためコントラストチェックもしておくと良いですね・ｗ・
まとめ
リンク色のデフォルト値と大手サイトの採用カラー、そしてコントラストのチェック方法のまとめでした。
テキストメインのWebページは文字色一つ違うだけで見た目が結構変わります。
ご自身のサイトに合ったリンク色に設定すると可読性が上がるだけでなく愛着も上がりますね・ｗ・
より適切な色にすればページ内リンクのクリック率が上がるかもしれません。
WordPressのテーマでは始めからリンク色のCSS設定がされているテーマがほとんどですが、中にはコントラスト比のチェックでダメなものもあります。
意外とこういうところまでは配慮されていないのでしょうか…
リンクは青色ですが、その青色の選び方だけでも奥が深いです。
関連記事
この記事はリンク色についてでしたが、フォントカラーについても調査しました。
フォントカラーを黒色（#000000）にしている方は是非チェックして下さい！
-
![フォントカラーのおすすめ色_eyecatch]()
-
フォントカラーのおすすめ色はグレー！白背景に真っ黒（#000）は最適ではない！？
続きを見る
Copyright © 2024 ソロ学 All Rights Reserved.