DESIGN, MATOME

食欲の秋!見るだけで食べたくなる、美味しそうなECサイトまとめ

  • このエントリーをはてなブックマークに追加

ECサイトでは食品も例外なく販売されていますが、味や香りをサイト上で表現するのは至難の技ですよね。それでも、写真をうまく使ったデザインでシズル感を演出しているサイトはたくさんあります。今回は、思わず「美味しそう!」と見ているだけで食べたくなってしまうECサイトをまとめました。

food-design0

coneri(こねり)

food-design1http://coneri.jp/

パイ専門店「coneri (こねり)」のECサイト。ページをスクロールしていくと、文字や画像がアニメーションとともに表示されるスクロールエフェクトがとても心地良く、遊び心のあるデザインになっています。パイにマウスカーソルをあわせるた際の軽やかな動きは、パイのサクサク感が想像できてなんだかわくわくしてしまいます。余白の使い方もとても参考になります。関連商品としてジャムも販売しています。


Fructus(フラクタス)

food-design2http://fructus.jp/

グラノーラを販売する「Fructus(フラクタス)」のECサイト。ナチュラルテイストの写真がオシャレです。
商品ページの縦に並べた写真の見せ方も、シンプルながら自然に目に入ってきます。
トップページのメイン画像からのオンラインショップへの誘導もわかりやすい表現ですね。


STYLE BREAD(スタイル ブレッド)

food-design3http://www.stylebread.com/

飲食店向けに「料理の為にあるパン」を販売する「STYLE BREAD(スタイル ブレッド)」のECサイト。商品詳細ページのスライド写真が特徴的で、実際に料理にあわせたパンのイメージをファーストビューで複数みせています。
レストラン、カフェ、ビストロなどシーン別でおすすめ商品を紹介しており、利用する際のイメージをしやすくするコンテンツも用意されています。
商品写真の色合いやサイズが統一されているのでスッキリとした印象があります。


TRADESTONE CONFECTIONS

food-design4http://tradestoneconfections.com/

チョコレートや砂糖菓子を販売する「TRADE STONE CONFECTIONS」のECサイト。こちらはアメリカのサイトです。
まるで宝石のように感じてしまうチョコレートの写真が印象的で、自然と期待感が高まります。セットで販売しているチョコレートに関しても、1点、1点写真とテキストで紹介しているのも良いですね。
商品ページでは、背景に固定したデザインで大きな写真をあしらっているのも特徴的です。


Jeni’s

food-design5http://jenis.com/

アイスクリームやシャーベットを販売する「Jenis」のECサイト。こちらもアメリカのサイトです。
とにかくシズル感のある写真を商品ページでふんだんに使用しているのが印象的で、思わず食欲をそそります。かなりの量の写真を大胆に見せています。
トップページの動画も見応えがあります。
マウスカーソルを合わせた際の「ふわっ」とした動きも良いですね。


JUNOESQUE BAGEL(ジュノエスクベーグル)

food-design6https://www.junoesque.jp/

自由が丘でベーグルを販売する「JUNOESQUE BAGEL(ジュノエスクベーグル)」のECサイト。
トップページのおいしそうなベーグルの写真をはじめとして、サイト内にちりばめられたベーグルの写真が楽しげな雰囲気を演出しています。オススメレシピの色合いがサイト全体を引き締めている印象もあります。
おすすめに誘導するナビゲーションがわかりやすい。ロゴをマウスオンした際の小さな遊び心も良いですね。


Olli SALUMERIA

food-design7https://www.olli.com/

サラミやハムを販売する「Olli SALUMERIA」のECサイト。アメリカのECサイトです。
こちらもシズル感を誘う大きな写真が印象的ですね。紙をあしらったデザインもポイントです。写真やイラストが雰囲気を高めていますね。
写真も含めて全体的に暖色系で、食欲を誘う色合いになっていますね。


おらほの屋

food-design8http://orahono.com/

山形県の特産品を販売する「おらほの屋」のECサイト。充実した商品ページが特徴的で、おいしそうな写真をはじめ、商品の魅力をうまく紹介しています。
おすすめと売れ筋商品を色分けしてわかりやすくしているほか、季節商品などは、いま購入できるものとできないもので明確にわかれているのも見やすくしているポイントになっています。


MOUTH

food-desing9http://www.mouth.com/

大量生産しないインディフードを扱う「MOUTH」のECサイト。アメリカのサイトで基本的に米国産の商品を揃えているのだとか。
切り抜いた写真がきれいに並んでいるのが印象的で、コラージュのように写真の並ばせ方にも工夫が見られ、商品への想いを感じます。
様々な角度の写真があることで商品を立体的にみせていますね。


武平作

food-design10http://www.buheisaku.com/

せんべいをはじめとした和菓子を販売する「武平作」のECサイト。雑誌のような写真の使い方やレイアウトが上質な印象を与えています。
商品ページでは、商品のおいしさのポイントを丁寧に説明していて、せんべいを割ったときの「パリッ」という音を文字で入れているのも、イメージをかきたててくれます。


伊達の牛たん

food-design11http://www.dategyu.jp/shop/

仙台発祥の牛たんを販売する「伊達の牛たん」のECサイト。
落ち着いたデザインが写真を引き立てています。調理中と調理後の写真をしっかりと魅せているのもポイントですね。


HIGASHIYA(ヒガシヤ)

food-design12http://higashiya-shop.com/

京都の和菓子を販売する「HIGASHIYA(ヒガシヤ)」のECサイト。
カテゴリメニューに和菓子の写真をあしらっているが現代風でおしゃれな印象を与えています。基本をモノトーンにしたシンプルなデザインが和菓子の鮮やかな色合いを引き立てていますね。


irina(イリナ)

food-design13http://www.irina-onlineshop.jp/

ロールケーキタワーが有名な「irina(イリナ)」のECサイトです。
女性が好きそうな色合いや円形を使ったデザインがかわいく、ロールケーキタワーの雰囲気を全体で表現しているような印象をうけます。セット商品のラインナップが一覧になっているのも見やすいですね。ヘッダに最短配達日が表示されているのがわかりやすい。


やはりポイントは写真ですが、配置や魅せ方などさまざまな表現手法があることがわかりますね。全体のトーンを合わせるなどの基本的な部分や、伝わりにくい部分をテキストでうまく補完していることなども見逃せないポイントですね。
動画を活用した商品紹介はまだあまり見られないので、差別化するポイントとして使えるかもしれませんね。

イイヅカ アキラ

イイヅカ アキラ

Shopping Tribe編集長。Web制作会社にデザイナー、ディレクターとして従事後、フリーを経て、現在は株式会社プレイドに所属。
【メディア出演歴】
日本テレビ「ZIP!」 / TOKYOFM「中西哲生のクロノス」 / 週刊SPA!
イイヅカ アキラ
Previous ArticleNext Article