トップページへ戻る

飲食店サイトのデザイン・コンテンツを解説!

この記事を書いた人 :

飲食店サイトのデザイン・コンテンツを解説!

新たに飲食店をオープンするタイミングで「お店のサイトを作って集客してみようかな…」と思うオーナーの方で、いざ作ろうとしてみたら…「どんなデザインにしたら良いんだろう?」や「どういう情報を載せたら良いんだろう?」と、悩んでしまう人も多いのではないでしょうか?

また、人によっては「食べログ」や「ぐるなび」があれば、飲食店のサイトって必要ないのではないか、と思う人もいるはずです。

ここでは、そんな悩みや疑問を持つ飲食店オーナー・Web担当者のために、飲食店サイトを作る際に役立つデザイン・UIやコンテンツの情報、サイトを作成した後のプロモーション方法などを紹介します。実際に調査した飲食店サイトのデータを基にしていますので、今すぐ使えるWebサイトの考え方や情報を取り入れて、ユーザーを魅了するようなサイト制作をしましょう。

今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ

飲食店のWebサイトを作る前に…

飲食店サイトを作る際に、まず決めておきたいのがターゲットと自店舗の強みの整理です。サイトにおいてターゲットが「誰なのか?」を明確にできれば、自ずとサイトのテイストも決められます。そして自店舗の強みを整理できれば、ターゲットに伝えたい内容が明確になり、サイト内でアピールしたいポイントも決められます。ターゲットや強みは、飲食店をオープンする準備段階で決めていることも多いので、既に決めていればサイト制作時に参考にすると良いでしょう。

ちなみに、ターゲットや自店舗の強みが今まで曖昧だった(もしくは決めていなかった)場合には、以下のような要素を元に、考えてみましょう。
・ターゲットはどんな人?→「年齢」「性別」「職業」「年収」「住所」「趣味」「関心」など。
・自店舗の強みは何?→「特別な食材を使っている」「価格が近隣よりも安い」「駅から近く立地が良い」「店内がオシャレで特徴的」など。
ターゲットや強みを洗い出すことで、サイト制作だけではなく、そもそものお店の運営にも役立てられます。飲食店サイトを作る前には、ターゲットに「何を、どのように、伝えるのか?」を、確認してから制作しましょう。

飲食店サイトの主なデザイン・UIについて

飲食店サイトといってもジャンルが様々ありますよね。最初に決めた「ターゲット」に合わせて、どんなサイトデザインにしたらいいのか考えてみましょう。といってもアイディアがなかなか浮かばないという人もいるはずです。そんな人のために、飲食店のジャンル別のデザインとUIの傾向を紹介しますので、サイト制作の参考にしてみてください。

飲食店サイトのメインビジュアルの傾向

飲食店サイトは、お店のジャンルによってメインビジュアルの傾向に違いがあります。ここでは、ファミリーレストラン、ビストロ・グランメゾン(高級レストラン)、焼肉・しゃぶしゃぶ店、カフェ・スイーツ店の4つのジャンルに絞って紹介します。

ファミリーレストランのメインビジュアル

  1. 飲食店のびっくりドンキーのWebデザイン
  2. 飲食店のデニーズのWebデザイン

ファミリーレストラン(今回はびっくりドンキーデニーズ)のメインビジュアルに多かったのが、限定メニューや定番メニューを全面に押し出した写真や動画です。一部のファミリーレストランでは、感染症における対策に関する案内や、テイクアウト・デリバリーができることをアピールする画像をメインビジュアルに組み込んでいるところもあります。メインビジュアルに設定している画像の枚数は3~7枚程で、スライドショーで表示されるスタイルが多いです。

ビストロ・グランメゾン(高級レストラン)のメインビジュアル

  1. 高級レストランのジュエル・ロブション
  2. 高級レストランのグリルうかい

