読みやすい文字色、クリックされやすいリンク色・文字装飾は?

読みやすい文字色001

ブログから集客している方の中には、アメブロのデザインを、オリジナルなものにカスタマイズしている人が多くいると思います。

「何をしている人か、パッと見てわかるように」
「おしゃれなデザインにして、読者に興味を持ってもらうために」

というように、カスタマイズの目的は、人それぞれ。

でも、忘れてはいけないのは、
「読者にとって、より読みやすくなるカスタマイズ」
でなければいけない、ということです。

お洒落にカスタマイズすることは、あくまでも興味を持ってもらうための最初の「掴み」
一番大事なのは、ブログの記事本文を読んでもらい、申込みにつなげていくことです。

お洒落さを優先するあまり、かえって読みにくくなっているブログを、たまに見かけます。

あなたのブログは大丈夫でしょうか?

 

読みやすい本文の文字色について

記事本文の文字色は、背景色とのコントラスト比で、読みやすいかどうかが決まります。

下の表は「カラー・コントラスト・アナライザー」を使って、コントラスト比を調べた結果です。背景色が白に対して、文字色が黒から淡いグレーまでのコントラスト比を示しています。

読みやすい文字色001

等級AAは「最低限のコントラストに関する達成基準」で、通常文字サイズで4.5:1、大きな文字で3:1のコントラスト比を○としています。

等級AAAは「より十分なコントラストに関する達成基準」で、通常文字サイズで7:1、大きな文字で4.5:1のコントラスト比を○としています。

通常の文字サイズと大きな文字サイズ、それぞれ等級AA、等級AAAの両方を満たしている文字色は、#000000~#555555まででした。

では、実際の文字の読みやすさを、通常の本文の文字サイズで比較してみましょう。

背景色が白の場合、文字色が黒だとコントラストがはっきりしすぎて、読んでいるうちに目がチカチカしてきて疲れを感じます。
なんとなくキツイ印象を与える組み合わせです。

 

ここの文字色は濃いグレー(#333333)です。
アメブロの初期設定では、この文字色が使われています。
背景色が白の場合、文字色が濃いグレーだとコントラストがちょどよく、長文でも読みやすい組み合わせです。

 

ここの文字色は薄いグレー(#999999)です。
一見、柔らかい印象を与えますが、背景色が白の場合、文字色が淡いグレーだとコントラストが弱く、高齢者や視覚に障がいのある人にとっては、読みにくい組み合わせです。

 

あなたのブログの文字色は大丈夫でしょうか?
「カラー・コントラスト・アナライザー」を使って、調べてみてください。

 

リンク色について

  • 文字色は黒(濃いグレー)
  • リンク色は青
  • 訪問済みリンク色が紫
  • 強調が赤

という文字色の組み合わせが、多くのサイトで使われています。

私たちは青い文字色を見ると「リンクされている」と無意識に判断していることが多いと思います。

このことから、例えば強調するときなどの文字色に青文字を使うのは避けた方が良いでしょう。そのほうが、読者が混乱しません。

 

例えば下の例を見てください。

【例:1】

知りたいことだけを習える「ぴんぽいんとパソコンレッスン」は、お一人様起業をしている女性向けのマンツーマンレッスンです。
詳細&お申し込みはコチラをクリックしてご覧ください。その他、各種お問い合わせは、コチラのフォームからお気軽にどうぞ!
2日以内にお返事いたします。

強調:青文字、リンク色:ピンク

 

【例:2】

知りたいことだけを習える「ぴんぽいんとパソコンレッスン」は、お一人様起業をしている女性向けのマンツーマンレッスンです。
詳細&お申し込みはコチラをクリックしてご覧ください。その他、各種お問い合わせは、コチラのフォームからお気軽にどうぞ!
2日以内にお返事いたします。

強調:赤色、リンク色:青文字

 

パッと見て「リンクが貼られている」と思うのは青文字ではないでしょうか?

 

リンクの文字装飾について

リンクされている文字には、下線がついている場合が多いです。
なので、強調するために下線を引くのは、なるべく避けた方が良いでしょう。

【例:3】

A:どこにリンクが貼られているでしょうか?

B:どこにリンクが貼られているでしょうか?

C:どこにリンクが貼られているでしょうか?

D:どこにリンクが貼られているでしょうか?

 

上の例で、AとBには下線があり、CとDには下線がありません。

パッと見て、下線があるAとBのほうが、リンクが貼られていると思ったのではないでしょうか?

 

まとめ

リンクは、クリックされなければ意味がありません。
特に、提供メニュー(料金)一覧や、お申込み・お問い合わせへのリンクは大切です。

クリックされやすくするためには、

  • 文字色は青
  • 下線
  • 太字

ということが言われています。

リンクの文字色の変更方法は、こちらのお役立ち記事を参照してくださいね。
記事内のリンクさせた文字を目立たせる方法

せっかくブログをカスタマイズしたのに、かえって読みにくくなっていたり、お申込みしにくくなっているかもしれません。皆さんもチェックしてみてください。

ABOUTこの記事をかいた人

パソコン教室に8年勤務後に独立、2012年6月から自宅にて【ぴんぽいんとパソコン教室】をスタート。おうちサイズで起業をする女性を、パソコン&スマホという分野からサポートできるよう、日々アンテナを張って新しい情報を仕入れ勉強中。ちょっと変わった変なものが好きなB型。趣味はカエル雑貨収集とフィギュアスケート観戦(ちょっと滑れます)。