進出色・後退色とは?色が生み出す奥行きの錯覚をデザインに活かす方法

同じ位置・同じ大きさの図形でも、色を変えるだけで「手前にある」ように見えたり「奥にある」ように見えたりすることがあります。

これは色が持つ錯覚のひとつで、デザインの現場でもよく利用されています。

この記事では、進出色・後退色とは何か、そしてこの錯覚をボタンや要素を目立たせる工夫にどう活かせるかを、初心者向けに解説します。

基本の理解

まずは進出色・後退色がそれぞれどんな色で、なぜそう見えるのかを押さえましょう。

進出色・後退色とは何か

暖色(赤・オレンジ・黄色など、火や太陽を連想させて暖かさを感じさせる色)や、明度の高い(明るい)色は、実際の位置より手前に飛び出して見えます。

これを「進出色」と呼びます。

反対に、寒色(青・青緑など、水や空を連想させて涼しさを感じさせる色)や、明度の低い(暗い)色は、実際の位置より奥に引っ込んで見えます。これを「後退色」と呼びます。

同じ平面上に置かれた同じ大きさの図形でも、色によって距離感が違って見える、色の錯覚の一種です。

ここで出てくる「明度」とは、色の「明るさの度合い」のことです。

たとえば同じ赤でも、白を混ぜた明るい赤は明度が高く、黒を混ぜた暗い赤は明度が低い色です。

明度は、鮮やかさを表す「彩度」とは別の性質なので注意しましょう(違いは鮮やかな色・くすんだ色の印象の違いとは?、明度の印象については明るい色・暗い色の印象の違いとは?で解説しています)。

実際に、同じ大きさの四角を並べてみましょう。

左の暖色のほうが、右の寒色より少し手前に浮き出て見えるのではないでしょうか。

どちらも同じ大きさ・同じ高さ。左:進出色(オレンジ #f76707)/右:後退色(紺 #1c4e80)

感じ方には個人差があり、効果もそれほど強いものではありません。

ただ、デザインで「どの要素を手前に見せたいか」を考えるときのヒントとして役立ちます。

「距離」の錯覚と「大きさ」の錯覚は別もの

進出色・後退色とよくセットで語られるのが、「膨張色・収縮色」という別の錯覚です。

この2つは混同されやすいので、整理しておきましょう。

錯覚の種類	呼び方	どう見えるか	主に影響する性質
距離(奥行き)の錯覚	進出色・後退色	手前に飛び出して見える/奥に引っ込んで見える	色相(暖色か寒色か)と明度
大きさ(面積)の錯覚	膨張色・収縮色	実際より大きく見える/小さく見える	主に明度(明るい色ほど大きく見える)

「明るい暖色」はどちらの性質も持つため、手前に見えつつ大きくも見えます。

そのため同じ話として語られがちですが、距離の錯覚と大きさの錯覚は、それぞれ別の効果です。

大きさの錯覚は明度の影響が大きく、たとえば次の2つの四角は同じ大きさですが、黒地に置いた白い四角のほうが少し大きく見えます。

どちらも同じ80px四方。黒地に白(膨張して見える)/白地に黒(収縮して見える)

これらの性質を利用すれば、色の選び方だけで、平面のデザインに奥行きや遠近感を演出したり、要素の見た目の大きさを調整したりできます。

なぜこの効果を意識する必要があるのか

同じ大きさ・同じ配置の要素でも、色によって「手前にあるように感じる」「奥にあるように感じる」という印象が変わります。

そのため、レイアウト上で本当に手前に見せたい要素と、実際に割り当てる色を一致させる必要があります。

特に、目立たせたい要素を進出色にすることで、ユーザーの視線を自然に集めることができます。

たとえば安全標識や警告表示に、進出色である赤やオレンジがよく使われているのも、注意を引きたいという目的に合っているためです。

実践のポイント

進出色・後退色を実際に使うときのコツと、注意しておきたい点を紹介します。

注意点・よくある間違い

進出色・後退色の効果を意識せずに配色すると、本来手前に見せたい要素が背景の色に負けてしまい、かえって目立たなくなることがあります。たとえば重要なボタンに後退色を使い、背景に進出色を使ってしまうと、ボタンが背景に埋もれて見えてしまいます(下の比較を参照)。
進出色ばかりを画面内で多用すると、すべての要素が手前に主張し合ってしまい、かえって情報の優先順位が伝わりにくくなります。目立たせたい要素を絞り込み、それ以外は後退色でまとめることが大切です。

具体的な配色で比べてみましょう。NGの例は背景が鮮やかなオレンジ(進出色)で、ボタンがくすんだ青(後退色)、OKの例は背景が淡い水色〜グレー(後退色)で、ボタンがオレンジ(進出色)です。

無料体験はこちら

申し込む

NG:背景が主張してボタンが沈んで見える

無料体験はこちら

申し込む

OK:ボタンが背景から浮き出て見える

なお、ボタンが目立つかどうかには、進出色・後退色だけでなく、背景との明るさの差(コントラスト)も大きく影響します。

NGの例は色みだけでなく背景とボタンの明るさの差も小さいため、より埋もれて見えています。

コントラストについてはコントラスト比とは?WCAGの基準をやさしく解説で解説しています。

進出色と後退色のバランスの目安

「進出色が目立つなら、全部進出色にすればいいのでは?」と思うかもしれませんが、全部が目立とうとすると、結局どれも目立たなくなります。

バランスの目安として役立つのが、配色の基本比率「ベースカラー70%・メインカラー25%・アクセントカラー5%」です。

画面の大部分(ベース)は落ち着いた後退色や無彩色にして、一番目立たせたいワンポイント(アクセント)だけに進出色を使うと、自然に視線を誘導できます。

比率の考え方は色の割合とは?配色の黄金比率70:25:5を初心者向けに解説、各色の役割はベースカラー・メインカラー・アクセントカラーとは?で詳しく解説しています。

よくある質問

Q. 「購入する」「問い合わせる」など、一番押してほしいボタンを目立たせたいときはどうすればいい?
A. このような、ユーザーに押してほしい一番大事なボタンを「CTAボタン」(Call To Action=行動を促すボタン)と呼びます。ボタンには進出色(暖色・明るい色)を使い、背景には後退色(寒色・暗い色)や落ち着いた無彩色を使うと、ボタンが手前に浮き立って見え、目立たせやすくなります。あわせて、ボタンの文字色とボタン色の明るさの差も十分に取りましょう。
Q. 画面を広く見せたいときはどんな色を使えばいい?
A. 背景に後退色(寒色系)を使うと、実際より奥行きを感じさせられるため、狭い空間や画面を広く見せたい場合に有効です。
Q. 進出色なら必ず大きく見えるの?
A. 必ずではありません。手前に見える(進出)効果と大きく見える(膨張)効果は別もので、大きさの見え方は主に明度で決まります。たとえば暗い赤は暖色ですが、明度が低いため膨張して見える効果は弱くなります。