ビストロ・グランメゾンと呼ばれる格式の高いレストランのメインビジュアルには、料理の写真、こだわりの空間(内装)などが映し出される「写真」や「動画」が良く使われています。また、お店から見える夜景、シェフやスタッフの写真などもメインビジュアルに設定され、スライドショーで表示されるようなデザインになっています。(主要サイト例:ジュエル・ロブショングリルうかい

焼肉・しゃぶしゃぶのお店のメインビジュアル

  1. 焼肉店の焼肉ライク
  2. 焼肉・じゃぶじゃぶ店のざくろ銀座

焼肉やしゃぶしゃぶのお店に多いメインビジュアルは、わかりやすい「お肉」の写真を使った写真や動画です。メインビジュアルのお肉を美味しそうに撮るために、焼肉やしゃぶしゃぶを真上から撮ったり、お肉だけアップで撮ったり写真の撮り方が工夫されています。お肉好きにはたまらない、食欲をそそるメインビジュアルが多いです。

ちなみに、被写体を真上から撮る方法を「真俯瞰」と言います。この撮影技法を使うとテーブルに並べられた料理を余すことなく写せて、かつベーシックでありながらオシャレに見せるといったメリットがあるので、写真の構造に迷ったら真俯瞰を使ってみましょう。(主要サイト例:焼肉ライクざくろ銀座

カフェ・スイーツ店のメインビジュアル

  1. カフェ・スイーツ店の生クリーム専門店ミルク
  2. カフェ・スイーツ店のMOVE CAFE

メインビジュアルに使われる写真や動画に多いのは、落ち着いた店内の様子や自慢のメニューです。雰囲気が良く行ってみたいと思うようなオシャレなお店と、おいしそうなスイーツの写真の組み合わせ。お店によって異なりますが、確認したサイトのメインビジュアルに設定している画像の枚数は多くて3枚程度なので、レストランに比べるとやや少なめです。(主要サイト例:生クリーム専門店「ミルク」MOVE CAFE

飲食店サイトのサイトカラー(色味)傾向について

飲食店サイトの場合、提供する料理やターゲットによって、サイトのテイストが大きく変わります。そのため、よく使っているカラーも異なり、一概にこの色が多いとはあまり言えません。ただし、飲食店のジャンルによって、使っているカラーの傾向がありましたので紹介します。

●ファミリーレストランのサイトカラー
白ベース、文字やアクセントカラーは、イエロー、ブラウン、レッドなど、全体的に原色系のカラー寄り。

●ビストロ・グランメゾン(高級レストラン)のサイトカラー
黒ベース、アクセントカラーはホワイトや渋めのブラウン、ゴールドなどで、全体的にシックなカラー寄り。

●焼肉・しゃぶしゃぶのお店のサイトカラー
白ベース、アクセントカラーにレッド、オレンジ、グリーンなど、全体的に食欲をそそるカラー寄り。

●カフェ・スイーツ店のサイトカラー
ベージュ(ホワイト)ベース、アクセントカラーは、ブラック、ブラウン、グリーンなど、全体的にナチュラルテイストなカラー寄り。

飲食店サイトのフォントサイズ・フォントファミリーについて

飲食店サイトのフォントサイズ、フォントファミリーを調べました。(※各飲食店サイト:5サイトずつ)
飲食店サイトで使われていたTOPページ内の平均フォントのサイズは14~16pxでした。調べたサイトの中で最小サイズは10px、最大は18pxで、標準的なフォントサイズに設定しているサイトが多いようです。

また、フォントファミリーを調べてみたところ「ヒラギノ角ゴ」を使用しているサイトが多く、20サイト中14サイトで採用されています。ヒラギノ角ゴは様々なジャンルのサイトでも使われており、どんなデバイスでも「読みやすく、美しい」と好評のため設定しているサイトが多いと考えられます。その他、「游明朝」「游ゴシック」なども、次に多く設定されていました。

今回調査しているのは、任意でピックアップした20サイトのデータです。
本来、Webサイトを作るためのヒントは、競合他社のサイトの中に、もっとたくさんあります。
そのためにも多くのサイトデータを集めて分析することが、自社サイトを成功に導くセオリーのひとつです。
とはいえ、集めなければならないデータ、そして同じ分量だけ分析しなければならないとなると、時間も労力もかかってしまいます。

競合他社サイトの情報収集を魔法のようにワンクリックでできたら良いですよね?
…実は、data maisonなら、あなたのその願いを叶えられます!
data maisonは、気になる競合サイト、新勢力企業のサイト、業界全体のサイトなどのデータをワンクリックで手軽に手に入れられるツールです。あなたがベンチマークしているサイトについて、今回紹介しているような「サイトカラー」や「フォントサイズ」などの情報も手に入りますし、宿泊業界全体のファーストビューの傾向、コンテンツの傾向なども確認できます。

Web担当者やデザイナーなどが、自分でサイトを抽出して苦労しながら調査していたことを、data maisonならたった165円~※という圧倒的な低価格で、最新の業界データを一瞬で手に入れることができます。
ぜひ、今までの煩わしい調査から解放される魔法のような調査体験を経験してみてください。
もっと飲食店のサイト傾向を知ろう!

飲食店サイトの主なコンテンツについて

ファミリーレストラン、ビストロ・グランメゾン、焼肉・しゃぶしゃぶ店、カフェ・スイーツ店などを各5サイトずつ確認していったところ、どのサイトにも必ずあるコンテンツ内容がありました。それが「お店のコンセプト」「メニュー」「店舗情報」です。改めて、どういった内容かを項目ごとに見ていきましょう。

自店舗の魅力をアピールする「お店のコンセプト」

訪れたユーザーに「自店舗の魅力」や「どんなお店なのか」を伝えるために「お店のコンセプト」が掲載されています。お店のコンセプトが掲載されている主な位置としては「トップページ内」と「別ページパターン」の2パターンが挙げられ、特徴がやや異なります。

トップページ内(またはメインビジュアル内)

アニヴェルセル カフェ

お店のコンセプトを「簡潔にテキストで表現」して、ユーザーに伝えるパターンです。このパターンのコンセプトなら、訪れたユーザーに「どんなお店なのか」をサイトをスクロールしてもらうだけで伝えることができます。また、写真と一緒に組み合わせれば、より伝わりやすくなります。(参考サイト:アニヴェルセル カフェ

「別ページ」の場合

Cafe, Dining & Bar 104.5

お店の魅力やこだわりを、じっくり伝えるように別ページでお店のコンセプトを展開しているサイトもあります。この場合、「about」や「コンセプト」などの別ページを作成して、そこでは「お店のこだわり」や「お店の歴史」などを紹介します。また、こだわりぬいた食材、お客様への想い、オープンまでのサクセスストーリーなどを丁寧に伝えることができます。

直下パターンと別パターンで伝え方は異なるものの、「自店舗を知ってもらう」という目的に違いはありません。店舗の魅力やこだわりをユーザーにアピールし、「このお店に行って料理を食べてみたい!」と思ってもらいましょう。(参考サイト:Cafe, Dining & Bar 104.5

飲食店サイトに必須の「メニューページ」

飲食店サイトにおいて最も重要と言えるのが「料理」。これがなければ飲食店としても成り立ちませんし、お客様が来るはずもありませんよね。だからこそ、飲食店サイトでは「メニュー」ページは必須コンテンツなのです。ちなみに、メニューの掲載方法を見てみたところ、ジャンルによって傾向がありました。

・ファミリーレストランのメニューページ:【料理名+写真+金額】
・焼肉やしゃぶしゃぶ店のメニューページ:【料理名+写真+金額+肉の特徴】
・ビストロ・グランメゾン(高級レストラン)のメニューページ:【料理名+写真】までは一緒。ただし、あえて金額を載せず「料理の特徴」を掲載。
・カフェやスイーツ店のメニューページ:【料理名+金額】写真は一部のメニューにのみ掲載。

ジャンルによって掲載する情報がやや異なっていましたが、どのサイトでも「料理名」「写真」「金額」はマストな情報となっています。飲食店サイトに訪れるユーザーの目的には、「どんな料理があるのか?」を知りたくて見に来ている人もいますので、メニューページを作らない手はありませんよね。

お店に来てもらうための「店舗情報ページ」

店舗にお客様が来てくれないと意味がありません。そのため、飲食店サイトにとって「店舗情報」は必須中の必須コンテンツです。実際、どの飲食店サイトにおいても「店舗情報」をまとめたページを作成しています。その中で「店名」「営業時間」「営業日」「お店の住所・地図」「連絡先」「アクセス方法」などの基本情報がマストで掲載されていました。

また、情報をまとめたページ以外にも、サイトのヘッターやフッターなどに「営業時間」や「定休日」、「電話番号」などを掲載しているサイトも多いです。
こうすることで、営業時間や連絡先を探す手間が省けてユーザーにとって親切ですし、パッと見て「いつ営業しているのか」「どこに連絡したら良いのか」など、すぐに理解してもらえますよね。

繰り返しになりますが、飲食店サイトにおいてユーザーが求めていることは「詳しい情報」です。情報が多ければ多いほど、ユーザーは安心できます。ただし、やみくもに情報を並べれば良いわけではなく、ユーザーが知りたい情報を充実させて、写真やデザインで店舗の良さを引き出し、わかりやすく伝えることが大切です。こうした基本の考えを元に、自店舗の良さと強みを伝えられる飲食店サイト制作をしましょう。

飲食店サイトのSEOリテラシーについて

飲食店サイトは、大手チェーン店と個人サイトでは、SEOリテラシーに大きな開きがあり、全体的に低い傾向にあります。Webサイトへの予算がある、または予算を割ける大手チェーン店の場合にはSEOに力を入れて施策できるものの、個人サイトでは、運用もままならず放置してしまう飲食店サイトも少なくありません。また、飲食店サイトの場合、特に陥りやすいのがサイトを制作したものの、更新が止まっていたり、いつまでも過去の案件を掲載していたり、モバイルに対応していないなどが挙げられます。

飲食店サイトのプロモーション方法

飲食店サイトを制作したら、それでおしまいというわけではありません。飲食店をオープンするなら店舗への集客もしましょう。

グルメサイトの登録は飲食店に必須?

あなたは買い物に出かけて、少し疲れたので休憩をしようと、どこか良いカフェがないか探しているとします。今いる場所は、あまり馴染みがなく知っているお店もないという場合、ひとまずスマホを取り出して「近くのカフェ」や「おすすめのカフェ」などと検索して、検索結果に出てきたお店の人気ランキングなどを元にカフェに向かうことが多くなっていませんか?なぜ、そうなるのか?というと…。

近年、飲食店に関わるキーワード(例:カフェ、レストラン、焼肉など)を検索すると、1~10位に表示されるサイトのほとんどがグルメサイトのコンテンツで、飲食店(店舗)サイトは見当たりません。本来は、飲食店サイトを制作したら「カフェ」や「レストラン」などの特定ジャンルのキーワードで上位に表示させて、ネット集客をしたいところです。ただ、あまりにグルメサイトのコンテンツの影響力が強すぎるおかげで、飲食店サイトは、なかなか太刀打ちできないのが現実です。

また、グルメサイトでは、第三者からの「口コミ・レビュー・評価」が掲載されています。特に活用されているのが「星評価」。
どのグルメサイトにも使われていて、ユーザーも飲食店を選ぶ際の指標にしている人も多いのです。実際、何か新しいものを買ったり、選んだりするときに人は慎重になるもので、誰かの意見を知りたくなるものです。その「誰か」が、実際にお店に行ったことのある人であれば、信ぴょう性は高くなり、ユーザーにとってお店を選ぶ際の基準のひとつになり得るでしょう。

グルメサイトに登録してプロモーションするメリット

グルメサイトとして有名なのが「食べログ」「ぐるなび」「ホットペッパー」などです。最近は、大手グルメ口コミサイトに加えて、「Rettyグルメ」「ヒトサラ」などの新勢力も登場しています。飲食店サイトにとってグルメサイトに登録して、プロモーションするのは定番の方法です。その理由には、上記で説明した検索結果で上位表示が難しいこと以外に、グルメサイトを利用しているユーザー数がとても多いことも挙げられます。

グルメサイトのユニークユーザー数ですが、食べログ:1億4,291万人、ぐるなび:6,100万人、Retty:1,700万人ととても多くの人の人が利用しています。そんなグルメサイトに登録をすれば、ユーザーの目に留まる機会も増やせ、店舗への送客に活用できます。特に飲食店をオープンしたばかりで、お店の認知度が低い場合には、ユーザー数の多いグルメサイトに登録することで、お店の存在をユーザーに広く知ってもらえるチャンスが大幅に増えるでしょう。

ただし、グルメサイトへの登録には広告費の出稿費用が、かかることがあります。無料プランがあるグルメサイトも多くありますが、有料プランを利用するよりは送客数が落ちる傾向にあるようです。おおよその料金プランは、グルメサイトによってかなり変わってきますが、比較的安いプランで「月額1万円~」で、高いものでは場合には「月額50万円」というハイパーなプランもあります。有料プランを活用する際には、毎月、それだけの金額をかけるだけの費用対効果がしっかり得られるものかどうか、をじっくり考えた上で決めるようにしましょう。

グルメサイト以外の外部プラットフォームは?

近年、掲載費用の金額が上昇、サービス自体の不信感、など様々な理由でグルメサイトに頼らずに集客を試みる飲食店サイトが増えています。所謂、脱グルメサイトの飲食店です。グルメサイトを使わないとなると、他に何かあるの…?と思う人もいるかもしれませんが、近年は、「Googleマイビジネス」「SNS」「デリバリー系サービス」などが利用できます。この中でも特に、登録しておきたいのが「Googleマイビジネス」です。

無料で施策できる!Googleマイビジネス

店舗や店舗サイトをオープンしたら、まずはGoogleマイビジネスに店舗情報を登録しましょう。
Googleマイビジネスは、無料で使えるGoogleのサービスです。
Googleマイビジネスのキャプチャ画像

登録した店舗情報(店舗の住所、電話番号、営業時間、店舗サイトなど)は、店舗名をGoogle検索やGoogleマップなどで検索した際に表示されます。また、料理のジャンルも細かく登録でき、カフェならカフェ、レストランならレストランなど分けられるので、店舗に合ったジャンルもしっかり登録しましょう。こうした登録をしておくことで、例えば「カフェ 東京」などで検索されたときに一定条件によって自店舗が表示されるようになります。

また、Google検索やGoogleマップでは、GPSの機能によって現在地に関連した検索ができます。一時期GoogleのCMでも良くやっていましたが、「近くのカフェは?」と検索するだけで、現在地から近いカフェをマップで表示してくれるというユーザーにとって便利な機能です。いますぐ近くのカフェに行きたいというユーザーに見つけてもらえるチャンスなので、Googleマイビジネスに登録して知ってもらうのは有効です。

他にも、Googleマイビジネスでは、グルメサイトと同様に口コミや評価ができます。口コミやレビューを見て、お店に行ってみようと考える人もいますし、そのまま詳しい情報を見たいと店舗サイトへアクセスする動線も作れるなどメリットが多いので、ぜひ登録しましょう。

ファンを作って拡散!SNSでプロモーション

店舗のオープン準備期間に一緒に進めておくと良いのがSNSの登録です。SNSには「Facebook」「Twitter」「インスタグラム」などがあります。店舗に興味を持ってくれたユーザーに情報を届けたり、既にファンになってくれたユーザーに拡散してもらったりするなど、様々な使い方があります。SNSに登録する必要はありませんが、可能でターゲットによって使い分けるのが理想です。複数のSNSを継続的に運用することが不安な場合は、店舗に来てくれるターゲット層が多く居そうなSNSを基準に登録しましょう。

また、店舗に実際に来てくれた人、店舗サイトに訪れた人対して「LINE」を使ったクーポン配布も有効です。定期的なクーポンの配布、キャンペーン情報の共有などリピーター客に繋げましょう。

Uber Eatsや出前館などフードデリバリー代行サービスに登録してプロモーションする

飲食店の集客売上アップを目指すならフードデリバリー代行サービスに登録してみましょう。フードデリバリーサービスとは、様々な飲食店の中から料理を注文し、そのユーザーの自宅または受け取りたい場所まで宅配するサービスのことです。一昔前は、デリバリーをするには自前または配達する人を雇い宅配していましたが、近年になり「Uber Eats」や「出前館」といった料理の配達を代行してくれるサービスが登場。飲食店が自前で配達員を雇用することなくデリバリーを始められるようになったことから、加盟する店舗も年々増えていてフードデリバリーの需要が大きく伸びています。

フードデリバリー代行サービスの中でもUber Eatsや出前館といった利用者が多い求心力があるサービスに登録することで、通常の店舗営業とデリバリーの両方から注文数を増やすことが可能です。さらに、新規ユーザーの獲得を促したり、店舗の認知度を高めたりして店舗全体の売上アップに繋げられるでしょう。共働き世代や単身世代の増加、生活スタイルの変化などの影響によりフードデリバリーの利用者は増えて行きますので、通常の店舗営業だけではなくデリバリーも始めてみてはいかがでしょうか。

本当に飲食店サイトは必要なのか…

飲食店サイトのデザイン・UI、コンテンツなどの基本情報から、プロモーション方法までを紹介してきました。ひとつのサイトを作るだけでも、考えることは沢山ありますし、やらなければならないことも多いです。個人でお店をオープンする場合、最初の頃はお店を切り盛りするだけ手一杯で、お店のサイトを作ったけど、運用もままならない…ということもあるでしょう。まずは、お店を軌道に乗せることが大切なので、無理をするくらいならサイト制作は一旦置いて置き、多少の余裕が生まれてから制作しても良いでしょう。

また、色々話した通り飲食店サイトの制作は様々ある集客方法のひとつでしかありません。店舗への集客と売上アップを一番に考えるのであれば、Googleマイビジネス、グルメサイトの登録、フードデリバリーサービスの活用といった方法の方が集客効果としては高いです。そのため、飲食店をオープンしたら絶対に店舗サイトを制作しなければならない、というわけではないことも理解しておく必要があります。実際、お店があってもサイトがないという飲食店も多いのです。インターネットを活用する方法はいくらでもありますので、本当に店舗にとって必要かどうかを見極めるようにしてください。

Webサイトの制作をするといっても、自分で制作するには時間がかかりますし、外注をしたらそれ相応の制作費用が必要です。店舗の開店前であればオープン準備に追われる人も多いはずなので、予算や余裕がある場合には、自店舗のサイトを作ってみましょう。また、お店が軌道に乗り、さらに集客を増やしたいと考えるようになったタイミングでサイト制作をするのも良いでしょう。

そうしたことも踏まえて「自分のお店をアピールするサイトを作りたい!」となったら、ここまでに紹介したことを加味して、「ユーザーの知りたい情報・自分たちの強み」が伝わる飲食店サイト制作をしてくださいね!

data maisonは月額165円からご利用いただける個人向けサブスクリプション・モデルです。

ひとつ調べたい項目があった場合、100サイト分調査するのに、おおよそ1日かかります(1サイト5分としても)。
それが40項目において100サイト分調査するなら、おおよそ2ヶ月(40営業日)かかります。
そのために専用の派遣社員やアルバイトを雇ったとしましょう。
時給2,000円の社員に毎日8時間×2ヶ月(40営業日)、この調査業務を行ってもらった場合、以下の計算になります。

40項目の調査を100サイト行った場合、
 期間:2ヶ月の調査+統計整理 で 費用:640,000円(諸経費除く) 
これがdata maisonを利用した場合、
 期間:即時 で 費用:月々200円(税別)

時間も2ヶ月の無駄を省き、費用も約1万分の3(=0.03%)まで削減できます。
これは経営者にとっても、Webマーケティング担当者にとっても、デザイナーにとっても、営業マンにとっても、めちゃくちゃ効率的ですよね。

時は金なり! 出る金は制すなり! です。

さぁ、今すぐ業界データを購入しよう!

気になる業界プランを購入!

今すぐ最新の業界データを手に入れよう!

data maisonは、圧倒的な
低価格で同業サイトを徹底分析

かんたん登録で、登録したその月から最新のデータが手に入る!
簡単3ステップ

Webサイト調査を手軽に簡単に

※ ご契約にあたり初回契約期間は3ヶ月から。
以降月次更新となります。

※ 対象となる業界やWebサイトによって月額が異なります。

※ 価格は全て税込です。

  • ビッグデータ
  • 業界データ
  • 個別データ
  • 最新データ
  • 過去データ