ベーカリーの焼きたてパンWeb予約システム開発

導入前の状況

ベーカリーI様では、開店前後の時間帯に取り置きの電話が集中し、製造中の手を止めて対応する状態が続いていました。予約の内容はメモや口頭で共有されるため、受け取り時に「頼んだはずのパンがない」「数が違う」といった行き違いも起きていました。お客様の多くは常連の方で、スマホの操作に慣れていない方も含まれるため、会員登録やパスワード管理が必要な仕組みでは使ってもらえない、というのが最初の前提でした。

システム構成と技術

• 予約画面・管理画面ともブラウザで動くWebアプリとして構築。サーバーはNode.jsで、データベースはSQLiteとPostgreSQLの両方に対応させ、本番はクラウド上のPostgreSQLで運用しています
• ログインは電話番号のみ。未登録の番号は初回の予約時に自動で会員として登録されます。パスワードを設けないのは店主様と相談のうえで決めた意図的な仕様です
• 商品ごとに掲載期間と休売期間（複数指定可）を設定でき、在庫切れや期間外は自動的に「SOLD OUT」表示になります
• 受け取りは営業時間内を15分刻みの枠で管理し、1種類あたりの上限個数や予約の締切時刻も管理画面の設定タブから変更できます
• 食パンは注文時に切り方（ホール・ハーフごとの枚数）を選べるようにし、袋詰めは「まとめる・分ける」を注文単位で指定できます
• 予約データから袋詰めリストを自動生成し、朝の準備作業を一覧で進められるようにしました
• 管理画面は公開サイトと同じデータベースを共有し、更新は自動デプロイで本番へ反映される構成です

ブランドカラーのネイビーとクリーム、ゴールドを画面全体で統一し、実店舗のロゴをヘッダーと予約券に配置しています。イラストはすべてSVGで描き、絵文字は使わない方針にしました。予約に特化したサイト構築はホームページ制作、店舗の業務全体を扱う場合は業務システム開発のページで詳しく紹介しています。

開発の進め方

まず予約と受け取りの基本フローだけを作り、店主様に実際の営業で使っていただきながら、設定項目を増やしていきました。「掲載期間」「袋詰めの分け方」「食パンの切り方」は、いずれも運用を始めてから出てきた要望です。設定は管理画面の設定タブに集約し、当社に依頼しなくても店側で変更できる形にしています。

また、待ち時間や来店を楽しんでもらう仕掛けとして「パン生ゲーム」を追加しました。当初はブラウザ内で完結する双六でしたが、店頭のQRコードを読み取るたびにパンが一段階ずつ育ち、規定回数で完成すると引換チケットが発行されるチェックイン型の育成ゲームに作り替えています。チケットはお客様のマイページに表示され、スタッフは管理画面の専用タブでコードを入力して交換します。一定期間チェックインがないと育てかけのパンがしぼんでリセットされる仕様も、来店のきっかけづくりとして加えました。

運用してわかったこと・今後

電話番号だけのログインは「常連さんがその場で使える」という点で正解でした。一方で、通知メールやLINEでの連絡は設定の保存までにとどめており、送信機能は今後の追加項目です。在庫の減算はデータベース側で競合を防ぐ形にしてあり、複数のお客様が同時に同じパンを予約しても数が合わなくなることはありません。

本番環境はクラウド上で24時間稼働しており、店側の作業は朝に袋詰めリストを確認するところから始まります。今後は予約データをもとにした製造数の目安表示など、製造計画に踏み込む機能を検討しています。