RESTAURANT
飲食店・レストランのホームページ制作
地図や口コミサイトで見つけてもらい、店のサイトで決めてもらう。お品書きを自分たちで書き換えられる形にして、予約の入口を一本にまとめます。写真が主役の業種だからこそ、値段と営業時間が確実に読めることを外しません。
ISSUES
店のホームページで、こんなことが起きていませんか
食べログやGoogleマップの情報しか出てこず、店の考えを伝える場所がない
季節でお品書きが変わるのに、更新のたびに制作会社への依頼と費用が発生する
予約が電話だけで、仕込みや営業中の着信を取りこぼしている
写真はあるが撮った時期がばらばらで、いまの店の雰囲気と合っていない
「子ども連れで入れるか」「個室はあるか」を電話で聞かれ、そのたびに手が止まる
アレルギーや原材料の問い合わせに、その場で答えるしかない
スマートフォンで見るとお品書きの表が崩れて、値段が読めない
臨時休業を知らせる手段がSNSしかなく、来店してから気づかれてしまう
店を探す人は、地図で場所を見つけたあと「本当にここでいいか」を確かめにサイトへ来ます。そこで見るのは、お品書きと値段、営業時間、席の様子の4つです。凝った作りより、この4つが最新で、スマートフォンで読めることのほうが効きます。
SAMPLES
飲食店向けのデザインテンプレート
掲載している店名・住所・電話番号・営業時間・価格・日本酒の銘柄は、すべて架空のものです。実在する店舗・銘柄のものではありません。写真はすべてAIで生成したもので、実在する人物・料理・店舗ではありません。デザインと使い勝手をご覧いただくための見本としてUniMindが制作しました。
STRUCTURE
店のサイトに必要なページ
業態と席数によって増減しますが、下の形がひとつの目安です。ページを多く作ることが目的ではなく、来店を決めるまでに必要なことが、決める順に並んでいるかどうかが大切です。
- トップ 何を出す店で、いつ開いていて、どこにあるか。開いて数秒で分かること。予約への入口を最初に置きます。
- お品書き このページを見に来る人がいちばん多いところです。品名・説明・価格を、スマートフォンで読める形に組みます。店で書き換えられる作りにするのが要点です。
- こだわり・お店について 素材、仕入れ、作り方、店主の考え。近隣の店との違いが出るのはここです。写真だけでは伝わらないところを言葉にします。
- 店内のご案内 席数、カウンターかテーブルか、個室の有無、貸切の可否。人数と用途が決まっている人は、ここを見て決めます。
- ご予約 電話、フォーム、外部の予約サービス。どれを前に出すかは店の運用で変わります。受けられない時間帯があるなら、それも書きます。
- アクセス・営業時間 住所、最寄り駅からの道順、駐車場、営業時間と定休日。ランチとディナーで時間が違うなら、分けて示します。
- お知らせ 臨時休業、年末年始、季節の献立。急ぎで出せることが大事なので、店で更新できる形にします。
- 採用 人が採れないという相談は、飲食店でとくに多くいただきます。求人サイトに頼りきりにせず、店のサイトから直接応募いただける入口を作ります。
WHAT MATTERS
店のサイトで、私たちが外さない3つのこと
1. お品書きは、店で書き換えられる形にする
飲食店のサイトでいちばん古くなりやすいのがお品書きです。季節で品が入れ替わり、仕入れで価格が動きます。そのたびに制作会社へ依頼が要る作りにすると、更新が止まります。止まったサイトは、載っていない品を注文されたり、古い値段でもめたりする原因になります。
そこで、品名・説明・価格を一覧で編集できる形にして、パソコンの操作に慣れていない方でも書き換えられるようにします。月替わりの区画がある店では、そこだけ差し替えられるように分けておきます。更新の頻度を先にうかがってから作りを決めるのは、このためです。
2. 予約の入口を、ひとつに決める
電話、フォーム、外部の予約サービス、SNSのメッセージ。入口が増えるほど取りこぼしが起きます。店の運用に合う入口をひとつ決めて、それを全ページから押せる場所に置くのが基本です。
仕込み中や営業中に電話を取れない店なら、フォームか予約サービスを前に出します。逆に、当日の席の空きを見ながら受けたい店では、電話を前に出したほうが早く済みます。どちらが正しいということはなく、店の回し方で決まります。
3. 写真が主役でも、読めることを譲らない
料理の写真は大きく見せたいものですが、写真の上に文字を置くと読めなくなります。デジタル庁デザインシステム（DADS）とWCAG 2.2 AAの考え方を土台にして、次のような基準を満たすように設計します。
写真の上に文字を置くときは、暗い板か濃淡を必ず敷いて、コントラスト比4.5:1以上を実際の描画で測る
価格は等幅の数字で組み、桁が揃って見えるようにする
電話番号や予約ボタンのタップ領域を44px以上にする
営業時間の表は、縮めずに読める形にする
動きを減らす設定にしている方には、装飾のアニメーションを止める
見本の「水澄」は、写真の上に置く文字のために7種類の濃さを写真の明るさごとに測って決めています。雰囲気を作るための暗さと、読むための暗さは別物だからです。
FLOW
飲食店の場合の進め方
基本の流れはご利用の流れのとおりです。飲食店ならではのところだけ、ここに書いておきます。
- 何を売りにするかを、ひとつに絞る 素材か、作り方か、店主か、空間か。全部を並べると何も残りません。いちばん強いものを決めてから、写真と文章の順番を組みます。
- お品書きの更新のしかたを先に決める 月替わりなのか、季節ごとなのか、価格だけ変わるのか。更新の頻度によって作りが変わるので、デザインより先に決めます。
- 撮影は営業時間の外で 仕込みの前か、休業日か。料理は作ってから時間が経つと見た目が変わるので、撮る順番まで組んでから伺います。
- 予約の受け方を決める 電話だけにするか、フォームを置くか、外部の予約サービスにつなぐか。取りこぼしがいちばん多いところなので、早めに決めます。
- Googleビジネスプロフィールと揃える 営業時間や定休日が、サイトと地図で食い違っていると来店前に迷わせます。公開のタイミングで両方を合わせます。
- 公開後の更新の練習 臨時休業のお知らせは、その日に出せることが大事です。実際に操作していただきながらご説明します。公開して終わりにはしません。
FAQ
店のホームページについて、よくいただくご質問
変えられる形でお作りします。品名・説明・価格を一覧で編集できるようにして、操作の説明もあわせて行います。季節で入れ替わる品がある場合は、その区画だけ差し替えられるようにしておくと、毎月の手間が変わります。
いま店にある写真から始められます。足りないところは撮影の手配もご相談いただけます。料理、店内、店主の手元。顔を大きく写さなくても、店の雰囲気は十分に伝わります。営業に差し支えない時間帯に絞って伺います。
はい。フォームで受ける形にも、すでにお使いの予約サービスにつなぐ形にも対応できます。定休日を選べないようにする、席の種類ごとに受付を分ける、当日の予約は電話のみにする、といった調整も行います。
デザインテンプレート「水澄」には、日付・時間帯・人数・お席の希望まで選べる予約フォームを入れてあります。見本のため送信先は持たせていませんので、操作だけお試しください。なお、予約を電話と外部の予約サイトだけに逃がす作りにすると、サーバーの用意が要らないぶん公開までが早く、運用も軽くなります。どちらがよいかは一緒に決めましょう。
法律で表示が義務づけられているのは容器包装された加工食品で、店内で出す料理には義務がありません。ただ、聞かれることが多い項目なので、「お申し付けください」と書いて受け口を作っておくだけでも、問い合わせの手間と行き違いは減ります。書ける範囲は店の体制によって変わるので、無理のないところを一緒に決めます。
集客の入口としては、地図や口コミサイトのほうが強い場面もあります。ただ、そこに載せられるのは決まった項目だけで、店の考えや作り方を自分の言葉で書ける場所は自分のサイトしかありません。
口コミサイトから来た人が最後に見るのが店のサイトです。地図で見つけてもらい、サイトで決めてもらう。役割を分けて考えるのが現実的です。
すべて載せるより、読む順番を作るほうが効きます。はじめての人が何を頼めばよいか分かる並べ方にして、細かい品は下にまとめます。品数が多い店ほど、最初に目に入る数品で印象が決まります。
ご相談いただけます。ただし、翻訳を用意すると更新のたびに二重の手間がかかります。お品書き全体を訳すのか、店の案内と注意事項だけにするのか、更新の負担まで含めて決めることをおすすめしています。
はい。居酒屋、カフェ、焼肉、イタリアン、寿司。業態によって、来る人が先に知りたいことは変わります。すぐに席を確保したいのか、じっくり比べてから決めたいのかで、ページの並べ方そのものが変わりますので、業態に合わせて構成を組み替えます。
ページ数やご希望の内容によって変わるため、お話をうかがったうえでお見積りをご用意しています。ご相談・お見積りは無料です。「この範囲でどこまでできるか知りたい」という段階のご相談も歓迎しています。