見出しの色でスムーズに内容を伝える――色彩とコミュニケーション#1

新聞や雑誌などを思い出してもらうとわかりやすいのですが、まず記事の見出しを見て内容をざっと把握し、その上で詳細を読むというのが、情報を得るための一般的な流れです。小説のように先が読めないおもしろさがあれば問題ないでしょうが、ビジネス目的で短時間に情報を伝えたいのであれば、見出しをきちんと見せる色が非常に重要になります。

見出しをきちんと見せるためには、その後に続く本文の色との差を付けることが最も重要です。同じ大きさで同じ色の文字であると、どれが見出しであるのかを認識しにくいため、本来伝えるべき本文に視線を進めにくくなるのです。

見出しのわかりにくい文章は読み進めにくい

文字の大きさを変える

文字の大きさを変えることは、色が使われる面積を変えるということです。色は大きいほどその効果は高まりますので、無理に色を変えずとも、大きさをしっかりと変えるだけでも、本文と差を付けることはできます。

文字の大きさにしっかり差を付けるだけでも目立たせることはできる

文字の色を変える

文字の色を変えるのも、基本的な見出しで差を付ける簡単な方法です。目立たせたい時によく使われるオレンジや赤は非常に目立つ色なのですが、背景色との差が小さく、実は内容が把握しにくいことがあります。特に本文の文字の色がしっかりした色である場合、本文が大きな黒の固まりのように感じられ、分量の少ない色の付いた見出しが負けてしまうのです。

読みにくい見出しは情報を伝えるという効果を低下させる

文字が薄いかどうかは個人によっても差があるため、富士通カラーセレクター などのツールを使い、客観的に読みやすいと考えられる色を選ぶようにします。

富士通カラーセレクターによるチェック結果と見出しの改善例

読みにくい見出しは、その後に続く本文の価値をも下げてしまいます。検索エンジンなどから訪問したユーザーはある程度あなたのWebサイトに興味を持っていると考えられますので、無理に目立たせるのではなく、しっかり読めることを優先させましょう。

背景の色を変える

また背景に色を使うことでも見出しを目立たせることができます。この場合、文字の色を変えるよりも色の面積は格段に大きくなりますので、あまり強い色の背景にすると、今度はにぎやかすぎて周囲との調和が取りにくくなります。

強すぎてギラギラして見える見出しの例

大きく色を使えば、薄い色でも十分に本文と差を付けられるため、控えめな背景色としっかり見える文字色を最も重要な見出しに使うことで、スムーズに見出しから本文への視線移動をさせることができます。

控えめな色でも大きく使うことで十分目立たせることができる

1ページ内に大見出し、中見出しのように複数の種類の見出しが含まれる場合には、大見出しは背景色を使い、中見出しは色を変えるように差を出すと、文章の色はまとまります。

文章の読みやすさについては、みんビズ制作講座：デザインカスタマイズ 第9回^{※「はじめてWEB」は
サービスを終了しました} にも記事がありますので、合わせて読んでおきましょう。