STEP 1
色の3属性とトーン
色は色相(いろあい)・彩度(あざやかさ)・明度(あかるさ)の3つで決まります。 この彩度と明度の組み合わせが「トーン(調子)」。配色は「トーンをそろえる」とまとまります。
色相 H205°
彩度 S80%
明度 L50%
このトーンビビッドトーン
色相環
STEP 2
配色パターンを作る
色相環の「どの位置の色を組むか」で配色は決まります。基準色を選んで、 配色タイプを切り替えてみましょう。困ったら同系色かモノトーンが失敗しにくい鉄板です。
基準の色相210°
STEP 3
同じデザインに配色を当てはめる
レイアウトが同じでも、配色で印象はガラッと変わります。 下のパレットを切り替えて、チラシの雰囲気がどう変わるか見くらべましょう。
ART FES 2026
学生作品展
7月3日(金)〜5日(日)
東美ギャラリー 1F
配色の黄金比は 70 : 25 : 5。ベースカラー(背景)70%・メインカラー25%・アクセントカラー5%。
アクセントは少しだけ使うから効きます。色は3色以内にしぼると、ぐっとまとまります。
STEP 4
コントラスト(読みやすさ)をチェック
おしゃれでも読めなければ意味がありません。文字色と背景色の明暗の差(コントラスト比)が 足りないと、薄くて読みにくい配色に。下で2色を選んで、読みやすさを判定しましょう。
見出しテキスト
これは本文のサンプルです。小さい文字ほど高いコントラストが必要になります。
文字色
背景色
コントラスト比—
目安:本文は 4.5:1 以上、大きな見出しは 3:1 以上(Webアクセシビリティ基準 WCAG AA)。
薄いグレーの文字や淡い背景に淡い文字は読みにくくなりがち。迷ったらコントラストは強めに。
PLUS
配色が上手になるコツ
1. 色は3色まで
ベース・メイン・アクセントの3色に絞る。色を増やすほど散らかります。迷ったら減らす。
2. トーンをそろえる
「淡い色どうし」「濃い色どうし」でまとめると一気に統一感。ビビッドと淡色を混ぜると浮きます。
3. アクセントは少しだけ
差し色は全体の5%程度。少ないからこそ目を引きます。使いすぎると効果が消えます。
4. 困ったら色相環
同系色(となり)=やさしい / 補色(反対)=目立つ。色選びに迷ったら環の位置で考える。
配色タイプ早見表
| 配色タイプ | 色相環での位置 | 印象・使いどころ |
|---|---|---|
| モノトーン(単色) | 同じ色相で明度差 | 上品・落ち着き。失敗しにくい鉄板 |
| 類似色(同系) | となり合う色(±30°) | やさしい・なじむ・まとまる |
| 補色(反対) | 正反対(180°) | 目立つ・元気。アクセントに最適 |
| トライアド | 正三角形(120°ずつ) | カラフル・にぎやか・バランス良 |
| 分裂補色 | 補色の両どなり | 補色よりやわらかく目立つ |
配色の合言葉:
① 色は3色まで
② トーンをそろえる
③ アクセントは少しだけ(70:25:5)
④ 読みやすさ(コントラスト)を最後に確認