クリックされやすいリンクの色はどんな色でしょうか？
大抵のリンクは青色をしていますが、その青色も調べてみると実にさまざまな種類があることが分かりました。
主だった検索エンジンやブログサービスなどの青色リンクの色を比較して独自テーマ制作の参考にしていきます！
リンクの色
今回はクリックされやすいリンク色についてトコトン考えてみましょう。
まぁまずはリンクは青色ってことでいいですよね。
リンクの色を赤にしても誤認されるだけですからね。 特にココゾというターゲットリンクは誤認されないように注意することが必要です。奇をてらう必要はありません。
じゃあ次に、どんな青色だったらいいのか？という話です。
ずいぶん細かいですね。「そんなところまで気をつかう必要があるんですかっ？」て言われそう。 確かにね…物凄いアクセス数があるのでなければリンクの色がどうだこうだというのは誤差の範囲ですね。 結局のところ読ませる記事があるか無いか。これがいちばん大切です。
さて、確かにそうなんですけどね… でもね、ターゲットリンクの色を一度決めてしまったら後は何にも作業は要りません。だからベストと思う色指定をCSSでしておくことにその後の 手間や保守作業は要りません。
CSSカスタマイズで手間いらず
だったらこの記事でも参照して一度CSSで設定してしまえばいいじゃない？ そんなに手間はかからないんですからね。
これがものすごく手間がかかることだったら…そんなこと考えている間に読ませる記事を一つ考えた方がいいんじゃない？って言えますけどね。
CSS設定を少しカスタマイズするだけですからね。簡単です。
何か参考になるリンクはないか？
さて、それでは何か良いサンプルはないでしょうか？
あります！
それは大手の検索エンジンやニュースサイトなどのリンクを参考にすることです。
こうしたサイトはアクセス数も膨大でA/Bテストなどを使って自サイトに最適なデザインを追求しています。
われわれ弱小サイトは大したアクセスも無いのでA/Bテストなど不可能かもしれません。
なので大手サービスの結果を参考にさせてもらうというのが賢いやり方だと思います。
2019年リンク色の調査結果
それでは実際にリンクの色などを調べて比較をしてみましょう。
大手の検索エンジンでの検索結果の表示やブログサービス
大手の検索エンジンでの検索結果の表示やブログサービスを調べてテーブルにまとめてみました！
| 項番 | サービス名 | リンク色 | マウスオーバ効果 |
|---|---|---|---|
| 1 | Google検索 | リンク色は#1A0DAB | 下線 |
| 2 | Yhoo!JAPAN検索 | リンク色は#000D99 | 文字色変化 |
| 3 | Bing!検索 | リンク色は#001BA0 | 下線 |
| 4 | Wikipedia | リンク色は#0645AD | 下線 |
| 5 | Github | リンク色は#0366D6 | 下線 |
| 6 | はてなブログテーマInnocent | リンク色は#3872B8 | 無し |
| 7 | はてな開発者ブログ | リンク色は#0058B3 | 文字色変化 |
この結果を見るといくつか気づくことがあります。
- リンクはすべて青色ベース
- 青色にも濃淡の違いが結構ある
リンクはすべて青色ベースですが、その色味には結構違いがあります。
検索エンジンでは検索結果がある程度目立つように濃い目の色が合うと思います。一方でWikipediaやGithubなどではリンクが青色であることは読者は周知しているため、読みにくくならないように薄めの青色リンクになっているように思います。
これはブログのCSSを考えるときに参考になりますね。
別ページにリンクを張る場合には濃い目の目立つリンク色、文章中のリンクは読みにくくならないように薄めのリンク色と使い分けができればベストです。
マウスオーバー効果
次に面白いのは下線の使い方です。
Yhoo!JAPAN検索とはてなブログテーマInnocentでは下線は最初から表示されています。 青色で更に下線表示となれば、これはもうリンクであることに気付かない人はいないでしょう。 リンクであると認識させるには強力な方法です。
しかし上記2サイト以外では通常リンクに下線装飾は施されていません。 はるなぴはこれは読みやすさ重視のためではないかと推測しています。
大抵のサイトではマウスオーバー効果で下線が表示されるようになっています。
Yhoo!JAPAN検索は少し変わっていて文字の色の変化でマウスオーバーを示します。 これは強烈なのでマウスオーバーしてもリンクと気付かずに通り過ぎることはまず無いでしょう。
はてな開発者ブログはマウスオーバーにより微妙に青色が濃くなるのですが、ほとんど気づかないレベルです。 下線表示はされないのでマウスオーバーに気づくことが無い人も多いかもしれません。
大手ニュースサイトやブログサービス
次に調査したのは大手のニュースサイトやブログサービスのトップページです。
これはブログで言えば顔にあたる部分になります。 ここをどのようなリンクにしているのか？ 興味がありますね！
| 項番 | サービス名 | 表示タイプ | リンク色 | マウスオーバ効果 |
|---|---|---|---|---|
| 1 | Googleニュース | カード | リンク色は#202124 | 下線 |
| 2 | Yahoo!ニュース | テキスト | リンク色は#0033CC | 下線＋文字色変化 |
| 3 | Bing!ニュース | カード | リンク色は#111111 | 下線 |
| 4 | はてなブログ | カード | リンク色は#242527 | 下線 |
| 5 | はてなブックマーク | カード | リンク色は#303030 | 文字色変化 |
主流はカード型での表示です。 唯一の例外はYahoo!ニュースで旧来からのテキスト表示となっています。
最近はカードが流行りですが、単なる流行りではなくSEO効果が出る表示であるデータがきちんと存在する筈だと思っています。 でなければ大手のサービスがこぞってカード型の表示に走る理由がありません。
マウスオーバー効果の主流はやはり下線表示追加です。 今回はhoverなしで下線表示されるようになっているリンクはありませんでした。 読みやすさ重視が優先されたものだと思います。
Yahoo!ニュースは先ほど見たYhoo!JAPAN検索と同じく文字色まで変化します。 はてなブックマークは少し変わっていて、マウスオーバーにより文字色が黒から青に変化しますが下線は付与されません。
ターゲットリンクの色を考える
ターゲットリンクというのは、今はるなぴが考えた名称で、要はこのリンクは是非踏んでもらいたいと思うリンクのことです。
先ほどの表の中では読み物系のリンクの青色は薄い青色が多かったですよね。 これは読みやすさ重視からきているのだと思います。
でもこれは是非リンク先にジャンプして行先の内容を見てもらいたいというリンクには弱いです。 ここは使い分けが大事！
本文の中は読みやすいように薄い青色リンクがいいでしょうね。 でもここはクリックしてほしいというランディングページの正にターゲットリンクだったら…
もっと明度を上げて目立つようにした方がいいですね。 文字を大きめにするという手もあります。
<div style="font-size: 1.6rem"><a style="color:#4A24FF" href="https://www.halu7.com/">はるなぴログ</a></div>リンク色は#4A24FFという明度の高い青色にしてあります。
あ、ただしアフィリエイト広告などでは勝手に広告表示を変えることが禁止されていることが多いので注意してくださいね！
まとめ
これから作るオリジナルテーマのリンク色について考えをまとめます。
ブログの顔となるトップページはカード型で作りたいと思います。
リンクの色は黒ベース。Googleニュースを参考に#202124で行こうかな。 マウスオーバー効果は下線付与です。
次にブログの中です。
単独で示されるリンクはGoogle検索を見習い#1A0DAB。少し濃い目の落ち着いた青色です。
文章中に出てくるリンクはGithubを参考に#0366D6。こちらは逆にかなり薄い青色にします。読みやすさ重視の選択です。マウスオーバー効果は下線付与のみとします。
そしてここぞというところのターゲットリンクの色は#4A24FF。 明るく強い青できっちりリンクを踏んでもらおうという作戦です。
他にもリンクの場所によって細かく調整をするかもしれませんが大まかにはこのような方向で作成していこうと思っています。お楽しみに！
