Lovableで『予約システム』を作る完全ガイド｜Calendly卒業＆自分ブランドの予約サイト

この記事は『こんな困りごと』の人向けです#

• Calendlyを使っているが、月額がじわじわ効いてきた／英語UIで顧客が混乱する
• Googleフォーム＋手動でカレンダー登録していて、ダブルブッキングが起きた経験がある
• 予約ページが他社ブランドだらけで、自社サイトの世界観と合わない
• コーチング・サロン・士業・治療院など、1対1の枠売りビジネスをしている
• 『有料相談（事前決済つき）』の予約導線まで一気に作りたい

この記事では、LovableとGoogleカレンダーをつないで、Calendlyのような予約サイトを自分ブランドで作る手順を、最初から最後まで通しで説明します。コードを書ける必要はありません。Lovableのチャット欄に文章を貼っていくだけで進められるよう設計しています。

Before / After：何がどう変わるか#

Before（よくある状態）

• Googleフォームで日時候補を聞く → 自分のカレンダーを目視確認 → 手動で登録
• 返信が遅れて他のお客さまに先に埋められる
• Calendlyのリンクを送るが、ブランド感ゼロ＆英語表記で問い合わせが来る
• 決済は別途振込案内 → 入金確認が手間

After（このガイド完了後）

• 自社ドメインの /booking で空き枠が自動表示（Googleカレンダー連動）
• 予約と同時に自分のカレンダーへ自動登録／Google Meet URLも自動発行
• ダブルブッキングはサーバー側の二重チェックで原理的に発生しない
• Stripe連携を足せば『有料相談（事前決済つき）』もワンフローで

全体像：3つのパーツで動きます#

難しそうに見えますが、登場人物は3人だけです。

[1] お客さま (ブラウザ)
        │  「この枠で予約したい」
        ▼
[2] あなたのLovableアプリ (フロント＋サーバー関数)
        │  「本当に空いてる？ 空いてたら入れて」
        ▼
[3] Googleカレンダー (本人 or チームの予定表)

ポイントは [2] の『サーバー関数』。お客さまのブラウザから直接Googleを触りに行くのではなく、必ずあなたのアプリの裏側を経由させます。これによって、(a) APIキーを盗まれない、(b) 予約直前にもう一度空きを確認してダブルブッキングを防げる、という2つのメリットが生まれます。

STEP 1：Googleカレンダーをコネクタで接続する#

Lovableは、Googleカレンダーへの接続を『コネクタ』という仕組みで標準サポートしています。OAuthの仕組みやAPIキーの発行をあなたが手で行う必要はなく、Lovable側で安全に管理してくれます。

1. Lovableのチャット欄で『Googleカレンダーに接続して』と依頼する
2. 出てきたコネクタ選択ダイアログで『Google Calendar』を選んで Connect
3. Googleアカウントで認証し、対象カレンダー（複数可）を選ぶ
4. 完了すると、サーバー関数から自動的にカレンダーAPIが呼べる状態になる

STEP 2：『予約可能ルール』を最初に決める（ここが一番大事）#

予約システムの作り直しが発生する原因の9割は、ルールを後から足すことです。最初に紙やメモに書いてからLovableに渡すと、後戻りが激減します。最低限決めておく項目：

• 受付する時間帯（例：平日 10:00〜18:00、土日不可）
• 1コマの長さ（例：60分／30分）と、コマ間のバッファ（例：15分）
• 受付開始タイミング（例：今日から24時間後以降のみ）と最大先（例：30日先まで）
• 祝日や定休日の扱い（Googleカレンダーの『定休日カレンダー』を1枚作っておくと楽）
• 1日あたりの最大件数（疲労対策。例：1日3件まで）
• メニューの種類（例：『初回相談 60分 無料』『継続相談 60分 ¥8,000』など）

STEP 3：Lovableに渡す『最初の依頼テンプレ』#

STEP 2で決めたルールを、そのまま下のテンプレに埋めて貼り付けてください。1メッセージに『目的・ルール・画面』を全部入れるのが、Lovableの精度を上げるコツです。

# 依頼：1対1の予約サイトを作って

## 目的
お客さまがブラウザから空き枠を選び、その場で予約完了する画面を作りたい。
予約と同時に自分のGoogleカレンダーに予定を入れて、お客さまにも控えメールが届くようにしたい。

## ページ構成
- /booking          : メニュー選択 → カレンダー → 入力フォーム → 完了
- /booking/admin    : 自分専用。今日と来週の予約一覧（要ログイン）

## 予約可能ルール
- 平日 10:00〜18:00、土日と祝日は不可
- 1コマ 60分、間に15分のバッファ
- 受付は『今日の24時間後』〜『30日先』まで
- 1日3件が上限
- メニュー：
  - 初回相談（60分・無料）
  - 継続相談（60分・¥8,000、Stripeで事前決済）

## 必須要件
- 空き判定はサーバー関数で行う（フロントで信用しない）
- 予約処理の最後に、もう一度空きを確認してから登録（ダブルブッキング防止）
- 完了時に Google Meet URL を自動発行してカレンダー予定に添付
- お客さまには Resend で予約確認メールを送る（差出人：自社ドメイン）

## デザイン
- 落ち着いた白背景、ロゴはあとで差し替えるのでプレースホルダで
- スマホ最適化必須（半数以上がスマホ予約）

