料理を美味しく見せるためのCSSフィルター
CSSフィルターって名前だけは聞いたことあったんですが、こんなに色々出来るんですね。。
・グレースケール
・セピア
・色相
・明度
・彩度
・透明度
・階調の反転
・コントラスト
・ドロップシャドウ
・ぼかし
CSSさんナメてましたごめんなさい。
CSS3のフィルター効果をまとめた | おぼめも
上記URLでとっても素晴らしい効果の数々を確認出来ます。綺麗なサイトですなぁ。
料理を美味しく見せるには
暖色系を使う
図る〜色と食欲の関係
人間には暖色系の色（赤とかオレンジ）を使うと食べ物がより美味しく見えるようです。
入った瞬間に売れなそうな店だなー、とか美味しくないのでは・・・と思う店ってあるんですが、そういうとこって大体青白系の蛍光灯を使ってるんですね。
よく中華料理屋とかラーメン屋とかで見かけます。
記憶色に近づける
用語解説辞典 | NTTPCコミュニケーションズ
人間は目で見たものを記憶するとき、より鮮やかな色として記憶するそうです。
つまり実際の色と同じ色の写真を見せるより、鮮やかな色にすることで記憶色に近い写真になるといえます。
CSSフィルター
元の写真。僕がどこかのラーメン屋でiPhone5Sで撮りました。
これだけでもラーメン好きの僕としてはかなり来るんですが、もっと美味しそうに見せられます。
明るさを足す
店内は大抵暗くて明るさも足りないので、明るくします。
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); }
彩度を足す
記憶色に近づけるため鮮やかな色合いにします
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%); }
ぐっと美味しそうになりましたね
暖色系にする
色相を弄って暖色系にします。
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ってパラメータをどんどん弄ってくと、逆に青系とかの色にも出来るのでまずそうな写真にも出来ます。
元画像と比較
全然印象が違いますね！
個人差はあると思いますが僕は圧倒的に右の方が美味しそうに見えます。
てかラーメン食いたくなった！クソ！
各パラメータは画像によって調整が必要ですが、今あげた3つのフィルターをかけるだけでも結構効果が見込めますね。
