はじめてWEBエキスパート(専門家)コラム 色彩とコミュニケーション(全6回)

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

今回は見出しの色を整えて、内容を早く伝える方法についてまとめてみました。

多くの場合、Webサイトの目的はサイトオーナーのビジネスの目的を成功させるために存在します。そのためにはビジネスの特徴や具体的な内容、価格などをわかりやすく伝えなければなりません。今回は見出しの色を整えて、内容を早く伝える方法についてまとめてみました。

見出しを見てから本文を見る流れを作る

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

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

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

見出しと本文で差を付ける方法

文字の大きさを変える

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

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

文字の色を変える

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

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

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

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

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

背景の色を変える

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

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

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

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

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

文章の読みやすさについては、みんビズ制作講座:デザインカスタマイズ 第9回 にも記事がありますので、合わせて読んでおきましょう。

このコーナーのコンテンツは、KDDI提供の情報サイト「はじめてWEB」掲載の「エキスパート(専門家)コラム」の情報を、許諾を得てWeb担の読者向けにお届けしているものです。

「はじめてWEB」掲載のオリジナル版はこちら:
色彩とコミュニケーション(全6回)「第1回:見出しの色でスムーズに内容を伝える」(2013/04/10)

よろしければこちらもご覧ください
この記事が役に立ったらシェア!
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやデジタルマーケの最新情報をゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く

Web業界の転職情報

もっと見る
Sponsored by

今日の用語

CRO
Conversion Rate Optimizationの略。来訪した訪問者のコ ...→用語集へ

連載/特集コーナーから探す

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]