迷ったらこれ！Webデザインで使える配色パターンとサイト事例
ホームページを作成する時、どのような配色パターンにすべきか迷うことはありませんか？
ホームページの色使いは、サイトの第一印象を左右するので、とても重要です。見た目ばかりの問題ではなく、ビジネスの成功を大きく左右する要因でもあります。なぜなら、ユーザーの滞在時間、リピーター数、クリック数、売り上げなどにダイレクトに影響が及ぶからです。
色を選ぶ際、この配色は事業コンセプトに本当にマッチしたものなのか、慎重に考えてみる必要がありそうです。洋服のコーディネートさえも四苦八苦する中、プロフェッショナルにホームページを仕上げるには、どのような配色パターンを選べばよいでしょうか？
このような場合に最も頼りになるのが配色理論です。配色理論は芸術やデザイン領域で基礎となる概念で、光学理論に基づいています。『デザイナーが適切な配色パターンを選ぶための道具』と言い換えることもできます。
この機会に、あなたも配色理論の基礎を理解し、デザイン性に優れたホームページの作成を目指しましょう！
初心者のためのカラーホイール解説
配色理論の基礎は、色の基本体系を示したカラーホイールです。よく登場するツールなので、もしかしたら見たことがある方もいるのではないでしょうか？
カラーホイールは色相と明度、彩度の相対関係を円形に図表化しています。カラーホイールの最もベースとなる色は、光の3原色（赤、青、黄色）で構成されています。さらに、それら光の3原色の間にある第2原色（緑、オレンジ、紫）が配置され、合計6色で基本となるカラーホイールが完成します。
続いて、隣り合う3原色と第2原色をミックスさせできた色が6つの中間色（黄色 + 緑、緑 + 青、青 + 紫、紫 + 赤、赤 + オレンジ、オレンジ + 黄色）で、合計12色の純色となります。さらに精巧に積み上げた24色相のカラーホイール（上図）が、一般的には最も普及している色相チャートです。
暖色 VS 寒色
カラーホイールは2つのカテゴリーに分けることできます。
先ずは暖色系で、黄色、オレンジ、赤など（一部の茶色も含まれます）暖かさを感じる色です。次に真逆の寒色系で、青、緑、紫など（一部の灰色も含まれます）の寒さや冷たさを感じる色です。
基本的には、暖色系は行動や活力を生み出すと考えられています。一方で寒色系は、静かさや落ち着きをもたらすと考えられています。
ブランドや、どのようなホームページを作成したいかという目的に合わせ、暖色系か寒色系のどちらかしか選ばないことも出来ます。もちろん、暖色系と寒色系のコンビネーションを選択することも可能です。
後ほどあげるWix事例からも分かっていただけると思いますが、どの組み合わせが正解ということはありません。自分にとっての効果的な組み合わせを探してみましょう。
配色のコツ
次に、配色に悩み、行き詰ってしまった時に参考になる配色パターンをご紹介します。下の図を見ながら確認すると、分かりやすいですよ。
1．コンプリメンタリー（補色） カラーホイールで反対側に位置する補色の関係にある色の組み合わせ。例えば、赤と緑、黄色と紫といった真逆の組み合わせで、色の違いが際立ち、活発な印象のデザインとなります。
３色の配色パターンを定める場合は、３つ目に中性色を選ぶことになります。白、黒、灰色、明るいベージュ色などが中性色となりますが、通常のカラーホイールでは表示されていません。
2．アナロガス（類似色） カラーホイールで隣り合った3色で作る配色。
例えば、黄色、黄色・オレンジ、オレンジや、紫、紫・青、青の組み合わせです。色の類似性が高いため、柔らかい印象となります。
3．トライアド（三色配色） カラーホイールを三等分した位置にある3色での配色。
均一に分割された正三角形による色の組み合わせにより、鮮やかでまとまりやすい最も基本的な配色。ホームページ上で色違いのボタンなどを作成する場合などに有効です。
4．スプリットコンプリメンタリー 基準色とその補色の類似色を使った配色。
カラーホイール上のどれか１色を選び、その補色の両隣の色を組み合わせたパターンです。この配色からは、洗練された雰囲気が生まれます。色の境目がチラつくハレーションの心配がありません。
5．テトラディック カラーホイールを四等分した位置にある色もしくは2組の補色での配色。2組の補色同士の色なのでカラフルな色合いになり、色数を増やす必要がある場合に採用する配色です。
色彩が豊かになるため子供に人気のある配色ですが、ハレーションの注意が必要です。
6．モノクロマティック（単色） 明度や彩度差をもたせてコントラストを取り、同色のみを使った配色。 ミニマルデザインなどに採用され調和が取りやすい反面、単調になりすぎる恐れがある配色です。
7．アクロマティック（無彩色） お馴染みの白、黒、灰色で構成される、色相を持たない配色です。
配色理論の実践編 (Wix事例より)
基本的な配色理論とそのパターンについて紹介しましたが、ここからはいよいよ、Wixで作成した実際のホームページを見ていきましょう。配色パターンを採用する際に参考となる代表的な事例を取り上げました。
鮮やかな補色パターンを活用：Brown Owl Creative
上品な白黒パターン：By-Ghost
青による単色パターン：Realtipix
類似色パターン：Tati e Rodrigo
完璧に調和されたスプリットコンプリメンタリー：Carretel Videos
配色理論を参考に、素敵な色使いのホームページを作ってみましょう。 Wixならメールアドレスのみで登録、無料で簡単にホームページを作成頂くことができます！
ライター： Wix Team
