【WEBデザインの基本・配色】3つのカラーの選び方

デザイン

グラフィックデザイン → webデザイン

キャリアを広げるために、学んでいます!


今回はWEBサイトをデザインする際に必要な、ベースカラー、メインカラー、アクセントカラーの配色や配分についての基本ルールをまとめました。


これを読めばwebデザインの配色の基本、カラーの選び方がわかるはず。

wordpressなどを利用するときも、カスタマイズなどの際に意識しておけばサイトの見た目のバランスがよくなると思います。

先輩コアラ

色選びに迷った時に、参考になるサイトも紹介しています。


webデザインの配色・3つのカラー

WEBサイトの配色は、

・ベースカラー
・メインカラー
・アクセントカラー

この3つを軸に考えていきます。

それぞれの割合としては、

・ベースカラー70%
・メインカラー25%
・アクセントカラー5%

これが美しく見える配色の定番の比率とされています。


3つのカラーを一つずつ解説していきます。あわせて、役割と選び方を確認していきましょう!

①ベースカラー【webデザインの3つのカラー】


サイト上で、最も大きな面積を占める基本となる色です。

余白や背景などに用いることが多いです。

ベースカラーは3つのカラーの割合としては70%とかなり多めです。しかし、主に背景の部分で登場するため、実際の役割はメインカラーとアクセントカラーを引き立てる脇役です。

白やライトグレーなどの明度の高い濁色が使われることが多いです。

メインカラーの明度を上げた色をベースカラーに使うこともよくあります。実際にこのサイトでも採用しています。


ベースカラー【役割・決め方】

ベースカラーの役割:メインカラー・アクセントカラーの引き立て役

ベースカラーの決め方:メインカラー・アクセントカラーが引き立つカラー(邪魔しないカラー)を選ぶ


3つのカラーの割合としてはかなり大きな面積を占めます。主にサイトの背景部分のカラーです。

メインカラーを引き立てる、白、黒、グレーの無彩色のカラーが定番で、よく使われています。

②メインカラー【webデザインの3つのカラー】


メインカラーは、サイトのイメージを決定づけるカラーです。

ロゴの色があらかじめ決まってる場合、ロゴの色をメインカラーとして利用することが多いです。

可読性を意識して、明度を低くした色が使いやすいとされています。

メインカラー【役割・決め方】

メインカラーの役割:サイト自体のイメージを決定づける

メインカラーの決め方:主張したいイメージを思い浮かべて色を選ぶ

わかりやすい例としては、セールを促す場合には赤を選んだりしますよね。色の持つ印象を意識して、メインカラーを選びましょう。

→色の持つ印象まとめリンク

注意ポイント:原色には非常口や消化器の色といった危険を知らせるものに使われるカラーがあります。イメージがある程度固まっているカラーの使用や組み合わせは注意が必要です。
 



③アクセントカラー【webデザインの3つのカラー】


アクセントカラーは、実は3つのカラーで一番目立つ色です。

全体を引き締める役割があります。サイトの中で、ユーザーの目を引くために重用されます。

アクセントカラー【役割・決め方】

アクセントカラーの役割:サイト内でユーザーの目を引く、注目してほしいポイントを示す

アクセントカラーの決め方:メインカラーの反対色など、サイト内で目立つ色を選ぶ

デザインの工程で言うと、メインカラー・ベースカラーの調和が取れたら、アクセントカラーを合わせてメリハリをつけます。

アクセントカラーは、3つのカラーのの割合で言うとかなり少ないです。なのに、一番目立つ存在です。

応用として、一色だけでなく何色か使うことで、賑やかな雰囲気や楽しい雰囲気を演出することもできます。


webデザインの3つのカラーを選ぶステップ・まとめ

以上、3つのカラーを割合の多い順に紹介しました。

実践でも使えるwebデザインに必要な3つのカラーを選ぶステップをご紹介しておきます。

webデザインの3つのカラーを選ぶステップ
①  一番重要なサイトのイメージを左右するメインカラーから決める
②  ベースカラーを決める
③  全体の印象(賑やか・クールなど)に合わせてアクセントカラーを合わせる


webサイトにおける割合の大きい順ではなく、

メインカラー → ベースカラー → アクセントカラーの順番
で決めるとスムーズにいくようです!

カラーを選ぶための参考サイト

色についての知識が豊富【メインカラーを選ぶ時にオススメ】

配色の見本帳 | キーカラーで選ぶ配色パターン - ホームページで作る配色
色見本、配色を提案するWEB色見本のホームページ。選んだ色をキーカラーにして色の法則から多彩な配色と出会えます。漫画配色検索や旅する配色見本、カラー成分測定「色とりどり」といった色彩を調べるツールも充実しています。デザインからファッションや占いまで、色を扱うときに役立つのが配色見本です。さまざまな色の組み合わせを見て理

直感的な配色の参考に【全体のイメージが決まらない時にオススメ】

LOL Colors - Curated color palette inspiration

直感的かつ理論的に選びたい時にオススメ

Choosing colors has never been so easy.
Find the colors your like, then grab the hex code. It's easy.

コメント

タイトルとURLをコピーしました