web制作全般に活かせる色彩の基礎

今回はWeb制作をするさいに活かせる色彩の基礎的な知識をご紹介します。

はじめに

サイトを作成される際、配色に悩まれている方は多いと思います。その内の多くが「考えてみたもののいい配色が思いつかないので、色を選ぶセンスが足りないのではないかと思っている」というものではないでしょうか。かく言う私も、こういったセンスに関してはあまり自信がありません。

（私が最初に作ったサイトは、同僚に「歯茎に生肉を挿したみたいな色」と言われてしまいました）

しかし多くのECサイトで、色はセンスのみで選ばれている訳ではありません。良いサイトほど、１つ１つの色に確固たる理由があって配置されています。

逆に言うと、デザインにおける配色は生まれ持っての才能が必要なものではないと言う事です。この記事では「スキルとしての配色」の基礎の部分を書いていきます。

テーマを決める

ⅰ）何を売るサイトなのか

最初に定義するのがこの部分だと思います。
今回は、チョコレートを売る事を想定します。

ⅱ）色の持つ抽象的な印象例

• 赤：果敢　情熱的　興奮
• 黄：楽観的　注意　派手
• 橙：親しみ　陽気　温かい
• 紫：賢さ　高貴さ　大人っぽさ
• 青：信用　信頼
• 緑：平穏　若さと成長

等々です。
チョコレートを売るイメージに必要なものをざっと考えてみましょう。

• のんびり食べたい
• 甘い
• チョコレート（商品）そのものの色

等々、橙色と茶色の中間くらいでしょうか。少しずつメインの色が見えてきました。

2.色彩の基礎

ⅰ）基礎の基礎

色には３つの要素があります。

• Ⅰ　色相→赤青黄緑黒：「色み」そのものです。
• Ⅱ　明度→青青青青青：色みの「明るさ」です。
• Ⅲ　彩度→赤赤赤赤赤：色みの「鮮やかさ」です。

全体の色相を変える事で「寒暖」「進出・後退」を
明度を上下する事で「膨張・収縮」「軟硬」「軽重」を
彩度を上下げする事で「派手・地味」を表現できます。

（チョコレートは派手すぎるイメージではないので、彩度は低めにする方が良いかな・・・）の様に考えて行く事ができます。

ⅱ）使用色の割合

使用する色は、大きく分けて3種類に分け、以下の様な割合にするのがスタンダードな考え方です。

• ベースカラー：70％　背景などになる色です。
• アソートカラー：25％　メインの色です。
• アクセントカラー：5％　アクセントを出す色です。

配色を図にすると（これをそのまま”配色図”と言います）以下の様になります。

ここで素敵な例を見てみましょう。
例）大地を守る会
月額会員制の野菜宅配サイトです。

配色図は以下の通り。

ベースカラーを白、アソートカラーを深い緑、アクセントカラーをオレンジにしています。野菜そのものの色をうまく使っていますね。

アソートカラーが二種類になっているのは「分割」という方法です。同系色を使って、色のバリエーションを増やしています。
（余談ですがこのサイト、2011年時点で180万PV。す、すごい・・・！）
こういった色はどのように選んでいるのでしょうか。

3.色の選び方

まずアソートカラーを、1のⅱのようにテーマに沿って選びます。たたき台のようなものなので、思い切って選んでしまいましょう。コツは、見やすくするために明度の低い色を選ぶ事です。

今回は「洋色大辞典」を使ってそのまま「チョコレート」色を選びました。

次にベースカラー。アソートカラーの明度を上げて彩度を少し落としたものを使うと、楽にまとまりのある配色になります。もしくは、白。

そしてアクセントカラー。色の考え方の図で「色相環」というものがあるのですが、

↑色相環　（情報科学・システム工学 教育向け フリー素材集　より）

そういったものを参考に、アソートカラーの逆に位置するものを選ぶと良いアクセントになります。
ひとまずはこのような配色図になりました。そして出来たのはこのテストサイト。

ベースに黒を加えて、アソートカラーとアクセントカラーを分割しました。普通に作るとサイケなデザインになってしまう私のセンスでも、理論立てて作る事でそれなりに見られる配色になりました。

おわりに

今回書いたのは、あくまでも基礎の基礎です。配置したボタン一つでさえ、色を変える事でコンバージョン率が上がるケースも多いようです。

配色は「どこに大事な情報があり、どこがボタンになっているのか」をコンマ数秒でも早く認知してもらうためにできる事のひとつです。

これを機に、サイトの配色について気になった方は、以下のサイトも参考にしてみてはいかがでしょうか。

「COLOR NOTE　配色のコツ」
「【検証】クリックされるボタンの色は？」
「Color Hexa(英語)」（アソートカラーを入れると自動で配色を考えてくれるサイトです）

ここまで読んでいただき、ありがとうございました。

この記事がほんの少しでも、皆様の制作やディレクションの一助になれば幸いです。

井上