webデザインにおける配色

コモテック制作チーム

2022年10月31日 10:31

こんにちは。制作チームのデザイナーです。
今回はwebサイトにおける色の効果について、説明していこうと思います。

Webサイトの配色

色はデザインにおいてとても重要な要素です。
Webサイトでも同じく、配色によって与えるイメージが変わってきます。

まず、Webサイトには基本の３つの配色があります。

その３つが「ベースカラー」「メインカラー」「アクセントカラー」です。

ベースカラー

Webサイトの基本となる色のこと。メインとアクセントを引き立てる役割があり、背景や余白に用いる。

メインカラー

サイトを印象づける色のこと。ターゲット層や会社、製品などのイメージに合う色を使用することが多い。

アクセントカラー

ワンポイントに使う色のこと。使用面積は少なくても、サイト全体を引き締め、目を引きつける役割がある。

これらはそれぞれベース70%、メイン25%、アクセント5%の比率が美しいとされています。
サイトイメージを固めるメインカラーは初めに決め、それに合わせてベース、アクセントカラーを決めていくと悩みにくく、メインが映えるサイトになりやすいと思います。

また、３つの配色に加え、色が持つ印象や効果も知っておくと、サイトの持たせたい印象が定まりやすくなります。

例えば、
赤はパワフルでエネルギッシュなイメージがあり、商売においては購買意欲が増す色だとされています。

緑はリラックスや健康なイメージをもち、親しみや自然を感じるサイトに使用されることが多いです。

黒などは落ち着いていて高級感を演出する時によく使われています。重さがあり、ポジティブ感はありませんが、引き締まったサイトになります。

このような色の印象をうまく利用しながら、３つの配色に落とし込むことが重要です。