v0 by Vercel vs Bubble比較｜React生成かノーコード完結か、無料で試して$20から選ぶ
この記事のポイント v0 by Vercelは「コードが残る」、Bubbleは「コードを書かずに完結する」。同じ"作る"でも残るものが正反対だ。どちらも無料から試せて、本格運用はv0が月$20から、Bubbleは月$29前後から。React/Next.jsを採るならv0一択、認証・決済込みのサービスをエンジニアなしで出すならBubble。迷う必要はない、作りたいものから逆算すれば答えは1つに決まる。
結論：選定軸は「コード資産を残すか、ノーコードで完結するか」
v0 by VercelとBubbleは競合ではない。解決している問題が違う。
v0は自然言語からReact/Next.jsのコードを生成する。出力はそのままGitHubに流せる本物のコードで、後からエンジニアが手を入れて拡張できる。フロントエンドを速く形にしたい開発者・デザイナー向きだ。
Bubbleはコードを一切書かずに、UI・データベース・ワークフロー・ユーザー認証・決済までを1つの画面で組む。エンジニアを採用せずに「動くサービス」を世に出したい起業家・事業部門向きだ。
判断はシンプルに割り切れる。コード資産を残してエンジニアと育てるならv0、ノーコードで丸ごと完結させたいならBubble。両者は二者択一というより、フェーズと体制で決まる。
v0 by Vercelとは：UIジェネレーターからフルスタック開発基盤へ
v0はNext.jsの開発元Vercelが提供するAIアプリビルダーで、2026年時点でユーザー600万人を超える。当初の「UIパーツを吐く道具」から、データベースやGitHub連携まで含むフルスタック開発基盤へと役割を広げた。
特徴は出力の質だ。shadcn/uiとTailwind CSSを前提に、現場のReact/Next.jsの作法に沿ったコードを生成する。「AIが書いた読みにくいコード」になりにくく、人間のエンジニアがそのまま引き継げる。
チャットで「こういう画面が欲しい」と指示し、ライブプレビューで詰めていく流れ。完成したらワンクリックでVercelにデプロイでき、GitHubにも同期される。日本語の指示にも対応しており、初動でつまずきにくい。
弱点もある。React/Next.jsのエコシステムが前提なので、その世界観を知らないと「生成されたものを評価できない」。あくまで開発者の生産性を上げる道具で、非エンジニアが単独で完結する設計ではない。
Bubbleとは：ノーコードで「動くサービス」を丸ごと出す
Bubbleはブラウザ上のエディタで、ドラッグ&ドロップとビジュアルロジックでWebアプリを構築するノーコードプラットフォームだ。コードを1行も書かずに、本番運用できるサービスを公開できる。
強みは守備範囲の広さにある。UIだけでなく、データベース、ワークフロー、ユーザー登録・ログイン、外部API連携、決済まで、1つのプラットフォームで完結する。プラグインで機能を継ぎ足しながら運用していける。
プロンプトからの自動生成にも対応しつつ、本質は「自分で組み立てる」エディタだ。だからこそ細かい挙動まで作り込めるが、エディタ独自の概念（データタイプ、ワークフロー、状態管理）を覚える学習コストがかかる。
注意点は2つ。画面が英語のみで、用語に慣れるまで初動が鈍りやすい。そしてアクセスが増えると課金体系（ワークロード）の理解が必須になる。手軽さの裏で、運用が深まるほど"Bubbleの流儀"を学ぶ必要がある。
料金で比較：無料で試し、本格運用でいくらか
両者とも無料プランで試せるが、有料移行後の課金の考え方がまったく違う。以下に2026年時点の概要を整理する。
| プラン | v0 by Vercel | Bubble |
|---|---|---|
| 無料 | $0（月$5分のクレジット、v0-1.5-md、Vercelへデプロイ可） | $0（学習・試作向け、本番公開や独自ドメインに制限） |
| エントリー有料 | Premium $20/月（$20分クレジット、上位モデルv0-1.5-lg、Figmaインポート、v0 API） | 有料スタータープランは月$29前後〜（独自ドメイン・本番公開対応） |
| チーム・上位 | Team $30/ユーザー月、Business $100/ユーザー月、Enterpriseは個別 | 上位プランはワークロード量に応じて段階的に増額、Enterpriseは個別 |
| 課金の単位 | クレジット（生成・モデル利用量で消費） | ワークロード単位（処理量・アクセス量で消費） |
ざっくり言えば、v0は「AIにどれだけ生成させたか」で、Bubbleは「アプリがどれだけ動いたか」で課金が膨らむ。v0は試作フェーズのコストが読みやすく、Bubbleはアクセスが伸びてからコストが効いてくる。料金は変動するため、最新の正確な金額は両社の公式ページで確認してほしい。
機能と出力の違い：何が手元に残るか
導入のしやすさより、後から効くのが「出力形式」の違いだ。下表で本質的な差を押さえる。
| 比較項目 | v0 by Vercel | Bubble |
|---|---|---|
| 主機能 | 自然言語からReact/Next.jsのUI・コード生成、ライブプレビュー編集 | ビジュアル構築でUI・DB・ワークフロー・認証・決済を統合 |
| 出力形式 | 編集可能なコード（React/Next.js） | コード非依存のノーコードアプリ |
| 残る資産 | GitHubに残るコード（移植・拡張が自由） | Bubble上のアプリ（プラットフォーム依存） |
| 日本語対応 | 対応 | 画面は英語のみ |
| デプロイ | Vercelに即時デプロイ | Bubbleのホスティングで公開 |
| 向く人 | フロントエンド開発者、デザイナー、MVPを急ぐ事業担当 | 起業家、事業部門、開発リソースが限られたチーム |
最大の分岐点は「残る資産」だ。v0の生成物はGitHub上の標準的なReactコードなので、後で別の環境へ移しても、エンジニアを増やしても育て続けられる。
一方Bubbleの成果物はBubble上で動くアプリで、プラットフォームに依存する。これは弱点であると同時に強みでもある。インフラやコードを意識せず、ビジネスロジックの検証に集中できるからだ。
用途別の選び方：作りたいものから逆算する
道具から選ぶと迷う。作りたいものから逆算すれば、どちらかに自然と寄る。
ランディングページや管理画面のUIを素早く形にしたい v0 by Vercelを推す。チャットで画面を指示してライブプレビューで詰め、GitHubに流してVercelにデプロイできる。生成物がReact/Next.jsのコードなので、後からエンジニアが拡張する前提でも資産が無駄にならない。
認証・課金・データ管理込みのサービスを丸ごと立ち上げたい Bubbleを推す。ユーザー登録から決済、データベース、ワークフローまでを1つの画面で完結できる。エンジニアを採用せずに「動くサービス」を出して市場の反応を見るフェーズに最適だ。
日本語UIで迷わず触り始めたい v0が有利だ。日本語に対応しているため用語の解釈で詰まりにくい。Bubbleは英語のみで、エディタ独自の概念に慣れるまで初動が鈍りやすい。
既にReact/Next.jsを採用している v0で確定だ。既存のコードベースと地続きで、生成物をそのまま組み込める。ノーコードに置き換える理由がない。
v0を選ぶべきケース / Bubbleを選ぶべきケース
体制と前提で、選ぶべき側ははっきり分かれる。自分のチームがどちらに当てはまるかで判断してほしい。
v0 by Vercelを選ぶべきケース
- React/Next.jsを採用済み、または採用予定のプロジェクト
- 生成物をコードとしてGitHubに残し、エンジニアが継続改修する
- Vercelへのデプロイを前提にしたWebアプリ・UIを作る
- フロントエンド開発者・デザイナーが主導して試作を高速に回す
Bubbleを選ぶべきケース
- コードを書かずに本格的なWeb/モバイルアプリを公開したい
- 認証・決済・データベース・ワークフローを1つで完結させたい
- SaaS・社内ツール・マーケットプレイスのアイデアを素早く検証したい
- エンジニアリソースが限られた起業家・事業部門が主導する
迷ったときの一言の指針はこうだ。手元にエンジニアがいるならv0、いないならBubble。これで8割は決まる。
併用という選択肢：検証はBubble、本番はコードへ
二択で考えなくていい場面もある。フェーズで使い分ける手が有効だ。
アイデア検証の初期はBubbleで素早く「動くもの」を作り、市場の反応を見る。手応えが出てスケールや独自要件が増えてきたら、v0でフロントを作り直し、コードベースの本番システムへ移す。
逆向きもある。フロント主体のプロダクトはv0で立ち上げ、複雑な業務ロジックや社内向け管理画面だけをBubbleで補完する。どちらも"正解の道具"が違うだけで、組み合わせれば弱点を消せる。
AIコーディング全般を比較したいなら、CursorやLovableも候補に入る。エディタ統合型の開発を重視するならこのあたりも合わせて検討するといい。
編集部の評価
率直に言って、この2つを「ノーコード」でひとくくりにする比較は的を外している。残るものが正反対だからだ。以下は公開情報とリサーチに基づく編集部の見立てだ。
v0はReact/Next.js環境を持つチームにはほぼ一択と言っていい。出力されるコードの素直さは頭1つ抜けていて、生成AIにありがちな「動くけど引き継げないコード」問題が小さい。日本語対応も初動の摩擦を減らす。逆に言えば、Reactの世界を知らない人が単独で使うには評価軸を持てず、宝の持ち腐れになりやすい。
BubBleの守備範囲の広さは重宝する。認証・決済・DBまで1つで賄える設計は、エンジニアなしで事業仮説を回したい人に圧倒的な時短をもたらす。ただし英語のみのUIと、アクセス増で効いてくるワークロード課金は正直クセが強い。「手軽さで入って、運用の深さで学習コストを払う」構造だと理解して使うべきだ。
総じて、コードを残すならv0、コードを書かないならBubble。この一点で割り切れば、選定で消耗する時間はほぼゼロにできる。
よくある質問（FAQ）
Q. v0 by VercelとBubbleは結局どちらを選ぶべきですか？
React/Next.jsのコードを生成し、GitHubとVercelで継続開発したいならv0が向きます。コードを書かずに認証・DB・決済込みの本格Webアプリを公開したいならBubbleが向きます。手元にエンジニアがいるかどうかが最大の分岐点です。
Q. どちらも無料で試せますか？料金はいくらからですか？
両方とも無料プランがあります。本格運用ではv0が月$20のPremiumから（月$20分のクレジットと上位モデル付き）、Bubbleは月$29前後の有料プランから独自ドメインや本番公開に対応します。金額は変動するため最新は公式で確認してください。
Q. 生成したものを後から自分で拡張できますか？
v0はReact/Next.jsの標準的なコードを出力し、GitHubに残るので別環境への移植やエンジニアによる拡張が自由です。BubbleはBubble上で動くアプリのためプラットフォームに依存しますが、コードを書かずに作り込める利点があります。
Q. 日本語で使いやすいのはどちらですか？
v0です。日本語の指示に対応しており用語で詰まりにくい設計です。Bubbleは画面が英語のみで、独自のエディタ概念に慣れる必要があるため、初動の学習コストに差が出ます。
Q. 両方を併用する意味はありますか？
あります。初期検証をBubbleで素早く回し、スケールや独自要件が増えた段階でv0を使ってコードベースの本番システムへ移す、というフェーズ分けが有効です。フロントはv0、複雑な業務ロジックはBubble、という分担も成立します。
