おすすめのテキストリンク色について考察。Googleなど大手サイトが使用するカラーコード一覧
Webサイトやブログを運営していると、様々な疑問が生まれると思います。
そんな数多くの疑問の中から、他ページに誘導する際に使用するテキストリンクの色に焦点を当ててみます。
テキストリンクの色は重要?
一般的なWebサイトのテキストリンクは #0000ff がデフォルト色として使用されます。
ほとんどの大手サイトでも青系統の色でリンクするのが主流となっていますが、実はそれぞれ細かく違ったカラーコードを使用しているんです。
実は、テキストリンクの色がサイトの売り上げに影響を及ぼすことが証明された事例があります。
Microsoftが運営する「Bing」では、リンク色を変更したことによる広告クリック数の増加やユーザー関与の増大により、年間売上高が8000万ドル増加したそうです。
そこで当記事では、リンクがクリックされやすいカラーコードを確かめるべく、Googleなどの大手サイトが使用するリンクのカラーコードをまとめてみました。
大手サイトのテキストリンクカラーコード一覧
GoogleやYahoo!などの検索エンジンを始めとした、有名な10サイトで使用されているテキストリンクのカラーコードをまとめてみました。
#1a0dab | ||
Yahoo! | #1d3994 | |
Wikipedia | #0645ad | |
クックパッド | #330000 | |
Livedoor | #2355a5 | |
はてな | #333333 | |
Youtube | #0033cc | |
niconico | #0033cc | |
Amazon | #0066c0 | |
楽天 | #1d54a7 |
こうやって並べてみると、意外にも様々な色が使用されていることが伝わるかと思います。
青系統の色を使っているサイトでも、2018年4月時点ではデフォルト色である #0000ff が使われておらず、主張が強すぎない青色が選ばれている印象です。
またクックパッドでは、全く違った色である #330000 が使用されています。料理レシピに関するサイトなので、彩りを想起させる意図があると思われます。
はてなが使用する #333333 の意図ですが、テキストリンクの色でユーザーの目を引かせるのではなく、周りの装飾に適切な色を使用することで黒いテキストを際立たせているように感じました。
おすすめのテキストリンクの色
大手10サイトのテキストリンクで使用されているカラーコードをまとめてみましたが、果たしておすすめのテキストリンクの色はどれなのでしょうか。
青系統が主流
やはり多くのユーザーに「リンク=青色」という共通認識があるので、テキストリンクには青系統の色を選ぶのが無難だと言えるでしょう。
また、上記の大手10サイトを調査した結果、デフォルト色 #0000ff は使われておらず、青系統の中でも主張を抑えた色が流行っているようです。
- Google で使用されている #1a0dab
- Youtube, niconico で使用されている #0033cc
- Amazon で使用されている #0066c0
これら3つのカラーコードは、どんなサイトデザインにも合わせやすい色でしょう。
特殊な色は難易度高め
青系統以外の色を使う場合、少し注意しましょう。上記でも解説した通りに多くのユーザーに「リンク=青色」という認識があるため、ユーザーがテキストリンクかどうか判断できるような工夫が必要となるからです。
例として、はてなでは #333333 が使用されていますが、周りの装飾に適切な色を使用することで、黒いテキストリンクが目立つサイトデザインとなっています。
また、運営しているサイトのジャンルや、ユーザー(読者)に抱かせたいサイトに対する印象が明確にある場合、青系統の色を避けることも選択肢の1つとして有効だと言えます。
クックパッドでは料理の彩りを想起させるようなサイトデザインが施されており、リンク色は #330000 が採用されています。
ただし、ユーザーにテキストリンクを一目で認識してもらうことが最優先ですので、あまりサイトデザインやイメージを意識しすぎるのも良くないかもしれません。
まとめ
今回は、大手10サイトからおすすめのテキストリンクの色について考察してみました。まとめると以下のようなことが分かりました。
- テキストリンクには青系統の色が人気
- デフォルト色 #0000ff はあまり使用されていない
- 使いやすいカラーコードは #1a0dab #0033cc #0066c0
- サイトジャンルやユーザーへの印象を考え、青系統を避けるのも1つの手
最優先すべきは、ユーザーが一目でテキストリンクと認識できる色を使用することです。
前述の通り、テキストリンクは、適切な色に変更するだけでクリック率やサイトの売り上げが増加するなどのポテンシャルを秘めています。ぜひ一度、見直してみてはいかがでしょうか。