気になる人
- 配色理論や勉強したけど、実際にやってみるとあまりうまくいかない
と、思っている方にバナーやロゴなどにも使える配色方法についてご紹介します！
こんにちは、とある企業で企画やWeb/UIデザイン・UXデザインを担当していますモーリーと申します。
より実務で使える配色バランスと使い方についてご説明していきます！
僕もバナー作成の時は基本的に本記事で解説している手順に沿って作成しています。
より実践的に実務で使える方法となっていますので、ぜひご覧ください。
また本記事を
読み進める前に、色相・彩度・明度についての前提知識が必要となります。
ご不明の方は、【配色の決め方①】配色理論と配色の種類を徹底解説！の配色理論と配色の種類を徹底解説！に説明している段落がありますのでそちらを参考にしてください。
目次
デザイン配色の決め方とコツ
実際の配色では、どのように色を分配するかで印象が全く変わってしまします。
- メインカラー：25%
- ベースカラー：70%
- アクセントカラー：5%
この割合が一般的に美しいとされています。
1.メインカラー
まずは、メインカラーを決めます。
サービスカラーなど使用することが多いです。
2.ベースカラー
背景など広い色面を彩る色。
- 白や薄い（明度の高い）色が扱いやすい
- 無彩色もしくはメインカラーの明度を上げた色をベースカラーにしてしまうのが早い
3.アクセントカラー
少ない色面でアクセントを出すカラー。
- メインカラーから離れた色にすると鮮やかになる
色数を増やす
色数を増やしても基本構造は同じです。
組み合わせの割合は変えずに、色を増やします。
例えば、ベースカラーを増やす場合は、ベースカラー２色で、40%と30%といった具合です。
- 「色相（色合い）」が同じで「トーン（彩度と明度）」が違う色（ドミナントカラー配色）
- 「トーン（彩度と明度）」が同じで「色相（色合い）」が違う色 （ドミナントトーン配色）
配色の実例
まとめ
ここで説明した配色の例はあくまでも、１例になります。
何を強調したいか、どういった狙いがあるのかで、組み合わせの割合は変わっていきます。
今回の例では、背景色は明度の高い薄い色で説明していますが、ブランドカラーを全面的に押し出して、ユーザーの認知を獲得したければ、メインカラーが背景色になる場合もあります。
またアクセントカラーは使わずに表現するものもあります。
この辺はまた他の記事でご紹介できればと思います。
ただ、その際もこの配色バランスを意識しておくことで、バランスのとれたクリエイティブを作ることができます。
配色に関するおすすめの本
紹介する書籍には、配色の具体例と構成している色についてまとめてある書籍になります。
実務をするときの見本帳がわりにどちらか１冊あってもいいと思います。
個人的にはどちらか１冊あれば十分だと思います。
合わせて読みたい
【色の意味解説！】デザインにおける色の意味と心理効果を解説！
【配色の決め方①】配色理論と配色の種類を徹底解説！
【配色の決め方②】配色の基本！意味・印象と実例紹介
