読者です 読者をやめる 読者になる 読者になる

Webデザイン初心者向けのあれこれ

Webデザイン初心者向けのあれこれを書いていきます。

2012年Webデザイントレンドをまとめておきましょう。 - 飲食店・フード関係サイト編

もう2012年もあと少し!

ということで、今年流行っていた、素敵だったサイトをまとめてみたいと思います。

 

今回は飲食関係、フード系のサイトのまとめです。

 

1.   Metzgerei Büttner

 

ドイツのお肉屋さんぽいですね。

お肉の赤い色が強調されていて、お肉が一層美味しそうに見えますね。

左右にパララックスで背景が動くようになっているので、

動的でよりサイトが輝いていると思います。

 

 

 2.   FresHarvest Seafood & Meat

 

シーフードとお肉を一緒に提供しているレストランぽいですね。

CSSの動きが気持ち良くて、丸みと四角のバランスがとても素敵なサイトです。

 

 

 3.   Cateringservice Oberhausen

 

ケータリングサービスのお店ですね。

高級感あるグラデーションと透明感が食品をより美味しそうに見せています。

 

 

4.   Food Designer By PixelCreativo

 

写真を背景に全面に押していますね。

スライドで写真がいっぱい見れるので、お腹がすいちゃいます。



5.   Valide Sultan

 

アニメーションや動きが多く、お店のメニューが動いている感じですね。

ダイナミックで横にいる友だちが思わず「なに、そのサイト?!」って驚いています。



6.   PRO-FOODS

 

hover効果とパララックスが使われています。

水をパララックスにすることで、よりインパクトがありますね。

 

 

7.   Hopgoods Foodliner

 

トロントにあるお店ぽいですね。

サイト全体がメニューのように構成されていて、

お店でメニューをめくる感覚で見れますね!素敵−☆ 

 

 

8.   Pizzatime Köln

 

遠近感があるスライドで、よりお料理が美味しそうですね。

背景にスポットライトがさしていて商品引き立てていますね。

 

 

9.   My Pizza Oven

 

よくFLASHサイトでは見れるレイアウトですが、

こちらはCSSとスクリプトでやっていますね。

黒板をメタファーとして使っていて統一性があっていいですね。

 

 

10.   My Combats de Fourchettes

 

フランスのレシピと盛りつけ関係のサイトぽいですね。

シンプルなデザインでアイコンが分かりやすいですね。

グレー系のサイトを作る時に参考にしたいですね。

 

ざっと見てきましたが、まとめてみると、

 

1. CSSやスクリプトで動きをつける

  (背景か、商品どちらかにするのがベストかと)

 

2.   お料理や商品を引き立てるデザインにする

  (強調するポイントを決めて、その魅力がしっかり伝えるようにすること)

 

3. 丸みや四角をうまく利用してバランスをよくする

   (どっちをメインにするかを最初に決めて残りを小さくするか大きくするかで

   うまくバランスをとる!)

 

こんな感じですかね?

完全に個人的な意見なんですが。。。

 

よかったら参考にしてください!