Bolt・v0・Lovable：ゲーム制作に使えるのはどれか

三つのツールが何を得意にしているか

まずそれぞれの設計思想を押さえておくと、比較がしやすくなります。

Bolt（StackBlitz社）は、ブラウザ上でフルスタックの開発環境を動かすことに特化しています。Node.jsやnpmが使えるため、外部ライブラリを自由に組み合わせられます。生成されたコードはブラウザ内で即座に実行され、ファイル構成を直接編集することもできます。ゲームエンジンのライブラリ（Phaser.jsなど）をnpmで入れてしまえば、本格的なゲームループを構築できる点が強みです。

v0（Vercel社）は、React＋Tailwind CSSを使ったUIコンポーネントの生成に最適化されています。デザインの精度が高く、ボタン・フォーム・カード一覧といった「画面部品」を素早く仕上げるのが得意です。一方で、ゲームループ・当たり判定・アニメーションループといった「時間と状態が絡む処理」は想定外の用途に近く、生成コードが複雑になるほど破綻しやすくなります。

Lovable（旧GPT Engineer）は、プロンプト一つでWebアプリ全体を生成し、Supabaseとの連携でバックエンドも含めた構成を作れることが特徴です。「ゲームのランキング保存画面」「ユーザー認証つきのスコアボード」のようなアプリ的な機能を含む作品には向いています。ただし、キャンバス描画や物理演算などゲーム固有の処理では、Boltほど細かく調整できません。

ゲーム制作で実際に差が出る三つの軸

三つのツールを比べるとき、「ゲームを作る」という文脈で特に差が出る軸は次の三つです。

ゲームループを扱えるか

ゲームの核心は requestAnimationFrame や setInterval によるループ処理です。毎フレーム状態を更新し、画面を再描画するこの仕組みを、ツールがどこまで理解して生成できるかが分かれ目になります。

Boltはライブラリを自由に導入できるため、Phaser.jsやPixi.jsを使えばゲームループを安定して持てます。プロンプトで「Phaser.jsを使って横スクロールアクションを作って」と指示すると、ゲームシーンの構成・プレイヤーの移動・当たり判定の雛形まで一度に生成されることがあります。v0はReactのレンダリングサイクルが前提のため、高速なゲームループとは相性が悪く、シンプルなカードゲームやクイズ形式には使えますが、アクションやシューティングには向きません。Lovableも同様に、アプリ的な状態管理は得意でも、60fpsで動くゲームの生成は苦手です。

キャンバス描画に対応できるか

ブラウザゲームの多くはHTMLの <canvas> タグを使って描画します。この場合、CSSではなくJavaScriptで直接ピクセルを操作するため、UIコンポーネント生成に特化したv0は生成品質が落ちます。BoltはキャンバスAPIを直接扱う指示にも応じやすく、ファイルを分けて管理できるため、スプライトシートや音声ファイルを追加していく作業も現実的です。

生成後の反復編集がしやすいか

最初の生成が完璧なことはほぼありません。「敵の速度を変えたい」「ステージを追加したい」という継続的な修正に、各ツールがどう応じるかも重要です。Boltはファイル単位で編集できるため、特定の関数だけを書き換えるよう指示しやすいです。v0はコンポーネント単位の修正は得意ですが、ゲームの場合はコンポーネントの境界が曖昧になりがちで、修正指示が全体の再生成につながることがあります。Lovableはチャット形式で修正を重ねる設計ですが、複雑なゲームロジックを長い会話の中で維持するのは難しくなります。

用途別の選び方

ここまでの整理をもとに、典型的な用途ごとの選び方を示します。

アクション・シューティング・パズルゲームを作る場合はBoltが最有力です。Phaser.jsなどのゲームライブラリをプロジェクトに加えることで、物理演算・アニメーション・サウンドの扱いが一気に楽になります。プロンプトには「Phaser.js 3を使って」と明示し、ゲームシーン・プレイヤークラス・敵クラスを分けるよう指示すると、後から編集しやすい構造が得られます。

カードゲーム・クイズ・ボードゲームなどUIが主体の作品ならv0でも成立します。テキストと選択肢、結果表示がメインであれば、v0のコンポーネント生成の精度が活きます。ただし「Reactコンポーネントとして生成されたもの」を最終的にHTMLファイルとして書き出すには、Next.jsのビルドやコード変換の手間が別途かかる点に注意が必要です。

スコアボード・ランキング・ユーザー認証をゲームに組み込みたい場合はLovableが有用です。ゲーム本体の描画ロジックをBoltで作り、スコアを保存する管理画面だけLovableで作って組み合わせるという分業も現実的な選択肢です。

失敗しやすいパターンと対処

どのツールにも共通して起きやすい失敗を三つ挙げます。

指示が曖昧なまま全体生成を頼むのは時間の無駄になりがちです。「ゲームを作って」ではなく、「Phaser.js 3を使い、単一のHTMLファイルで動く横スクロールゲームを作って。プレイヤーは矢印キーで動き、画面内のコインを取得するとスコアが増える」のように、使用ライブラリ・動作環境・操作方法・勝敗条件を最初から明示します。

生成されたコードをそのまま信じるのも危険です。変数名の衝突、イベントリスナーの重複登録、メモリリークなど、動いているように見えて後で問題になるコードが混入していることがあります。ブラウザの開発者ツールでコンソールエラーを確認する習慣をつけてください。

一度の指示で完成を目指すと、修正のたびに全体が書き変わって前の進捗が消えるリスクがあります。「まずプレイヤーの移動だけ実装して」→「次に床との当たり判定を追加して」のように、機能を一つずつ積み上げる進め方が安定します。

三つを組み合わせて使う発想

ゲーム制作においては、一つのツールにこだわるより、得意領域で使い分ける方が効率的です。ゲームのロジックと描画はBoltで作り、タイトル画面やメニューのデザインにv0の出力を参考にする、スコア保存の仕組みだけLovableで試作してみる——こうした組み合わせは実際に有効です。

ツール間でコードを移す際は、依存関係（どのライブラリが必要か）と名前空間の衝突に注意してください。v0が出力するReactコンポーネントをBoltのプロジェクトに貼る場合、Reactのセットアップがなければ動きません。環境を統一するか、プレーンなJavaScriptに書き直すかを最初に決めてから統合作業に入るとトラブルが減ります。

次の行動

まずBoltを開き、「Phaser.js 3を使ったシンプルなクリックゲームを単一HTMLで作って」と入力してみてください。生成されたコードがブラウザで動くことを確認したら、自分が作りたいゲームの要素を一つ追加する指示を試してみましょう。作れたゲームはHTMLファイルまたはZIPとしてダウンロードし、アソバース（aso-verse.com）に投稿すると、すぐにブラウザで公開・共有できます。

参考資料

• Bolt（StackBlitz）公式ドキュメント
• v0（Vercel）公式ドキュメント
• Lovable 公式ドキュメント
• Phaser.js 公式ドキュメント