行ってみたい!と思わせる飲食店サイトを作るコツ

食べログなどのクチコミサイトやポータルサイトにお店が掲載されていれば集客は安心!と思ってませんか?
実はそれが落とし穴。他者に左右される評価での集客に頼ると、意図しない形で広がってかえってマイナスになってしまうこともあります。
やはり、どんなこだわりで料理を提供しているかを自ら伝えてこそ、真のお客さんが来てくれるもの。
行きたい!と思わせる飲食店サイトとはどんなものか、プロが作った素敵なサイトをヒントに秘訣を紐解きます。

オリジナルサイトならではのメリット

年末年始のかき入れ時、飲食店ならひとりでも多くのサイト訪問者がお問合せや予約まで進んでくれたらと願いますよね。

安さが売りの店舗であれば価格勝負のキャンペーンで対策可能ですが、そうでない場合、サイト上からもその特別な経験ができるという雰囲気づくりを演出しなければなりません。

そこで今回は忙しい店舗運営者でもマネできる、プロのサイト作りのテクニックを探ってご紹介します。

まずはナイスサイトのこちらの飲食店をご覧ください。

▼福岡県博多にある創作料理店「金蔦 博多本店」さん
%e9%87%91%e8%94%a6

こちらはグラフィック&WEBデザイナーの方がBiNDを使って制作されたサイトです。
内装が素敵で、イチオシメニューの「博多炊き肉鍋」もとてもおいしそうで、庶民的な鍋とは違うちょっと特別な日に行きたくなる雰囲気ですよね。

お店のこだわりを伝える

他の店にないこだわりをAboutページでアピール

kintsuta%e3%81%93%e3%81%a0%e3%82%8f%e3%82%8a
サイトにAboutページがあるといい理由は、自分たちの想いを言葉と写真で伝えられることにあります。

同じ写真でもポータルサイトとオフィシャルサイトでは伝わり方に差が生じます。
クチコミサイトやポータルサイトの一律化された情報展開では伝えられないこだわりや思いをAboutページでしっかり伝えましょう。
たとえば大切な商談でお店を探している人などがサイトを見ただけで店内の雰囲気を疑似体験でき、この店で大丈夫と感じてもらえるようなコンテンツを用意しましょう。

リアルタイムの情報をSNSで発信

ビジュアルでお店の魅力をリアルタイムに伝えることができるInstagramの写真をWebページに貼り付けておく工夫も、飲食店ならやっておいて損はありません。
スマホから手軽に更新でき、常に新しい情報を発信できます。

サイトに上品さや高級感を演出するコツ

1.デザインで使う色を最小限にする

ここからは、サイトを作るときのヒントをご紹介します。

高級感を与えることに一役買っているのは、
(1)シズル感満載の料理写真や、象徴的な蔦のモチーフなど、すべての写真のクオリティがとても高いこと。
(2)黒を基調としたサイトの色使いとフォントにある
と言えるでしょう。
kintsuta%e6%83%85%e5%a0%b1%e6%95%b4%e7%90%86
メインエリアがタブで分かれており、サイドエリアもあって、メニューの数もたくさんある、これだけの要素を黒とグレーの濃淡だけでデザインしているところがプロの技ですね。
色がほとんど使われていないのに、情報と情報の区切りがとてもわかりやすいのは、情報がキチンと整理されていて、メニュー/価格/説明/コース内容といった要素が過不足なく揃い、情報の区切れ目の余白の取り方までもルール化されているから。
差し色として使用している金と緑青も彩度が抑えめなところも、落ち着いた印象をサイトに加えています。

2.透過背景でインパクトと視認性を両立

高級感の演出では、内容をゆったりと見せることも重要です。情報が詰め込まれていて狭苦しい印象では、クラス感を演出できません。

こちらのサイトでは、サイトTOPもロゴが表示されるエリアに写真を背景とした余白を設けてゆったり感を演出。
そして、一番手前にブロックで配置したTOPICSやNEWSのブロック背景を透過させることで、背景をスライドショーのインパクトと視認性を両立させた、一体感のあるTOPページになっています。

なおトップページとは異なり、メニューや店舗情報などの各ページには背景スライドショーの演出がなく、文字や内容を落ち着いて読むことができます。サイト制作のプロと素人の違いは、このような演出の匙加減にも現れます。
特に動きの演出は使いすぎに注意なので、見ていて心地よいことを判断基準として、さまざまなサイトを参考に基準を身に付けましょう。

3.装飾のあるWebフォントで上品さを演出

kintsuta%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88
もうひとつ重要な演出に役立っているのが、Webフォントです。
文字の太さに強弱があり、装飾が付いているフォントは、文字だけでもデザイン性が高く優雅さを演出できます。
例えば日本語なら明朝体、英字ならセリフ体などは、太さに強弱があり装飾が付いているフォントです。
飾りのない書体でも、フォントの太さを細くすると、上品な印象を与えることができます。
BiNDクラウドはWebフォント対応なので、日本語フォントなら最大541書体、英字フォントは841書体から好きなフォントが選びたい放題。複雑なライセンス問題も心配ありません。

飲食店の最新テンプレートもオススメ

手軽に作り込むなら、最新シングルページテンプレートが便利

最後に、BiNDの最新テンプレートからシックで高級感のある飲食店のサイトにふさわしいデザインをご紹介します。
nishiyama
Japanese Dining NISHIYAMA
こちらの最新テンプレートは、黒をベースとした写真をキレイに見せるデザインなので、今回紹介したサイトのようなこだわりの飲食店にピッタリ!
メニューや地図、問合せやInstagramなど、店舗に必要な要素が一通り揃っているのでサイトを作り変えることなくそのまま利用できます。もちろんレスポンシブWebでスマホ対応。ぜひ使ってみてください。

BiNDupのテンプレートをチェックする

BiNDup GuideBook

Web作成サービス「BiNDup」の最新ガイドブック。サイトを外注せず自作する方のために制作から集客までできることをまとめました。

今すぐ資料をダウンロード
  • POINT

  • 価格勝負だけで集客しないならオフィシャルサイトでお店のウリをアピールしよう
  • 他者の評価に左右されるクチコミサイトに頼らず、自らブランディングしよう
  • 写真のクオリティ、カラーリング、Webフォントでサイトを演出しよう

あわせて読みたい