グラフィックデザイン → webデザイン
キャリアを広げるために、学んでいます！
今回はWEBサイトをデザインする際に必要な、ベースカラー、メインカラー、アクセントカラーの配色や配分についての基本ルールをまとめました。
これを読めばwebデザインの配色の基本、カラーの選び方がわかるはず。
wordpressなどを利用するときも、カスタマイズなどの際に意識しておけばサイトの見た目のバランスがよくなると思います。
色選びに迷った時に、参考になるサイトも紹介しています。
webデザインの配色・３つのカラー
WEBサイトの配色は、
・ベースカラー
・メインカラー
・アクセントカラー
この３つを軸に考えていきます。
それぞれの割合としては、
・ベースカラー70％
・メインカラー25％
・アクセントカラー5％
これが美しく見える配色の定番の比率とされています。
３つのカラーを一つずつ解説していきます。あわせて、役割と選び方を確認していきましょう！
①ベースカラー【webデザインの３つのカラー】
サイト上で、最も大きな面積を占める基本となる色です。
余白や背景などに用いることが多いです。
ベースカラーは３つのカラーの割合としては70%とかなり多めです。しかし、主に背景の部分で登場するため、実際の役割はメインカラーとアクセントカラーを引き立てる脇役です。
白やライトグレーなどの明度の高い濁色が使われることが多いです。
ベースカラー【役割・決め方】
ベースカラーの役割：メインカラー・アクセントカラーの引き立て役
ベースカラーの決め方：メインカラー・アクセントカラーが引き立つカラー(邪魔しないカラー)を選ぶ
３つのカラーの割合としてはかなり大きな面積を占めます。主にサイトの背景部分のカラーです。
メインカラーを引き立てる、白、黒、グレーの無彩色のカラーが定番で、よく使われています。
②メインカラー【webデザインの３つのカラー】
メインカラーは、サイトのイメージを決定づけるカラーです。
ロゴの色があらかじめ決まってる場合、ロゴの色をメインカラーとして利用することが多いです。
可読性を意識して、明度を低くした色が使いやすいとされています。
メインカラー【役割・決め方】
メインカラーの役割：サイト自体のイメージを決定づける
メインカラーの決め方：主張したいイメージを思い浮かべて色を選ぶ
わかりやすい例としては、セールを促す場合には赤を選んだりしますよね。色の持つ印象を意識して、メインカラーを選びましょう。
→色の持つ印象まとめリンク
③アクセントカラー【webデザインの３つのカラー】
アクセントカラーは、実は３つのカラーで一番目立つ色です。
全体を引き締める役割があります。サイトの中で、ユーザーの目を引くために重用されます。
アクセントカラー【役割・決め方】
アクセントカラーの役割：サイト内でユーザーの目を引く、注目してほしいポイントを示す
アクセントカラーの決め方：メインカラーの反対色など、サイト内で目立つ色を選ぶ
デザインの工程で言うと、メインカラー・ベースカラーの調和が取れたら、アクセントカラーを合わせてメリハリをつけます。
アクセントカラーは、３つのカラーのの割合で言うとかなり少ないです。なのに、一番目立つ存在です。
応用として、一色だけでなく何色か使うことで、賑やかな雰囲気や楽しい雰囲気を演出することもできます。
webデザインの３つのカラーを選ぶステップ・まとめ
以上、３つのカラーを割合の多い順に紹介しました。
実践でも使えるwebデザインに必要な３つのカラーを選ぶステップをご紹介しておきます。
① 一番重要なサイトのイメージを左右するメインカラーから決める
② ベースカラーを決める
③ 全体の印象(賑やか・クールなど)に合わせてアクセントカラーを合わせる
webサイトにおける割合の大きい順ではなく、
メインカラー → ベースカラー → アクセントカラーの順番で決めるとスムーズにいくようです！
カラーを選ぶための参考サイト
色についての知識が豊富【メインカラーを選ぶ時にオススメ】
直感的な配色の参考に【全体のイメージが決まらない時にオススメ】
直感的かつ理論的に選びたい時にオススメ
コメント