AIで予約アプリを作る方法

AIビルダーを開く前に、アプリの最小限で役立つ形を紙に書き出しましょう。

予約・日程調整アプリでは、通常次のような内容になります。

• 誰が予約するのか: 顧客、スタッフ、またはその両方
• 何を予約するのか: サービス、クラス、部屋、通話、来訪
• 時間の扱い: 固定枠、任意の所要時間、バッファ時間、営業時間
• ユーザーがすること: 空き状況を確認する、枠を選ぶ、確定する、変更する、キャンセルする
• 管理者がすること: サービス、価格、空き時間、予約を管理する

最初に必要な画面を列挙します。シンプルな版では、次のような構成がよくあります。

• ホームまたはランディングページ
• サービス一覧
• カレンダーまたは時間枠ピッカー
• 予約フォーム
• 確認画面
• 管理者の予約一覧画面

次に、主要なデータ項目を平易な言葉で定義します。

• Service: 名前、所要時間、価格、説明
• Staff or resource: 名前、勤務時間、サービスの対応可否
• Booking: 顧客名、日付、時刻、サービス、ステータス
• User: サインインが必要な場合の顧客または管理者アカウント

この計画が重要なのは、最初のプロンプトが「予約アプリを作って」だけよりも、アプリの構造をはっきり説明している方が、AIがうまく作りやすいからです。

Moremadeでは、サイトやアプリを自然な言葉で説明すると、AIエージェントがソースコードを書いてくれます。Webアプリなら React + Tailwind、モバイルアプリなら React Native with Expo から始められます。

最初のプロンプトでは、フローを組めるだけの十分な情報を与えつつ、最初からあらゆる例外まで解こうとしないことが大切です。

良い最初のプロンプトに含めるべき要素は次のとおりです。

• アプリの種類: Webサイトかモバイルアプリか
• 想定ユーザー: 誰が使うのか
• 主要画面
• 予約ルール
• デザインの方向性
• 後から編集しやすくしたい内容

最初のプロンプト例:

小規模な予約ビジネス向けに、顧客がオンラインでサービス予約できるシンプルで見やすいWebアプリを作ってください。React と Tailwind を使用してください。ホームページ、サービス一覧、予約フロー、利用可能な時間枠を表示するカレンダー、顧客情報フォーム、確認ページを含めてください。管理者が今後の予約を確認できる画面も追加してください。サービスには名前、所要時間、価格、説明を含めてください。デザインはシンプルなニュートラル系で、ボタンは分かりやすく、モバイルでも使いやすいレイアウトにしてください。まずはプレースホルダーデータで始め、後からレイアウトを編集しやすくしてください。

これだけで、AIに細部を推測させすぎずに、実用的な初期版を生成できます。

最初のビルドが終わったら、ライブプレビューを使って実際のユーザーのように流れを確認します。

次の基本項目をチェックしましょう。

• 何を予約する画面なのか、ユーザーに分かるか
• サービスの詳細は明確か
• 日付と時間の選択は使いやすいか
• 予約フォームは適切な情報を聞いているか
• 確認画面に予約内容の要約が表示されるか
• モバイル表示は崩れていないか

Moremade にはビジュアルインスペクターがあり、要素を指して変更できます。生成された内容を確認したいときはコードビューも使えます。

改善するときは、範囲を絞ったフォローアッププロンプトを書きましょう。大きく曖昧な指示より、具体的な指示の方がうまくいくことが多いです。

例:

• 「デスクトップではサービス概要を右側に移動し、ユーザーが日付と時間を選ぶ間は固定表示にしてください。」
• 「予約の間に 15 分のバッファ時間を追加し、空きのない時間枠は非表示にしてください。」
• 「予約フォームを変更して、電話番号は任意、メールは必須にし、時間枠が選択されるまで確定ボタンを無効にしてください。」

この段階で、アプリの品質の大半が決まります。生成、確認、調整、反復です。

Moremade では有料プランでバージョン履歴も使えるため、変更を比較したり、以前の状態に戻したりしやすくなります。

まずはプレースホルダーデータで始めましょう。画面とフローの形が見えてから、実データ保存、ユーザーアカウント、支払いが必要かを判断します。

次のような場合は Supabase を使います。

• 実際の予約データベースが必要なとき
• 顧客または管理者のサインインが必要なとき
• ファイル保存が必要なとき

