配色の基本｜色の三属性とトーンで印象を決める手順

色を選ぶたびに手が止まる。なんとなく選んで、なんとなく違う。そんな状態になっていませんか？

実は、配色で迷う原因はほとんど1つです。色を「1色まるごと」で見ているから、直し方が分からなくなります。
色は3つの数字に分解できます。色相・明度・彩度、この3つです。分解できると「もう少し落ち着かせたい」が「彩度を下げる」に翻訳できて、手が動くようになります。
このレッスンでは、三属性とトーンの読み方、そして色の配分の決め方まで進みます。最後に同じバナーの色を変えて印象を比べる課題を用意しました。

色彩と配色は別のもの

まず言葉を整理します。色彩は色そのものの性質を指す言葉です。赤い、明るい、くすんでいる、といった1色の話をするときに使います。
これに対して配色は、2色以上を組み合わせたときの関係の話です。同じ赤でも、隣に白を置くか黒を置くかで見え方が変わります。

デザインで悩むのは、たいてい配色のほうです。1色だけ見て「いい色」を探しても答えは出ません。組み合わせたときにどう見えるかで決まるからです。
まずは1色を分解するところから始めます。

色の三属性：色相・明度・彩度

どんな色も、3つの数字で言い表せます。この3つを色の三属性と呼びます。

色相（しきそう）：色みの違い

赤・橙・黄・緑・青・紫といった、色そのものの種類です。これを輪の形に並べたものが色相環です。
色相が変わると、伝わる意味が変わります。青は落ち着き、赤は熱、緑は安心。業種のイメージと合わせるときに、まず動かすのが色相です。

明度（めいど）：明るさ

白に近いか、黒に近いかです。明度がいちばん強く効くのは読みやすさです。
文字と背景の明度が近いと、色相をどう変えても読めません。薄いグレーの背景に白い文字、これが読めない典型です。
迷ったら、作った画面を白黒表示にしてみてください。白黒で文字が読めなければ、色をつけても読めません。

彩度（さいど）：鮮やかさ

色の濃さ、鮮やかさです。彩度が高いほど元気で目立ち、低いほど落ち着いて上品に見えます。
初心者の作品が派手に見えるのは、ほぼここが原因です。
たとえば無印良品の店内やサイトは、彩度の低い色だけでまとまっています。同じ茶色でも、彩度を上げるとチラシの色に近づきます。
彩度を1段下げるだけで、急に大人っぽくなりますよ💡

3つのうち、初心者がまず覚えるのは明度と彩度です。色相を変えると別のデザインになりますが、明度と彩度は同じ色相のまま印象だけを調整できます。色相で方向を決めて、明度と彩度で強さを決めると考えてください。

トーン：明度と彩度をセットで扱う

明度と彩度を別々に調整するのは大変です。そこで、この2つを組み合わせた「色の調子」をまとめてトーンと呼びます。
ペールトーン、ビビッドトーン、ダークトーンといった言葉を見たことがあるかもしれません。あれは明度と彩度の組み合わせに名前をつけたものです。

トーンの例	明度と彩度	伝わる印象
ビビッド	彩度が最も高い	元気・目立つ・子ども向け
ペール	明度が高く彩度が低い	やさしい・清潔・淡い
ライトグレイッシュ	明度が高めで彩度がかなり低い	落ち着き・上品・ナチュラル
ダーク	明度が低い	重厚・高級・大人

トーンを覚える利点は、色相が違ってもトーンを揃えれば馴染むことです。
ピンクと水色と黄色。バラバラの色相でも、全部をペールトーンで揃えると1つの作品としてまとまります。逆に、ビビッドな赤とくすんだ青を並べると、どちらが主役か分からなくなります。

色選びで迷ったら「どの色にしよう」ではなく「どのトーンで揃えよう」と考えてください。決める対象が1つに減ります。

チントとシェード

トーンを自分で作るときに使う言葉が2つあります。

この2つを知っていると、色を増やさずにバリエーションを作れます。
たとえばブランドカラーが1色しかない場合。そのチントを背景に、シェードを文字に使えば、全体が同じ色みでまとまったまま濃淡の差がつきます。色数を増やすより、まずチントとシェードで足りないか考えてみてください。

ミニ確認（1分）
お気に入りのブランドサイトを1つ開いて、使われている色を数えてみてください。ほとんどのサイトが3〜4色に収まっています。色数が少ないほど、覚えてもらいやすくなります。

配分を決める：70対25対5

どの色を使うかと同じくらい大事なのが、どれをどれだけ使うかです。同じ3色でも、面積の配分で仕上がりが変わります。

Amazonの商品ページを思い出してください。背景は白、文字は黒、そして「カートに入れる」のボタンだけが黄色です。
色の数も面積も絞ったうえで、押してほしい1か所にだけ別の色を置く。これが70対25対5の形です。

