研Q82.リンク文字の色は何色がいいのか、もう一度研Ｑしてみた。

2013年05月14日｜ブログノウハウ｜コメント(0)｜トラックバック(2)｜Edit｜

リンクの文字色を何色にするとクリックされやすくなるのか？

photo by warrenski

マイクロソフトがBingのリンク文字色を「#0044CC」の青色にしたら年間売上高が8000万ドル増加した。と当ブログの過去記事に書いたことがあります。
⇒ 研Ｑ25.ブログのリンクって何？

それではビジネスブログのリンク文字色は何色にすればいいのでしょう？
もう少し詳しく研Ｑしてみました。

「これはリンクです。」とユーザーに伝わることが大切。

リンク文字色は青色がいいというのが、ほとんど常識になっています。

それは、多くのウェブサイトでリンク文字色を青色にしていて、
ユーザーが見たときに「この青い色はリンクだ。」と、ほとんどの方が思うからです。

もし、リンクをクリックしてほしいなら、リンクがリンクだとわかるようになっていることがとても大切です。

フェミニンでかわいいブログや、クールでカッコイイブログにしたい方は、青色にこだわる必要はありません。
デザインのほうがクリックされやすさよりも大切ならば好きなリンク文字色を使えばいいのです。

青色とひとくちにいっても、いろいろな青色があります。

その中でもカラーコードでいうと「#0044CC」という青色にBingのリンク文字色を変更したら年間売上高が8000万ドル増加した。というのが上に書いた話題です。

では、主要なウェブサイトでは、何色のリンクを使っているのでしょうか？

Bingの他にも、GoogleとYahoo!のリンク文字色を、ページのソースから調べてみました。

　　　　　↓リンクしていません。
■ Bingのリンク文字色#0044CC ■ ■Googleのリンク文字色#1122CC■ ■Yahoo!のリンク文字色#0000DE■

各社微妙に違ってはいますが、だいたいこんな感じの青色ですね。

他のいろいろなウェブサイトについても、ウェブ力学さんが調べてくれています。
⇒ 最適なテキストリンクの色は？ | ウェブ力学

だいたいこのへんの青色を多くの方がリンクであると認識しているであろうということですね。

ですから、われわれのブログでもこのへんの青色を使えばリンクがリンクであろうと認識される可能性が高いということです。

ちなみに、上のリンク色見本では、リンクしていないのに青色の文字を使っています。

「リンクだと思ったのに、クリックできないよ～」
結果的に読者さんを騙すことになってしまいますので、リンク以外で青色文字を常用するのはやめておいたほうがいいと思います。

さらに、
リンク文字にはアンダーラインを引く。
リンクにマウスを合わせると文字の色が変化する。
リンクにマウスを合わせると、リンク文字が微妙に動く。
などリンクがリンクであることをわかっていただくためにいろいろな工夫がしてあります。

もうひとつ当ブログではリンクの末尾に、

というアイコンをつけて、ブログ外部へのリンクであるという目印にしています。

毎回アイコン画像をアップロードしているわけではなく、画像タグをコピー・保存してあって、そのタグを貼りつけているだけです。

←この画像は、ずいぶん前にどこかの無料アイコン配布サイトからダウンロードして使っているものなので、どこからもらってきたかはもう忘れてしまいましたが、必要でしたらこの画像を自由にダウンロードして使っていただいてけっこうです。

追記：背景に色がついているブログでも使えるように、透明背景のアイコンに加工し直しました。　

←背景が透明なアイコン。

リンク文字色を設定する方法。

リンク文字色はブログのCSSで設定します。

このブログのCSSには、次のようなことが書いてあります。

a:link {color: #0000CC;}
a:visited {color: #80008b;}
a:hover {color: #CC0000; position: relative; top: 1px; left: 1px;}
a:active {color: #CC0000;}

黄色いマーカーで色をつけた部分がカラーコードです。

この中で、
a:linkというのは、未訪問のリンク。
a:visitedは、訪問済みのリンク。
a:hoverは、ポイント時の（マウスポインターを合わせた時の）リンク。
a:activeが、選択中のリンク、つまりクリックした時のリンクです。