📆
予約システム
店舗・サロン・教室の予約受付。小さなビジネスに直結
どんなもの?
美容室・整体・教室・レンタルスペースなどの予約をWeb上で受け付けるシステム。空き枠の表示、予約の登録、確認メールの送信までを自動化します。小さなビジネスの実課題を解決でき、そのまま仕事の依頼にも繋げられる実践的な題材です。
こんな人におすすめ
お店やサービスの予約受付をWebでやりたい人。実ビジネスに使える
🎯 完成すると手に入るもの
美容室・整体・教室などの予約をWeb上で受け付けるシステムが手に入ります。空き枠表示・予約登録・確認メール送信まで自動化でき、小さなビジネスの実課題を解決できます。
おすすめの技術スタック
予約システムは「空き枠管理」と「ダブルブッキング防止」が核。データの整合性が命なのでSupabase(PostgreSQL)で確実に管理し、確認メールはKitやSupabaseのメール機能で自動送信します。
費用の目安
✓ 完全無料で始められます
基本的に無料で作れます。予約確認メールもKitの無料枠で始められ、予約数が増えたら有料プランを検討します。
| 項目 | 費用 | 補足 |
|---|---|---|
| Cursor | 無料プランでOK | 無料枠で作れます |
| Supabase(予約データ) | 無料枠でOK | 個人・小規模は無料枠内 |
| Vercel(公開先) | 無料 | 個人利用は無料 |
| Kit(確認メール) | 無料プランあり | 一定件数まで無料で配信可能 |
| GitHub | 無料 | 個人利用は無料 |
必要なアカウント
開発を始める前に、下のサービスの無料アカウントを用意しておきましょう。
必要なAPIキー・設定
APIキーとは、外部のサービスを自分のアプリから使うための「合鍵」です。下記を取得・設定します。
Supabase URL と APIキー 取得先: Supabaseプロジェクトの設定画面 アプリからデータベースに接続するための情報。プロジェクト作成時に自動発行されます。
Kit APIキー 取得先: Kitのアカウント設定画面 メール配信を自動化するための鍵。
作り方: まずこのプロンプトをClaudeに送る
細かい手順を覚える必要はありません。下のプロンプトをコピーして、Claude(やCursorのAIチャット)にそのまま貼り付けてください。 あとはClaudeが1ステップずつ伴走してくれます。詰まったら、エラー文や状況をそのまま伝えれば解決に導いてくれます。
📋 最初に送るプロンプト
あなたはプログラミング初心者の私に、予約システムの作り方を最初から最後まで伴走してくれるメンターです。以下の前提と要望をふまえて、私が迷わないように「一度に1ステップずつ」教えてください。
【私の状況】
- プログラミングはほぼ未経験です。専門用語は都度かんたんに説明してください。
- パソコンはWindows(またはMac)を使っています。※実際のOSに置き換えて伝えてください
- AIエディタ「Cursor」をインストール済みです。
- 必要な無料アカウント(このページに記載のもの)は作成済みです。
【作りたいもの】
- 美容室や教室などの予約をWebで受け付けるシステム。
- 空き枠をカレンダーから選んで予約でき、埋まった枠は選べないようにしたい。
- 予約データはSupabaseで管理し、同じ枠に2人入らないようDBレベルで制約をかけたい(最重要)。
- 予約が入ったら確認メール、前日にリマインドメールを自動送信したい(Kitを利用)。
- 営業時間・予約単位(30分など)・定休日を設定できるようにしたい。
- 最終的にVercelで公開して、お客さんがスマホから予約できるようにしたい。
【進め方のお願い】
1. まず全体像(何をどの順でやるか)を、専門用語なしで箇条書きで教えてください。
2. そのあと、最初のステップだけを具体的に指示してください。私が「できた」と言ったら次へ進んでください。
3. 各ステップでは、私が実行するコマンドや操作を省略せずに書き、それが「何のための作業か」も一言添えてください。
4. エラーが出たら私がその文面を貼るので、原因と対処をやさしく説明してください。
5. データベースやログインを扱う場合は、セキュリティ(他人にデータが見えない設定)も忘れずに教えてください。
6. 途中で必要なファイルの中身は、コピーして貼れる完全な形で提示してください。
まずは【1】の全体像から教えてください。 ※ 【私の状況】の部分(OSや、まだ登録していないアカウント)は、あなたの環境に合わせて書き換えてから送ると精度が上がります。
つまずきやすいポイント
- 最初の環境構築でエラーが出やすいです。エラー文をそのままClaudeに貼れば、原因と対処をほぼ特定してくれます。
- 「ダブルブッキング(同じ枠に2人)」を防ぐ仕組みが最重要。DBレベルでの制約をClaudeに必ず実装してもらいましょう。
- Supabaseで「自分のデータだけ見える」設定(RLS)を忘れると、他人のデータが見えてしまいます。ログイン機能を作ったら必ずRLSの設定をClaudeに確認してもらいましょう。
- 「公開(デプロイ)」の設定が初めてだと難所です。詰まったら画面やエラーの内容を言葉でClaudeに伝えると解決が早いです。
収益化のヒント
Kit(メール・高単価)・Supabase・Vercelの導線。予約システムは受託開発の需要も大きいテーマです。