Webデザインにおける私の配色方法

デザインをする際に欠かせない要素として、配色があります。色にはイメージを伝える役割があり、デザインにおいて伝えたい情報や印象を考えながら配色を行う必要があります。
今回は、普段私が使用している配色方法をご紹介します。

色は3色以内に抑える

配色は使う色を3色までに抑えるとデザインにまとまりが出て、綺麗に仕上げることができます。3色配色とはデザインにおける面積に対する基本配色のバランスのことで、おおよそベースカラー70%、メインカラー25%、アクセントカラー5%という配分になります。

ベースカラー

一番大きい面積を占める色で、背景色や余白に用いられることが多いので、メインカラーやアクセントカラーを邪魔しない、明度の高い色や、淡い色が選ばれます。

メインカラー

デザインの主軸となる重要な色です。イメージに合っているのかなどを検討し、色の印象を考えながら選びます。キャッチフレーズなど文字として使用される場合もあるので、明度が低い色が読みやすくておすすめです。

アクセントカラー

コンテンツとしてとくに注目させたい箇所や、単調なトーンにメリハリをつけたい時に使用する色です。メインカラーの反対色や明度差を付けるとより引き立ち、ユーザーの目にとまりやすくなります。

イメージに合った色の特性を知る。

色にはそれぞれ人に与えるイメージがあり、それを組み合わせることで、より目的にあった印象を与えることができます。

白

清潔・純潔・シンプル
白は何色とも相性が良い万能カラーです。その反面、白一色だけだと殺風景な印象なってしまうこともあります。他の色とのバランスを取りながら使うことが大切です。

黒

高級感・重量感・力強さ
無彩色の代表格である黒は、明度も彩度も持たないことから、硬さや重さを感じさせます。威厳や、都会的な洗練された印象も与えます。配色をモノトーンでまとめるとシックで落ち着いた印象になります。高級感・重量感・力強さを演出したい場合はおすすめの色です。

赤

情熱・エネルギー・興奮・生命・危険
赤はエネルギッシュでポジティブな印象を与えます。販売においては「セール品」のイメージも強く、購買意欲を増す効果があります。逆にネガティブな印象としては、赤信号など警戒を示したり、興奮するカラーなので暴力的なイメージとも結びつきやすくなります。

青

冷静・知性・さわやかさ・誠実・寒さ
青は寒色の代表色です。寒さのほか、水や空のような自然を象徴する色でもあります。涼やかな印象から、夏をテーマにデザインを行う場合青を使うことで清涼感を演出しますし、逆に冬がテーマの場合だと寒さや氷を連想させます。

黄色

幸福・若さ・危険・軽快
黄色は明るい印象が強いので、光が射すイメージとリンクして、希望や幸福を表す色として使われます。また、軽快さを感じるため、同じ有彩色の赤色や青色と組み合わせてこども用のサイトや商品に使用されることも多いです。踏切や工事現場のコーンのように、黒色との組み合わせは注意を促す効果があります。

緑

自然・健康・安らぎ・平和
植物に見られる自然の色なので、エコや環境と結びつきます。身の回りに感じられる色という点から、親しみや安心感、リラックスや穏やかな印象を与える効果があります。また「若葉」の印象から、若さやフレッシュな新人を連想させます。

イメージに合ったトーンを選ぶ

トーンとは彩度と明度の変化を示すものです。色と色の組み合わせの他にトーンの持つイメージを理解すると、より効果的にデザインを演出することができます。

Vivid（ビビッド）

各色相において最も彩度が高い色＝純色の色調です。鮮やかで派手な印象を与えます。

Brigh（ブライト）

ビビッドよりも少し明度を高くし、彩度を落とした色調です。ビビッドほど力強い印象にはならず、健康的、華やかというイメージを与えます。

Deep（ディープ）

ビビットよりも彩度と明度を落とした色調です。上品な色合いで深みのある配色になり、落ち着いた和の演出に使われることがあります。

LIGHT（ライト）

ブライトから彩度を落として明度を上げた色調です。パステルカラーとも言われ、淡く柔らかい印象があるので小さい子供や女性らしいイメージに合います。

Dark（ダーク）

ビビットに黒を混ぜた、澄んだ暗い色調です。格式の高い印象で、大人っぽい落ち着いたイメージを与えます。

まとめ

色は使い方次第で、さまざまな効果を生み出すことができます。配色というと難しいイメージがありますが、演出したいイメージや訴求したい内容を明確にすることで、自然と使うべき色が分かるようになります。 今回ご紹介した配色方法は、Webデザインの他に、イラストやプレゼントのラッピング、インテリアの配色など、様々な場面でも使えます。 日常にあるデザインを、配色を改めて意識して見てみると新しい発見があるかもしれません。

WEBデザイナー ／ K.M