研Q82.リンク文字の色は何色がいいのか、もう一度研Qしてみた。 - ネットビジネス研Q室(新館)

このエントリーをはてなブックマークに追加

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
このエントリーをはてなブックマークに追加

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

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

Klipheuwel wind-farm - 無料写真検索fotoq
 photo by warrenski

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

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


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

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

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

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

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


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

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


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

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

     リンクしていません。
■ 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が、選択中のリンク、つまりクリックした時のリンクです。




 

初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入って頂けましたらRSSリーダーの登録よろしくお願いします。
Subscribe with livedoor Reader My Yahoo!に追加 

ツイッター でも、更新案内を流しています。                          

RSSリーダーとは?⇒ RSSってなんなの

  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。
▲ネットビジネス研Q室のトップページに戻る▲  ●ネットビジネス研Q室の記事一覧●
記事末尾200posted by +M Inamura (水村亜里)
関連記事
このエントリーをはてなブックマークに追加
コメント
非公開コメント

ブログでつながり隊のバナー(横長)

トラックバック

http://aminamura.blog.fc2.com/tb.php/82-89a097e5

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

リンクの文字色を何色にするとクリックされやすくなるのか? photo by warrenskiマイクロソフトがBingのリンク文字色を「#0044CC」の青色にしたら年間売上高が8000万ドル増加した。と当ブロ...

2013-05-28 15:41 | from あんなこと、そんなこと、どうでもいいこと・・・

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

リンクの文字色を何色にするとクリックされやすくなるのか? photo by warrenskiマイクロソフトがBingのリンク文字色を「#0044CC」の青色にしたら年間売上高が8000万ドル増加した。と当ブロ...

2013-05-18 13:06 | from あんなこと、そんなこと、どうでもいいこと・・・

QLOOKアクセス解析
Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。