コーディングせずにWebアプリ作るツール比較してみた

自然言語でAIに「雰囲気（Vibe）」を伝えるだけで、AIがコードを生成してくれる新しいソフトウェア開発手法、いわゆるバイブコーディングで作る方法にはどんなものがあるのかなと
実際に○✕ゲームを作らせながら比較してみました

早速比較表

サービス名	主な用途	データベース	公開	本格利用時の料金（1ユーザー1か月あたり）
Google AI Studio Build	バイブコーディング	なし	Google Cloudプロジェクトが必要	無料
Figma make	バイブコーディング	外部サービスと接続可	簡単	3000円
Bolt.new	バイブコーディング	あり	簡単	30ドル
Lovable	バイブコーディング	あり	簡単	25ドル
Replit	バイブコーディング	あり	簡単 (有料)	40ドル
Cursor	コーディング支援	なし	自分でデプロイする必要あり	40ドル

いろいろ使ってみて感じたこと

• LLM最高。日本語でも伝わる
• ひどいデザインのUIは出てこない
• バックエンドが構築できるのも割と当たり前
• できることはあんまり変わらずどれも便利
• Google AI Studio Buildに他と同じようなバックエンド構築機能ができたらそれが一番強そう
• 今のところは別でFigmaも使っているのでFigma makeかな。。。

比較方法

与えるプロンプトは可能な限り端的に以下を必要に応じて指示
端的にすることでサービス別の挙動や仕上がりの違いから特性を見る狙いです

• ○✕ゲーム
• AIと勝負できるようにして
• 対戦履歴を見れるようにして

比較結果

Google AI Studio Build

Googleアカウントがあれば使えるのはうれしい！
ただ、バックエンドつなぎこめないのが惜しい。。。
デプロイも課金が有効なGoogle Cloudのプロジェクトが必要。。。
フロントだけで完結する簡単なツールならこれで無料で作ってしまうのがバイブコーディング入門には最も手軽かもと思うツールでした
完成したアプリはシンプルで、おしゃれではないけどダサくもないという絶妙な見ためと挙動。。。

• Google AI Studio Buildで作った○✕ゲーム*

Figma make

Draftなら無料でも使えるので取りあえずはお試し可能なのはとっつきやすいですね
いざチームで導入するとなってもFigma make以外の機能も使えるフルシートなので、Figmaを使っているチームにとってはついでに使えるかもしれませんね
そのまま公開できるサイトにできて、Supabaseと連携してバックエンドを構築できるのはうれしいポイントですね
実際にデータベースに読み書きするような機能を要求したらちゃんとテーブルを用意して接続してくれました
モード選択ボタンの配色が原色すぎてダサいなぁ…という以外は無難できれいなイメージ

• Figma makeで作った○✕ゲーム*

Bolt.new

ほとんどFigmaと同じですが、バックエンドが内包されたサービスになっているので契約がまとめられていいですね
デザインも見やすくてきれいでなかなかいい！

• Bolt.newで作った○✕ゲーム*

Lovable

Bolt.newとかなり近い
UIのデザインはかわいい感じで個人的に推し

• Lovableで作った○✕ゲーム*

Replit

できることはあまり変わりないがPublishは要課金
「○✕ゲーム」というプロンプトに対して、どんな仕様がいいか聞いてきて驚いた
UIは割と質素だけどアニメーションがよかった
他に比べて無料枠をすぐ使い切ってしまった印象

• Replitで作った○✕ゲーム*

Cursor

これだけ他と違ってコーディング支援系な感じですね
VSCode + Copilot Agentモードも似たような結果になりそうです
こちらもどんな仕様にすべきか確認してきました
コーディング支援なのでバックエンドやデプロイ環境は自作しなければならないのが辛み

• Cursorで作った○✕ゲーム*