失敗の多くは、アクセントを使いすぎることで起きます。目立たせたい要素が5つあってアクセント色を5か所に置くと、どこも目立たなくなります。
アクセントは1画面に1か所。この制限を守るだけで、目線が行ってほしい場所へ行きます。

色数は3色までに絞ってください。足りないと感じたら、4色目を足す前にチントとシェードで濃淡を作ります。ほとんどの場合はそれで足ります◎

ミニ実践：三属性を変えて印象を比べる

三属性は、読むだけでは身につきません。同じデザインの色だけを変えて、自分の目で差を確かめます。所要時間は20分ほど、無料のCanvaで大丈夫です。

1. 正方形のバナーを1枚作ります。要素は「見出し・短い説明文・ボタン」の3つだけ。文字の内容は何でも構いません
2. ベース70%・メイン25%・アクセント5%の配分で色を置きます。まずは青系で作ってみてください
3. できたら3枚コピーします。ここから1枚ずつ、変える属性を1つに限定します
4. 1枚目は色相だけ変えます。青→オレンジへ。明るさと鮮やかさはそのままにします
5. 2枚目は明度だけ下げます。同じ青のまま暗くします
6. 3枚目は彩度だけ下げます。同じ青のままくすませます
7. 4枚を並べて、それぞれの印象を一言で書きます。「元気」「高級そう」「地味」など、思ったままで構いません

ポイントは、1枚につき動かす属性を1つだけにすることです。2つ同時に動かすと、どちらが効いたのか分からなくなります。
やってみると、彩度を下げた1枚がいちばん「仕事っぽく」見えるはずです。この感覚が、次からの色選びの基準になります。

仕上がりを次のチェックリストで確認してください。

やってしまいがちな失敗

色で情報を区別しようとする

項目ごとに色を変えると、色数が増えて全部が主張します。
直し方は、区別を位置と余白でやります。グループを離して置けば、色を変えなくても別のまとまりだと伝わります。

ツールの初期パレットをそのまま使う

初期の色は彩度が高めです。並べると全部がうるさく見えます。
直し方は、選んだ色の彩度を1〜2段下げます。カラーピッカー（色を選ぶ四角い画面）で、点を左へ動かすと彩度が下がります。それだけで落ち着きます。

明度差を確認しないまま文字を置く

色相の違う2色は、目には違って見えても明度が近いことがあります。すると文字が背景に沈みます。
直し方は、画面を白黒にして読めるか見ます。読めなければ、文字を白か濃い色に振り切ってください。

トーンがそろっていない

くすんだベージュの背景に、ビビッドな赤いボタン。ボタンだけ別の作品のように浮きます。
直し方は、浮いている色のトーンを他に合わせます。アクセントとして意図的に浮かせる場合を除いて、トーンは揃えるほうが安全です。

よくある質問

配色は何色まで使っていいですか？

3色までを基本にしてください。ベース・メイン・アクセントの3つです。
白と黒（文字色）は色数に数えなくて大丈夫です。バリエーションがほしくなったら、4色目を足すのではなく、いま使っている色のチントとシェードで濃淡を作ります。色数が増えるほど、まとめるのが難しくなります。

色相・明度・彩度のどれから直せばいいですか？

「派手」「うるさい」と感じたら彩度、「読みにくい」と感じたら明度、「イメージが違う」と感じたら色相です。
悩みの言葉と直す属性が対応しています。まず自分が何に困っているかを一言にすると、動かす場所が決まります。

トーンを揃えると地味になりませんか？

全体をトーンで揃えたうえで、アクセントの5%だけトーンを外します。ここに彩度の高い色を1か所だけ置くと、地味にならずにメリハリが出ます。
やってはいけないのは、あちこちでトーンを外すことです。外す場所が2か所を超えると、揃えた意味がなくなります。

好きな色と、そのデザインに合う色が違うときはどうしますか？

合う色を優先します。色は自分の好みを表すためではなく、見る人に意味を伝えるために選ぶからです。
ただ、好きな色を捨てる必要もありません。アクセントの5%として使えば、伝わり方を壊さずに自分の色を残せます。

次に学ぶこと

このレッスンの要点です。

• 色は3つに分解できる。色相（色み）・明度（明るさ）・彩度（鮮やかさ）
• 色相で方向を決めて、明度と彩度で強さを決める
• 明度と彩度をまとめたものがトーン。トーンを揃えると色相が違っても馴染む
• チントは白を混ぜた色、シェードは黒を混ぜた色。色数を増やさず濃淡を作れる
• 配分は70対25対5。アクセントは1画面に1か所

次は、色と色の組み合わせ方に進みます。補色と配色の型で、色相環のどこから選べば合うのかを型で覚えられます。
作品全体の雰囲気を揃える話はトンマナで扱います。色をツール上で指定する方法はカラーコードの仕組みをどうぞ。

ほかのレッスンはデザインの基本コース目次から選べます。