WEB配色の2大基本原理と6つの配色パターン

WEB配色をカンタンに決定する方法

色彩は、人の心身へ大きく影響します。
WEBでの商品の良し悪しを決めるのは、色の印象が60%を占めています。色は単体で存在することは少なく、組み合わせて使われることがほとんどです。基本2大原理と定番の配色パターンを知ることによって、色の組み合わせを簡単に決定することができるようになります。
WEB配色には色相環(カラーホイール)を使います。色相環とは、虹のように色みの似通ったものを輪状に並べたものです。ここでは色を12色に分けた減法混色の色相環を想定します。この色相環は頂点から時計と逆周りに、黄・黄みの橙・橙・赤みの橙・赤・赤紫・紫・青紫・青・青緑・緑・黄緑となっているものです。

色のイメージを決める「暖色と寒色」

基本2大原理のひとつは、色にはそれぞれイメージがあるということです。
色相環は大きく暖色と寒色に二分されます。色相環において黄緑から橙を通って赤までが暖色です。緑から青を通って赤紫までが寒色です。
暖色と寒色は色のイメージによって分けられています。印象の違う色を過度に組み合わせて使うと、見る人を混乱させることになり、せわしなくて汚い信頼性のない印象を与えます。
暖色は火や太陽、血のイメージと重なるとこが多い色です。情熱や幸福、活発さを表したい配色に効果的です。
寒色は水や草などの自然のイメージを思い起こさせることが多い色です。清潔さや落ち着き、プロフェッショナルさを表したいときに使用できます。

一次色、二次色、三次色

一次色(プライマリーカラー)、いわゆる原色は古典的な色彩学では「赤、青、黄」の三色とされています。この三色を混ぜることによって、他のすべての色を表現できると考えられました。色相環においてこの三色を結ぶと、黄色を頂点にした正三角形となります。
二次色(セカンダリーカラー)、等和色とも呼ばれます。「緑、橙、紫」となっており、二つの原色同士を混ぜた色です。色相環においては原色同士のちょうど中間となり、二次色を結ぶと紫を頂点にした逆三角形となります。
三次色(ターシャリーカラー)、一つの原色と一つの二次色を混ぜたものです。12分割した色相環には「黄緑、黄みの橙、赤みの橙、赤紫、青紫、青緑」の計六色存在します。

6つの基本配色パターン

・コンプリメンタリー
補色の組み合わせです。強いコントラストが生まれます。
・アナロガス
似通った色同士の組み合わせです。目に優しく、ゆったりした雰囲気になります。
・トライアディック
色相環上で120度ずつ離れた三つの色を使います。最も安定しており、WEB配色においてベストな組み合わせとされています。
・スプリット-コンプリメンタリー
補色関係にある片方の色の両隣を使った三色を組み合わせます。補色の強さを弱めることができます。
・レクタンギュラーorテトラディック
色相環において長方形の位置になる四色を使います。色彩豊かな配色になります。
・スクエア
色相環上で90度ずつ離れている四色を使います。非常に強い印象です。

画像とレイアウトの調和

レイアウトと画像の色彩を調整すると、統一感あるWEBデザインになります。サイトデザインの各要素がお互いに連携しあっていないと、サイトを訪れた人が見るべきものを見失い、悪い印象を与えてしまいます。
・大きな連携
画像を中心に配色を決定し、画像と他の要素を似た色でまとめると、サイトに統一感が出ます。
・少しだけ連携
特定の部分を強調したいときは、その部分を画像の背景と同じ色で囲います。額縁のような効果になります。
・背景画像と連携
画像をサイトの背景画像にして使います。画像のメインの色とメニューの色を揃えると、見るべきものが一目瞭然になります。

WEB配色を決定する方法のまとめ

色彩はWEBデザインにおけるもっとも重要で強力な要素です。
配色パターンは色相環上の一定の関係を定義したものです。最初に伝えたい印象を決めて、それを色のイメージと配色パターンに照らし合わせていけば、単なる色の好き嫌いだけでなく客観的なイメージによってWEB配色を作ることができます。
そして画像とレイアウトの各色を効果的に組み合わせることもまた、WEBデザインの中心になる方法です。こうした基本2大原理を活用できれば、統一感をもった信頼感のあるWEBサイトにすることができるでしょう。

カテゴリー:未分類

この記事を書いた人

水野 直

水野 直株式会社ZERO

1985年、東京都中野区生まれ。
某WEBマーケティング会社にて営業と兼務でリスティング運用やSEOの実務を経験。 現在は某企業の小売業の経営コンサルタントをする傍ら、 LPO・SEOを中心としたWEBマーケティング会社取締役として従事。 普段の業務は現場教育やコンサルティングのお手伝いのほか、記事執筆やセミナーなど。