• 0k
  • 0
ウェブデザイン \ 2016年7月28日

迷ったらこれ!Webデザインで使える配色パターンとサイト事例

ホームページを作成する時、どのような配色パターンにすべきか迷うことはありませんか?

ホームページの色使いは、サイトの第一印象を左右するので、とても重要です。見た目ばかりの問題ではなく、ビジネスの成功を大きく左右する要因でもあります。なぜなら、ユーザーの滞在時間、リピーター数、クリック数、売り上げなどにダイレクトに影響が及ぶからです。

色を選ぶ際、この配色は事業コンセプトに本当にマッチしたものなのか、慎重に考えてみる必要がありそうです。洋服のコーディネートさえも四苦八苦する中、プロフェッショナルにホームページを仕上げるには、どのような配色パターンを選べばよいでしょうか?

ホームページの配色理論

このような場合に最も頼りになるのが配色理論です。配色理論は芸術やデザイン領域で基礎となる概念で、光学理論に基づいています。『デザイナーが適切な配色パターンを選ぶための道具』と言い換えることもできます。

この機会に、あなたも配色理論の基礎を理解し、デザイン性に優れたホームページの作成を目指しましょう!

初心者のためのカラーホイール解説

配色理論の基礎は、色の基本体系を示したカラーホイールです。よく登場するツールなので、もしかしたら見たことがある方もいるのではないでしょうか?

カラーホイールカラーホイールは色相と明度、彩度の相対関係を円形に図表化しています。カラーホイールの最もベースとなる色は、光の3原色(赤、青、黄色)で構成されています。さらに、それら光の3原色の間にある第2原色(緑、オレンジ、紫)が配置され、合計6色で基本となるカラーホイールが完成します。

続いて、隣り合う3原色と第2原色をミックスさせできた色が6つの中間色(黄色 + 緑、緑 + 青、青 + 紫、紫 + 赤、赤 + オレンジ、オレンジ + 黄色)で、合計12色の純色となります。さらに精巧に積み上げた24色相のカラーホイール(上図)が、一般的には最も普及している色相チャートです。

暖色 VS 寒色

カラーホイールは2つのカテゴリーに分けることできます。

先ずは暖色系で、黄色、オレンジ、赤など(一部の茶色も含まれます)暖かさを感じる色です。次に真逆の寒色系で、青、緑、紫など(一部の灰色も含まれます)の寒さや冷たさを感じる色です。

基本的には、暖色系は行動や活力を生み出すと考えられています。一方で寒色系は、静かさや落ち着きをもたらすと考えられています。

ブランドや、どのようなホームページを作成したいかという目的に合わせ、暖色系か寒色系のどちらかしか選ばないことも出来ます。もちろん、暖色系と寒色系のコンビネーションを選択することも可能です。

後ほどあげるWix事例からも分かっていただけると思いますが、どの組み合わせが正解ということはありません。自分にとっての効果的な組み合わせを探してみましょう。

配色のコツ

次に、配色に悩み、行き詰ってしまった時に参考になる配色パターンをご紹介します。下の図を見ながら確認すると、分かりやすいですよ。

1.コンプリメンタリー(補色)
カラーホイールで反対側に位置する補色の関係にある色の組み合わせ。例えば、赤と緑、黄色と紫といった真逆の組み合わせで、色の違いが際立ち、活発な印象のデザインとなります。

3色の配色パターンを定める場合は、3つ目に中性色を選ぶことになります。白、黒、灰色、明るいベージュ色などが中性色となりますが、通常のカラーホイールでは表示されていません。

2.アナロガス(類似色)
カラーホイールで隣り合った3色で作る配色。

例えば、黄色、黄色・オレンジ、オレンジや、紫、紫・青、青の組み合わせです。色の類似性が高いため、柔らかい印象となります。

3.トライアド(三色配色)
カラーホイールを三等分した位置にある3色での配色。

均一に分割された正三角形による色の組み合わせにより、鮮やかでまとまりやすい最も基本的な配色。ホームページ上で色違いのボタンなどを作成する場合などに有効です。

4.スプリットコンプリメンタリー
基準色とその補色の類似色を使った配色。

カラーホイール上のどれか1色を選び、その補色の両隣の色を組み合わせたパターンです。この配色からは、洗練された雰囲気が生まれます。色の境目がチラつくハレーションの心配がありません。

5.テトラディック
カラーホイールを四等分した位置にある色もしくは2組の補色での配色。2組の補色同士の色なのでカラフルな色合いになり、色数を増やす必要がある場合に採用する配色です。

色彩が豊かになるため子供に人気のある配色ですが、ハレーションの注意が必要です。

6.モノクロマティック(単色)
明度や彩度差をもたせてコントラストを取り、同色のみを使った配色。 ミニマルデザインなどに採用され調和が取りやすい反面、単調になりすぎる恐れがある配色です。

7.アクロマティック(無彩色)
お馴染みの白、黒、灰色で構成される、色相を持たない配色です。

配色と調和

配色理論の実践編 (Wix事例より)

基本的な配色理論とそのパターンについて紹介しましたが、ここからはいよいよ、Wixで作成した実際のホームページを見ていきましょう。配色パターンを採用する際に参考となる代表的な事例を取り上げました。

鮮やかな補色パターンを活用:Brown Owl Creative

鮮やかな補色パターン

上品な白黒パターン:By-Ghost

上品な白黒パターン

青による単色パターン:Realtipix

青による単色パターン

類似色パターン:Tati e Rodrigo

類似色パターン

完璧に調和されたスプリットコンプリメンタリー:Carretel Videos

調和されたスプリットコンプリメンタリー

流行りのトライアド:Wixホームページテンプレート

流行りのトライアド

配色理論を参考に、素敵な色使いのホームページを作ってみましょう。
Wixならメールアドレスのみで登録、無料で簡単にホームページを作成頂くことができます!

ホームページ作成ならWix


今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email

Wixブログを購読 \ 

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email