フード関連ホームページのデザインのポイント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のホームページは、あさりのパスタが左側に大きく配置されています。

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