日常に潜む配色の魔法 — コンビニの棚からUIまで
ハクア
イロハ
色彩理論 対話形式

日常に潜む配色の魔法 — コンビニの棚からUIまで

なぜコンビニの棚は目を引くのか。なぜあのアプリのUIは使いやすいのか。イロハがハクアに、日常に仕掛けられた配色の戦略を解き明かす。

配色色彩理論UI/UX日常デザイン知識と実践

日常に潜む配色の魔法

編集室のホワイトボードに、イロハがコンビニのお菓子の写真を貼っている。ハクアが不審そうに見ている。


コンビニの棚は色で戦っている

L-yard 編集室。イロハがお菓子のパッケージを並べている

ハクア
ハクア

イロハ、何してんの。仕事中にお菓子並べて。

イロハ
イロハ

観察です。ハクアちゃん、この棚を見てください。何か気づきませんか?

ハクア
ハクア

(じっと見る) ……赤いの多くない? ポテチも、チョコも、グミも。

イロハ
イロハ

正解。スナック菓子のパッケージの約60%に赤が使われています。なぜだと思いますか?

ハクア
ハクア

目立つから?

イロハ
イロハ

それも正しいですが、もう一段深い理由があります。赤は食欲を刺激する色です。生理学的に、赤を見ると心拍数が上がり、唾液の分泌が増える。

ハクアがポテチのパッケージを手に取る。

ハクア
ハクア

マジか。ボク、今まで無意識に赤に釣られてたの?

イロハ
イロハ

高い確率で、そうです。


3色ルール

イロハ
イロハ

優れたパッケージデザインには共通点があります。使う色は3色以内

ハクア
ハクア

3色? もっと使ってるように見えるけど。

イロハ
イロハ

(ホワイトボードに書く) 面積比で分けると見えてきます。

イロハが描いた円グラフ。

役割面積比例(コカ・コーラ)
ベースカラー70%
サブカラー25%
アクセントカラー5%黒(ロゴ)
イロハ
イロハ

コカ・コーラのパッケージを思い浮かべてください。赤が全体を覆い、白で文字、黒がロゴのアクセント。たった3色で、世界中の誰もが認識できるデザインが成立しています。

ハクア
ハクア

……シンプルなほうが強いってこと?

イロハ
イロハ

認知負荷が低いほうが記憶に残る、と言い換えるとハクアちゃん向きでしょうか。

ハクア
ハクア

(ちょっと悔しそうに) わかりやすい。


UIの色は「指示」である

ハクア
ハクア

じゃあさ、ボクが普段見てるWebサイトやアプリにも同じ原則があるの?

イロハ
イロハ

あります。むしろUIのほうが意図的です。コンビニの棚は偶然の積み重ねもありますが、UIの配色はすべてデザイナーの設計です。

ハクア
ハクア

例えば?

イロハ
イロハ

ハクアちゃん、GitHubの「Merge pull request」ボタンの色を覚えていますか?

ハクア
ハクア

……緑?

イロハ
イロハ

緑です。「進め」のサインです。では「Delete branch」ボタンは?

ハクア
ハクア

赤。あ、信号と同じだ。

イロハ
イロハ

そう。UIの色は行動の指示です。

UIでの意味
安全、実行、成功マージボタン、成功通知
危険、削除、エラー削除ボタン、エラーメッセージ
情報、リンク、中立リンク、情報バッジ
黄/橙警告、注意警告メッセージ
グレー無効、補助disabled状態のボタン
ハクア
ハクア

……ボク、毎日何百回もこの「色の指示」に従ってコード書いてるのに、意識したことなかった。

イロハ
イロハ

それが「良いデザイン」の証拠です。意識させずに導く。


ダークモードの配色は難しい

ハクア
ハクア

そういえばさ、ダークモードって色の扱い難しくない? ボクのターミナルの配色、何回変えても落ち着かないんだよね。

イロハ
イロハ

(目が輝く) いい質問です。ダークモードには、ライトモードにはない固有の課題があります。

ハクア
ハクア

固有の課題?

イロハ
イロハ

第一に、コントラスト比の罠。黒背景に白テキストはコントラスト比が最大ですが、長時間読むと目が疲れる。純黒(#000000)ではなく、ダークグレー(#1a1a2e)を使うのが正解です。

ハクア
ハクア

あー、確かにボクのターミナルの背景は純黒にしてる。

イロハ
イロハ

第二に、彩度の調整。ライトモードで美しい色は、ダークモードではまぶしすぎることがあります。彩度を10〜20%下げるか、明度を調整する必要がある。

ハクア
ハクア

つまり、ダークモードはライトモードの色を反転させるだけじゃダメ。

イロハ
イロハ

その通り。ダークモードは「新しい配色の設計」が必要です。


日常の解像度が上がる

ハクア
ハクア

(窓の外を見て) ……今さ、向かいのビルの看板が目に入ったんだけど、あれ、赤と黄色の組み合わせで——

イロハ
イロハ

マクドナルドですね。

ハクア
ハクア

暖色系で食欲を刺激してる。さっき聞いた話だ。やば、もう元に戻れない。

イロハ
イロハ

(静かに笑う) 世界が少し高解像度になったでしょう?

ハクア
ハクア

なんか、嫌だな。看板見るたびに「この色はこういう意図で——」って分析しちゃいそう。

イロハ
イロハ

大丈夫です。そのうち、意識しなくても良い配色と悪い配色が直感でわかるようになります。知識が感覚になる。それが「学びが実践に変わる」瞬間です。

ハクアが、自分のターミナルの配色設定を開く。

ハクア
ハクア

……ちょっと、背景色変えてみるわ。純黒やめて、ダークグレー試す。

イロハ
イロハ

いい判断です。


イロハの本棚

この記事で触れた書籍と、さらに深く知りたい人への推薦図書。

メイン書籍

『色彩論』 ヨハネス・イッテン(美術出版社、1971年)

イロハの一言: 「色の法則を知れば、日常のすべてがデザインの教材になります。」

関連書籍

  • 『ノンデザイナーズ・デザインブック』 Robin Williams — デザインの4原則を非デザイナー向けに解説
  • 『配色デザイン良質見本帳』 — 実践的な配色パターン集
  • 『日本の色辞典』 吉岡幸雄 — 日本の伝統色466色を染色で再現

あわせて読みたい

関連記事