PLAN A / 共感先行
ADOPTEDHERO → PROLOGUE → FIRE/SAKE → COURSE → WALL MENU → ROOM → FAQ → RESERVE
十席の店で最初に消したい迷いは「入っていい店かどうか」なので、序で用途を言葉にし、火と酒で店の守り方を見せてから、コースとお品書きで予算、席で人数、質問を経て予約帳にたどり着くこの順を採用しました。席に着いてから会計までの時間と同じ並びです。
炭火焼鳥と純米 炭音(すみおと)
夜の集客LP と 予約AIチャット
2026.09
大箱の居酒屋と同じ見せ方では、十席の店は選ばれません。最初の画面は屋号の「炭音」と「炭の音を、聞く夜」の一文だけを縦書きで置き、そこから席に着いて会計を済ませるまでの順に、炭黒の画面のまま読み進める構成にしました。お品書きは壁に吊るした短冊として横に流し、予約の画面だけを和紙の色に切り替えています。あわせて、焼き場に立っていて電話に出られない時間帯の問い合わせを、LINE風のトークでAIが受けて予約台帳まで書き込むデモを作っています。
(04) INFORMATION
MEMO
(05) DESIGN NOTE / なぜこの構成にしたか
01
この業界の集客構造
- 店を探す場所がグルメサイトと地図アプリの一覧。何十軒の中で、写真と価格帯だけを見て数十秒で外される。
- その一覧経由の予約には1名あたりの送客手数料がかかる。自店サイトから直接入った予約が、そのまま利益の差になる。
- 十席の店は席数が売上の上限。単価を上げるより、埋まらない曜日と時間帯を埋めるほうが効く。
- 来店の決め手は味そのものより「誰とどんな夜を過ごすか」。用途が決まった瞬間に店が選ばれる。
02
狙った導線
- 最初の画面は屋号「炭音」と「炭の音を、聞く夜」の一文を縦書きで置き、予約へのボタンはヘッダーの「予約を試す」1つにした。席の数は次の「序」で、店主の語りとして出す。
- 「一本を待ち、一杯を味わう、声を張らない夜」で用途を先に言葉にしてから、火・酒・炙の三つの章で守っていること(備長炭、純米酒十二種、たれと塩)へ進む。
- コース3つ(4,800円・6,600円・8,800円)を先に置き、その後のお品書きで単品240円からを開示。最後に「お会計の目安」で単品なら5,000〜7,000円、コースなら7,000〜9,000円と締める。予算の不安を3段で消す。
- 予約は「予約帳」の形のフォームを主にし、電話は案内の1行に留めた。日曜・第2月曜と当日のコースは入力の時点で止め、送信も保存もしないことを帳面の中に書いた。
03
デザインの根拠
- 地は炭黒の #0F0E0D、文字は和紙の #EDE4D6。面を変える所も #181614 や #221E1B へ半段上げるだけで白い画面を出さず、予約の区間だけを和紙の地に反転させて帳面を開く合図にした。差し色は熾火の #E5642A を章の頭の灯り・推し札の価格と輪郭・開いた問いの番号に、藍の #2C4C6E を推し札のタグ・お飲みものの木札・予約帳の綴じ線に振り分けた。金は使わない。
- 見出しは Zen Old Mincho、本文は Zen Kaku Gothic Antique の400だけ。数字と SUMIOTO、コース名の読み仮名は Cormorant Garamond。屋号とH1の8字だけを2.8KBの部分フォントに切り出し、幕開けはその到着だけを待つ。
- 幕開けは黒い画面に熾火が一点灯り、そこから円く夜が広がる。0.7秒で開き、見出しは1.2秒以内に読める。同じタブの2回目は幕を出さない。章の頭は序・火・酒・炙・献・札・席・問・帳・灯の一字と細い縦線で、線の長さと先に灯る点の色を章ごとに変えた。
- 看板の演出はお品書きの「壁の短冊」。25品を和紙の短冊に縦書きし、焦げ茶の木札で串・逸品・お飲みものに区切って横に吊る。PCでは区間を画面に留めて横に流し、送る速さに応じて短冊が釘を支点に揺れる。スマホは指で横に送る。
04
検証で捨てた案
- 動画を最初から読み込む案。幕が開く間に0.7〜1MBの映像が走ると見出しの着地が遅れるため、映像は幕が開いてから読み始め、それまではポスター写真で見せる形にした。動きを減らす設定とデータセーバーでは自動再生しない。
- 串の品名を流す文字帯、価格の数字カウント、画面全体に付くカーソルの輪。動く場所が増えるほど看板の短冊が目立たなくなり、数えている途中の数字が本物の値段に見える。動きは短冊の壁と幕開けに絞った。
- 口コミ点数の掲載。架空ブランドで数字は作れず、実店舗でも外部サイトへ出口を作ることになるので、カウンターから見た使われ方の記述に置き換えた。
- 予約フォームでアレルギー・記念日・席希望を必須にする案。項目が増えるほど途中で止まるため、必須は最小にして残りはAIチャット側で聞く形にした。
(06)
Structure 3 Plans
構成の順番だけを変えた3案を作り、はじめての人が最初の30秒で「自分が入っていい店か」を判断できるのはどれかで選びました。
PLAN B / お品書き先行
HERO + WALL MENU → COURSE → ROOM → FIRE/SAKE → RESERVE
短冊の壁を最初に見せれば看板の演出は目立ちますが、品目と値段から読ませると単品の安さ比べになり、炭と酒の話まで届かないまま次の店へ移られるので見送りました。
PLAN C / 店主先行
HERO → OWNER → ROOM → FIRE/SAKE → 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は屋号を右上の棚の暗がりに、見出しを左下に置き、見出しの裏だけに小さな暗がりを敷いた。写真全体は暗くしない。ヒーロー映像は幕が開いてから読み始め、スマホ用は0.73MBに抑えた。
- お品書きは短冊を指で横に送る。幅88pxの短冊が3〜4枚ずつ画面に入り、木札の位置へはタブで飛べる。壁の下の細い線が、どこまで見たかを示す。
- 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 ↓
(02) ✶ 2026 / SALON
orihi
ヘアサロン / 自社予約に寄せたLP × 予約管理と顧客カルテ