Webデザインに必須の要素の一つに、「配色」があります。
「あまりしっくりこない」「これで合っているのか」と悩んだことは、誰にでもあるのではないでしょうか。
では、Webデザインにおける配色の基本について見ていきましょう。
まず、三つのカラーについて。
Webデザインの配色は「ベースカラー」「メインカラー」「アクセントカラー」の三つから成っており、それぞれの比率はベースカラーを70％、メインカラーを25％、アクセントカラーを5％にすると美しくなると言われています。
ベースカラーは、いちばん面積が大きい色で、背景や余白によく使われます。
他の2色のカラーを引き立てる、脇役のようなカラーです。
メインカラーは、文字どおりWebサイトのイメージを決定的な物にする、主役のカラーです。
アクセントカラーは、使われる量は少ない物の最も目立つ色で、全体を引き締める効果を持っています。
メインカラーは、Webサイトのイメージに大きな影響を与えるので、最初に決定します。
文字を読みやすくするためなどの理由から、明度を下げた色が望ましいとされています。
また、Webサイトで使われているロゴの色を流用しているケースも多く見られます。
メインカラーの次に決めるのは、ベースカラーです。
白・黒・グレーといった無彩色であれば、他の2色の邪魔になりにくいので、よく使われます。
また、ベースカラーは文字やコンテンツの余白にもよく使用されるので、淡い色や明度の高い色を使うと収まりがよくなります。
そして、アクセントカラーですが、これは色合いが単調になることを防ぐために使われる色なので、割合としては少なくても、いちばん目立つ色を使うべきです。
例えば、お問い合わせフォームのボタンなどにアクセントカラーを使えば、非常に効果的です。
ちなみに、1色だけでなくてもよいのですが、色数を増やすほど扱いが困難になるので、初心者は1色だけにしておいたほうが無難です。