ウェイトリストページ

このテンプレートを使えば、資金調達済みのスタートアップが作ったようなウェイトリストページを用意できます。開発者もコードも必要ありません。訪問者は画面いっぱいに広がる3Dシーンと、虹色に輝くワイヤーフレームの立方体に迎えられます。メールアドレスを入力すると、すぐに自分の順番と個人用の紹介リンクが表示されます。

技術的な部分はすでに用意されています。Supabaseがすべての登録を保存し、順番をその場で計算し、開いているすべてのタブにカウンターの更新をリアルタイムで配信します。紹介元の記録、重複登録の検出、自分自身の紹介のブロックもすべてデータベース層に組み込まれています。バックエンドのロジックを組む代わりに、ローンチ戦略に集中できます。

含まれるもの：3D WebGLシーン（非対応端末向けのCSSフォールバック付き）を備えた全面表示のウェイトリストページ、入力時に検証を行うメール登録フォーム、登録後に順番とコピー可能な紹介リンクを表示するカード、リアルタイムの「待機中の人数」カウンター、そして保護された管理用テーブルです。管理用テーブルでは登録者の検索、紹介数や登録日による並べ替え、全データのCSVエクスポートができます。画面は全部で3つで、それぞれがひとつの役割だけを担います。

月額料金がかかり、ページに自社ブランドを表示するホスティング型のウェイトリストツールとは違い、このテンプレートならデザイン、データ、ドメインのすべてを自分で所有できます。ゼロからウェイトリストをコーディングする場合と比べると、登録ロジック、順位付けのクエリ、リアルタイム処理の仕組みづくりにかかる数週間を省けます。

コードを書く前の需要検証

プロダクトのアイデアはあってもまだ形になっていないなら、このウェイトリストページで開発リソースを投じる前に関心の度合いを測れます。リンクを共有し、カウンターが伸びていくのを見守り、招待を送る準備ができたら登録者をエクスポートしましょう。初期の開発コストをかけずに、需要をはっきりと確かめられます。

紹介を軸にしたローンチ

組み込みの紹介の仕組みによって、登録者一人ひとりが拡散の窓口になります。訪問者にはそれぞれ専用のリンクが発行されます。そのリンクから友人が登録すると、紹介した人の順番が上がります。有料広告を出したり、別途紹介システムを作ったりしなくても、自然な成長が期待できます。

リブランディング前の期待感づくり

新しい名前での再ローンチや新市場への方向転換の際、独立したウェイトリストページを使えば、プロダクトの全貌を明かさずに期待感を高められます。モノグラムを差し替えて3つのカラー値を変更するだけで、立方体、ボタンのグラデーション、フォールバックのシーンにブランドが反映されます。

SaaSベータ版の初期ユーザー集め

SaaSのダッシュボードが本番公開できる状態になる前から、ドメインをこのウェイトリストページに向けて、初日からメールアドレスを集め始められます。管理用テーブルには、紹介によってほかの人を呼び込んだ、特に熱心なアーリーアダプターが順位付きで表示されるので、最初に誰を招待すべきかがはっきりわかります。

はじめかた

1. テンプレートをリミックスする

Lovableでテンプレートを開き、自分のプロジェクトとしてリミックスします。3Dシーン、メールフォーム、紹介ロジック、管理パネルはすべて接続済みです。このテンプレートが合わなければ、別のテンプレートをリミックスすることもできます。作業が無駄になることはありません。

2. ブランドに合わせてカスタマイズする

src/config/waitlist.tsを編集して、プロダクト名、キャッチコピー、モノグラムの文字、3つのグラデーションの色相を設定します。立方体の辺、モノグラムのシェーダー、送信ボタン、CSSフォールバックのすべてが自動で更新されます。ブランドに合う書体が別にある場合は、style-pack.cssでフォントの組み合わせを変更してください。

3. コンテンツを追加する

キャッチコピーをローンチの切り口に合わせて書き換えましょう。初期状態では「Something new is coming. Be first.（新しい何かがやってくる。いち早く手に入れよう）」となっています。訪問者が何を待っているのかが伝わる文に差し替えてください。文は1つに収めましょう。視覚的な印象は3Dシーンが担うので、言葉は方向を示すだけで十分です。

4. ツールを連携する

バックエンドとしてSupabaseがすでに接続されています。登録テーブル、順位計算用のビュー、リアルタイム配信のトリガーは、1回のマイグレーションで作成されます。あとから登録者をCRMやメールツールに送りたい場合は、管理画面からCSVをエクスポートするか、SupabaseのWebhookをZapierに接続してください。ローンチに外部連携は必要ありません。

5. 公開する

Lovableからワンクリックでデプロイし、独自ドメインを設定します。SNSのプロフィール、メールの署名、ランディングページのリンクなど、あらゆる場所でURLを共有しましょう。登録が届くたびにカウンターがリアルタイムで更新されます。管理パネルを開けば、誰が登録したか、何人を紹介したか、何位にいるかを確認できます。

このウェイトリストページのテンプレートは、プロダクトのリリース前に反響を得たい創業者、マーケター、事業運営者に向いています。紹介の仕組みを自作しなくても紹介エンジンが手に入り、SQLを書かなくても順位付きの待機列ができ、WebGL開発者を雇わなくても洗練された3Dのランディング体験を実現できます。

最初の登録は今日の午後にも届くかもしれません。テンプレートをリミックスし、ブランドを反映してデプロイしたら、アイデアが新鮮なうちにリンクを共有し始めましょう。