デザイン

配色のルール

2022年3月18日

何色を使うのかって決めるの難しいですよね、

好きな色、何となくで配色してたらうまくまとまらなかったり、素人っぽいデザインになってしまいます...

そこで配色にもルールがあるんです。

デザインが見違える色選びのコツを学んでいきましょう。

配色のバランス

基本3色でまとめる(白黒を除く)

ベースカラー7割(最も大きい面積を占める背景色などに用いられる)

メインカラー2割(企業やブランドの色やターゲットのイメージに近い色が用いられる)

アクセントカラー1割(デザインを引き締めたり、注目を集める)

ワンポイント

ベースカラーを濃い色にすると目が疲れたり、文字が読みづらくなるので薄い色がおすすめ

メインカラーはなるべく濃い色の方が使い勝手がよい

アクセントカラーは自由に選べるが、メインカラーと近いとアクセントになっていないので色相環の離れたものを選ぶとよい。

これが基本

色の組み合わせ

同系色で組み合わせようとしても、組み合わせ方によっては色同士の境界線がぼやけて見えずらくなることも

違う色同士でも再度が高く明度が似ていると目がチカチカし、見えにくいこともある。

彩度、明るさの違い、コントラストを意識して組み合わせるように

配色のコツ

使う素材が決まっているならそこからそれを参考に配色し、

世界観や全体のイメージ、ターゲットが決まっているならピンタレストでキーワード検索で配色を

配色のバランスが取れたうえで色が与える心理効果を有効に発揮できます。

心理効果は色彩心理をチェック。

まとめ

何となくで色を選ぶと素人っぽいデザインに見える

色の役割を明確にすることでデザインにまとまりが生まれる

役割を見失らないように使用面積を意識する

ベース7割メイン2割アクセント1割の3色に収める

つね-MukuTree

【富山の論理派デザインオタク】Webデザインとサラダボウル屋経営のダブルワーカー | 大学在学中にWebデザインと出会う→個人でお仕事をするようになる→大学卒業と同時にフリーランス | 成長を大事に日々お仕事をしています | フリーランス歴2年目、Webデザイン歴4年目 | Webデザイン・グラフィックデザイン・Webマーケティング・ウェブ解析 | お仕事のご依頼はお問い合わせから

お問い合わせはこちらから

-デザイン