スマートフォンサイトを表示する

  1. TOP
  2. 色彩とコミュニケーション : 第1回 見出しの色でスムーズに内容を伝える

エキスパートコラム

色彩とコミュニケーション(全6回)

第1回:見出しの色でスムーズに内容を伝える

執筆:坂本 邦夫(フォルトゥナ)

2013年4月10日更新

  • このエントリーをはてなブックマークに追加

閲覧数19,299views

このコラムをPDF形式でダウンロードする

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

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

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

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

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

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

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

文字の大きさを変える

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

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

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

文字の色を変える

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

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

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

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

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

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

背景の色を変える

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

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

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

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

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

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

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

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

  • このエントリーをはてなブックマークに追加
このコラムをPDF形式でダウンロードする

坂本 邦夫(さかもと・くにお)

坂本 邦夫(さかもと・くにお)

カラー&Webデザイン フォルトゥナ 代表
http://www.color-fortuna.com/

1973年、大阪府東大阪市生まれ。関西大学文学部史学地理学科卒業。
2004年、色彩に関するノウハウをまとめたウェブサイト「基礎からわかるホームページの配色」を公開。以後、Web制作コンサルティングを主な業務としながら、書籍や雑誌などへの寄稿・セミナーなどで、ウェブにおける色彩環境の向上を使命として活動。日本色彩学会正会員。

主な著書に『ウェブ配色 決める! チカラ - 問題を解決する0からスタート ホームページ配色入門』(ワークスコーポレーション)、『ウェブ配色 コーディネートカタログ』(技術評論社)など。

ウェブデザイン&配色の見本帳

  • 「はじめてWEB」でホームページをはじめよう!
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

ホームページを作るのがはじめてのかたはまずこちらをご覧ください

コラム週間アクセスランキング[期間:2017/8/6~2017/8/19]

おすすめコンテンツ

はじめてWEBおすすめ本

創業・経営のお役立ち情報

  • ソウギョウノート

    飲食・小売・サービス業の開業スケジュールから、融資申込に必要な書類までをカンタン作成

  • 経理通信

    経営者と経理ご担当者必見!中小企業・小規模事業者のための経理サポートサイト

  • まとめてオフィス

    文具、通信、オフィスのことなら何でもお任せ

  • フリーコールS

    問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール

  • auオフィスナンバー

    事務所開設するなら固定電話番号で信頼アップ
    今ならキャンペーン実施中!