色の面積による見え方とは?面積効果をデザインに活かす方法を解説

カラーパレットの小さな見本で選んだ色を、実際に画面いっぱいに使ってみたら、思っていたより派手だった、という経験はないでしょうか。これは「面積効果」と呼ばれる、色の見え方の性質によるものです。

この記事では、色の面積による見え方(面積効果)とは何か、そしてこれをデザインにどう活かせばよいのかを、初心者向けに解説します。

基本の理解

まずは面積効果がどんな現象で、なぜ起こるのかを押さえましょう。

色の面積による見え方とは何か

色の面積による見え方とは、同じ色でも、使用する面積の大きさによって明度・彩度の見え方が変わる現象のことです。「面積効果」とも呼ばれます。

ここでいう明度は「白っぽいか・黒っぽいか(明るさ)」、彩度は「原色のようにパキッと鮮やかか・グレーがかって落ち着いているか(鮮やかさ)」のことです(詳しくは明るい色・暗い色の印象の違いとは?、鮮やかな色・くすんだ色の印象の違いとは?で解説しています)。

面積効果には、次のような性質があります。

明るい色は、面積が大きくなるほどより明るく見える
鮮やかな色は、面積が大きくなるほどより鮮やかに(派手に)見える
暗い色は、面積が大きくなるほどより暗く(重く)見える

「広がると薄まって見えそう」と感じるかもしれませんが、実際は逆で、色の性質がより強調されて見えるのがポイントです。日常生活でも、次のような経験がよくあります。

明るい色の例:部屋の壁紙を、小さなサンプル帳で「優しい薄い黄色」だと思って選んだら、部屋全体に貼ってみると「眩しいくらいの黄色」に感じた
暗い色の例:スーツの生地見本で「シックなネイビー」を選んだら、仕立てたジャケットを着てみると「ほぼ黒に見えるほど重たい」印象になった

同じ色を、小さな色見本と大きな面で並べてみましょう。右側の大きな面のほうが、黄色はより明るく鮮やかに、紺色はより暗く重たく感じられるはずです。

左右とも、小さな見本と大きな面はまったく同じ色(黄 #f5d76e/紺 #2c3e66)

この効果を理解しておくと、小さな色見本(デザインツールでは「スウォッチ」とも呼ばれる、小さな色のサンプル)で選んだ色と、実際に大きく使ったときの見え方のギャップに気づけるようになります。逆に、この性質を意図的に利用して面積を調整すれば、狙った通りの明るさ・派手さの印象に仕上げることもできます。

面積効果をどう考慮するか

配色を考える際は、色そのものの組み合わせだけでなく、「どのくらいの面積で使うか」まで含めて検討する必要があります。小さいサンプルだけで判断すると、実際の仕上がりとズレが生じやすいためです。

実践では、Webデザインの背景色を決める際、小さいカラーパレット上の見え方だけで判断せず、実際に画面いっぱいに表示させて確認することが大切です。

反対に、目立たせたいアクセントカラー(ボタンや強調部分など、注目してほしい箇所に少量だけ使う色)は、面積を小さく絞るのが基本です。赤や鮮やかなオレンジのような派手な色は、画面全体に使うと目が疲れてしまいますが、購入ボタンのような「一番押してほしい小さな部分」だけに絞って使えば、小さな面積でもしっかり目立ち、画面全体のバランスも崩れません。

購入する

左:鮮やかなオレンジを背景全体に使った例(派手すぎて目が疲れる)/右:オレンジはボタンだけに絞った例(小さくても目立つ)

アクセントカラーをどのくらいの面積に絞るかは、色の割合とは?配色の黄金比率70:25:5を初心者向けに解説も参考にしてください。

なお、色の見え方を変えるのは面積だけではありません。同じ色でも、白い背景の上に置くか黒い背景の上に置くかによって、明るさや鮮やかさが違って見える「対比効果」という現象もあります(詳しくは背景色による色の見え方とは?で解説しています)。だからこそ、色を単体で判断するのではなく、実際の画面と同じ背景・同じ大きさで並べて確認することが大切です。

実践のポイント

面積効果を踏まえた作業の注意点と、よくある疑問をまとめます。

注意点・よくある間違い

パソコンの小さなカラーパレット上で選んだ色を、そのまま大きな背景に使うと、想像していたより派手・重い印象になることがあります。可能な限り、実際の使用サイズに近い状態で確認しましょう。
面積効果を知らずに色を決めてしまい、完成後に「思っていた色と違う」と感じることがあります。特に彩度の高い(鮮やかな)色や、明度が極端に高い・低い色ほど、この効果の影響を受けやすい点に注意しましょう。

よくある質問

Q. 面積効果を踏まえて色を選ぶコツは?
A. 広い面積(背景など)に使う色は、面積効果で強調される分をあらかじめ見越して、少し控えめに選んでおくのがコツです。
・明るい色・鮮やかな色:パレット上で理想と思った色より、少しだけ暗め・くすみ気味に選ぶ。多くのデザインツールのカラーピッカーなら、四角いエリアの中で少しだけ左下(グレー寄り・暗い方向)にずらすイメージです
・暗い色:大きく使うとさらに重く見えるため、少しだけ明るめ(カラーピッカーなら少し上方向)に選ぶ
選んだら、実際の画面サイズで表示して最終確認しましょう。
Q. 面積効果はどんな場面でも同じように起こる?
A. 傾向としては共通していますが、上で触れた対比効果のように、周囲の背景色や隣接する色によっても見え方が変わります。最終的には、実際に配置した状態で目視確認することが欠かせません。