予約サイトを1時間で作る｜実際に打った指示をすべて公開
この記事のとおりに進めれば、予約サイトが1つ完成します。使った指示は省略せずすべて掲載。コピーしてそのまま使えます。プログラミングの知識は要りません。
この記事のとおりに進めれば、予約サイトが1つ完成します。使った指示は、省略せずすべて載せました。コピーしてそのまま使えます。プログラミングの知識は要りません。必要なのは、パソコンと1時間です。
まず結論
作るのは、こういうものです。
- 予約したい人が、名前・日時・人数を入力する
- 送信すると、予約が保存される
- 管理する側は、予約の一覧を見られる
文化祭でも、美容室でも、教室でも、中身を入れ替えれば同じ形で使えます。
所要時間は約1時間です。 内訳は、準備20分・作成30分・確認10分です。
準備するもの
Claude Codeが動く状態になっていることが前提です。まだの人はClaude Codeの始め方を先に済ませてください。30分ほどで終わります。
準備ができたら、作業用のフォルダを作ってターミナルで開き、claude と入力して起動します。
なお、この記事ではデータの保存先と公開先に無料のサービスを使います。どちらもアカウントを作るだけで始められます。詳しくは次の節で説明します。
使う道具は何？（保存先と公開先）
ここで一度、裏側の話をします。知らなくても作れますが、知っておくと後で困りません。
作ったサイトには、2つの「置き場」が必要になります。
- データの保存先
- 予約の内容（名前・日時・人数）をためておく場所です。ここがないと、ページを閉じた瞬間に予約が消えてしまいます。この記事ではSupabase（スーパーベース）という無料で始められるサービスを使います。
- サイトの公開先
- 作ったページをインターネット上に置いて、他の人が見られるようにする場所です。この記事ではVercel（バーセル）という、こちらも無料で始められるサービスを使います。
なぜこの2つを使うのか
**「1人で運用しても、手間が増えないから」**です。
サーバーを自分で用意する方法もありますが、その場合は動かし続ける管理が必要になります。止まったら自分で直し、混雑したら自分で対処する必要があります。この2つを使えば、その作業がほぼ発生しません。
初心者にとってもう1つ大きいのが、Supabaseには「本人のデータしか見せない」というルールをデータの保存側に設定できることです。
これは後のステップ4で効いてきます。画面で隠すだけの作り方は簡単に破られますが、保存側で止めていれば最後の砦になります。
名前を覚える必要はありません
とはいえ、この2つを自分で設定する必要はありません。Claude Codeに頼めば、必要な準備も含めて進めてくれます。
あなたが打つ
Claude Code の動き
「無料で始められる方法で」と伝えるのがコツです。 これを言わないと、有料前提の構成を提案されることがあります。
ステップ1：土台を作る（5分）
最初の指示です。そのままコピーして使ってください。
あなたが打つ
Claude Code の動き
表示されたコマンドを、そのままターミナルに入力してください。 ブラウザで予約フォームが表示されれば成功です。
ここまで5分ほどです。この時点で、すでに動くものができています。
ステップ2：自分用に作り変える（10分）
土台ができたら、自分の用途に合わせます。
あなたが打つ
Claude Code の動き
ここで大事なのは、「何のために使うか」を伝えていることです。 「10時から17時まで30分刻みの選択肢を作って」だけでも動きますが、用途を伝えると、定員が埋まったときの見せ方まで考えてくれます。
ステップ3：見た目を整える（10分）
あなたが打つ
Claude Code の動き
スマホで確認するのを忘れないでください。 ブラウザの画面を細くするだけでも、おおよその見え方がわかります。
ステップ4：ここが本番（15分）
ここからが、多くの記事が書いていない部分です。このまま公開すると危険です。
理由は単純で、AIは頼まれていないことを考えないからです。ここまでの指示に「他人の予約が見えないようにして」とは一度も言っていません。
65%
AIに任せて作られたアプリのうち、調査で弱点が見つかったものの割合です。作った本人は、たいてい気づいていません。
だから、明示的に頼みます。
あなたが打つ
Claude Code の動き
「どうなっているか説明してから直して」と頼むのがポイントです。 これがないと、何が問題だったのかがわからないまま直されてしまい、学びになりません。
自分の手で確かめる
AIの報告を鵜呑みにせず、自分でも試してください。5分で終わります。
- 予約を2件入れて、1件目のURLの番号を2に変えてみる。他人の予約が見えたらアウトここが該当したら公開しない
- 予約一覧のページのURLを、直接入力して開いてみる。誰でも開けたらアウトここが該当したら公開しない
- 名前の欄に1000文字くらい貼り付けて送信してみる。エラー画面が出たら要修正ここが該当したら公開しない
- 名前を空欄のまま送信してみる。空の予約が保存されたら要修正ここが該当したら公開しない
ステップ5：公開する（10分）
安全の確認が終わったら、公開します。
あなたが打つ
Claude Code の動き
公開できたら、そのURLを自分のスマホで開いて、実際に予約してみてください。 自分のパソコンでは動いても、公開先では動かない、ということがまれにあります。
実際にやると、たぶんこうなる
うまくいく前提で書いてきましたが、現実には途中で止まります。 よくある3つを挙げます。
「エラーが出て動かない」
そのままコピーして貼ってください。 英語でも構いません。読めなくても伝わります。
要約してはいけません。「なんかエラーが出た」では、原因の特定に必要な情報が失われます。
「直したはずなのに直らない」
同じ場所を3回直しても直らないなら、作り方の方向が間違っています。 こう聞いてみてください。
さっきから同じところを直しているけど、解決していない。そもそもこの作り方でいいのか、別のやり方があるなら教えてほしい。
「思っていたのと違うものができた」
指示が抽象的すぎた可能性が高いです。「使いやすくして」ではなく、「ボタンを画面の下に固定して、片手で押せるようにして」のように、具体的な動きで伝えると精度が上がります。
この先どうするか
1つ作り切ると、次からの進みが早くなります。「作れる」という感覚が、いちばんの資産です。
もし人に使ってもらうサービスにしていくなら、次を読んでみてください。
- 公開前の確認をもっと詳しく → AIでアプリができた！でも、そのまま公開して大丈夫？
- 指示の精度を上げる → Claude Codeへの頼み方
- 事業として考える → 起業するなら、エンジニアを探す前に自分でMVPを作ってみよう
よくある質問
Q. 本当に1時間で終わりますか？ A. 順調にいけば終わります。ただし初めての場合、準備でつまずくと2〜3時間かかることもあります。時間がかかっても、それが普通です。
Q. お金はかかりますか？ A. Claudeの有料プランが必要です。公開先は無料で始められるサービスがあります。
Q. 作ったものを本当に文化祭で使えますか？ A. 来場者の名前や連絡先を保存するなら、この記事の安全確認は必ずやってください。 それをやったうえでなら、実際に使えます。
Q. 予約サイト以外も同じ手順で作れますか？ A. 作れます。「入力して、保存して、あとで見る」形のものは、ほぼ同じ流れです。アンケート、在庫管理、日報など、中身を入れ替えるだけです。
まとめ
- 予約サイトは、約1時間で作れる（準備20分・作成30分・確認10分）
- 指示は日本語でよく、「何のために使うか」を伝えると精度が上がる
- ステップ4の安全確認をやらないと、公開してはいけない
- AIの報告を鵜呑みにせず、自分の手で4項目を確かめる
- 途中で止まるのが普通。エラーはそのまま貼る、3回直して直らなければ方向を疑う