予約アプリの作り方：枠、空き状況、リマインダー、デポジット

予約アプリを作るには、4つの要素を連携させる必要があります。予約できるもの（サービス、部屋、スタッフ）の一覧、それぞれがいつ利用可能かというルール、本当に空いている枠だけを提示する予約フロー、そして事業者が受け付けた予約を管理する非公開の画面です。AIアプリビルダーは、短い説明から数分で動く最初のバージョンを作れます。本当の作業は、ルールを決めること（枠の長さ、バッファ、キャンセル、タイムゾーン）と、二重予約が起こり得ないことをテストで確かめることです。

まず「予約」が何を意味するのかを決める

予約アプリは表面上は似ていても、内部の仕組みは大きく異なります。最初に次の点を決めてください。

• 何を予約するのか？ サービス（ヘアカット）、人（家庭教師）、リソース（会議室、コート、バン）、あるいはセッション内の席（定員12名のヨガクラス）のいずれか。
• 所要時間はどのくらいか？ サービスごとに固定か、それとも顧客が選ぶのか。
• 誰が提供するのか？ 1人か、それぞれ勤務時間を持つ複数のスタッフか、それとも誰も担当しないか（部屋など）。
• 予約後に何が起きるのか？ 即時確定か、それとも事業者が承認する依頼か。
• お金は関わるのか？ 無料か、当日払いか、前払いのデポジットか、全額前払いか。

「時間をリクエストすると、事業者がメールで確定する」方式は、「3人のスタッフのカレンダーと連動し、デポジットも扱う即時予約」よりずっと作るのが簡単です。どちらも正しい選択なので、最初のバージョンで実際に必要なものを選んでください。

アプリに必要なもの

データ

すべての予約に終了時刻も保存しておくと、重複チェックがずっと簡単になります。

ページ

• 公開ページ: サービス一覧、時間枠の選択画面、予約フォーム、予約完了ページ、キャンセルまたは日時変更のリンク。
• 非公開ページ（事業者またはスタッフ用）: 今日の予定、今後の予約、休みの時間の登録、サービスと勤務時間の設定。

権限

顧客に見せてよいのは、空きか予約済みかの情報だけです。他の顧客の名前は決して見せてはいけません。スタッフは自分の予定だけを見られ、事業者はすべてを見られる、という形が一般的です。これを書き出しておきましょう。ログインや役割が必要かどうかは、この判断で決まります。詳しくはアプリにログインを追加する方法をご覧ください。

難しい部分とその対処

二重予約

典型的なバグは、2人がページを読み込み、どちらも10:00が空いているのを見て、両方が予約してしまうことです。解決策は、予約を保存する時点でサーバー側において再確認し、何かが重なっていれば拒否することです。AIには次のように明示的に依頼してください。

予約を保存するときは、要求された時間（バッファを含む）が同じスタッフの既存の確定済みまたは保留中の予約と重ならないことを、サーバー側で再確認してください。重なる場合は予約を拒否し、「その時間は今埋まりました。別の時間をお選びください。」と表示してください。

その後、2つのブラウザウィンドウを使って動作を確かめてください。

タイムゾーン

すべての時刻はUTCで保存し、表示時に変換してください。予約ページにどのタイムゾーンを表示するかを決めます。通常、対面のサービスは事業者の時間、オンラインの通話は顧客の時間を使うことが多いです。ページ上にその旨を明記してください。夏時間の切り替えをまたぐ予約もテストしましょう。

バッファ、事前通知、上限

事前に決めておくと良い一般的なルールとして、予約の間のバッファ、最低事前通知（「2時間前までしか予約できない」など）、どれだけ先まで予約できるか、1日あたりの上限があります。それぞれはプロンプトの1文で指定できます。書かなければ、AIが勝手に初期値を選んでしまいます。

キャンセルとノーショー

すべての予約確認メールには、固有のトークンを持つキャンセルリンクを付けて、顧客がアカウントを持たなくてもキャンセルできるようにしてください。キャンセル可能な期間と、デポジットが返金されるかどうかを決め、支払いの前にそのポリシーを表示してください。

リマインダー

リマインダーのメールやSMSには、スケジュールに沿って動く仕組みが必要です（「15分ごとに、24時間後に開始する予約のリマインダーを送る」など）。ビルダーとホスティングがスケジュールジョブをどう扱うかを確認してください。対応していなければ、アプリのエンドポイントを呼び出す外部スケジューラーを使うか、カレンダーの招待を添付した確認メールを送り、顧客自身のカレンダーにリマインドさせましょう。メール配信側の設定については、アプリからメールを送る方法をご覧ください。

デポジットと支払い

Stripeを使う場合の一般的な流れは次のとおりです。

1. 顧客が枠を選ぶと、アプリは短時間（例えば15分）その枠を押さえる保留中の予約を作成します。
2. アプリは顧客をデポジット用のStripe Checkoutへ案内します。
3. 支払いが成功すると、Stripeがアプリにwebhookで通知し、予約は確定になります。
4. 時間内に支払いがなければ、保留中の予約は期限切れとなり、枠が再び空きになります。

