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

  1. TOP
  2. 0からスタート ホームページ配色入門 : 第4回 色の面積で文章を強調する

エキスパートコラム

0からスタート ホームページ配色入門(全6回)

第4回:色の面積で文章を強調する

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

2014年8月18日更新

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

閲覧数6,048views

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

「0からスタート ホームページ配色入門」では、センスではなく、簡単な配色の知識やレイアウトのセオリー、情報伝達の基本を学ぶことで、あなたのホームページの目的を達成させるための配色を解説します。

4回目の今回は配色に慣れていない人は困ったときに「色を変える」ということで解決を試みますが、使っている色の大きさや分量を変えることだけでも問題は解決することが多いです。新聞を例に情報を伝えることの重要性と、問題の解決を学びます。

新聞の見出しから色の使い方を学ぶ

モノクロの新聞は最良の教材

色の使い方を学ぶなら、新聞は素晴らしい教材です。と言うのも、新聞で最も重要なものは記事の内容であって、装飾や広告ではなく、記事が読みやすいように最適化されているのです。

また全ての記事に写真が付いてくるわけではなく、モノクロ面では白と黒の2色だけを使って色を表現しなければならないため、限られた色で様々な表現ができることがわかります。

見出しのない新聞記事はなく、見出しで記事の概要を把握して、次に記事の詳細を知るために本文を読み進めていきます。このような見出し→本文という流れはホームページの文章を読んでもらうためにも重要なものです。

日本の新聞は縦書きですが、ホームページは横書き中心です。とはいえ基本的な考え方は変わりません。もし横書きの新聞を参考にしたいという場合にはワシントンポスト紙のサイトでアカウントを作ると紙面が見れるようになりますので利用してみましょう。

文字の大きさだけで目立たせる

新聞の見出しには1面で使われる大きな見出しもあれば、小さな記事の見出しもあります。いずれの場合であっても、同じ色であっても、見出しが本文より大きければその部分が目立つようになります。

また見出しの周囲にはきちんと余白が取られていることがわかると思います。これによって、大きな文字がより強調されるようになります。重要な部分には余白を作るということも覚えておきましょう。

日本語はアルファベットに比べると画数が多く、同じ余白でもより詰まって見えます。漢字が多い場合には特に広めに余白を取るようにすると、見出しはすっきりと見やすくなります。

余白の取り方については「あなたのホームページを「読んで」もらおう! 第5回:色や余白を使って「グループ化」してみよう」も参考になりますので、ぜひ読んでおきましょう。

見出しの背景に色を付ける

文字の大きさで差を付ける以外にも、文字に色を付けるか背景に色を付けるかで見出しの強さは変わります。同じ色を使う場合、より強く見せたいのであれば、背景に色を付けた方が色の面積は大きくなるため、見出しの力は強くなります。

ただし、背景に色を使っても文字そのものが読みにくければ、記事の概要を理解しにくくなるため、本文に進んでもらいにくくなります。背景色を利用した見出しの強調があまりに強すぎることのないように、控えめな色に調整することも必要でしょう。

配色が苦手な人は色の大きさを利用する

文字が大きいということは、文字に使われている色の面積が多いということです。そして色の面積が増えれば、それだけで目立たせることができるのです。

配色が苦手だという人は何か色を新たに加えるのではなく、大きさを変えることで目立たせるようにすれば、色が増えすぎて画面のどこを見てよいかわからないということを防ぐことができます。重要度が高い見出しほど大きくするという基本を押さえておけば、画面上の情報を整理することができるのです。

状況で色の量を使い分ける

本文の強調には背景色を利用

見出しを見せたいのであれば、文字を大きくすれば簡単に強調できますが、ただ本文の一部分を強調したい場合には、文字の大きさを変えるだけでは、文章がガタガタに見えてしまい見栄えも悪くなります。それを避けるための一番簡単な装飾としては太字を使うのがよいでしょう。太字の利用も通常の文字より色の面積が増えるということです。

このような太字での強調に加えて、文字の色を変えたり背景に色を付けたりすることで、より強調した部分であるとわかりやすくなります。

段落やブロック自体を強調する時の背景色

段落や1行のキャッチコピーを全て強調したい場合にも、文字を大きくしたり、背景に色を付けたりすることができます。

強調したい部分が複数行にまたがる場合には、1行ずつ装飾するのではなく、段落全体に背景色を付けたり、罫線で囲む方がすっきりと見やすくなります。

文章を読んでもらいたいという場合、訪問者は既にサイトに何らかの興味を持って訪問してくれた後ですので、内容を最大限伝えることを考える必要があります。そのためには、まずはしっかりと見出しを見せるように大きくすること、本文の中で重要な部分の強調の仕方を調整することで、より文章を読ませやすくなります。

別の色を使う前に使い方を変えることを意識することで、色によるトラブルを減らすことができます。

次回は背景色を使った強調の応用編と文字を読みやすくし、情報を損なわないための工夫についてお伝えいたします。

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

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

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

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

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

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

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

  • 1年間無料

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

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

コラム週間アクセスランキング[期間:2017/5/14~2017/5/20]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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