予約受付・管理・LINE通知を一つに
今治Excel教室 予約管理アプリ
今治Excel教室の個別指導・グループ指導を、スマートフォンから予約できるWebアプリです。 受講者は空き枠を見て申し込み、講師は予約枠・予約状況・通知を一元管理できます。 メールに加えてLINE公式アカウントとも連携し、予約通知や前日リマインドを届けます。
画像をクリックすると、予約受付・管理・通知の全体像を大きく確認できます。
受講者が使いやすい予約体験
スマホ・PCから簡単予約
ログインせずに空き状況を確認し、個別指導またはグループ指導を予約できます。
メールとLINEで通知
予約受付・確定・キャンセル通知に加え、連携した利用者へ前日リマインドを送信します。
予約内容を自分で確認・キャンセル
確認メールに記載された専用URLから、ログインせずに予約をキャンセルできます。
予約の流れ
- 1個別指導またはグループ指導を選ぶ
- 2空き枠から希望日時を選び、時間と料金を確認する
- 3氏名、連絡先、相談内容、受講方法などを入力する
- 4予約完了画面と確認メールで予約番号・内容を確認する
- 5希望者はLINE公式アカウントと連携し、通知を受け取る
主な機能
個別指導の30分予約グリッド
向こう1週間の空き枠を確認し、開始・終了時刻を選択します。連続する時間帯と料金をその場で確認できます。
グループ指導の残席表示
月カレンダーと日程一覧から開催日と残席を確認し、空きのある回へ申し込めます。
準備・移動時間を自動確保
個別予約の前後30分を「準備中」として自動的に予約不可にし、連続予約による運用負荷を抑えます。
予約枠・料金・場所候補を管理
講師側の管理画面から、受付枠の追加・繰り返し設定、料金、対面時の場所候補を管理できます。
予約ステータスを一覧管理
申込、確定、完了、キャンセルを一覧で確認し、ステータス変更に合わせて通知を送ります。
Googleスプレッドシート連携
予約枠、予約、場所候補、ログ、LINE連携情報を、運営者が確認しやすいスプレッドシートへ保存します。
個別指導とグループ指導に対応
個別指導では30分単位で連続する空き時間を選択できます。グループ指導では、 開催日と残席を確認して申し込めます。料金や受講方法は予約画面で確認できます。
管理者向けの一元管理
予約枠カレンダー、予約一覧、場所候補、料金、リマインド時刻を管理画面から設定できます。 予約の変更操作とエラーはログへ記録し、日々の運用を確認しやすくしています。
メール・LINE通知
メールを基本の予約控えとして残しながら、LINE公式アカウントと連携した受講者へも通知します。 予約番号をLINEへ送信すると予約情報と連携され、同じメールアドレスでの次回予約にも連携情報を引き継ぎます。
- ✓予約受付・確定・キャンセルの確認メール
- ✓講師グループへの新規予約・キャンセル通知
- ✓連携済み利用者への予約受付・確定・キャンセル通知
- ✓予約前日のLINEリマインド
この公開ツールで利用した実装技術
実際の開発で得られた設計判断や実装上の注意点を、再利用できる技術記事として整理しています。
予約管理アプリからLINEで顧客へ通知する仕組み
メールを基本通知として残しながら、LINE連携と前日リマインドを段階的に追加する設計です。
Next.jsとGASスプレッドシートDBで予約アプリを作る構成
Next.js、GAS Web API、Googleスプレッドシートの役割分担と、安全な中継構成を解説します。
30分コマの週グリッド予約UIをNext.jsで実装する
連続選択、予約済み表示、移動時間バッファ、料金計算を含む予約UIの設計です。
単独管理者向けの軽量HMAC Cookie認証
管理画面を保護するために採用した、用途を限定した軽量認証の実装方法です。
mutation後のrouter.refreshで画面が反転する問題
予約完了後の表示を安定させるために、画面遷移と再描画の責務を整理した記事です。
予約番号送信でLINEアカウントを連携する
LIFFやLINEログインを使わず、予約番号とLINE userIdを紐づける軽量な設計です。
GASのdoPostをLINE WebhookとアプリAPIで分岐する
1つのGAS WebアプリURLで、予約APIとLINE WebhookのPOSTを処理する方法です。
GASをLINE Webhookに使うときの構成上の制約
リダイレクト、署名検証、必要に応じた中継サーバーの判断基準を整理します。
GASログの肥大化を防ぐ
読み取り成功を記録せず、古いログを日次で間引いて運用負荷を抑える方法です。
CSS Gridの列幅を可変にし、最大幅で頭打ちにする
予約グリッドをスマートフォンでは収め、PCでは広がりすぎないように調整します。
設定値をGASスクリプトプロパティと管理画面で運用する
料金やリマインド時刻をコードへ埋めず、管理画面から安全に更新する設計です。
技術構成
画面・入力・管理者認証はNext.js App Router、TypeScript、Tailwind CSSで構築し、 Vercelで公開しています。GAS Web APIが予約ロジック、メール・LINE通知、 Googleスプレッドシートへのデータ保存を担当します。APIトークンやLINEトークンは ブラウザへ公開せず、サーバー側で管理しています。
予約システムの構成図
受講者・講師の操作から、予約処理、データ保存、メール・LINE通知までの流れを示しています。 画像をクリックすると拡大できます。