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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

リンク色について

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

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

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

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

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

【例：１】

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

【例：２】

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

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

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

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

【例：３】

上の例で、ＡとＢには下線があり、ＣとＤには下線がありません。

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

まとめ

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

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

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

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

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