エンジニア採用セミナー
エンジニア採用セミナー
2015.09.11
#2
デザイナーズコラム

すごーく美味しそう♩飲食関連のWebサイトとデザインテクニックまとめ

まきこ

動画で臨場感MAX!

このテクニックは、食べるまでの準備が特徴的な商品や、自信をもって作っていることを伝えたいときに使うといいかもしれません。

このテクニックを使ったサイト

参考にしたいサイトはこちら。

日清食品グループ

oishisou_cupnooldle

3分間カウントダウンするあいだに、ざまざまな動画を見ることができるサイト。360°回転するスローモーション映像には、新鮮なおどろきとともに、食欲を刺激するたくさんの瞬間が散りばめられています。

近江ちゃんぽん亭

oishisou_oumi

厨房でちゃんぽんを調理する過程を映像で見せているサイト。まるで自分がちゃんぽんを注文して、出来上がるのを待っているかのような気分にさせられます。歴史に裏打ちされた、料理人の腕のよさまで伝わってきますね。

その他のサイト

このテクニックのポイント

  • 静止画よりも臨場感を出すことができる
  • 動画を画面いっぱいに見せる最近のトレンドを取り入れ、今っぽさも出せる
  • 調理過程の技術やこだわりも伝えることができる

余談ですが、わたしは昔見たカップヌードルのCMで、「カップにお湯を注いだあとにフタを例のシールで留めているけど、フタの隙間から湯気がもれている」というシーンに、ものすごくグッときました。皆さんにも、食べ物や飲み物がいちばんそそる瞬間って、きっとそれぞれにありますよねー。

イラストで世界観をつくる

食事がもたらすゆっくりとした時間の流れや、丁寧なライフスタイルを想起させたいときに検討したいテクニックです。イラストに水彩のような筆致が残る手法がよく採用されているのも、ぬくもりを表現するためかもしれません。

このテクニックを使ったサイト

参考にしたいサイトはこちら。

秋田屋

oishisou_akitaya

やさしい雰囲気のイラストが印象的。写真ではないぶん細かく伝えすぎず、見る人それぞれにとっての「おいしいお酒」を、自由に想像させるようなビジュアルですね。

やさい あまうま ル・クルーゼ

oishisou_lecreuset

鮮やかな野菜のイラストと、ル・クルーゼのカラーリングがマッチしています。子どものために野菜を調理するママ向けのサイトにふさわしい、あたたかい雰囲気が感じられるサイトです。

料理研究家・オリーブオイルソムリエ/片幸子公式サイト

oishisou_sachi

オリーブの葉をメインとしたイラストは、洗練されすぎない素朴さを残したテイストです。「食卓に幸せを届けます」というコピーを、親しみやすくあたたかく響かせるようなデザインですね。

その他のサイト

このテクニックのポイント

  • 単にお腹を満たすだけではなく、食事による充実感や幸福感が伝わる
  • イメージを限定しすぎない
  • 写真ではわかりづらい飲食品も表現できる

ホント、おいしいことって幸せですよね。

ディテールを切り取って強調する

全体像だけだといまいち良さが伝わりづらいときに、より具体的なイメージを伝えられる便利なテクニックです。

このテクニックを使ったサイト

参考にしたいサイトはこちら。

ヱビスビール|ヱビス、おいしさの秘密

oishisou_yebisu

上記の画像は、うっとりするほど美しい泡の写真が配置された、ページの途中部分をキャプチャしています。実際にこのきめ細かい泡をじっと見つめて、悦に浸りたくなりますね。

スターバックス コーヒー ジャパン

oishisou_stb

商品名だけではちょっとわかりづらいですが、カップを上から見た写真、背景に散りばめられた栗やナッツの写真で、どんな素材が使われているのかが伝わってきます。

キリンレモン

oishisou_kirinlemon

波型の線や飛び散る水の写真で「ゴクゴク飲めるイメージ」を、水泡で「さわやかな炭酸感」を表現しているのでしょうか。
消費者が実際に売り場で見かけることになるペットボトルの写真と、おいしさが伝わるビジュアルとを、うまく融合させていますね。

その他のサイト

このテクニックのポイント

  • 特徴的な部分をアップで見せたり、グラフィカルに配置したりして、シズル感を強調する
  • ページの途中などに使われる場合も多い
  • 飲食品の素材や、パッケージされた商品の中身を表現することもできる

飲み物のサイトが多くなってしまいましたが、そういえばノドもかわいてます……。

おわりに

さて、おいしそうなサイトを見ていると、すっかりお腹がへってきましたね!
わたしはこれからさっそく食欲の秋を楽しみつつ、機会があれば、おいしそうなデザインにチャレンジしていきたいと思います。

皆さんも、食べたり、飲んだり、デザインしたりして、いい秋をお過ごしくださいませ!

キャリアアップ
「Studio上野でWebクリエイターを目指す!」

  • 1
  • 2