写真サイトの場合
画像の色を綺麗に見せたいなら、背景は無彩色、またはそれに少しだけ色味が加わった色が良いです。
その他の色は対比現象(隣接した色の差が強調されて見える)を起こしやすく、画像の色が変化して見えてしまいます。
画像の周囲を後退色(寒色や暗い色)にすると周囲が下がって見える分、画像が前面に進出して見えて好ましいと言う人もいます。
では実例を見てみましょう。背景色の効果を強調するため切り抜き写真を使っています。
どのハンバーガーがおいしそうに見えますか？それぞれどんな味を連想しますか？
 | |
 | |
| |
lightsteelblue#b0c4de■
後退色を利用して写真を浮き立たせるには青っぽい灰色(上段左)が良いと述べましたが、食べ物の場合は工場で大量生産されて味気ないように感じてしまいます。
シャンパン#e9dacb■
オレンジっぽい灰色(上段左)は暖かみを感じます。ナチュラルテイスト、オーガニック素材を連想する人も多いでしょう。
black#000000■
黒(中段左)だと高級なこだわり素材を使用した肉が主体のハンバーガーというイメージを持つでしょう。
white#ffffff■
白(中段右)だと清潔感溢れる店内で調理された、カロリーオフでヘルシーなハンバーガーに見えます。
dodgerblue#1e90ff■
鮮やかな青(下段左)のように、食べ物の色としてあり得ない人工的な色は通常お勧めできません。ただし、他のサイトと差別化したり、斬新さを演出したいという目的なら良いかもしれません。
chartreuse#7fff00■
ビタミンカラーである鮮やかな黄緑(下段右)は野菜のフレッシュさをアピールできるかもしれません。しかしハンバーガーに隣接する所に使用すると、肝心のレタスの色がくすんで見えます。このような色はラインやアイコンなどのアクセントカラーとして少量を使用すると良いと思います。
『最適な配色は伝えたいイメージにより異なる』という事がご理解いただけたら幸いです。
余談ですが…
６つのハンバーガーは同じサイズ・同じ画像なのに、左の３つはわずかに大きく・挟まってるものが多く見えませんか？
背景色が収縮色である事とハンバーガーのバンズの傾きによる錯覚です。
人間の目は様々な錯覚を起こします。うまく利用できたら良いですね。
このページの配色
背景 □#e0e8ef
文字@ ■#556677 (■#777777)
ﾘﾝｸ･文字A■#3366cc
済 ■#9966cc
アクティブ■#66ff66
線 ■#ffffff(white)
文字に灰色を使うと背景の色との対比効果によりオレンジっぽく見えてしまいます。少し青みを加え、アルミフレームのような無機質な雰囲気を壊さないようにしました。文字@ ■#556677 (■#777777)
ﾘﾝｸ･文字A■#3366cc
済 ■#9966cc
アクティブ■#66ff66
線 ■#ffffff(white)
画像は全てデコヤ様よりお借りしました。
TOP≫SUB≫配色ポイント