AIでイベント登録サイトを構築する方法

プロンプトを書く前に、サイトの最小構成を書き出しましょう。

一般的なイベント登録サイトなら、通常は次の内容が必要です。

• イベント名、日付、会場、アジェンダ、登壇者、FAQを載せたランディングページ
• フォームを備えた登録ページ、または登録セクション
• 送信後の確認ステート
• 連絡先、またはサポート用メールアドレス
• 参加者の多くがスマートフォンで登録するため、モバイル対応レイアウト

次に、どのデータを収集するかを決めます。よくある項目は次のとおりです。

• 氏名
• メールアドレス
• 会社名または組織名
• チケット種別
• 食事制限やアクセシビリティの要望

その次に、アカウントや支払いが必要かどうかを決めます。

• 登録が無料で、詳細を集めるだけなら、シンプルなフォームで十分です。
• 有料チケットを販売するなら、Stripeを追加します。
• サインイン、登録情報用のデータベース、またはファイル保存が必要なら、Supabaseを追加します。

また、誰がサイトを更新するのかも決めておきましょう。イベント情報が変わる可能性があるなら、あとからチャット、ビジュアルインスペクター、コードビューで簡単に編集できるよう、構成はシンプルに保つのが得策です。

Moremadeは、最初のプロンプトでページ、内容、スタイル、動作を具体的に伝えると最もよく機能します。単に「イベントサイトを作って」と伝えるのではなく、実際に必要な要素を指定しましょう。

よい最初のプロンプトには、次の要素を含めます。

• イベントの種類
• 必要なページやセクション
• 登録フォームの項目
• 見た目やトーン
• モバイル対応
• すでに必要だとわかっている統合機能

最初のプロンプト例:

North Coast Product Day という1日開催のデザインカンファレンス向けに、React + Tailwind のイベント登録サイトを作ってください。ヒーロー、アジェンダ、登壇者カード、会場情報、FAQ、スポンサー、登録セクションを含むホームページを作成してください。登録フォームでは、氏名、メール、会社名、役職、チケット種別、食事制限、アクセシビリティの要望を収集してください。清潔感のあるプロフェッショナルなスタイルで、余白を十分に取り、ボタンは見やすくしてください。モバイル対応にしてください。フォーム送信後に確認画面を追加してください。支払いは今は含めないでください。

これで、最初から細かい例外に引きずられることなく、実用的な初期版を生成するには十分です。

Moremadeがサイトを生成したら、参加者として初めて見るつもりでライブプレビューを確認しましょう。

次のような実用面をチェックします。

• イベント情報がファーストビューで見えるか
• 登録ボタンが目立っているか
• フォームの項目が多すぎないか
• 日付、場所、アジェンダが見やすいか
• ページが信頼でき、完成しているように見えるか

その後、短く直接的な追加入力で調整します。たとえば、次の3つは役立ちます。

• 「登録セクションをホームページの上の方に移動し、Register と書かれた固定ヘッダーボタンを追加してください。」
• 「登壇者カードのテキストを短くし、アジェンダの時間を見やすくして、会場マップのプレースホルダーセクションを追加してください。」
• 「登録フォームを2ステップに分けてください。最初に参加者情報、次にチケット種別と要望を入力し、進捗インジケーターを付けてください。」

これは、最初のプロンプトですべてを完璧にしようとするより、たいていずっと速いです。見た目の細部がずれている場合は、ビジュアルインスペクターで要素を指定して変更することもできます。

すべてのイベントサイトに、最初からバックエンド機能が必要なわけではありません。

イベントが無料なら、フォームと確認ステートだけで十分な場合があります。登録情報を保存したい、サインインを提供したい、参加者データを管理したいなら、データベース、サインイン、ファイル保存のためにSupabaseを追加します。

チケットを課金するなら、設定した価格でStripeチェックアウトを追加します。

自然な順序は次のとおりです。

• まず公開ページとフォームを整える
• 送信内容を保存する必要があるならデータ保存を追加する
• チケット種別と価格が固まってから支払いを追加する

Supabaseを使う場合は、registrationsテーブルと、それに紐づくフォーム送信フローを依頼します。Stripeを使う場合は、チケット種別に基づくチェックアウト導線を依頼します。

プロンプトは具体的にしましょう。たとえば、次のように指示します。

• 「登録フォームをSupabaseに接続し、name、email、company、ticket_type、dietary_requirements、accessibility_needs の各フィールドを持つ registrations テーブルに送信内容を保存してください。」
• 「Standard と VIP のチケットに対してStripeチェックアウトを追加し、チェックアウト前にフォームでチケットを選択できるようにしてください。」

MoremadeにはSupabaseとStripeの組み込みコネクタがあるので、最初からではなく、サイトに必要になったタイミングで追加できます。

多くのイベントチームはホームページに集中するあまり、スマホ画面でのフォームテストを忘れがちです。しかし、離脱が起きやすいのはそこです。

モバイルプレビューでは、次を確認してください。

• ボタンのサイズとタップしやすさ
• フォーム項目の間隔
• 日付とアジェンダの読みやすさ
• 固定要素がコンテンツを隠していないか
• 小さな画面では負担に感じる長いフォームになっていないか

次のような調整が効果的です。

• ラベルを短くする
• 関連する項目をまとめる
• 任意質問を下の方に移動する
• フォームが長い場合はステップ分割する

違和感があれば、チャットで率直に問題を説明してください。たとえば、「モバイルでは登録フォームが詰まりすぎています。余白を広げ、項目を縦に並べ、入力欄を隠さずに送信ボタンを表示したままにしてください。」のように伝えます。

MoremadeはReact + Tailwindのコードを生成するため、静的なモックアップではなく、実際の実装を調整していることになります。

フローが動いたら、公開します。

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

実用的な進め方は次のとおりです。

• まずは無料サブドメインに公開し、社内レビューに使う
• ライブの登録フローを最初から最後までテストする
• コピー、日付、価格が確定したら最終ドメインを接続する

バックアップを残したい場合や、あとで開発者に引き継ぎたい場合は、ソース全体をZIPでエクスポートするか、GitHubへプッシュできます。サイトは本物のReact + Tailwindコードで作られるため、プラットフォームに縛られることはありません。

問題の多くは、早い段階でやりすぎること、または重要情報を曖昧にしたまま進めることから起こります。

よくある失敗は次のとおりです。

• 項目、セクション、ユーザーフローに触れない一般的すぎるプロンプトで始める
• チケット種別と価格が決まる前にStripeを追加する
• 不要なフォーム項目を集めてしまい、完了率を下げる
• 登録後の確認ステートを忘れる
• モバイルで全体の流れをテストしない
• 日付、タイムゾーン、会場住所、連絡先を確認する前に公開する

とても役立つ習慣が2つあります。

• 一度に1つだけ変更し、各ステップの後にプレビューを確認する
• 大きな編集の前にはバージョン履歴を使い、比較したり必要なら元に戻せるようにする

もっと細かく制御したいなら、コードビューを使ってください。レイアウトを素早く調整したいなら、ビジュアルインスペクターを使い、その後チャットで仕上げると効率的です。