Webデザインにおける「3つのカラー」配色の基本ルール

デザインをするにあたって、印象や対象を左右する大きな役割を担う「配色」。
どんな色がいいのか悩んでしまう…。そんな経験は多いと思います。

人それぞれ好みがある色ですが、配色の基本ルールを意識することによって、
よりよく効果的なデザインをすることができるようになります。
今回は、「ベースカラー」「メインカラー」「アクセントカラー」
この3つの配分や使い方、「色の与える印象」をまとめていこうかと思います。

ベース・メイン・アクセントって？

Webサイトデザインにおいて、配色は役割別に3つあります。
それぞれ ベースカラー、メインカラー、アクセントカラー と呼ばれています。
一般的に理想の比率とされているのは、ベースカラー：75%、メインカラー：25%、アクセントカラー：5% となっています。

この配分を意識してデザインすることによって、まとまりのある美しい仕上がりにできるとされています。

・ベースカラー

3つの中で最も大きな面積を占める色です。
全体イメージの基盤ともなり、背景や余白などに用いられます。
メインカラーとアクセントカラーを引き立てる、陰の主役的ポジションです。

ベースカラーはサイトイメージ全体に大きく関わるので、まずこの色を選定します。
白、黒、グレー、淡い色が用いられることが多いですが、文字の可読性を考慮して
利用する確立が高いためです。

・メインカラー

ベースカラーの次に面積を大きく占めるこの色は、Webサイトの印象を決定づけます。
また、ベースカラーで選んだ色を補う役割も担っています。
ベースに似ている色を使用すればまとまった印象に、異なる色を使用すればサイトに動きがでてきます。

・アクセントカラー

5%という少ない比率ですが、名前通りアクセントになる「一番目立つ色」となります。
全体を引き締め、ユーザーの目を引く役割もあります。
注目させたいコンテンツへ使用するといいでしょう。

色の与える印象と意味

では、どのようにベースカラーを決めればいいのでしょうか。
ここからは「色がどのような印象を与えるか」のそれぞれの一例を紹介します。
これらを踏まえ、どういったユーザーがターゲットとなるか、その場合どの色がいいのか、選択していきましょう。

・ 赤（温暖色）

火・太陽・エネルギー・アクティブ・前向き・恋・愛情
インパクト・刺激・興奮・怒り・情熱・闘争心・高揚・危険

ポジティブイメージ：愛情・勝利・エネルギッシュ・勝利
ネガティブイメージ：争い・危険・怒り・緊張

赤色はエネルギーを感じさせ、前向きにさせる色です。
暖かさを与える色でもあります。
目を引き関心を集めるので、セールを促す場面など、アクセントカラーとしての使用も多いですね。

・青（寒冷色）

空・海・生命・水・安息・精神・男性的・知性・信頼
涼しさ・平和・眠り・落ち着き・安全・誠実・清潔感

ポジティブイメージ：安心感・信頼・知性・落ち着き
ネガティブイメージ：不安・冷たい・寂しさ・悲しみ

青色は興奮を抑える色で、気持ちを落ち着かせてくれます。
また、安心や安全さを感じさせることから、コーポレートサイトでの使用も多く見かけますよね。
クールな印象も与えるので、メンズファションサイトのアクセントカラーとしてもよさそうです。

・オレンジ（温暖色）

暖かい・ビタミン・にぎやか・楽しさ・好奇心・健康・元気
社交的・美味しさ・陽気・太陽・活力・大衆的・柑橘系

ポジティブイメージ：陽気・元気・活発・楽しさ
ネガティブイメージ：わがまま・傲慢・激しさ

オレンジは赤色と黄色の中間に位置します。
赤色と黄色の良い所だけを取ってきたような色で、幸福感や、明るさ、親しみやすさなど明るい印象を与えてくれます。
ECサイトなどにある「購入する」ボタンもクリックしてもらいやすいらしく、多く使われています。

・黄色（温暖色）

明るい・楽しさ・快活・華やか・希望・幸福・躍動感
陽気・幼さ・発展・柑橘系・若々しさ・楽観的

ポジティブイメージ：明るい・快活・希望・幸福
ネガティブイメージ：危険・緊張・軽率・不安

明るく楽しい気持ちにさせてくれる黄色。
気分を高め、集中力の発揮や判断力がアップします。
「黄色い声」といった言葉があるように、五感の中で聴覚と関係が深いらしいので、
音楽系のサイトへの使用はピッタリかもしれません。
確かに、某大型CDショップであるタワーのレコードさんのサイトは黄色ですね！

・緑（中性色）

安心感・安定・さわやか・リラックス・自然・環境・回復
癒し・健康・平穏・生命力・新鮮・穏やか

ポジティブイメージ：リラックス・癒し・安心感・新鮮
ネガティブイメージ：保守的・受動的・未熟

緑は安心感や、調和を表す色です。
木々や草原など、自然の色でもあるので、気持ちを穏やかにしてくれます。
ナチュラルな雰囲気にしたい時や、親しみを持ってもらえるようなサイト作りたい時の使用も多い色ですね。

・紫（中性色）

繊細・神秘的・感性・優雅・高貴・華麗・上品・神聖
ムード・不思議・魔法・癒し・高級

ポジティブイメージ：優雅・感性・神秘的・上品
ネガティブイメージ：不安定・孤独・欲

感性を刺激し、インスピレーションを高めてくれる紫。
上品さや高級感を表す時に使用されます。
ヨガといったリラックス効果もあるスポーツサイトや、ジュエリー系のサイトでの使用も見かけます。

・グレー（無彩色）

穏やか・安定・落ち着き・空想・調和・クール
スタイリッシュ・上品・大人・温厚・信頼

ポジティブイメージ：信頼・安定・穏やか・落ち着き
ネガティブイメージ：無気力・地味・憂鬱・曖昧

ベースカラーとして多く使われるグレー。
どんな色にも馴染み、周りの色を引き立ててくれる、協調性の高い色です。
グレーがベースになっているギャラリーサイトや、ファッションサイトなどを見てみると、
カラフルなのに落ち着いていて、洗礼された印象を受けますよね。

・黒（無彩色）

クール・威厳・高級・神秘・極限・自信
中立・忠誠・男性的・重厚感・上質

ポジティブイメージ：高級・威厳・重厚感・神秘
ネガティブイメージ：暗い・拒絶・悪

周囲を引き締めて目立たたせる黒。
他の色に与える影響も強く、色を組み合わせた際には、黒のイメージが上乗せされます。
上質さ、高級感を与えてくれることから、車のサイトや時計、カメラのサイトなどに多く見られのも印象的です。

まとめ

いかがでしたでしょうか？
カラー配分や、色の与えてくれる印象などで、デザインは大きく変わります。
目的や用途に応じて、配色をしてみてください。

まずは好きな色を組み合わせていって、バランスを考えてみるというのも、手で学べていいかもしれません。
色ってとても楽しいので、好きだな～という感覚が大切ですよね。
何気なく趣味のことや、関心のある物事のサイトを見る際にも、「3つのカラー」に注目してみると
さらにそのサイトやデザインが、好きになるかもしれません。

Written by Baycross Marketing