AIでウェイトリストページを作る方法

ウェイトリストページは通常小規模なので、AI支援の構築にとても向いています。プロンプトを書く前に、ページに必ず必要なものと、後回しにできるものを決めましょう。

多くのローンチで最低限必要なのは次の要素です。

• その製品が何をするのかがわかる明確な見出し
• 短い補足文
• メール入力欄と送信ボタン
• リスト参加でもらえるものの説明
• 創業者名、ローンチ時期、製品の背景などの基本的な信頼情報

必要に応じて、次のものも入れられます。

• ヒーロー画像や製品モックアップ
• 短い機能一覧
• FAQブロック
• X、LinkedIn、問い合わせメールへのリンク
• フォーム送信後の成功状態

データについても考えておきましょう。見た目の初稿だけなら、まずは静的なフォームで十分です。メールを保存したいなら、Supabaseの接続を計画します。予約注文やデポジットを受け付けたいなら、そのときにStripeが必要になります。

また、誰向けのページかも決めてください。開発者向けのウェイトリストと、一般消費者向けでは読み方が変わります。その内容もプロンプトに入れると、初稿がより実用的になります。

Moremadeは自然な言葉で動きます。最初のプロンプトが具体的であるほど、あとで修正する量が減ります。短いクリエイティブブリーフを書くつもりで考えましょう。

含めるべき内容:

• 何をローンチするのか
• 誰向けか
• どんなセクションが必要か
• どんな見た目にしたいか
• フォームが静的か、データ接続されるか
• トーンや避けたい表現などのコピー制約

たとえば、こんな始め方ができます。

SignalPadという、製品チーム向けメモアプリのローンチ用に、1ページのウェイトリストサイトを作ってください。ReactとTailwindを使ってください。ページは、クリーンなSaaS風レイアウトで、ヒーローセクション、短い機能一覧、創業者メモ、FAQ、メールと役職を入力するウェイトリストフォームを含めてください。トーンは平易で信頼感のあるものにしてください。背景は白、文字はダーク、アクセントカラーは青を1色使ってください。フォーム送信後には成功メッセージを表示してください。モバイルでも見やすいレイアウトにしてください。現時点ではフォームのUIだけ用意し、バックエンドには接続しないでください。

このプロンプトは、作業を詰め込みすぎずに十分具体的です。AIに何を作るか、何を作らないか、最初の完成度をどこまで求めるかを伝えています。

最初のビルドができたら、細かい見た目より先に、構成が正しいかをライブプレビューで確認しましょう。レイアウト、セクション順、コピーの階層は、早い段階で直すほうが効率的です。

確認ポイント:

• 見出しで製品内容が平易に伝わっているか
• フォームが目立つが、ページを支配しすぎていないか
• ウェイトリストとして情報量が多すぎないか
• 余白やボタンラベルが一目で理解できるか

その後はチャットで少しずつ修正します。大きな要望より、短く具体的な指示のほうがうまくいきます。

例:

• ヒーロー見出しをもっと直接的にして: 「Shared notes for product teams, without the clutter.」補足文は1文に短くして。
• ウェイトリストフォームをもっと上に移動して、デスクトップとモバイルの両方でヒーロー内に表示されるようにして。機能一覧はファーストビュー外に置いて。
• 小さなソーシャルプルーフのプレースホルダーを、ロゴ付きで追加して。ただし、今は汎用的で控えめな扱いにして。

Moremadeにはビジュアルインスペクターもあるので、要素を指して変更できますし、コードビューで生成されたReact + Tailwindのコードをより直接的に確認することもできます。プレビューが十分近いなら、ページ全体を書き直さず、1回に1つの変更だけ依頼しましょう。

多くのウェイトリストページは、初日に認証や決済を必要としません。最もシンプルで実用的な版は、ページと送信内容を保存するフォームだけで十分なことが多いです。

メールアドレスを保存したい場合は、Supabaseを使います。Moremadeには、データベース、サインイン、ファイル保存のためのSupabaseコネクタが標準であります。ウェイトリストなら、一般的には次のような項目を持つテーブルを作ります。

• email
• role
• referral source
• created_at

AIにフォームをSupabaseへ接続し、メール欄を検証するよう依頼できます。創業者向けの限定プレビューや、後から管理者サインインを追加したい場合も、Supabaseを入れる理由になります。

Stripeを使うのは、そのウェイトリストが実際には有料予約、事前注文、デポジットのフローである場合だけにしましょう。Moremadeは、設定した価格のStripe Checkoutに対応しています。単に関心を集めたいだけなら、決済は不要です。ページがシンプルになり、失敗要因も減ります。

基本ルールは、ローンチの流れに本当に必要でない限り、サインイン、データベースロジック、チェックアウトは追加しないことです。

ウェイトリストのトラフィックの多くは、特にSNSやコミュニティで共有する場合、スマートフォンから来ます。デスクトップでは問題なく見えても、モバイルでは余白、フォーム幅、画像の大きさが原因で失敗することがあります。

確認項目:

• 見出しが長くなりすぎて折り返していないか
• ボタンの幅とタップしやすさ
• フォーム欄がきれいに縦並びになっているか
• 機能カードが縦に長くなりすぎていないか
• FAQの文字が読みやすいか
• フッターリンクが詰まりすぎていないか

モバイル向けの全面的な再設計ではなく、狙いを絞った修正を依頼しましょう。たとえば:

• モバイルではヒーローの余白を減らし、見出しは最大3行に収めて。
• 640px未満の画面では、メール欄と送信ボタンを全幅にして。
• 小さい画面では装飾的なヒーロー画像を非表示にし、フォームがあまりスクロールせずに見えるようにして。

この段階では、コピーの問題も見つかります。モバイルでは、弱い見出しや長文がより目立ちます。

ページが動いたら公開しましょう。Moremadeでは、無料のyourname.moremade.aiサブドメインにワンクリックで公開できます。社内レビュー、初期テスト、ソフトローンチにはこれで十分です。

有料プランなら、独自ドメインを接続できます。ドメインはMoremade内で購入することも可能です。本番ローンチなら、独自ドメインは共有しやすく、より意図的に見えるので、通常は付ける価値があります。

公開前に次を確認してください。

• ページタイトルと説明文
• フォーム送信後の成功状態
• 付ける場合は、プライバシーや問い合わせ先へのリンク
• 独自ドメインが正しいページを向いているか

プラットフォームの外にコピーを残したい場合は、完全なソースをZIPでエクスポートするか、GitHubへプッシュできます。Webサイトは実際のReact + Tailwindコードとして生成されるので、独自のページ形式に縛られることはありません。

問題の多くは技術ではありません。伝えたいことを詰め込みすぎるか、早すぎる段階で情報を集めすぎることから生まれます。

よくあるミス:

• 見出しが曖昧。 訪問者が数秒で製品を理解できないなら、ページはまだ不十分です。
• 入力項目が多すぎる。 まずはメールだけにして、ローンチ判断に役立つ場合のみ、役職や追加の条件を足しましょう。
• 早すぎる複雑化。 提供に必須でない限り、サインイン、ダッシュボード、決済は追加しないでください。
• 過剰に凝った初稿。 アニメーション、グラデーション、複雑なレイアウトより先に、構成を整えましょう。
• モバイル確認なし。 壊れたモバイルフォームは、静かにコンバージョンを落とします。
• データの扱いの計画なし。 メールを集めるなら、どこに保存され、どう使うのかを決めておきましょう。

役立つ流れはシンプルです。素早く下書きし、小さなプロンプトで磨き、必要なときだけバックエンドを追加し、ページが明確に伝わったら公開することです。