暖色と寒色の使い分け方｜見分け方と印象を決める配色の手順

「あたたかい感じにして」「もっと涼しげに」。この指示、何をどう変えればいいか分かりますか？

答えは色相です。暖色に寄せるか、寒色に寄せるか。ここを動かすだけで、同じレイアウトのまま印象が変わります。
このレッスンでは、暖色と寒色の見分け方から始めて、それぞれが伝える印象、大きさの見え方の違い、そして色彩心理をどこまで信じていいかまで扱います。
最後は同じバナーを暖色版と寒色版で作り分ける課題です。自分の手で並べると、違いが体で分かります◎

暖色と寒色の分かれ目

暖色は赤・橙・黄。火や太陽の色から来た呼び名です。寒色は青・青緑・青紫。水や氷の色から来ています。

色相環を縦にまっすぐ割ると、右半分が暖色、左半分が寒色です。境目にいる緑と紫は中性色と呼びます。どちらにも寄れる色で、隣に置く色しだいで暖かくも涼しくも見えます。

分類	入る色	覚え方
暖色	赤・赤橙・橙・黄橙・黄	火と太陽の色
中性色	黄緑・緑・紫・赤紫	どちらにも寄れる色
寒色	青緑・青・青紫	水と氷の色
無彩色	白・グレー・黒	色みがないので分類の外

迷ったときの見分け方は1つ。その色に黄色が混ざっていれば暖色、青が混ざっていれば寒色です。ピンクは赤に白なので暖色、水色は青に白なので寒色になります。

同じ「緑」でも、黄色寄りの黄緑は暖かく、青寄りの青緑は涼しく見えます。色相そのものの考え方は配色の基本で扱っています。

暖色が伝えるもの

暖色は近づける色です。元気・親しみ・食欲・お得感。人の気持ちを前に出したいときに使います。

飲食のチラシに暖色が多いのは、食材の色そのものが暖色だからです。トマトの赤、パンの焼き色、卵の黄。背景も暖色にすると馴染みます。
マクドナルドの看板が赤と黄でできているのも同じ理由です。遠くからでも目に入って、しかも食べ物の色と揃っています。

気をつけたいのは、暖色は使いすぎると落ち着かなくなるところです。文章が長いページの全面を赤にすると、最後まで読んでもらえません。

寒色が伝えるもの

寒色は引く色です。落ち着き・清潔・信頼・涼しさ。相手に考えてもらいたいとき、安心してもらいたいときに使います。

企業サイトに青が多いのは、信頼と清潔を同時に伝えられるからです。銀行と病院のサイトを3つずつ開いてみてください。ほとんどが青系のはずです。

弱点は、寒色だけだと冷たく感じることです。人に寄り添う雰囲気を出したいのに全部青にすると、事務的に見えます。
直し方は、アクセントの5%だけ暖色を入れること。青ベースのページで申し込みボタンだけ橙にすると、落ち着きと押しやすさが両立します。

大きさと距離の見え方が変わる

暖色と寒色は、印象だけでなく見た目のサイズと距離も変えます。

	暖色	寒色
距離の見え方	手前に出て見える（進出色）	奥に引いて見える（後退色）
大きさの見え方	大きく見える（膨張色）	小さく見える（収縮色）
使いどころ	主役、ボタン、価格	背景、余白、脇役

同じ直径の丸を赤と青で並べると、赤のほうが大きく見えます。実際のサイズは同じです。
背景を寒色、主役を暖色にすると、大きさを変えなくても主役が前に出ます。

背景に暖色、主役に寒色を置くと、主役が奥に沈みます。目立たせたい要素が沈んでいると感じたら、色相の前後関係を疑ってください。

色彩心理学はどこまで信じるか

色彩心理学は、色が人の気持ちや行動に与える影響を調べる分野です。「赤は食欲を増す」「青は集中を助ける」といった話の出どころがここです。

実務で使うときは、3つ押さえておくと外しません。

1. 意味は文脈で変わる：赤はセールの色でもあり、エラーの色でもあり、祝いの色でもあります。同じ赤が場面ごとに違う意味になります
2. 業界の常識が優先する：銀行が赤基調だと不安に見えます。理論より、その業界で見慣れた色が強く働きます
3. 色だけで決まらない：形・写真・言葉と合わさって印象ができます。色を変えるだけで売上が上がる、とは考えないでください

色彩心理は根拠ではなく、最初の一手を選ぶための目安です。暖色か寒色かで当たりをつけて、あとは実物を並べて選びます。

どちらに寄せるかの決め方

判断は3ステップで足ります。順番に答えていくと、色相の方向が決まります。

決まらないときは寒色から始めてください。落ち着いた失敗は目立ちません。

ミニ実践：同じバナーを暖色版と寒色版で作る

