日曜の夜までにVercelで3Dゲームをリリース：48時間デプロイプレイブック
金曜の夜に何もなかった状態から、日曜の夕食時には your-game.vercel.app のリンクまで到達できます。 スタックはThree.js、Cursor、Vibe Skills のAIスキル、そしてVercelの無料枠です。週末の総費用：$0。管理しなければならないインフラの総数：これもゼロ。
これは「ラップトップでプロトタイプを作って終わり」ではありません。これは、誰でもブラウザで開くことができる公開URLで、HTTPS、エッジキャッシュ、そして希望すればカスタムドメインも利用できます。AIスキルはThree.jsの足場と動作する vercel.json を提供します。Cursorはイテレーションループを処理します。Vercelはデプロイを処理します。あなたはデザインを担当します。
このガイドは、インディー開発者、バイブコーダー、ハッカソン参加者、そして終わっていない localhost:5173 のタブにうんざりしているすべての人に向けられています。なぜこのスタックが機能するのか、48時間デプロイの構成要素、ワークフローのために構築された5つの3Dゲームスキル、そして金曜から日曜までのステップバイステップを説明します。
なぜVercel + Three.js + AIスキルがソロ開発者向けスタックなのか
VercelはThree.jsゲームの最も怠惰なデプロイ先です。 GitHubにプッシュすると、Vercelが検知し、プロジェクトをビルドし、60秒以内にURLを返します。サーバーのプロビジョニング、Dockerファイル、NGINX設定、SSL設定は不要です。Three.jsバンドルは静的なHTML、JS、WebGLアセットに過ぎず、これはまさにVercelのエッジネットワークが提供するために構築されたものです。
無料枠は週末のローンチを快適にカバーします：
- 月間100GBの帯域幅。 10,000回のプレイで5MBのThree.jsビルドは50GBです。帯域幅が尽きる前に週末が尽きるでしょう。
- HTTPSと
*.vercel.appサブドメインによる無制限の静的デプロイ。 - 無料枠でのカスタムドメインサポート - 自分の
name-game.comを持っていればそれを使い、そうでなければ無料のvercel.appURLはすべてのソーシャルプラットフォームで共有可能です。 - すべてのコミットに対するプレビューデプロイ - すべてのプッシュが独自のURLを取得するので、ビルドを壊さずに友達と共有し、イテレーションを続けることができます。
Vibe Skills からAIスキルを追加すると、ボイラープレートも消えます。Three.jsシーン設定、プレイヤーコントローラー、ビルドパイプライン、そしてVercel対応の vercel.json が1つのコマンドで生成されます。次にCursorは、週末の残りの時間を、あなたが望むゲームプレイを記述し、出力を調整するチャットに変えます。それがフルスタックです：基盤のためのマーケットプレイススキル、イテレーションのためのAIエディター、そしてデプロイのためのVercel。ソロ、無料、そして高速です。
48時間の構成要素：金曜のコンセプトから日曜のデプロイまで
実際にライブになる週末のシップはすべて同じステップを踏みます。コツは、日曜の午後ではなく金曜にデプロイを計画することです。そうすれば、最後の6時間はビルドエラーとの格闘ではなく、磨き上げに費やすことができます。
| フェーズ | 時間ブロック | あなたがすること | フェーズ終了時に出荷されるもの |
|---|---|---|---|
| フェーズ1：コンセプト | 金曜 18時 - 22時 | ジャンル選択、1ページの設計ドキュメント作成、Vibe Skills 3Dゲームスキルインストール、スターターをGitHubにプッシュ、Vercelに接続 | ボイラープレートシーンを備えたライブ name-game.vercel.app URL |
| フェーズ2：ビルド | 土曜 9時 - 20時 | プレースホルダーをコアメカニズムに置き換え、レベルを1つ追加、勝敗状態を機能させる | 同じVercel URLでプレイ可能なビルド、すべてのプッシュで自動デプロイ |
| フェーズ3：磨き上げ | 日曜 10時 - 16時 | サウンド、ジュース、チュートリアルポップアップ、バグチェック、モバイルでのパフォーマンスチェック | どのデバイスでも最初の60秒で壊れないビルド |
| フェーズ4：ローンチ | 日曜 16時 - 20時 | カスタムドメイン設定（オプション）、GIF録画、itch.ioページ作成、リンク投稿 | 公開URL + itch.ioページ + ソーシャルメディアでのローンチ投稿 |
これが機能する理由は、金曜のVercelへのプッシュです。URLが存在すれば、土曜と日曜のコミットはすべて自動的にデプロイされます。デプロイが金曜にすでに完了しており、週末中自動操縦で実行されているため、「日曜夜のデプロイパニック」は存在しません。
Vercelでの3Dゲームの「バイブコーディング」とは
バイブコーディングとは、あなたが望むものを平易な英語で記述し、AIエディターにコードを書かせること、そしてその出力をイテレーションすることです。 Vercel上のThree.jsゲームの場合、ループは異常にクリーンです。Cursorでのすべての変更は、ローカルフィードバックから pnpm dev の距離にあり、ライブプレビューURLからは git push の距離にあり、そして main へのプッシュからは本番環境への自動デプロイの距離にあります。
Vercelゲームのバイブコーディング週末は次のようになります：
- Cursorでスキルのスターターフォルダを開く。
- チャットで機能を記述する：「200ms以内にスペースを2回押したら、ダブルジャンプする」。
- Cursorがコントローラーファイルを編集する。保存する。
pnpm devがリロードする。ブラウザでジャンプを感じる。 - 感触が良ければ、
git pushする。VercelがプレビューURLをビルドする。友達に送る。 - 感触が固定されたら
mainにマージする。本番URLが60秒以内に更新される。
AIがタイピングを行います。Vercelがデプロイを行います。あなたは感触とデザインを行います。
Vibe Skillsでこれを可能にする5つのAI 3Dゲームスキル
これらのスキルは、Vercel + Three.js + Cursorの週末ワークフローのために構築されています。それぞれがViteベースのThree.jsプロジェクト、動作する vercel.json、Vercelがエッジから提供できる静的バンドルを生成する pnpm build、そしてテスト済みのデプロイパスを備えています。すべてVibe Skillsの3Dゲームカテゴリにあります。
1. Three.js + Vercel ゲームスターター
デフォルトの選択肢です。プレイヤーコントローラー、三人称カメラ、ライティングリグ、スカイボックス、そして衝突判定のある地面を備えたThree.jsシーンを生成します。Three.jsアセットバンドルに適切なキャッシュヘッダーを設定する vercel.json が付属しています。pnpm dev はローカルで実行され、Vercelダッシュボードで1クリックでGitHubリポジトリを接続すると、ライブURLが得られます。
最適: 純粋な2D以外のあらゆるジャンル。何を作っているかまだわからない場合に使用してください。
2. ファーストパーソンVercelウォーカー
スムーズな一人称コントローラー（WASD + マウスポインターロック + 重力 + スプリント + ジャンプ）に、足音フック、ヘッドボブ、そしてポインターロックCSPヘッダーを正しく処理する vercel.json が付属しています。これは多くのソロ開発者が本番でつまずく点です。このスキルはそれを解決してくれます。
最適: ウォーキングシム、ホラープロトタイプ、ナラティブゲーム、美術館展示。
3. ブラウザアリーナシューターキット
トップダウンアリーナ（ツインスティックコントローラー、ウェーブスポナー、基本的な敵AI、弾丸システム、スコアHUD）に、アセットをgzip化し、AIをコード分割し、音楽を遅延ロードするVercelチューニング済みビルドが付属しています。マルチプレイヤーフックが含まれています。週末はシングルプレイヤーをシップします。
最適: アーケードシューター、弾幕、モバイルで高速にロードする必要があるジャムエントリー。
4. Vercelパズルプラットフォーマー
三人称プラットフォーマー（可変ジャンプ、コヨーテタイム、レッジ検出）、チェックポイント、Blenderまたはコードで編集できる3つのスタブレベル、そしてリスポーンループが付属しています。vercel.json は、インスタントエッジキャッシュされたレベルリロードのために構成されているため、電話でのプレイテストがスピーディーに感じられます。
最適: パズルプラットフォーマー、パルクールプロトタイプ、レベルデザイン実験。
5. Vercelドライビングサンドボックス
アーケードドライビングの感触（加速カーブ、ドリフト物理、カメララグ、基本的な地形）と、ローポリカー、トラックテンプレート、そして広大な地形メッシュ用にチューニングされたデプロイが付属しています。プリセットHTTPヘッダーにより、WebGLコンテキストがSafari（歴史的にThree.jsで最も遅いブラウザ）でより速く起動します。
最適: アーケードレース、オフロードドライビング、ポートフォリオ用の車の感触デモ。
金曜から日曜までのステップバイステップ
これは正確なスケジュールです。開始時間を調整しても、順序は保ってください。重要なマイルストーンは金曜夜のVercelデプロイです。それ以降はすべてイテレーションです。
金曜 18時 - 20時：スキル選択、GitHubへのプッシュ、Vercelへの接続
ステップ1：Vibe Skillsで3Dゲームスキルを選択する。 3Dゲームカテゴリ を閲覧し、ジャンルに合ったものを選択し、スターターを新しいフォルダにインストールします。Cursorで開きます。19時までには、動くプレイヤーがいるThree.jsシーンが見えるはずです。
ステップ2：GitHubリポジトリを作成しプッシュする。 git init、git remote add、git push。ゲームのスラッグをリポジトリ名（crystal-runner、lunar-fishing など）として使用します。リポジトリ名がURLになることが多いです。
ステップ3：リポジトリをVercelに接続する。 GitHubでVercelにサインイン（無料）、「Add New Project」をクリックし、リポジトリを選択します。VercelはViteを自動検出し、ビルドを構成します。デプロイをクリックします。60秒以内に crystal-runner.vercel.app URLが得られます。電話で開きます。友達に1人共有します。これで、週末の残りのデプロイバーはゼロです。
金曜 20時 - 22時：設計ドキュメントの作成
ステップ4：5つの質問に平易な英語で答える。 リポジトリ内のNotionページまたはmarkdownファイルを開き、以下に答えます：
- プレイヤーは5秒ごとに何をしているか？（コアループ）
- 勝利条件と敗北条件は？
- 1回のランまたは1レベルの長さは？
- ビジュアルのフックは？（パレット、ライティング、スタイルの参照）
- 30秒で記憶に残る唯一の特徴は？
ステップ5：設計ドキュメントをコミットする。 リポジトリにプッシュします。Vercelが再デプロイします。意味のある変更ごとにプッシュする規律は、ライブURLを正直に保ちます。
土曜 9時 - 13時：コアメカニズムの構築
ステップ6：プレースホルダーメカニズムをあなたの唯一の特徴に置き換える。 これが唯一重要な特徴です。Cursorチャットを使用して記述します（「プレイヤーがクリスタルを拾うと、近くの敵を2秒間凍結し、チャイムを再生する」）。pnpm dev でローカルでイテレーションします。感触が良くなったらプッシュします。
ステップ7：勝利/敗北状態を連携させる。 実際のエンドを備えた60秒のビルドはゲームのように感じられます。エンドのない60分のビルドはテクデモのように感じられます。常に勝利画面を最初に、次にすべてを連携させます。
土曜 13時 - 20時：レベルを1つ追加
ステップ8：1つの磨き上げられたレベルを構築する。 3つの半端なものではなく。ジオメトリにはプレースホルダーキューブを使用します。スキルの標準キャラクターを使用します。感触を調整します - ジャンプの高さ、カメララグ、パーティクルの強度。
ステップ9：チュートリアルオーバーレイを追加する。 初回起動時の「WASDで移動、クリックで発射」という2行のポップアップは、8秒で諦める混乱したプレイヤーからのローンチを防ぎます。Cursorは30秒でReact（またはバニラDOM）オーバーレイを生成できます。
ステップ10：1時間ごとにプッシュする。 各プッシュにVercelプレビューURLが生成されます。それぞれ友達に送ります。フィードバックループはこのスタックの秘密兵器です。
日曜 10時 - 16時：磨き上げ
ステップ11：3つのサウンドを追加する。 足音ループ、アンビエントパッド、勝利のストリング。3つのサウンドだけでも、週末のプロトタイプを劇的に向上させます。無料ソース：freesound.org、opengameart.org。
ステップ12：ジュースを追加する。 ヒット時のパーティクル、衝撃時の画面揺れ、スコア時の数字ポップアップ。ジュースは、48時間ビルドをGIFで6ヶ月ビルドのように見せるものです。Cursorに「プレイヤーがダメージを受けたときに強度0.3で150msの画面揺れを追加して」と依頼します - 5秒でカメラシェイクフックを記述します。
ステップ13：Lighthouseパスを実行する。 電話でVercel URLを開き、Chrome DevTools Lighthouseを実行します。Three.jsバンドルは通常400KBから1.5MBです。3MBを超えている場合は、Cursorに重いモジュールでコード分割を有効にするように依頼します。Vercelのgzipとbrotliが残りを処理します。
ステップ14：バグチェック。 ライブURLを5回連続でプレイします。2回壊れたものを修正します。1回壊れたものは無視します。
日曜 16時 - 20時：ローンチ
ステップ15：（オプション）カスタムドメインを設定する。 事前に name-game.com を購入した場合は、Vercelのプロジェクト設定に追加します。SSLは自動です。そうでなければ、*.vercel.app URLで十分です - HTTPSがあり、共有可能で、どこでもロードされます。
ステップ16：最高の瞬間の15秒GIFを録画する。 ローカルホストではなく、ライブURLを使用します。GIFはTwitter、Bluesky、Redditでクリックされるものです。
ステップ17：itch.ioページを作成する（オプションですが効果的）。 タイトル、1行キャッチフレーズ、3つのスクリーンショット、GIF、コントロール、クレジット、そして *.vercel.app iframeの埋め込み（itch.ioはHTML5ゲームのiframe埋め込みをサポートしています）。これで、カジュアルな共有用URLとゲーマー向けURLの2つが得られます。
ステップ18：リンクを投稿する。 Twitter、Bluesky、開発者コミュニティDiscord、r/IndieDev、r/threejs、r/WebGames。常にGIFから始めます。常にURLを含めます。Vibe Skillsスキルを使用した場合は、デブログ投稿で言及してください - 一緒に読んでいる他の開発者は同じスターターを欲しがるでしょう。
Vercelデプロイの3つの最も一般的な失敗を回避する方法
ほとんどのソロThree.js + Vercel週末プロジェクトで壊れる3つのこと。すべて、金曜夜に発見すれば5分の修正ですが、日曜の19時に発見すると5時間の迷宮入りになります。
- ビルド出力ディレクトリの間違い。 Viteのデフォルトは
dist/です。VercelはViteを自動検出しdist/を使用します。出力をカスタマイズした場合は、vercel.jsonまたはプロジェクト設定でoutputDirectoryを設定してください。そうしないと、デプロイは404になります。 - ローカルでは動作するが本番では404になるアセットパス。 実行時にロードされるGLB、テクスチャ、またはオーディオファイルには、相対パスまたはViteの
import.meta.env.BASE_URLヘルパーを使用してください。ハードコーディングされた/assets/...パスは通常機能しますが、コピー＆ペーストされたWindowsの絶対パスは絶対に機能しません。 - ポインターロックまたはオーディオコンテキストをブロックするCSPヘッダー。 一人称ゲームにはポインターロックが必要です。オーディオにはユーザー操作の活性化が必要です。3Dゲームカテゴリのいずれかのスキルには、これを処理するための
vercel.jsonの正しいheadersブロックが付属しています。自分でゼロから書いた場合は、スキルのリポジトリから設定をコピーしてください。
デプロイは金曜日に機能するため、日曜にこれらが壊れるのは常に最近の変更によるものです。git bisectはあなたの友達です。さらに良いのは：30分ごとにプッシュし続けることで、壊れたコミットを小さくすることです。
よくある質問
ゲームへのトラフィックが増えても、Vercelの無料枠は本当に持ちこたえますか？
はい、週末のローンチと最初の数週間は大丈夫です。無料枠は月間100GBの帯域幅を提供しており、これは5MBのThree.jsビルドの約20,000回のプレイに相当します。その上限に達した場合、Proプランは月額$20で1TBに引き上げられます。週末のシップには、無料枠で十分以上です。Vibe Skillsのスキルは、バンドルサイズを最小限に抑えるビルド構成で出荷されるため、無料枠をさらに長く活用できます。
Vercelの無料枠でカスタムドメインを使用できますか？
はい。無料枠は自動HTTPS付きのカスタムドメインをサポートしています。ドメイン（Namecheap、Cloudflare Registrar、Porkbun）を購入し、Vercelにポイントすると、VercelがSSL証明書を処理します。設定には約10分かかります。ドメインを持っていない場合でも、name-game.vercel.app URLはどのプラットフォームでも共有するには十分短い名前です。
このスタックはゲームジャムの提出に適していますか？
はい、ゲームジャム提出に最適なスタックの1つです。ほとんどのジャム（Ludum Dare、GMTK、js13k、GitHub Game Off）は、Webでプレイ可能なURLを受け入れています。*.vercel.app リンクは、審査員にとってitch.io URLとまったく同じように機能します。多くのジャムの優勝者は両方にシップします - ゲーマー向けにはitch.io、高速な正規URLとしてはVercelです。
始める前にThree.jsを知っている必要がありますか？
Cursorが書いたものを読み、値を調整するための十分なJavaScriptが必要です。ゼロからThree.jsを書く必要はありません。Vibe Skillsのスキルは、エンジン設定、カメラ、コントローラー、ビルド構成を生成します。Cursorはあなたの説明からゲームプレイコードを処理します。
日曜の19時にVercelビルドが失敗した場合はどうなりますか？
最も一般的な原因はTypeScriptエラーまたは欠落している環境変数です。Vercelは、失敗した行をハイライトしたビルドログを表示します。ダッシュボードで1クリックすると、最後に機能したデプロイにロールバックされ、本番に昇格されます。すべてのプッシュがプレビューデプロイであるため、機能するビルドから1コミット以上離れることはありません。これが、土曜と日曜に30分ごとにプッシュすることが重要である理由です。
Vibe Skillsの3Dゲームスキルのコードを販売または変更できますか？
はい。Vibe Skillsのスキルは、Vercel、itch.io、Steam、またはその他の場所で独自のゲームとしてコードをリリースできる、商用フレンドリーなライセンスで出荷されます。クリエイターはスキルのIPを保持し、あなたはそれを基に構築されたゲームのIPを保持します。
Cursorを使いたくない場合はどうなりますか？
プロジェクトファイルを編集できるAIエディターならどれでも動作します。Claude Code、Cursor、Windsurf、GitHub Copilot Chat、Cline - どれでもVibe SkillsのスキルのThree.js足場をイテレーションできます。スキル自体はエディターに依存しません。
今週末にシップしよう
ほとんどのソロ開発者が3Dゲームをシップできない理由は、エンジン、ジャンル、またはスキルレベルではありません。それは、金曜の夜に「もう少しだけ調べてみよう」と言って、決して始めないことです。次にフリーな週末には、4フェーズの計画に従ってください：Vibe Skills 3Dゲームスキルをインストールし、GitHubにプッシュし、Vercelを接続し、金曜の20時までにデプロイし、土曜と日曜はライブURLでイテレーションします。
Vercelで週末にシップされた10個のゲームのポートフォリオは、あなたの仮説的な6ヶ月のドリームエンジンプロジェクトよりも価値があります。シップされたものが常に勝ちます。無料のVercel URLがその証拠です。
Three.jsのボイラープレートマラソンをスキップしましょう。Vibe Skillsで3Dゲームスキルをインストール、Vercelにプッシュし、日曜の夜までにライブURLを取得しましょう。