Column -コラム記事-

デザイナー

Webデザインに欠かせない配色について


Webデザインをする際、誰もが一度は配色で悩まされた経験があると思います。今回はWebデザインの配色の基本から色の持つ意味までまとめてみました。

配色の基本

Webサイトの配色はその役割別に「3つのカラー」を選定する事が一般的です。「3つのカラー」は、ベースカラー、メインカラー、アクセントカラーに分けられます。

ベースカラー

サイトの基本となる色で、背景や余白など幅広く用います。他の色を引き立てる役割も果たします。(約70%)

メインカラー

その名の通り、Webサイトの輪になる色です。主役になる色なので、コーポレート色がよく使われます。(約25%)

アクセントカラー

少ない使用量からユーザーの目を引く役割をする色です。(約5%)

配色の決め方

カラーを決める順番は「メインカラー」→「ベースカラー」→「アクセントカラー」になります。

メインカラー

全体の印象を左右する色であるメインカラーを中心としてそれに合わせて配色を決めます。メインカラーは、文字の可読性のため、明度の低い色が使用しやすいという傾向があります。

ベースカラー

サイトの70%を占めす色のため、明度の高い色や淡い色が多いです。強い色をベースカラーに使う場合は文字の色を白系にすることをおすすめします。

アクセントカラー

デザインのアクセントを付けるために使用されるので、メインカラーの補色を選ぶ事が多いです。サイト全体のバランスを考えながら決めていきます。

色の持つ意味

色にはそれぞれの意味があり、ユーザーに与える印象も異なります。

オレンジ


親しみ、元気、活動、活発、楽しいの印象を与えます。
https://hoikushi-worker.com/


リラックス、安らぎ、健康、穏やか、成長の印象を与えます。
https://yakuzaishi-worker.com/


安心、信頼、知的、誠実、理性の印象を与えます。
https://sekoukanrijob.com/

ピンク


ロマンチック、女性的、魅力、思いやり、幸せの印象を与えます。
https://dental-worker.com/

黄色


明るい、陽気、若々しさ、快活、希望の印象を与えます。
https://kaigoworker.jp/

まとめ

いかがでしたでしょうか?
Webデザインは配色によってユーザーに与える印象が大きく変わります。サイトの目的やイメージに合わせて配色を決めてみましょう!

前ページに戻る