なりせなるてず

技術ブログにしたい

料理を美味しく見せるためのCSSフィルター

CSSフィルターって名前だけは聞いたことあったんですが、こんなに色々出来るんですね。。

・グレースケール
・セピア
・色相
・明度
・彩度
・透明度
・階調の反転
コントラスト
・ドロップシャドウ
・ぼかし

CSSさんナメてましたごめんなさい。

CSS3のフィルター効果をまとめた | おぼめも
上記URLでとっても素晴らしい効果の数々を確認出来ます。綺麗なサイトですなぁ。

料理を美味しく見せるには

暖色系を使う

図る〜色と食欲の関係
人間には暖色系の色(赤とかオレンジ)を使うと食べ物がより美味しく見えるようです。

入った瞬間に売れなそうな店だなー、とか美味しくないのでは・・・と思う店ってあるんですが、そういうとこって大体青白系の蛍光灯を使ってるんですね。
よく中華料理屋とかラーメン屋とかで見かけます。

記憶色に近づける

用語解説辞典 | NTTPCコミュニケーションズ
人間は目で見たものを記憶するとき、より鮮やかな色として記憶するそうです。
つまり実際の色と同じ色の写真を見せるより、鮮やかな色にすることで記憶色に近い写真になるといえます。

CSSフィルター

元の写真。僕がどこかのラーメン屋でiPhone5Sで撮りました。
f:id:ichiy:20140618163321p:plain
これだけでもラーメン好きの僕としてはかなり来るんですが、もっと美味しそうに見せられます。

明るさを足す

f:id:ichiy:20140618163548p:plain
店内は大抵暗くて明るさも足りないので、明るくします。

CSS

img {
  -webkit-filter: brightness(1.2);
  -moz-filter: brightness(1.2);
  -o-filter: brightness(1.2);
  -ms-filter: brightness(1.2);
  filter: brightness(1.2);
}
彩度を足す

f:id:ichiy:20140618163917p:plain
記憶色に近づけるため鮮やかな色合いにします

CSS

img {
  -webkit-filter: brightness(1.2) saturate(150%);
  -moz-filter: brightness(1.2) saturate(150%);
  -o-filter: brightness(1.2) saturate(150%);
  -ms-filter: brightness(1.2) saturate(150%);
  filter: brightness(1.2) saturate(150%);
}

ぐっと美味しそうになりましたね


暖色系にする

f:id:ichiy:20140618164135p:plain
色相を弄って暖色系にします。

CSS

img {
  -webkit-filter: brightness(1.2) saturate(150%) hue-rotate(-10deg);
  -moz-filter: brightness(1.2) saturate(150%) hue-rotate(-10deg);
  -o-filter: brightness(1.2) saturate(150%) hue-rotate(-10deg);
  -ms-filter: brightness(1.2) saturate(150%) hue-rotate(-10deg);
  filter: brightness(1.2) saturate(150%) hue-rotate(-10deg);
}

このhue-rotateってパラメータをどんどん弄ってくと、逆に青系とかの色にも出来るのでまずそうな写真にも出来ます。


元画像と比較

f:id:ichiy:20140618164423p:plain
全然印象が違いますね!
個人差はあると思いますが僕は圧倒的に右の方が美味しそうに見えます。
てかラーメン食いたくなった!クソ!

各パラメータは画像によって調整が必要ですが、今あげた3つのフィルターをかけるだけでも結構効果が見込めますね。


まとめ

料理の写真を多く扱うサービスを運営してて、ユーザーが投稿したクオリティの低い写真をどうにか美味しそうに見せられないかと調査したときのメモなのですが、CSSフィルターの本気に驚きました。

色味が違うだけでここまで印象に差があるので、料理じゃない写真にもどんどん使っていこうと思います。
お肉屋さんが、肉を赤く見せるために謎の液体を付ける理由も理解できます(遠目)

色々書きましたが、僕はエンジニアなので色彩のこととかよく分かりません。
本当にクオリティの高い修正をしようと思ったらPhotoShopを扱えるデザイナーさんに頼むのがいいと思います。