ホームページ配色入門」では、センスではなく、簡単な配色の知識やレイアウトのセオリー、情報伝達の基本を学ぶことで、あなたのホームページの目的を達成させるための配色を解説します。3回目の今回は配色を左右する最も重要な色であるキーカラーを決める時の考え方・注意事項をお伝えします。重要なのは最初の1色ですキーカラーという考え方を知る配色の印象を左右する鍵となる色をキーカラーと呼びます。多くの色が使われていても、そのキーカラーが変われば配色の印象がガラッと変わってしまう色、それがキーカラーです。図の3種類の配色は全て同じ3色を使っていますが、受ける印象はまったく異なっているはずです。配色を決める際にはまずキーカラーを決めることが重要で、その時の気分によってキーカラーを変えたりすると以下のようなデメリットが生じることがあります。色による印象が長続きせず、訪問者に記憶されにくい前回の訪問時と色がまったく異なっていると、訪問者が戸惑ってしまう以前重要なポイントを表す色であったものが、現在では重要でなくなってしまうことで情報が伝わりにくくなる他にもいろいろありますが、キーカラーを決めずに、好き勝手に色を変更していても、あまり得することはないので、キーカラーは一度決めたら変えないようにすることだけは忘れないようにしましょう。キーカラーをどこで使いたいかを検討するキーカラーは最もサイトに合っている色を選ぶということで構わないのですが、使う前に大まかな方針を考えておくと、配色しやすくなります。配色イメージの絞り込みや合っているかどうかの確認は、「第1回:色の違いでできることを覚えよう」で説明しましたので、忘れた方はもう一度ご確認ください。最初に考えておきたいのは、キーカラーをロゴやキャッチコピーなど重要な場所で使うかどうかです。重要な部分に使うのであれば、サイト名やコピーが読めないのは、配色として致命的なので、読みやすいような色を選んでおく必要があります。明るく淡い黄緑をキーカラーにしたいのであれば、背景色が明るい色ではサイト名などが読みにくくなってしまいますが、背景色を暗くしてしまうと配色のイメージは変わってしまいます。2つを見比べて、どちらのイメージが希望するイメージに近いか考えてみましょう。明るい黄緑を使うということを優先させるのであれば、黄緑を文字に使わず、黄緑を背景に使って、サイト名などの重要な部分には違う色を使えばよいのです。大雑把な表現ですが、画面から2mくらい離れて見たり、目を細めて見た場合に、目に入ってくる色がキーカラーです。以下の例は背景の黄緑が変われば印象はまるで変わってしまいますが、サイト名の色を変えても大きく印象は変わらないため、黄緑がキーカラーであると言うことができます。キーカラーの分量を調整する次にキーカラーの分量を多くするか、少なくするかを考えます。「第2回:色を詳しく説明できるようになろう」で大きく鮮やかな色は疲れやすいと説明しましたが、それを避けるために、鮮やかな色は小さく、くすんだ色は大きく使うのが配色の基本となります。同じ色でも彩度の高い鮮やかな色は少量でも強い印象を与えることができます。逆に彩度の低い灰色に近い色は大きく使っても強い印象を与えにくいのです。それを踏まえて、まずキーカラーに使いたい色が、強い色なのか弱い色なのかを考えておけば、その後の配色は非常に楽になります。全体的に暗い色を使った落ち着いた配色にしたい場合、背景に暗い色を使うようにし、同系色の鮮やかな色をキーカラーにすると全体のまとまりがよくなります。暗い彩度の低い色(例えば黒や暗い茶色)は、鮮やかな色に負けてキーカラーになりにくいのです。キーカラーを決める際に気を付けたいことをあらためて整理しておきましょう。サイト名やキャッチコピーに使うのであれば、読める色を選ぶ鮮やかな色ほど小さく使う暗めの配色にしたい場合は、背景に大きくくすんだ色、キーカラーは鮮やかな色にする一度決めたキーカラーは変えないようにするこの4点がクリアできれば、まずキーカラー選びは成功と言えます。ホームページの配色は4色を基本に考えるキーカラー以外に必要な色キーカラーを決めてもそれだけで配色ができるわけではありません。先ほどの例でもキーカラーと背景色の2色が出てきました。ホームページの実際の配色では4色を基本にそれらを上手く使っていくことが重要です。文章の色:黒や暗いグレー(背景が暗い色は逆に白や明るいグレー)が使われることが多い背景の色:キーカラーを活かすことができる画面全体の背景色リンクの色:文字のリンクの色。青が使われることが多いとなります。このうちリンクの色を、文章の色と似たような色を使ってしまうと、目立ちにくくクリックされなくなります。GoogleやYahoo!、Wikipediaなどの多くのサイトで青が使われていることから、青をリンク色にするのが無難ですが、それ以外の色を使うのであれば、リンク部分に下線を使うことで、よりクリックされやすいリンク色にすることができます。このようにキーカラーを決めただけでも、それ以外の色も数色使うことが決まってきます。色数が増えるほど配色は難しくなっていくので、配色に苦手意識がある人は色数を増やさず、できるだけ4色を繰り返し使うようにします。強調の色(アクセントカラー)を1色選んでみようもうひとつ覚えておきたいのは重要な部分を示すためのアクセントカラー(強調色)です。アクセントカラーは目立たせるための色ですから、赤が多く使われているところに赤を使っても目立たせることはできません。今まで使われている色と大きく異なる色を選ぶことが重要です。簡単な色の選び方は、並べた時にまったく異なる印象の色を選ぶことです。青がキーカラーなのであればオレンジを、赤がキーカラーなのであれば青緑を選ぶという具合です。くすんだ暗い色などをキーカラーに選ぶと目立たないため、鮮やかでしっかりと見える色を選ぶようにします。アクセントカラーの色が薄いと、強調として使えなかったりすることもあるため、きちんと読みやすい色を選ぶようにしなければなりません。文字中心のシンプルな配色のサイトであれば、強調したい文字を大きくすることでアクセントカラーにすることができますが、色の大きさを利用するテクニックは次回の連載でお伝えすることにします。2004年、色彩に関するノウハウをまとめたウェブサイト「基礎からわかるホームページの配色」を公開。コーディネートカタログ』(技術評論社)など。(編集)『ウェブデザイン&レイアウトの見本帳』に続く、ウェブの配色に特化した実例の見本帳です。掲載している項目のテーマは、季節感を感じさせる配色デザインや、イメージを喚起させる配色、文字や罫線などと配色の関係、さらには集客に繋がる配色も紹介しています。本書のはじめには色相や彩度、補色など、配色に関する基本的な事柄も解説することで、ウェブに関する配色の本として充実した内容になっています。ための経理サポートサイト文具、通信、オフィスのことなら何でもお任せ問い合わせ件数をアップさせるなら!「通話料無料・わかりやすい番号」のフリーコール事務所開設するなら固定電話番号で信頼アップ本コンテンツは、掲載時点の内容となります。「みんなのビジネスオンライン」は「はじめてWEB」にお読み替えいただきますようお願いいたします。Reserved.「はじめてWEB」はKDDIが提供しています。