Stripeの標準料金は、カード決済が成功するごとに料率と固定額がかかる仕組みで、月額料金はありません（2026年9月時点）。料率は国によって異なるため、お住まいの国の料金はStripeの料金ページで確認してください。すべてが動くまではテストモードとテストカードを使ってください。支払いの追加を段階を追って解説した支払いを追加するガイドもあります。

最初に効くプロンプトの例

Northside Barbers向けの予約アプリを作ってください。サービスは、ヘアカット（30分、25ドル）、ひげの手入れ（15分、12ドル）、ヘアカット＋ひげ（45分、32ドル）です。スタッフは2名（SamとAli）で、それぞれ火曜日から土曜日の9:00〜18:00に勤務します。顧客はサービスを選び、次に理容師を選ぶか「どの理容師でも可」を選び、今後14日間の空いている15分単位の開始時刻だけを見られるようにしてください。名前、電話番号、メールを入力します。予約はデータベースに保存し、各予約の後に10分のバッファを設けてください。保存時に空き状況を再確認し、二重予約を防いでください。キャンセルリンク付きの予約完了ページを表示してください。事業者用の非公開ページでは、今日と今後の予約を一覧表示し、予約のキャンセルと休み時間の登録ができるようにしてください。時刻は店舗のローカルタイムゾーンで表示します。すっきりとしたモバイルファーストのデザインにしてください。

サービス、スタッフ、営業時間、ルール、事業者の画面をすべて明記しているので、AIが推測しなければならない部分が残りません。

構築の手順

1. 予約の基本フローを最初に作る。 サービス → 時間枠 → フォーム → 予約の保存 → 完了画面。スマートフォンで動くまでは、ほかのことには手を付けません。
2. 事業者の画面。 今日の一覧、今後の一覧、キャンセル、時間のブロック。
3. 事業者のページを保護する。 本物のデータを入れる前にログインを追加してください。
4. ルール。 バッファ、事前通知期間、予約できる期間の上限、休日。
5. メール。 カレンダーの招待とキャンセルリンク付きの確認メール。
6. 必要ならデポジット。 まずStripeのテストモードで確認します。
7. エッジケースをテストする。 2つのウィンドウで同じ枠を予約する、深夜をまたぐ予約、夏時間の切り替え日、キャンセルされた予約が枠を空けるかどうか。
8. 公開する。 共有する前に、自分で実際に予約してみてください。

よくある間違い

• 空き状況をブラウザ側だけで確認する。 見た目は正しくても、二重予約は起こります。
• タイムゾーンなしでローカル時刻を保存する。 時計が切り替わるまではうまく動きますが、その後は壊れます。
• 公開カレンダーに顧客の名前を表示する。 表示するのは空きか予約済みかだけにしてください。
• 初日からスタッフのシフト管理、ポイント制度、SMSを作る。 まずは基本フローを公開し、顧客が実際に求める機能を後から追加しましょう。
• 事業者が時間をブロックする方法がない。 最初に体調不良で休んだ日には、ノーショーが発生してしまいます。

Calendly（または同様のツール）のほうが適している場合

1人が通話のために空き時間を共有するだけなら、スケジューリングツールに勝るものはありません。2026年9月時点のCalendlyの無料プランでは、イベントタイプが1つ、カレンダー連携が1つ、カスタマイズ可能な予約ページでの1対1のスケジューリングが利用できます。有料プランでは、イベントタイプやチーム向け機能が増えます。こうしたツールは既存のカレンダーにすぐ接続できますが、自作のアプリではそれを実装する必要があります。

次のような場合は自作が向いています。そのツールがサポートしていないルールが必要な場合、予約可能なリソースが複数ある場合、全体に自社のブランディングを適用したい場合、予約を他のデータ（顧客、注文、会員権）と結びつけたい場合、あるいは予約の仕組みそのものを他社に販売したい場合です。

Mythexでの構築

Mythexでは、チャットで予約アプリを説明すると、ライブプレビューで構築されます。予約を保存する必要が出てきた時点で、Postgresのデータベースも追加されます。予約ページのユースケースでは、まず予約フォームと管理用の一覧から始め、その後で残りを追加することを勧めています。何が組み込み済みで、何を自分で接続するのかを正確に理解しておきましょう。Mythexにはカレンダー同期、SMSリマインダー、デポジット機能は組み込まれていません。メールは自分のメール配信サービスを使い、デポジットは自分のStripeキーをプロジェクトのシークレットとして保存して扱います（Stripeのレシピ）。二重予約とタイムゾーンのルールは、上で説明したとおり、自分で指定してテストするものです。

/testコマンドを使うと、エージェントがプレビュー内で予約フローを順にクリックし、問題点を報告してくれます。開始用のプロンプトとしては、理容店の予約サイトやミーティング予約アプリのテンプレートを試すか、アプリのテンプレート一覧をご覧ください。

よくある質問