ホームページのテキストリンクの色や下線について

ホームページを作る際に悩むのが文字の色やリンクの色です。特にリンクについては、ユーザーにクリックしてもらえなければいけませんので、ユーザーがその文字を見た時にリンクだと気づくようにしておかなければなりません。

余談ですが、最近のGoogleは、被リンクの評価に「実際にそのリンクがクリックされるリンクなのか」という部分を見ていると言われています。リンクがクリックされたかどうかをGoogleが知る術はないのですが、クリックされないリンクよりもクリックされるリンクの方が評価される可能性があります。(Google ChromeやGoogleツールバーでリンクのクリックを知ることはできるかもしれませんが、検索順位を決める要素としては使っていないようです。)

クリックされるリンクが評価される仕組みをリーズナブルサーファー・モデルと言いますが、リンクジュースを渡すことが目的で行う自演リンクにおいても関係してくる概念です。

リンクの色は何色がいいの?

リンクは青系の色にしているサイトが多く、ユーザーも青文字はリンクという認識をしています。ただ、サイトのデザインによっては青だと違和感がある場合もありますので、その時は色を変えて下線を付けます。ユーザーは下線=リンクという認識も持っています。

青文字+下線であればそれは間違いなくリンクということになります。時々、リンクでもないのに下線+青系文字を使っているサイトがありますが、ユーザビリティを考えるのであれば、青文字や下線文字は避けたほうが良いでしょう。ただ、黒文字に下線であれば強調という風に捉えられます。

当サイトのリンク色は#00fです。

青系といっても真っ青を使う必要はありませんので、サイトのデザインに合わせて微調整しましょう。

検索エンジンのデフォルト色

  • Yahooの検索結果 ・・・ 未:#0000DE 済:#941D55
  • Googleの検索結果 ・・・ 未:#2200C1 済:#551A8B
  • Bingの検索結果 ・・・ 未:#0044CC 済:#663399
  • Internet Explorer・・・未:#0000FF 済:#800080
  • Firefox・・・未:#0000EE 済:#551A8B

検索エンジンの検索結果のリンクの色は時々変わるのですが、少し前に調べた時はこのような色になっていました。検索結果は白背景ですが、それぞれ微妙に色が違っています。

リンクの色によって売上が大きく変わるというデータもあります。それだけリンクがクリックされるかどうかは重要な要素ということですね。

訪問済みリンクの色

リンクの色と共に重要になってくるのが訪問済みリンクの色です。サイトによっては未訪問も訪問済みも同じ色になっていると思いますが、これだとユーザーがどのページを見たのか分かりません。

ページ数が多いサイトの場合、何度のリピートしてくれる可能性がありますが、その際に訪問したことがあるページなのかどうかが事前にわかるというのは結構重要なことです。訪問済みリンクの色は紫にするのが一般的です。

  • a:link ・・・ 未訪問のリンク
  • a:visited ・・・ 訪問済のリンク
  • a:hover ・・・ マウスオーバー時のリンク
  • a:active ・・・ 選択中のリンク

CSSではリンクに対してこういった指定をすることができます。ちなみに当サイトの訪問済みリンクは、#551a99です。

今回の記事のポイント

  1. リンクは青系の色にする
  2. リンクには下線をつける
  3. 普通の文章で青文字は使わない
  4. 未訪問と訪問済みリンクの色を分ける
  5. 訪問済みリンクは紫系の色にする。

どれも多くのサイトで実施されていることだと思いますが、ホームページを初めて作るような人は、ルールを無視して自分の好きな色を使ってしまう傾向にあるので、気をつけましょう。

ホームページの背景色と文字色を考える。白?黒?グレー?

管理人イチオシのレンタルサーバー

当サイトでも使っているエックスサーバーは、ディスク容量が200Gと大きく、MySQLが50個まで使えますので、1つの契約でいくつものサイトを運営することができます。

転送量が月2,000G、メモリ192Gと他の格安サーバーでは見られないスペックとなっており、アクセス数の多いサイトや複数のWordPressサイトを運営するのにも向いています。

自動バックアップと電話サポートが付いているので、初心者の方でも安心!

エックスサーバーでは無料SSLが利用できます。Googleはhttpsのサイトを評価する傾向があり、今後はSSL化が必須になってくるでしょう。無料SSLは簡単に導入できるのでとても助かっています。

エックスサーバーの公式サイトへ

サブコンテンツ

このページの先頭へ