違いは並べると一目で分かります。同じ内容のバナーを2枚作ります。所要時間は20分ほど、無料のCanvaで足ります。

1. お題を1つ決めます。「夏のオンライン講座 受付開始」のように、暖色でも寒色でも成立するものを選びます
2. Canvaで正方形のバナーを1枚作ります。要素は見出し・日付・ボタンの3つだけです
3. 1枚目を寒色で作ります。背景を青系、文字を白、ボタンを濃い青にします
4. そのバナーを複製します。レイアウトは1mmも動かしません
5. 複製したほうの色だけを暖色に変えます。背景を橙系、文字を白、ボタンを濃い赤にします
6. 2枚を左右に並べて、スマホの画面で見ます。実際に見るサイズで確かめるためです
7. 受ける印象の違いを言葉で3つ書き出します。「急かされる」「落ち着く」など、思ったままで構いません
8. お題に合うのはどちらか決めて、理由も1行書いておきます

4番の「レイアウトを動かさない」を守ってください。配置も一緒に変えると、色の効果だけを見られなくなります💡

できたら次のチェックリストで確認してください。

やってしまいがちな失敗

暖色と寒色を半分ずつ使う

赤と青を同じ面積で置くと、両方が主張して主役が決まりません。
直し方は、どちらかをベースに決めて、もう片方をアクセントの5%だけに絞ることです。7割を占める色が、その作品の性格になります。

印象を色だけで作ろうとする

「あたたかい感じ」を色相だけで出そうとして、赤を強くしていく失敗です。彩度が上がるほど、あたたかさより騒がしさが出ます。
直し方は、色相・明度・彩度の3つを一緒に動かすことです。あたたかさなら、色相を橙寄りにして、明度を上げて、彩度は少し下げます。

写真と背景の温度がずれる

青っぽい写真の上に橙の見出しを置くと、写真だけ浮きます。
直し方は、写真側の色温度（写真全体が青寄りか橙寄りかの度合い）を調整することです。Canvaやスマホの編集で「暖かさ」のスライダーを動かせば数秒で寄せられます。背景の色に写真を合わせるほうが、直しが早く終わります。

よくある質問

暖色と寒色の違いは何ですか？

色相の位置が違います。赤・橙・黄が暖色、青緑・青・青紫が寒色です。境目にある緑と紫は中性色と呼び、どちらにも寄れます。
見た目の働きも逆です。暖色は手前に出て大きく見え、寒色は奥に引いて小さく見えます。
白・グレー・黒には色みがないので、暖色にも寒色にも入りません。無彩色として別扱いにします。

暖色と寒色の効果の違いは何ですか？

暖色は気持ちを前に出します。元気・親しみ・食欲・お得感が伝わるので、セール告知や飲食の広告に向きます。
寒色は気持ちを落ち着かせます。信頼・清潔・涼しさが伝わるので、企業サイトや医療、金融に向きます。
ただし色だけで結果は決まりません。写真や言葉と合わさって印象ができるので、色は最初の一手を選ぶ目安として使ってください。

グレーは寒色ですか？暖色ですか？

どちらでもありません。グレーは白と黒だけでできた無彩色で、色みを持たないからです。白と黒も同じ扱いです。
ただし実務では、わずかに色みを足したグレーをよく使います。青を少し混ぜた寒色系のグレーはすっきり見え、黄や赤を少し混ぜた暖色系のグレーは柔らかく見えます。
作品全体が暖色なら暖かいグレー、寒色なら冷たいグレーを合わせると馴染みます。純粋な無彩色のグレーだけだと、浮いて見えることがあります。

寒色と暖色の見分け方は？

その色に黄色が混ざっていれば暖色、青が混ざっていれば寒色です。この1点で判断できます。
迷いやすいのはピンクと緑です。ピンクは赤に白を足した色なので暖色。緑は中性色ですが、黄緑寄りなら暖かく、青緑寄りなら涼しく見えます。
ツールで確かめるなら、カラーピッカーで色相の角度を見てください。0度から60度あたりが暖色、180度から270度あたりが寒色です。

次に学ぶこと

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

• 暖色は赤・橙・黄、寒色は青緑・青・青紫。緑と紫は中性色
• 黄が混ざれば暖色、青が混ざれば寒色。この1点で見分けられる
• 暖色は手前に出て大きく見え、寒色は奥に引いて小さく見える
• 色彩心理は根拠ではなく、最初の一手を選ぶ目安
• どちらかをベースに決めて、反対側はアクセントの5%に絞る

寄せる方向が決まったら、次は使う色を実際に選ぶ段階です。カラーパレットの作り方で、ベース・メイン・アクセントの3色を決めて保存するところまで扱います。
2色以上をどう組み合わせるかは補色と配色の型、色を段階的につなぐ方法はグラデーションの使い方にあります。

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