店舗向けオンライン
予約システム開発

プロジェクト概要

複数拠点を展開するリラクゼーションサロン（※サンプル）を想定した、オンライン予約システムの設計・実装を担当しました。それまで電話とメールで受けていた予約をWeb上で完結させることを目的に、店舗・スタッフ・メニューの組み合わせから空き枠を算出し、その場で予約が確定する仕組みを一から構築しています。

利用者側の予約フォーム、店舗スタッフが使う予約台帳、本部が全店舗を横断して見る管理画面の3つの画面を用意。予約時の事前決済にはStripeを採用し、前日のリマインド通知までを自動化しました。

担当した主な機能

• 店舗・スタッフ・メニュー別の空き枠算出と予約カレンダー
• 予約フロー（新規 / 会員・変更・キャンセル）
• Stripeによる事前決済・店頭支払いの選択制
• キャンセルポリシーに応じた返金処理（Refunds API）
• 予約確認・前日リマインドのメール／SMS通知
• 店舗スタッフ向け予約台帳（当日一覧・電話予約の代理登録）
• 営業時間・定休日・スタッフシフトの登録と枠への反映
• 本部向け管理画面（複数店舗の予約状況・稼働率の一覧）

使用技術・ツール

フロントエンドはNext.js（App Router）+ TypeScript、UIはTailwind CSSで構築しました。バックエンドはNode.jsで実装し、データベースはPrisma + PostgreSQLを使用。予約枠は日時・店舗・スタッフの組み合わせで一意になるよう制約を設け、同時アクセス時の二重予約をデータベース側でも防いでいます。

決済はStripeのPayment Intentsで与信・確定を分離し、キャンセル時はRefunds APIで返金。決済結果はWebhookで受け取り、署名検証を行ったうえで予約ステータスへ反映します。リマインド通知は定期実行ジョブから配信し、ホスティングはVercel、デプロイはGitHub Actionsで自動化しました。

工夫した点

予約は「空いている枠を選ぶ」だけで完了するのが理想と考え、日時・店舗・メニューのどこから入っても残りが自動的に絞り込まれる導線にしました。スマートフォンでの操作を前提に、カレンダーと時間帯の選択は片手で完結する配置に調整しています。

現場運用への配慮も設計に組み込みました。電話予約をスタッフが代理登録できる導線、急な休みに対応するための枠の一括停止、直前キャンセル時の扱いをポリシー設定から変更できる仕組みを用意し、システム側の都合で運用が縛られないようにしています。

実績一覧に戻る