STEP 4：ダブルブッキングを原理的に防ぐ『二重チェック』#

予約システムで一番怖いのが『同じ時間に2人入れてしまう』事故です。これは、画面の表示と実際の登録の間にタイムラグがあるために起こります。Lovableで作る場合は、必ずサーバー関数の中で次の順序にしてください：

1. （クライアント）お客さまが時間枠を選んで送信
2. （サーバー）受け取った日時で、いまこの瞬間のGoogleカレンダーを再取得
3. （サーバー）その枠が今も空いていることを確認
4. （サーバー）空いていたらカレンダーに登録 → 完了レスポンス
5. （サーバー）すでに埋まっていたらエラーを返し、画面で『他の方が先に予約されました』と表示

【追加依頼の例】
予約確定処理（createBooking）の中で、Googleカレンダーに登録する直前に、
同じ時間帯のイベントを events.list で再取得して衝突チェックをしてください。
衝突があれば 409 Conflict を返し、フロント側でやさしいエラーメッセージを出してください。

STEP 5：Google Meet URLの自動発行と、確認メール#

オンライン相談なら、Google Meet URLを自動で発行できます。カレンダーに予定を入れる際にオプションを1つ足すだけで、URLがカレンダー予定本文と確認メールの両方に自動で入ります。

【追加依頼の例】
予約完了時にGoogle Meetの会議URLを自動生成し、
1) Googleカレンダー予定の本文と
2) お客さま向けの確認メール本文
の両方に同じURLを記載してください。

確認メールは、すでに別記事で扱ったResendコネクタを使うと最短です。差出人を自社ドメインにできるので、Calendlyの汎用メールより到達率も信頼感も上がります。

STEP 6：『有料相談』にする場合（Stripe連携）#

無料予約だけなら STEP 5 で完成です。有料相談メニューを足したい場合は、Stripeで『事前決済 → 決済成功でカレンダー登録』の順にすると、無断キャンセルがほぼゼロになります。

1. Stripeコネクタを接続（別記事『Lovable 決済つける』で完全手順を解説）
2. 有料メニューを選んだ時だけ、フォーム送信先を『Stripe Checkout』に切り替える
3. Stripeのwebhookで決済成功を受け取り、その中で初めてGoogleカレンダーに登録する
4. 万一カレンダー登録が失敗したら自動返金（refund）するエラーハンドリングを入れる

STEP 7：管理画面（自分用ダッシュボード）#

お客さま側の画面ができたら、自分用の管理画面も同時に作っておくと運用が一気に楽になります。

【追加依頼の例】
/booking/admin に、ログイン必須の管理画面を作って。

- 今日の予約：時間順に並べて、お客さま名・メニュー・Meet URL・連絡先を1行表示
- 今週の予約：同上
- 各行に『キャンセル』ボタン。押すとカレンダー予定削除＋お詫びメール自動送信
- 月別の予約件数と売上をシンプルな棒グラフで表示

よくあるつまずきと対処#

Q. 空き枠が表示されない／ぐるぐる回ったまま

ほぼ確実にコネクタの権限不足です。Googleカレンダーの『読み取り＋予定の作成』両方が必要です。コネクタを一度disconnectしてから再接続し、同意画面で全項目にチェックを入れてください。

Q. 予約された時刻が1時間ずれる

タイムゾーンの取り違えです。日本固定なら、Lovableに『すべての日時を Asia/Tokyo で扱って、画面表示も JST 固定にして』と一言追加してください。

Q. Calendlyから移行したい。既存の予約はどうする？

既存予約はGoogleカレンダー側に残っているので、ルール上『予約済み枠』として自動で除外されます。お客さまへの連絡は『〇月〇日以降の新規予約はこちら』と新URLを案内するだけでOKです。

Q. 当日キャンセルや遅刻のルールは？

管理画面のキャンセルボタンに『24時間前を切ったキャンセルはキャンセル料50%』のロジックを足すよう依頼できます。Stripe連携済みなら自動で部分返金まで処理させられます。

セキュリティで必ずやること#

• /booking/admin は必ずログイン必須にする（Lovable Cloud の認証で十分）
• お客さまのメールアドレスや電話番号は管理画面以外に出さない
• 予約フォームに簡易honeypot（隠しフィールド）を入れてbot予約を弾く
• 1つのIPから短時間に大量予約が来たらブロックする簡易レートリミットを入れる

裏側ではこうなっています（少しだけ技術の話）#

Googleカレンダーとのやり取りはすべて『サーバー関数』と呼ばれる、あなたのアプリの裏側で動く小さなプログラムを通ります。あなたのブラウザから直接Googleを叩くのではないので、トークンが盗まれる心配がありません。Lovableは依頼に応じて、このサーバー関数を自動で組み立て、コネクタの認証情報を環境変数として安全に渡してくれます。あなたが意識する必要はありません。

次の一歩#

• 決済つき有料予約：別記事『Lovable 決済つける』へ
• 予約確認メール／自動返信：別記事『Lovable 問い合わせフォーム＋自動返信』へ
• 予約データを業務で使う：『Lovable 業務効率化アプリ（Google Sheets連携）』へ
• 予約に応じて社内Slack/Teamsへ通知：各コネクタ記事へ

1対1の枠売りビジネスなら、ここまで作るだけで月額のCalendly代は丸ごと不要になり、ブランド体験も決済導線も自分の世界観で統一できます。