「電話に出られない」酒場のために、壁の短冊をそのままスマホに持ち込んだ話

赤羽の路地に58年、という設定の架空の大衆酒場「まるげん」のホームページ制作サンプル。黒板・提灯赤一色を捨てて「短冊の壁」を選んだ理由、電話を減らすための設計、5ページが約3時間で形になるまでをご紹介します。

この事例は、大衆酒場・居酒屋のホームページがどんなふうに仕上がるかをご覧いただくための制作サンプルです。「大衆酒場 まるげん」という店舗も、三代目の店主も、常連さんも、すべてホームページ番頭が設定した架空のモデル店舗です。掲載している写真も、このサンプル用に用意したもの（AI生成）です。ただし、デザインの検討から5ページの公開までは本当に行った制作で、迷った方向も、捨てた方向も、かかった時間も、そのまま書いています。

モデル店舗の設定：赤羽一番街の路地に58年、もつ煮と燗酒の店

モデル店舗の設定はこうです。東京都北区赤羽、一番街の路地の奥。1968年に祖父が創業し、父が継ぎ、いまは三代目の丸山源太さん（45）が祖父のレシピの白味噌もつ煮込みを守っている。カウンター12席と小上がり2卓、表に立ち飲み。営業は15時から23時（L.O.22:30）、土曜は13時開店、日曜・祝日が定休。予約は4名以上の小上がりだけ、カウンターと立ち飲みは来た順。支払いは現金とPayPayのみでカードは使えない。もつ煮の持ち帰りは1パック600円で17時から21時、なくなり次第終了。客単価は2,500円くらい。大衆酒場らしく、ルールが多くて、しかも全部大事な情報ばかりです。

サイトの仕事は二つだけ。「電話を減らす」と「今日行こうと思わせる」

設定上、この店は営業中、電話に出られないことが多い、ということになっています。それでも「今日やってる？」「何時まで？」「4人で予約できる？」「カード使える？」の電話は鳴ります。だからこのサイトの仕事は、まず電話を減らすこと。開いて3秒で「今日やっている／いくら／ひとりOK／予約は4名から／現金かPayPay」が読めること。そしてもう一つは、一人客や若い人に「今日行こう」と思わせること。小綺麗にはしない。情報の密度は高く、言葉は短く。この二つをコンセプトの軸に置きました。

検討して捨てた3つの方向

最初に候補に上がったのは「黒板」でした。黒板の緑黒地にチョーク書体で品書きを走り書きする、あの雰囲気です。ただ、チョーク書体は玩具っぽく崩れやすく、居酒屋サイトの定番でもある。似たサイトが並ぶ中で埋もれてしまうので、却下しました。

次に「提灯の赤一色」。画面全体を提灯の赤い紙にして墨文字で組み、内側から灯った提灯のようなサイトにする案です。これは絵としては強いのですが、5ページ分の長文を赤地で読むと目が疲れる。赤は捨てずに、「面」としてヒーロー帯や営業ステータスなど要所にだけ残す形で吸収しました。

そして「白×写真の今風グルメサイト」。白地に大きな料理写真を並べる、いま一番よく見るスタイルです。これはモデル店舗の設定として最初から「白っぽいオシャレなサイトはNG、小綺麗にしない」と決めていたので、検討の対象にもしませんでした。

採用したのは「短冊の壁」。黒が壁、赤が灯り、金が値段、クラフト紙が言葉

最終的に選んだのは、店の壁をそのままスマホに持ち込む「短冊の壁」です。墨黒の壁に、赤提灯の灯りと、クラフト紙の短冊が並ぶ。使う道具は店の中にある実物（短冊、提灯、縄のれん、湯気）だけに絞りました。色の掟は「黒が壁、赤が灯り、金が値段、クラフト紙が言葉」。純白はどこにも使わず、本文の白も湯気の色に寄せたわずかに温かい白です。書体は見出しと値段の数字に極太のポスター書体、短冊の縦書きには筆文字、本文は読みやすいゴシック。客層の半分が40〜60代男性という設定なので、本文は15px以上、小さな補助文字も12px未満にはしないと決めています。

お品書きのページは、「短冊の壁」そのものです。もつ煮込み480円、煮込み豆腐380円、持ち帰り1パック600円。短冊の上端には小さな穴と赤い紐があり、紙の縁はわずかに不揃い。値段は札の下部に極太の数字で置き、マウスを乗せると紐を支点にわずかに揺れます。数字の色は、クラフト紙の短冊の上では墨色、黒い壁に直接置くところ（トップの名物「もつ煮込み 480円」など）では燗酒の金です。載せている価格は設定で決めた分だけで、それ以外の品は「日替わりは店の黒板で」と一枚の短冊に書くにとどめました。存在しない価格を作らない、というのはサンプルでも本番でも同じ姿勢です。

「電話ファースト」をあえて外した、営業中の提灯とスマホの固定バー

飲食店のサイトでは、スマホ画面の下に電話ボタンを固定するのが定石です。でもこの店の目的は電話を減らすこと。なので固定バーは「営業ステータス」「アクセス」「小上がり予約」の三つにして、電話番号は載せつつ、必ず「営業中は出られないことが多いです」を添えました。営業ステータスは赤提灯のイラストで、営業中は内側から灯ってかすかに明滅し、時間外は墨色に沈みます。「本日 準備中 ─ 13:00 開店」「本日 定休（日曜・祝日）」のように、日本の祝日も判定して切り替わる仕組みです。ヘッダーの右端、スマホの固定バーの左、トップの写真の上と、どこを開いても今日やっているかが目に入るようにしています。

5ページの中身：トップ／お品書き／店のこと／初めての方へ／アクセス・ご予約

納品したのは5ページです。トップは夜の外観写真の上に「安く、旨く、長居しない。」の一文と営業ステータス、その直下に「営業時間」「予約ルール」「支払い」「持ち帰り」の4枚の短冊。開いて3秒で答えが出る構成です。「店のこと」は1968年の創業当時という設定の白黒写真を大きく置き、祖父・二代目・三代目の年表と、店内の構成、店舗概要の表。「初めての方へ」は、ひとりで入れるか、立ち飲みの作法、混む時間、持ち帰り、そしてアコーディオンで畳まず全部開いたFAQ。「アクセス・ご予約」は赤羽駅東口からの道順を3ステップで示し、地図の下に小上がり予約フォーム（4名以上のみ）を置きました。ちなみに「常連の声」もサイトに載せていますが、これも設定上の架空の声です。

制作時間は約3時間（実測）

設定の整理からデザインの方向決め、5ページの組み立てと公開まで、かかった時間は約3時間です。ホームページ番頭はチャットで話しながらAIが組み立てる仕組みなので、「黒板はやめよう」「赤は要所だけに」「電話ボタンは外そう」といった判断を会話の中で重ねながら、そのまま形になっていきます。公開後に「混む時間帯」や「税込表記」など店主に確認したい項目がいくつか残るのも、本番の制作とまったく同じです。

この事例のようなホームページを、あなたのお店にも。営業時間もルールも多くて、電話には出られない。そんなお店ほど、開いて3秒で答えが出るホームページが役に立ちます。チャットで話すだけで作れます。hpbanto.com へどうぞ。