配色はデザインの1つと考えられており、色の違いでイメージががらりと変わります。Webデザイナーの道を進む方は、Webサイトに訪れるだろうユーザーを把握しながら、そのユーザーにあわせた色彩にデザインを調節していくことが必要です。まずは、Webデザインに必要な色彩の組み合わせ方の基本を理解しておきましょう。

色の組み合わせがWebサイトの印象を決める

Webサイトに統一性のある色彩を使うのは、想定される閲覧ユーザーに対してWebサイトのイメージを印象づけるため、そして企業や物に対するブランド力を高めるためです。

Webサイトのターゲットとなるユーザーの年代、性別などにより適切な色は異なり、コアとなるターゲットに合わせた色を選択することが重要です。ターゲットユーザーのテーマカラーがわからない場合は、その世代がよく使用するサービスや物などからヒントを得ましょう。

Webデザインの色を決める際には、企業や物に対するブランドのイメージに合わせることも忘れてはなりません。企業のブランド力を高めたい場合は、テーマカラーを決め、そのイメージが強く出るように色を選択していきます。

イメージに合わせた色彩や配色の組み合わせ例

ターゲットユーザーが好みそうな色や企業やブランドのイメージカラーをメインカラーにする方法以外に、Webサイトで伝えたい雰囲気から配色を決める方法もあります。

どのような色彩を選んだら良いのか迷ったら、イメージしてもらいたい雰囲気から色の組み合わせを選んでみましょう。

真面目な雰囲気

信頼性や真面目な雰囲気をアピールしたい場合は、アメリカ国旗に使用されている赤・白・紺の3色を使うことが多々あります。ベースは白、ポイントとなるカラーは紺、ポイントは赤を使うと良いでしょう。

高級感がある雰囲気

高級ブティックなど商品そのものを高く見せたいなら、ゴールドを活用し、落ち着いたカラー使いにします。ベースはブラックや深い赤を採用しながら、ところどころゴールドでゴージャスさをアピールしましょう。

ナチュラルな雰囲気

緑、茶、ベージュなど、自然界にあるカラーを利用し、明度は低めにして落ち着いた雰囲気に調節すると、ナチュラルな雰囲気になります。エコをイメージさせたり、自然の優しさを打ち出したりするスキンケア商品などでよく採用されています。

3つのカラーでWeb配色デザインを決める方法

Webデザインの配色を考えるときは、まずは基本となる3つのカラーを選んでいくと良いでしょう。メインカラー・サブカラー・アクセントカラーと3つの要素を理解することが、統一感のあるWebサイト作りに必要な基礎知識です。

メインカラー

メインカラーとは、Webサイトにおける最も面積が多いカラーのことです。全体のイメージにも影響を及ぼすため、ユーザーに何を伝えたいかを意識しながら決めてください。例えば、原色ならハッキリとした印象になり、淡いカラーなら優しい印象になります。メインカラーをセンス良く仕上げるには、全体の60％程度の割合になるよう配色を調節すると上手くいきます。ただし、高彩度の色を選ぶと見づらい印象になるため、その場合は分量を減らして調節しましょう。

サブカラー

サブカラーとは、メインカラーに次いで印象が高くなり、メインカラーを補う役割がある色です。一般的にはメインカラーと相対的で目を引く色を使用し、視覚的な印象を考慮して選びます。企業やブランドのイメージカラーを選ぶと良いでしょう。配色の割合としては、30％程度くらいに抑えます。

アクセントカラー

面積は最も小さいですが、全体を引き締めたり目立たせたりする役割を持つ色です。メインカラー、サブカラーと比べて明度や彩度を調節しながら目立つ色を選択します。差し色となる部分は10％程度と少なめにしましょう。

まとめ

Webサイトにおける色使いは、サービスのイメージを固めるために必要な要素です。どのような色の組み合わせが良いかは、はじめはわからないかもしれません。しかし、想定されるターゲットを特定し、その人たちがイメージしやすいカラーを選ぶようにすることで、上手くいくはずです。配色が苦手な方は、まず他のWebサイトの色彩をまねするところからやってみると良いでしょう。

Tweet