AIを使って旅行プランナーアプリを作る方法

ビルダーを開く前に、アプリの最小限で役立つ形を決めましょう。旅行の旅程プランナーなら、たいていは、ユーザーが細かい例外に埋もれずに旅行を作成、確認、調整できることが目標です。

次の3つを書き出します。

• ユーザー: 一人旅の人、家族、旅行代理店、社内チームでの利用
• 主要な作業: 旅程を作成する、日ごとの予定を見る、メモを保存する、予算を見積もる、旅行詳細を共有する
• データ: 行き先、日付、日ごとのアクティビティ、交通手段、ホテル情報、メモ、予算項目

現実的な最初のバージョンには、よく次のような要素が含まれます。

• 明確な旅行設定フローを持つホーム画面
• 旅行作成フォーム
• 日ごとにまとまった旅程画面
• 時間、場所、メモ、費用を表示するアクティビティカード
• 項目を移動・変更できるシンプルな編集フロー

初日には不要なもの、たとえばソーシャル機能、地図、オフライン同期、複雑なレコメンドロジックは外しましょう。複数デバイスで旅行を保存したいなら、サインインとデータベースを計画します。プレミアム旅程や旅行プランニングサービスに課金したいなら、Stripeを計画します。それ以外は、最初の版をローカルでシンプルに保ちましょう。

Moremadeは、自然な言葉で、ただし最初の構築を制約できるだけの詳細を入れて説明すると最もよく動きます。画面、項目、挙動を具体的に書きましょう。React + TailwindのWebサイトが欲しいのか、Expoを使ったReact Nativeのモバイルアプリが欲しいのかも明記します。

最初の一案として、次のように書くとよいでしょう。

TripMap という名前の旅行旅程プランナー用モバイルアプリを React Native (Expo) で作ってください。ユーザーが行き先、開始日、終了日、旅行者、予算、メモを入力して旅行を作成できるようにします。日ごとにまとめた旅程画面を表示し、時間、タイトル、場所、メモ、概算費用を含むアクティビティカードを並べてください。ホーム画面、旅行作成画面、旅程詳細画面、アクティビティ編集画面を含めてください。余白がしっかりあり、タップしやすい大きめの要素を使った、すっきりしたシンプルなUIにしてください。サンプル旅行を入れて、プレビューをすぐ使えるようにしてください。

これで、細部まで厳密に指定しすぎずに、役立つ下書きを生成できます。Webアプリがよければ、代わりにWebサイトとして依頼してください。Moremadeは実際のソースコードを生成し、ライブプレビューを表示して、チャットで修正できます。

最初の下書きでは、たいてい不足している要件が見つかります。実際に旅行を計画するユーザーになったつもりで、プレビューを確認しましょう。

次の点をチェックします。

• 新しいユーザーが最初に何をすればよいか理解できるか
• 現実的な旅程を作れるだけの項目が旅行フォームにあるか
• 日ごとのレイアウトが見やすいか
• 編集操作が分かりやすいか
• サンプルデータに違和感がないか

そのうえで、短く具体的な追加プロンプトで改善します。たとえば、

• 「各日の旅程の上部に、推定合計費用とアクティビティ数を表示する日別サマリーを追加してください。」
• 「アクティビティを別の日へ移動したり、同じ日内で並べ替えたりできるようにしてください。」
• 「旅行作成画面に、ゆったり、標準、詰め込みの旅行ペースを追加してください。その値をサンプル旅程の文言に使ってください。」

よい追加プロンプトは、一度に1つの変更に集中します。見た目が崩れているなら、Moremadeのビジュアルインスペクターで要素を指定して変更します。コードレベルで厳密に制御したい場合は、コードビューを使います。

すべての旅程プランナーに、初日からバックエンド機能が必要なわけではありません。デモや社内向けのプロトタイプなら、サンプルデータとローカル状態だけで十分なこともあります。ユーザーの必要性がそれを求めるときにだけ、基盤を追加しましょう。

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

• ユーザーのサインインが必要
• セッションやデバイスをまたいで旅行を保存したい
• 共同編集が必要
• 書類や画像のファイル保存が必要

実用的なプロンプトの例:

• 「Supabaseを接続してメールサインインを有効にし、ユーザーごとに旅行、旅程の日付、アクティビティを保存してください。ホーム画面に保存済み旅行の一覧を追加してください。」

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

• 有料の旅行テンプレート
• プレミアムなプランニングサービス
• 単発の旅程購入の決済

実用的なプロンプトの例:

• 「有料の旅程レビューサービス向けにStripeの決済フローを追加してください。私が設定した価格を使い、旅行サマリー画面に購入ボタンを表示してください。」

まだアイデアを検証中なら、どちらも後回しにしましょう。小さいアプリのほうがテストもしやすく、改善もしやすいです。

旅行ツールは、デスクトップのプレビューでは問題なさそうでも、実際の利用で弱点が出やすいです。スマホサイズの表示でテストし、モバイルアプリを作っているなら、画面の長さ、タップ領域、フォーム入力に特に注意してください。

次のような現実的なシナリオを試します。

• 3日間の都市旅行を作成する
• 14日間の複数都市をめぐる休暇を作成する
• 1つのアクティビティを編集し、別の日に移動する
• 長いメモや珍しい地名を追加する
• かなり少ない予算と、かなり大きい予算の両方を試す

よくある弱点を探します。

• 情報が詰まりすぎた旅程カード
• 編集しづらい日付フィールド
• 近すぎるボタン
• 重要情報がファーストビューより下にある
• 次に何をすべきか説明のない空状態

問題が見つかったら、直接修正を依頼します。例: 「アクティビティカードの視覚的な重みを下げ、日見出しを固定表示にし、長い旅程でも下部にアクティビティ追加ボタンを見えるようにしてください。」

Moremadeのバージョン履歴も役立ちます。修正で悪化した場合は、前の状態に戻せます。

基本フローが動いたら、共有できる版を公開します。Moremadeはワンクリックで yourname.moremade.ai の無料サブドメインに公開できます。カスタムドメインが必要なら有料プランで利用でき、ドメインはMoremade内で購入することもできます。

公開前に、次を確認しましょう。

• アプリ名と各ラベル
• プレースホルダーやサンプルデータ
• Stripeを有効にしている場合の価格表記
• Supabaseを有効にしている場合のサインインフロー
• 公開アプリに必要な基本的な法的ページ

ソースコード全体は、いつでもZIPで書き出したり、GitHubにプッシュしたりできます。Webサイトの場合はReact + Tailwindの出力になります。モバイルアプリの場合はReact Native with Expoです。後でビルダーの外で開発を続けたいなら、これは重要です。ロックインはありません。

最初の版が失敗する原因の多くは、ツールではなくプロダクトにあります。次の失敗に注意しましょう。

• 最初から機能を詰め込みすぎる: 地図、チャット、レコメンドを一気に入れず、まずは旅行作成と読みやすい旅程に集中する。
• サンプルデータが弱い: プレビューが空だったり現実味がなかったりすると、デザインを判断しにくい。
• 編集フローが不明確: 旅程アプリは、予定変更のしやすさで成否が決まる。
• バックエンドが早すぎる: 必要になるまでサインインや決済を追加しない。
• デスクトップ前提のレイアウト: 旅行者はたいていスマホで予定を確認する。
• 曖昧なプロンプト: 「もっと良くして」より、具体的な画面、コンポーネント、変更内容を挙げたほうが有効。

よい進め方は、まず1つの完全なユーザージャーニーを動かすことです。旅行作成、旅程の表示、アクティビティ編集、使える版の公開。そこから拡張していきましょう。