典型例:

• 予約を保存し、スタッフが管理できる美容室アプリ
• 顧客がログインして今後のセッションを確認・変更できるコーチングアプリ
• 時系列で予約を追跡する管理ダッシュボード

支払いが予約の一部なら Stripe を使います。

典型例:

• 事前に料金を支払って予約する有料相談
• 固定料金のクラスやイベント
• 予約確定前にデポジットが必要な場合

Moremade には Supabase と Stripe 用の組み込みコネクタがあります。統合のプロンプトは、必要なワークフローに絞ってください。

例:

• 「このアプリを Supabase に接続し、サービス、日付、時刻、顧客名、メール、ステータスの項目を持つ予約を保存してください。」
• 「Supabase で管理者サインインを追加し、今後の予約を一覧表示する非公開ダッシュボードを表示してください。」
• 「Stripe checkout を追加し、ユーザーがサービスを支払ってから予約が確定するようにしてください。フローで選択したサービス価格を使ってください。」

使えるからといって、すぐにサインインや支払いを追加しないでください。初期版では、シンプルな予約リクエストフローの方がユーザーテストしやすいことが多いです。

予約アプリは、Webサイトとして作っていても、利用の多くがスマートフォンになりがちです。小さい画面での動作は早めに確認しましょう。

よくある問題は次のとおりです。

• 日付ピッカーや時間枠の一覧がタップしにくい
• 固定ボタンがコンテンツに重なる
• フォームが長すぎる
• 時間枠カードの折り返しが崩れる
• 要約テキストが読みにくくなる

モバイルアプリを作る場合、Moremade は React Native with Expo を生成します。Webサイトを作る場合は出力が React + Tailwind なので、レスポンシブレイアウトも丁寧にテストしましょう。

テスト中に役立つプロンプト:

• 「予約ステップのモバイルレイアウトを改善し、各セクションがきれいに縦積みされ、ボタンが親指で押しやすくなるようにしてください。」
• 「小さい画面では時間枠を大きくし、列数を減らしてください。」
• 「予約フローを、上部に進捗表示があるステップ式のモバイルウィザードに変えてください。」

自分で何度も一通り操作してください。そのあと、1〜2人に案内なしで予約してもらい、どこで迷うかを観察します。

フローが動いたら、すべてが完璧になるのを待たずに、動くバージョンを公開しましょう。

Moremade では、無料の yourname.moremade.ai サブドメインにワンクリックで公開できます。有料プランではカスタムドメインを接続できます。ドメインは Moremade 内で購入することも可能です。

シンプルな公開手順は次のとおりです。

• まずサブドメインに公開する
• ライブ環境で一通り確認する
• 最後のレイアウトや文言の問題を修正する
• 必要ならカスタムドメインを接続する

フルソースコードはいつでも ZIP でエクスポートでき、GitHub にプッシュすることもできます。これは、コピーを手元に残したいとき、プラットフォーム外でコードを確認したいとき、後で別環境で開発を続けたいときに重要です。

初期のユーザーテストでは、無料サブドメインで十分なことが多いです。顧客向けのアプリや既存のビジネスサイトの一部として使う場合に、カスタムドメインを使いましょう。

大きな失敗は、たいていコードよりもスコープとワークフローにあります。

次の点に注意してください。

• 曖昧なプロンプトから始める。 「予約アプリを作って」では推測が多すぎます。
• 機能を一度に全部入れる。 アカウント、支払い、リマインダー、複数スタッフを追加する前に、まず1つの予約経路を動かしましょう。
• 予約ルールを省く。 所要時間、空き状況、予約ステータスのルールが不明確だと、生成されるUIも不明確になります。
• 実連携を早く入れすぎる。 プレースホルダーデータの方が、プロダクトの形を作るのは速いです。
• キャンセルや変更をテストしない。 これらは予約系プロダクトの中心機能です。
• モバイルでの挙動を無視する。 デスクトップでは問題なく見える予約フォームでも、スマホでは崩れやすいです。
• コードを書き出さない。 ZIP エクスポートや GitHub へのプッシュを残して、ソースをいつでも持てるようにしましょう。

最初の版は「動く下書き」と考えるのがコツです。最短で役立つ流れを作り、テストし、そのあとロジックとデザインを磨いていきましょう。