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

  1. TOP
  2. みんビズ制作講座 色について考えよう : 第4回 全体のバランスを考えた色の調整

エキスパートコラム

みんビズ制作講座:色について考えよう(全4回)

第4回:全体のバランスを考えた色の調整

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

2012年9月19日更新

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

閲覧数4,567views

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

ある程度配色の方向性が決まれば、実際に色を配置して、配色の調整を行います。第4回目となる今回は、すっきりと情報を伝えやすいページに仕上げるための、画面全体の色の調整と各パーツの色について考えてみましょう。

各部の色を調整する

背景色を考えた色の調整

ページ全体に背景色を使う場合、背景色がどれくらい見えるかはモニタのサイズやページを開いているウインドウのサイズによりますが、画面の大部分を占める背景色とヘッダ部分の色が決まっていれば、配色イメージはほぼ完成していると言えます。

背景色とヘッダに何種類かの色を使っている場合には、思いつきで新たに色を増やしたりせずに、背景色やヘッダで既に使われている色を見出しなどにも利用すると全体の統一感が生まれます。

背景色とヘッダの色を元にした統一感のある配色

ただしヘッダに使っている色と背景色が近すぎると、メリハリがなくなってしまい、焦点がぼやけてしまいますので、ヘッダの色と明度や彩度で差を出すようにするとよいでしょう。

ヘッダ画像と背景色のメリハリを付ける

見出しの色でメリハリを付ける

見出しの色をしっかりというと、文字の色を赤にしたりしがちですが、必ずしも派手な色を使う必要はありません。その後に続く文章との差が感じられれば、ニュースサイトのように、黒の文字を大きくするだけでも構わないのです。

あるいはそれほど派手な色でなくとも、大きく見出しの背景に色を付ければ、それだけで十分他の部分との差を付けることができます。

見出しの色によるメリハリ

ページによって内容が変わる部分については、無理矢理に色を使わないようにし、重要な情報だけに色を使う方が、本来伝えたい内容はスムーズに伝わるでしょう。

多くの色を並べてにぎやかにしたい場合

画像やバナーを並べるような場合には、その部分には多くの色が使われているはず。必然的に多くの色が密集するために色が混乱しがちです。多くの色をまとめる場合のコツは主に以下の3つです。

  • それぞれの画像に何らかの共通した色を使うこと
  • 余白を広めに取ること
  • 前後を色をあまり使っていない部分で挟むこと

余白を広めに取るだけでも、色の混乱は緩和され、一つ一つの画像が目に入りやすくなります。写真が大きいことも重要ですが、情報を分離してみせるためには、余白は欠かせない物です。

余白による個々の写真の見え方

またどの画像にも少量でいいので、同じ色やトーンを揃えた色を使うようにするだけでも、かなり見え方は変わってきます。

画像に共通した色を使う

例では写真に緑の帯を付けていますが、バナーの中では文字の色を同じにしたりと様々なところで使えるでしょう。

全体の配色を調整するために

配色そのもののよしあしを見るには、モニタから2m程度離れて画面を見ることで、全体のイメージをつかみやすくなります。

その距離でもきちんとサイト名やロゴ・キャッチコピーなどの重要なテキストが見えやすいことを第一に考え、それを邪魔するような強い色があれば、少しトーンを控えめにしたり分量を減らしたりして、調整しましょう。

強すぎる色を控えめに変更する

無理に色を増やしたりせず、悩んだときは色数や分量を減らしていくのが、配色の最大のコツと言えます。

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

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

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

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

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

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

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

  • はじめてWEB 大感謝祭!~新規加入または2年目更新をし、アンケートに答えてギフト券をもらおう!~
  • Jimdoリメイク | プロがあなたのホームページを50,000円(税抜)でリニューアル!
  • 問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール
  • 文具、通信、オフィスのことなら何でもお任せ!まとめてオフィス

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

コラム週間アクセスランキング[期間:2017/4/16~2017/4/22]

おすすめコンテンツ

はじめてWEBおすすめ本

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

  • ソウギョウノート

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

  • 経理通信

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

  • まとめてオフィス

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

  • フリーコールS

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

  • auオフィスナンバー

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