フード関連ホームページのデザインのポイント2つ＆実例7選

「おいしそう」「食べてみたい」──
そんな風に思わせる飲食店のホームページには、どのような点が共通しているのでしょうか。

飲食店のホームページの場合は特に、いかに視覚情報を活用してユーザーの感情を動かすことができるかどうかが鍵となります。
うまくいけば、実店舗への集客やオンラインショップでの購買につなげることができるでしょう。

今回は、フード関連ホームページのデザイン2つのポイントと実例をご紹介します。
思わずお腹が空いてくる、そんなホームページはどこで工夫しているのでしょうか。
実際に公開されているホームページの共通点を見て、ポイントをおさえてみましょう。

指をくわえていてもお客さんは来ない？

画像引用元：pexels.com

飲食店も、お客さんを集客するためには、「行ってみたい」と思わせるホームページを開設する必要があります。

しかし、無数の飲食店が存在している中で、ただ単にホームページを作ってもお客さんが来るという保証はありません。
一方、「行列ができる飲食店」や「一部の人しか知らないけれど予約の絶えない飲食店」は、Web上でも人の心を惹きつけるのが上手いケースが多いようです。

ユーザーの心を掴むホームページの多くは、デザインに心理学を多く取り入れています。

ここでは、飲食店のホームページデザインでよく取り入れられる心理学的なアプローチを実例とともに2つご紹介します。

1. ファーストインプレッションが重要：メラビアンの法則

「人は見た目が9割」という言葉がありますが、これは心理学でいうところのメラビアンの法則と言います。

メラビアンの法則は、「見た目が一番重要」という内容が一人歩きしていますが、実際にはコミュニケーションにおいて話の内容や口調などよりも視覚情報のほうが大きな割合を占めている、ということを意味する法則です。

いずれにしても、これはもちろん飲食系のホームページにも当てはまります。
ホームページの最初でしっかりと来訪者の心を掴むことができれば、実際に来客してくれる可能性は高くなります。

飲食系ホームページとしてとりわけ気をつけておかなければならないのは、好感の持てるファーストビューに加えて、「一体何の店なのか」が瞬間的に分からなければいけない、ということです。

つまり、たとえシンプルな店内だとしても、店内の写真ばかり見せられて何の料理を提供しているのかが分からなければ、ユーザーが離脱してしまう可能性が高まってしまうということです。

そのため、多くの飲食系ホームページでは、料理の写真をファーストビューとして載せているケースがほとんどです。

実例1：麺屋 BIBIRI

スクリーンショット：2017年10月

奈良市のラーメン店麺屋 BIBIRIのホームページは、ファーストビューで中央に主役であるラーメンを配置して、一瞬で「何の店なのか」が分かるようになっています。
また、単に写真を載せるだけでなく、湯気を写真にかけることで、まるで目の前に本当に熱々のラーメンがあるかのような演出をしています。

店名の背後には、魚がうっすらと現れており、魚系のだしが取り入れているのが視覚ですぐにわかるようになっています。
スプリットスクリーンのように、左右を「鶏白湯」と「和出汁」で区切っているのも、上手なレイアウトです。

実例2：café STUDIO

スクリーンショット：2017年10月

原宿の中心にあるカフェcafé STUDIOのホームページは、オーガニックなカフェフードで彩られています。

カフェといえばコーヒーですが、アヒージョにサラダ、サンドイッチや野菜のピクルスなど、さまざまなメニューがあることがすぐに理解できます。

また、補足情報として中央に置かれたマイクロコピー「café, party, promotion」で、カフェ以外にパーティーや販促などでも利用できることがわかります。

実例3：Panini Bay

スクリーンショット：2017年10月

アメリカのイタリア料理店Panini Bayのホームページは、あさりのパスタが左側に大きく配置されています。

スペースを大きくとって文字を小さく配置し、版面率を高くすることにより、高級感の溢れるイメージを演出することに成功しています。

2. 違いを一瞬で言葉にして伝える：プラシーボ効果

プラシーボ効果とは、薬効成分のないものを薬だと偽って投与された場合、患者の病状が良好に向かっていくような治療効果のことを言います。
マーケティングの世界でプラシーボに言及するときは、騙すという意味合いはなく、言葉によって目の前のお客さんを喜ばせる言葉がけのことを言います。

飲食店に関するマーケティングの文脈で言えば、「和牛」というよりも「旨味をギュッと凝縮した、繊細で芳醇な味わいのA5ランク和牛」と付加価値を加えていくほうが、よりリアルにイメージが伝わって効果的であるということです。
写真だけではわからないこともたくさんありますが、言葉があればよりイメージしやすくなります。

実例4：土肥農園

スクリーンショット：2017年10月

飲食店ではないですが、土肥農園のホームページはケーススタディとして非常に参考になります。

「土肥農園のすいかが『どすいか』なのは理由があります。」というキャッチコピーは、食べてみた人にだけその理由が分かる、ということが暗示されています。

実例5：おやつのアトリエmoco

スクリーンショット：2017年10月

岐阜県美濃加茂市にあるおやつのアトリエmocoのホームページを見てみましょう。

マフィンの形をしたデザインのロゴ、後ろに映えるデザートが印象的ですが、特に目がいくのが中央にあるキャッチコピー「誰もが安心して食べられるスイーツを。」です。

実はこのお店のデザートは、卵・乳製品・白砂糖を一切使わないお菓子を提供していて、アレルギーを持った方でも安心して食べられるのが特徴です。
詳細は「ABOUT」ページに入れ込み、トップページではその内容をキャッチコピーに凝縮させています。

実例6：チャンピオンカレー

スクリーンショット：2017年10月

北陸三県を中心に展開している金沢カレーの専門店チャンピオンカレーの通販サイトでは、美味しそうな金沢カレー特有のルーを背景に「LIKE NO OTHER,IT’S CHAMPION’S. ── 洋食カレーをルーツに持つ旨味と味わいが自慢です。」というコピーを採用しています。

「他とは違う」という言葉をアピールしているだけでなく、赤い色を使ってお店の世界観も演出しています。
スクロールすると、「濃厚なルーに旨味が凝縮。一度食べたら忘れられない味。」というコピーも登場し、ユーザーの感性を刺激します。

実例7：二十四節氣

スクリーンショット：2017年10月

仙台市青葉区にある薬膳鍋の専門店二十四節氣は、固定観念を崩すようなキャッチコピーを採用しています。

通常、鍋と言えば「冬の食べ物」として想像してしまいますが、ここでのキャッチコピーは「春も、夏も。秋も、冬も。」。
年中、鍋を楽しんでもいいんだ、そんな思いを感じさせるコピーです。

薬膳鍋のお店らしく、さまざまな種類のスパイスの写真や、落ち着いたテイストの店内の写真も登場します。

まとめ

飲食系のホームページの場合、単にユーザーを集めるだけでは集客につながることは少なく、視覚情報でいかに味覚に訴えられるかがポイントとなります。
そのためには、ファーストビューでしっかりとおいしそうな料理の写真を表示させ、言葉でイメージを膨らませることが重要になります。

飲食店のホームページを作成するときは、ぜひこれらのポイントおさえたうえで進めてみてください。