PLAN A / 共感先行
ADOPTEDHERO → NIGHT → REASON → COURSE → MENU/ROOM → RESERVE
十席の店で最初に消したい迷いは「入っていい店かどうか」なので、用途の共感から入り、予算と席数を予約ボタンの手前で出し切れるこの順を採用しました。
炭火焼鳥と純米 炭音(すみおと)
夜の集客LP と 予約AIチャット
2026.08
大箱の居酒屋と同じ見せ方では、十席の店は選ばれません。写真で夜の空気を出すところまでは同じにして、そのあとに席数・予算・使われ方を先に開示する構成にしました。あわせて、焼き場に立っていて電話に出られない時間帯の問い合わせを、LINE風のトークでAIが受けて予約台帳まで書き込むデモを作っています。
(04) INFORMATION
MEMO
(05) DESIGN NOTE / なぜこの構成にしたか
01
この業界の集客構造
- 店を探す場所がグルメサイトと地図アプリの一覧。何十軒の中で、写真と価格帯だけを見て数十秒で外される。
- その一覧経由の予約には1名あたりの送客手数料がかかる。自店サイトから直接入った予約が、そのまま利益の差になる。
- 十席の店は席数が売上の上限。単価を上げるより、埋まらない曜日と時間帯を埋めるほうが効く。
- 来店の決め手は味そのものより「誰とどんな夜を過ごすか」。用途が決まった瞬間に店が選ばれる。
02
狙った導線
- 最初の画面で店名・エリア・営業時間・全18席・予約ボタンまで出す。写真だけの雰囲気FVにしない。
- 「うるさくない店を探している夜に」で用途を先に言葉にしてから、守っている三つ(炭・純米酒・おまかせと単品)へ進む。
- コース3プラン(4,800円・6,600円・8,800円)を先に置き、その後のお品書きで単品240円からを開示。予算の不安を2段で消す。
- 予約は席予約フォームを主、電話を副。焼き場に立つ時間は折り返しが遅れることまで書き、待たされる前提を先に伝える。
03
デザインの根拠
- 帯色は熾火の色から取った臙脂 #8C2F1B。赤提灯の彩度まで上げず、暗い写真の上でもボタンが沈まない濃さを選んだ。
- 地の色は炭の #14100D、文字は白ではなく生成りの #EFE6DD。夜の照度に合わせて、白い画面のまぶしさを消す。
- 見出しは明朝(Shippori Mincho)、本文はゴシック。字面で和の空気を出し、価格や営業時間は等幅で桁を揃えて読ませる。
- 差し色の #E0A56B は炭火の照り返し。価格・小見出し・ラベルだけに使い、押させたいボタンとは色を分ける。
04
検証で捨てた案
- 動画ヒーロー。炭火の短尺ループは夜の空気が出るが、店の前で探している人の初回表示が重くなるため静止画とコピーに戻した。
- 希少部位の推し出し。串の写真で埋めると他店と見分けがつかず、席と時間の使い方を売る構成に組み替えた。
- 口コミ点数の掲載。架空ブランドで数字は作れず、実店舗でも外部サイトへ出口を作ることになるので、カウンターから見た使われ方の記述に置き換えた。
- 予約フォームでアレルギー・記念日・席希望を必須にする案。項目が増えるほど途中で止まるため、必須は最小にして残りはAIチャット側で聞く形にした。
(06)
Structure 3 Plans
構成の順番だけを変えた3案を作り、はじめての人が最初の30秒で「自分が入っていい店か」を判断できるのはどれかで選びました。
PLAN B / お品書き先行
HERO + MENU → COURSE → ROOM → REASON → RESERVE
品目と値段から読ませると単品の安さ比べになり、席の使い方まで届かないまま次の店へ移られるので見送りました。
PLAN C / 店主先行
HERO → OWNER → ROOM → REASON → COURSE → RESERVE
焼き手と店内から入ると世界観は伝わりますが、席数と予算の結論まで遠く、はじめての人ほど判断できずに離れるので見送りました。
(07)
Final Design PC View
採用した案Aで組んだ最終形です。写真で夜の空気を出しながら、席数・予算・予約方法は上から読めば必ず通る位置に置いています。
FIG.07 / PC版 全体スクリーンショット(枠の中をスクロールできます)
(08)
Smartphone
店を探しているのは、夜の街に出たあとのスマホの中です。画面の下に電話と席予約の2ボタンを固定しました。
FIG.08-A / FVと固定の予約バー
FIG.08-B / お品書きと会計の目安
SP DESIGN NOTE
- 画面下に「電話する」と「席を予約する」を並べて固定。当日で急いでいる人のために、電話も同じ大きさで残した。
- FVは写真の暗い側に文字を置き、店名・エリア・営業時間・全18席までを1画面で読み切れるようにした。
- お品書きは価格を右端で縦に揃え、点線でつないだ。指を動かさずに金額だけを上から追える。
- FAQは開閉式で7問。ひとり客・子ども連れ・喫煙・貸切と、暖簾をくぐる前に気になる順に並べた。
(09)
Operation Note
業務設計メモ / 予約・問い合わせAIチャットのデモを作るまでに整理したこと。
01
現状の課題
- 予約と問い合わせが電話・LINE・Web予約に散っている。焼き場に入る17時以降は電話に出られない。
- あとで折り返しても、相手はすでに別の店を押さえている。取りこぼしが数として残らない。
- 営業時間、ひとりでも入れるか、アレルギーへの対応。同じ質問への同じ返答を毎晩くり返している。
- 貸切や大人数の相談も同じ電話に混ざる。判断が必要な話だけを拾い出す仕組みがない。
02
ゴール
- 営業中に届いた問い合わせへ、電話に出なくても返せる状態にする。
- 確定した予約が、そのまま台帳の1行になる。紙とアプリの間の書き写しをなくす。
- AIが答えてよい範囲と、店主が判断する範囲を線で分ける。
- カウンター・小上がりの残席が、返信するその場で分かるようにする。
03
打ち手
- LINE風のトークUIに、受信トレイ(3会話)・チャット・予約台帳を1画面で並べた(デモは単一HTML)。
- 空席の確認、日時と人数の変更、コース内容、アレルギー、遅刻の連絡はAIが自動で応答し、予約カードを返す。
- 席数(全18席)を超える30名の貸切相談のような案件は、AIが答えを作らず「人の確認が必要」のキューへ送り、店主へ引き継ぐ。
- 返信した内容は自動処理ログに時刻付きで残し、あとから何を自動で答えたか追えるようにした。
04
効果試算
- 営業中の電話対応 ▲60% (試算)
- 問い合わせへの初回返信 平均12分 → 即時 (試算)
- 予約1件の台帳への転記 3分 → 0分 (試算)
- 判断が必要な相談(貸切など)の扱い 電話任せ → 店主キューへ (試算)
上記はすべて架空ブランドを前提とした試算値です。実測値ではありません。実際の数値は業務量と体制によって変わります。
(10) SELECTED WORK ↓
(04) ✶ 2026 / CARS
Tsugumi Auto
中古車販売・整備 / 在庫検索型のLP × 車検・点検リマインドCRM