邦夫(フォルトゥナ)2012年9月19日更新ツイート閲覧数6,770viewsこのコラムをPDF形式でダウンロードするある程度配色の方向性が決まれば、実際に色を配置して、配色の調整を行います。第4回目となる今回は、すっきりと情報を伝えやすいページに仕上げるための、画面全体の色の調整と各パーツの色について考えてみましょう。各部の色を調整する背景色を考えた色の調整ページ全体に背景色を使う場合、背景色がどれくらい見えるかはモニタのサイズやページを開いているウインドウのサイズによりますが、画面の大部分を占める背景色とヘッダ部分の色が決まっていれば、配色イメージはほぼ完成していると言えます。背景色とヘッダに何種類かの色を使っている場合には、思いつきで新たに色を増やしたりせずに、背景色やヘッダで既に使われている色を見出しなどにも利用すると全体の統一感が生まれます。ヘッダに使っている色と背景色が近すぎると、メリハリがなくなってしまい、焦点がぼやけてしまいますので、ヘッダの色と明度や彩度で差を出すようにするとよいでしょう。見出しの色でメリハリを付ける見出しの色をしっかりというと、文字の色を赤にしたりしがちですが、必ずしも派手な色を使う必要はありません。その後に続く文章との差が感じられれば、ニュースサイトのように、黒の文字を大きくするだけでも構わないのです。それほど派手な色でなくとも、大きく見出しの背景に色を付ければ、それだけで十分他の部分との差を付けることができます。ページによって内容が変わる部分については、無理矢理に色を使わないようにし、重要な情報だけに色を使う方が、本来伝えたい内容はスムーズに伝わるでしょう。画像やバナーを並べるような場合には、その部分には多くの色が使われているはず。必然的に多くの色が密集するために色が混乱しがちです。多くの色をまとめる場合のコツは主に以下の3つです。それぞれの画像に何らかの共通した色を使うこと余白を広めに取ること前後を色をあまり使っていない部分で挟むこと余白を広めに取るだけでも、色の混乱は緩和され、一つ一つの画像が目に入りやすくなります。写真が大きいことも重要ですが、情報を分離してみせるためには、余白は欠かせない物です。どの画像にも少量でいいので、同じ色やトーンを揃えた色を使うようにするだけでも、かなり見え方は変わってきます。例では写真に緑の帯を付けていますが、バナーの中では文字の色を同じにしたりと様々なところで使えるでしょう。全体の配色を調整するために配色そのもののよしあしを見るには、モニタから2m程度離れて画面を見ることで、全体のイメージをつかみやすくなります。その距離でもきちんとサイト名やロゴ・キャッチコピーなどの重要なテキストが見えやすいことを第一に考え、それを邪魔するような強い色があれば、少しトーンを控えめにしたり分量を減らしたりして、調整しましょう。無理に色を増やしたりせず、悩んだときは色数や分量を減らしていくのが、配色の最大のコツと言えます。2004年、色彩に関するノウハウをまとめたウェブサイト「基礎からわかるホームページの配色」を公開。コーディネートカタログ』(技術評論社)など。(編集)『ウェブデザイン&レイアウトの見本帳』に続く、ウェブの配色に特化した実例の見本帳です。掲載している項目のテーマは、季節感を感じさせる配色デザインや、イメージを喚起させる配色、文字や罫線などと配色の関係、さらには集客に繋がる配色も紹介しています。本書のはじめには色相や彩度、補色など、配色に関する基本的な事柄も解説することで、ウェブに関する配色の本として充実した内容になっています。ための経理サポートサイト文具、通信、オフィスのことなら何でもお任せ問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール事務所開設するなら固定電話番号で信頼アップ本コンテンツは、掲載時点の内容となります。「みんなのビジネスオンライン」は「はじめてWEB」にお読み替えいただきますようお願いいたします。Reserved.「はじめてWEB」はKDDIが提供しています。