このレビューでは、Vercelのv0を実際に使ってテストした体験を詳しく解説します。最初のミニマルなプロンプトから最終的なデプロイまで、AIがコードを書く際の得意な点と、厳しいプロンプト制限や暗号のようなコンソールログといった技術的にフラストレーションの溜まる部分まで、すべてお見せします。
v0とは？
v0はAI搭載のアプリビルダーで、Vercelが開発しました。画面上でボックスをドラッグしたり何百行ものコードを書く代わりに、AIアシスタントにチャットで指示するだけでアプリケーションを構築できます。
ChatGPTを使ったことがあるなら、インターフェースは馴染み深いはずですが、テキスト応答の代わりに、v0は実際に機能するウェブインターフェースを生成し、画面右側で即座にプレビューを表示します。
このツールは、新しいソフトウェアプロジェクトを始める際の長く退屈なセットアップ工程を排除するために設計されています。たとえば、住宅所有者が修理を依頼するポータルを構築しようとすると、通常はページ設計、データベースのセットアップ、それらの接続方法を手動で行う必要があります。
v0は、あなたの説明を解釈し、リアルタイムでコードを自動生成してこれらの障害をクリアします。
v0の一般的な活用例:
- ビジネスデータを追跡する機能的なダッシュボードの構築
- ログイン画面やサービスフォームを備えた顧客向けポータルの作成
- カスタムインタラクティブ機能を必要とするランディングページの公開
- リアルユーザーで素早くテストするための新しいアプリアイデアのプロトタイプ化
WixやSquarespaceのようなツールは堅牢なテンプレートに縛られ、Bubbleのようなプラットフォームは学習コストが高いですが、v0のユニークな利点は、ビジュアルモックアップだけでなく、ReactやNext.jsの実際のコードを生成する点にあります。プロの開発者が使う技術と同じものです。
誰向け？
v0は、アプリケーションの動作イメージは明確に持っているものの、手動でのデザインやセットアップに何週間も費やしたくない人向けです。
基本的なウェブサイトビルダーとプロ向け開発環境の中間に位置します。
特に次のような方に最適です:
- MVPを作るスタートアップ創業者：エンジニアチームを雇わずに投資家向けや初期ユーザー向けの機能的プロダクトをローンチしたい。
- 中小企業のオーナー／運営者：散らかったスプレッドシートやメール管理にうんざりして、内部ツールを自作したい。
- 開発者・プロダクトマネージャー：コンセプトから迅速に動くプロトタイプを作りたい。
- クライアント向けの迅速なプロトタイプが必要なエージェンシー：静的なデザインファイルではなく「実際の」アプリを提示し、ミーティング中にチャットプロンプトを更新するだけでリアルタイムにフィードバックを反映したい。
v0の長所と短所
- サインアップにクレジットカード不要
- 実際の React/Next.js コードを生成
- プロジェクトを明確なタスクリストに分解
- 関連アイコンやブランディングを自動選定
- ワンクリックでグローバルカラー更新
- 均一なボーダー半径を一つのスライダーで調整
- プロフェッショナルな「Glow」シャドウスタイルオプション
- 追加作業なしで完全なモバイルレスポンシブ対応
- データベース環境変数を自動設定
- 数秒でライブURLにデプロイ
- AIがコードを書く過程で生のコードを表示
- タイムスタンプ付きのバージョン履歴で簡単に復元
- ワンクリックで Supabase データベース連携
- チャットプロンプトに厳しい文字数制限
- サインアップ直後に有料プランをプッシュ
- レイアウト調整のドラッグ＆ドロップなし
テンプレートで迷うのが嫌で、アプリを「言葉」で生み出したいなら、v0を試してみてください。ただし、プロンプトが長くなりすぎないよう注意が必要です。
v0の機能
- テキストプロンプトからフルアプリを生成
- リアルタイムで Next.js/React コードを表示
- ワンクリックで Supabase データベース接続
- 数秒でライブアプリをデプロイ
- カラーとコーナーのグローバルスタイリング
- プロジェクト追跡用の自動タスクリスト
- あらゆる画面サイズに対応するレスポンシブレイアウト
- プロジェクトバージョン履歴からの復元機能
Vercelのv0を使ったハンズオン体験
v0がチャットインターフェースだけでアプリ全体を構築できると聞いて、本当に使えるのか、それともただの派手なデモにすぎないのかを確かめたくなりました。
1. はじめに：サインアップと第一印象
v0のホームページに初めてアクセスしたとき、通常見るような分析ダッシュボードや「新規プロジェクト」ボタンが溢れるサイドバーはありませんでした。画面中央には「Ask v0 to build…」というプレースホルダーの大きな白い入力欄と、その上に「何を作りたいですか？」という見出しがあるだけで、非常にミニマルでした。
ナビゲーションバーの右上には Templates、Resources、Enterprise、Pricing、iOS、Students、FAQなどのリンクが並んでいました。煩雑さがなくスッキリしていて好印象ですが、その分、マウスを動かす前に事前に計画を練っておく必要がありました。
右上の「Sign Up」ボタンをクリックすると、Vercelエコシステムと深く統合されているためか、「Continue with Vercel」か「Sign Up」を促すモーダルが表示されました。
セッションがなかったので「Sign Up」をクリックすると、GoogleとGitHubの大きなボタン、そしてメールアドレス用のテキストフィールドがある白いページにリダイレクトされました。作業用メールアドレスを入力し「Continue with Email」をクリック。
ここで最初のフリクションが発生。ブラウザを離れ、約30秒待って届いた確認メールを開き、6桁のコードをコピーする必要がありました。
元のv0タブに戻り、6つのボックスにコードを貼り付け、「Verifying」スピナーが終了するまで待ちました。完了まで約5秒。クレジットカード不要なのは好印象でした。多くの「無料ツール」は先に請求情報を求めてくるので、低いハードルで始められます。
その後、4ステップのオンボーディングスライドショーが表示され、新しい強化されたgitパネルや、チャットごとに新しいブランチで作業できること、すべての変更が自動コミットされることなどが説明されました。
最終的に「Accept AI Product Terms」を求めるモーダルが表示され、黒い「Accept and Continue」ボタンをクリックすると、ついにビルダー画面が立ち上がりました。
総評：第一印象
サインアッププロセスは標準的かつ高速で、クレジットカード不要なのは高評価。インターフェースは非常にキビキビ動き、ハイエンドに見えますが、最初の「$30/月プッシュ」で隠れコストへの警戒心が湧きました。
2. 初めてのアプリ構築：ステップバイステップ
簡単なボタンではなく、複雑なプロジェクトを試すことに。住宅所有者向けのサービス依頼ポータルを頼むことにしました。配管や電気、清掃サービスを依頼し、ダッシュボードで追跡できるサイトです。詳細なプロンプトには：
- プロジェクト説明
- ユーザーテーブルスキーマ（ID, 名前, メール, 電話, 住所, 役割）
- 認証などのコア機能
- 特定のサービス依頼フォーム
この長文プロンプトを主チャット欄にコピーして、黒い送信ボタンをクリック。
しかしここで大きく躓きました。
入力欄下部に赤いエラーバナーが表示され、「メッセージの送信に失敗しました。新しいチャットを開始するか、再試行、またはメッセージを編集してください。」と出たのです。
「Retry」アイコンをクリックしましたが、即座に同じエラー。文字数制限を超えていたようで、警告カウンターもなく単に弾かれました。
手作業でプロンプトを約40%カットし、データベーススキーマや技術的定義を削除。機能リストとフォーム項目だけ残して再送信すると、ようやく通りました。
画面がスプリットビューに切り替わり、左がチャット履歴、右が大きなプレビューエリアに。AIが「Thinking」を始め、ステータス更新が次々と表示されました：
- 「Checking integrations」
- 「Generating design」
- 「Loading Supabase skill」
続いて左サイドバーに「todoリスト」が表示され、プロジェクト名「Homeowner service portal」の下に4つのタスクが並び、最初の「Task 1 of 4 in progress」が自動で進行し始めました。
最初は「Creating migration script」。右側のプレビューに001_create_service_requests.sqlというファイルがリアルタイムで生成され、service_type、description、status、urgencyといったカラムを持つテーブルを作成するSQLコードが表示されました。
次に「Creating Supabase client files」と進み、lib/supabaseディレクトリ内にclient.tsとserver.tsが生成されました。
「認証ページの作成」ではsign-up/page.tsxとlogin/page.tsxがファイルツリーに追加されました。
最終的にタスク3「Creating landing page」では、プロのUIがプレビューに表示され、サイト名「HomeServe」が自動で付与され、ヒーローセクションに「Your Home Services, Simplified」のテキストと「Services We Offer」アイコン（配管、電気、清掃）、「Get Started」ボタンと「Sign in to Dashboard」ボタンが配置されました。
ビルダーインターフェースは非常に高速で、「building」や「compiling」の待ち時間がなく、UIがその場で進化していく感覚でした。
総評：構築工程
最初のプロンプトの文字数制限は、本格的な開発には大きなボトルネックです。詳細に指示したいのに、曖昧にせざるを得ません。
しかし、プロンプトが通れば、SoftrやWixのようなツールとは異なり、実際に構造化されたコードを高速で生成する点は比類がありません。データベースマイグレーションやクライアントファイルの作成をAIがチェックリスト形式でこなす様子は、本当に「エンジニアリング」されている感覚を与えてくれました。
3. デザインとレイアウトのカスタマイズ
ランディングページとダッシュボードが生成された後、デフォルトの見た目から変更を試みました。
左サイドバーの小さなペイントブラシアイコン「Design」をクリックすると「Design System」パネルが開きました。
まず「Colors」セクション。Connect、Primary、Secondaryなどラベル付きの5つのカラースウォッチが並んでおり、Primaryをクリックすると標準的なカラーピッカーが開きました。鮮やかなプロフェッショナルな青を選択し「Save」すると、全ページのボタン、アイコン、アクセント色が瞬時にその色に更新されました。真のグローバルデザインシステムです。
次に「Radius」設定。デフォルトではボタンが直角だったので、スライダーを0から0.625に動かすと、プレビューの「Get Started」ボタンやサービスカードの角が即座に丸みを帯びました。「Shadows」セクションにはSmall、Medium、Large、Glowの4択があり、Glowを選ぶと「Services We Offer」カードに浮かんでいるような高級感のある微妙な影が付きました。
デスクトップ、タブレット、フォンのアイコンでレスポンシブをテストすると、スマホビューでは3列のサービスセクションが1列にスタックし、ヒーロー画像がテキストの下に移動、ナビリンクがハンバーガーメニューに置き換わるなど完璧に再フローしました。
しかし、レイアウトを微調整するためのドラッグ＆ドロップ機能がないのは大きな壁でした。ヒーローセクション中央の「Create Free Account」ボタンをナビバーの右上に移動したかったのですが、ドラッグしても何も動きません。v0はビジュアルエディタではないのです。
その変更を行うには再度チャットに詳細指示を入力し、AIにヘッダーコンポーネントを書き換えさせる必要がありました。ただ1つのボタン移動に約45秒の「Thinking」が入るので、小さなレイアウト調整には非常に時間のかかる方法です。
総評：カスタマイズ
フォント、半径、ブランドカラーなどグローバルな変更には非常に強力で、Bubbleのような手動スタイリングより高速です。しかし、ドラッグ＆ドロップがないため、ピクセル単位のデザイン調整を好む人にはチャットベースのレイアウト編集は煩わしく感じるでしょう。
4. エラーへの対応
v0がエラーをどう扱うか試してみましたが、すぐに遭遇。AIがタスク「Run migration」に到達すると、黄色い警告アイコン付きの大きなモーダルが表示され:
「このタスクは非常に破壊的な操作を含む可能性があり、承認が必要です。」
横には実行予定のSQLコードが表示され、開発者にとっては標準的な安全機能ですが、初心者には「非常に破壊的」とだけ書かれても何が起こるか分かりません。青い「Accept」をクリックすると問題なく進みましたが、文言があまりにも恐怖を煽る印象です。
後日、ロジックエラーにも遭遇。サインアップページをプレビューでテストした際、「Create Account」をクリックしても何も起こらず、UIにエラーメッセージも成功通知も表示されませんでした。
画面右上の「Console」タブを開くと、技術ログのパネルがスライドアップし、「GotAuthUser: (Anonymous) – (No token)」という黄色い警告が出ていました。
v0は開発者向けに作られているため、エラー処理は「ユーザーフレンドリー」ではなく生のログ出力です。「No token」が認証変数の問題を指すと分からなければ、完全に詰みます。
そのエラーをコピーしてチャットに貼り、「どう修正すれば？」と尋ねると、AIが環境変数設定の漏れを検知して修正コードを生成してくれましたが、ツールの各部分間で通訳している気分でした。
もう一つ気になったのは、ヘッダーに「Undo」ボタンがないこと。誤って「背景を暗くして」と指示したらページ全体が黒くなって文字が消えたとき、Ctrl+Zで戻せず、右上の小さな時計アイコン「Versions」から該当タイムスタンプを探して「Restore」する必要がありました。
これは機能しますが、undo/redoに比べてかなり不便です。
総評：エラー対応
v0のエラー対応は透明性が高く開発者には有用ですが、初心者には過度に専門的です。生のSQLやコンソールログは分かる人には便利ですが、手取り足取りサポートする感じは皆無。簡単なUndoボタンがない点と「破壊的」な文言は、高度な開発環境のようなプレッシャーを与えます。
5. アプリ公開と統合の追加
最後にHomeowner Portalをライブ化。左サイドバーの「Connect」をクリックすると統合メニューが開き、「Vercel AI Gateway」「Upstash」「Supabase」が並んでいました。データベースが必要だったのでSupabaseの「Install」をクリック。
すると新しいタブでVercelの「Checkout」ページが開き、正式にSupabaseアカウントを作成するため「Accept and Create」をクリック。プライマリリージョン選択画面が表示され、「N. Virginia, USA (East)」や「London, UK (Europe)」などから推奨の「Washington, D.C., USA (East)」を選択。
次に「Create Database」画面で「supabase-purple-tree」という提案名とプラン選択があり、Proプラン$25/月も表示されましたが、ページ下部の「Supabase Free Plan」を選び「Create」をクリック。30秒ほど進行バーが回り終えるとタブが自動で閉じ、v0ビルダーに戻りました。
ここで感動したのは、サイドバーに「Vars（Variables）」タブが追加され、NEXT_PUBLIC_SUPABASE_URLやSUPABASE_ANON_KEY、SUPABASE_SERVICE_ROLE_KEYなどの環境変数が自動で埋め込まれていたことです。通常はSupabaseダッシュボードから手動でコピー＆ペーストする手間が省かれます。
チャットに「データベースが接続されたのでフォームを動かしてください」と指示すると、middleware.tsを生成してルート保護を設定し、client.tsも更新。
最後に右上の「Publish」ボタンをクリックすると「Building」「Deploying」のビルドプロセスがモーダルに表示され、約45秒後にライブURLが発行されました。
新しいタブで開くとサイトが実際に動作。ダミーのメールとパスワードでサインアップを試すと、「Check your email」の成功画面と緑のメールアイコンがスムーズに表示され、/auth/sign-up-successに正しくリダイレクトされました。空のプロンプトからデータベース連携アプリまで、約40分で完成です。
カスタムドメインの管理も自動化されており、「Domains」セクションに
- Default Domain: 常に利用できるv0生成の.vercel.appドメイン（例: v0-homeowner-service-portal.vercel.app）
- Connected Domains: カスタムドメインを購入または接続する「Buy」「Add」ボタン
が表示され、テストやMVP共有にはデフォルトドメインで十分でした。カスタムドメインが必要なら後から購入・接続可能です。
総評：公開と統合
Supabase統合と環境変数の自動設定は大幅な時短で、フルスタック開発の最も煩わしい部分を取り除いてくれます。Vercelへのデプロイも瞬時で信頼性高く、多少コードに抵抗がない人向けではあるものの、テキストプロンプトからデータベース接続済みのアプリを1時間以内に公開できるのは他にない利点です。
価格とプラン
従来のビルダーがアプリやページ数で課金するのに対し、v0はクレジット制を採用。プロンプト送信やAIのコード生成時に、処理した「トークン」に基づいてクレジットを消費します。
| プラン | 価格 | 月間付与クレジット | 主な機能 |
|---|---|---|---|
| Free | $0/mo | $5 | 1日7メッセージ、Vercelデプロイ、GitHub同期 |
| Premium | $20/mo | $20 | 1日ログインで+$2クレジット、Figmaインポート、5倍のファイルサイズ上限 |
| Team | $30/user/mo | $30 | 1日ログインで+$2クレジット、チームコラボ、請求共有 |
| Business | $100/user/mo | $30 | トレーニング無効、クレジット共有、チームコラボ |
支払いとモデルコスト
- モデルレベル：最速かつ安価なv0 Mini、バランス型のv0 Pro、最も賢いv0 Maxから選択可能。複雑なロジックではv0 Maxがv0 Miniより5倍速くトークンを消費。
- 支払い：クレジットカード対応。PayPal非対応。
- 返金：AI生成の時点で計算資源を消費しているため返金不可。
私のおすすめ
実験目的ならFreeプランで十分。具体的なプロジェクトがあるなら、$2/日分のログインボーナス付きで実質$60の価値があるPremiumが最もコスパ良好です。
なお、v0利用料はVercelホスティング料とは別請求になる点に注意してください。
v0の代替ツール
エンドツーエンドのアプリエンジニアリングやデータベース管理に特化した代替として、Lovableが最有力です。
両者ともチャットインターフェースでコードを書く点は共通していますが、v0はNext.jsに特化したVercelネイティブ、Lovableはフロントから複雑なバックエンドロジックまで扱うフルスタックエンジニア役を担います。
比較表：v0 vs. Lovable
| 機能 | v0 | Lovable |
|---|---|---|
| 使いやすさ | 非常に高い；ミニマルなチャット | 高い；協調的チャットフロー |
| 最適用途 | 高性能React/Next.js UI | フルスタックCRUDアプリ |
| モバイル対応 | レスポンシブWebアプリ | レスポンシブWebアプリ |
| バックエンド・データ | マーケットプレイス統合（Supabase） | ネイティブなSupabase統合 |
| デザイン自由度 | 強力なグローバルDesign Systemパネル | 主にチャットベースのデザイン調整 |
| パフォーマンス | Vercel Edgeホスティングに最適化 | 標準的なReact/Viteパフォーマンス |
| 価格形態 | クレジット制（Premium $20/月） | サブスクリプション制（Pro $25/月） |
最終結論：v0は本当に使う価値がある？
「HomeServe」ポータルを半日かけて構築した結果、v0はごく限られた層向けの非常に特化したツールだと実感しました。
高度なドライバーを要するハイスピードエンジンのような存在です。
AIがtodoリストをチェックしながらリアルなSQLとReactコードを書き上げる様子は本当に感動的で、プロトタイプやMVPを投資家向けに見せる際のスピード感は他に類を見ません。グローバルデザインシステムも大きなアドバンテージです。
しかしフリクションも確かに存在します。プロンプト前に「クレジット切れ」モーダルで最初の一撃を食らい、$20〜30/月の投資意欲がないと先に進めません。
結論：技術的な創業者やウェブの仕組みを理解しているデザイナーなら、v0は強力なツールです。退屈なセットアップを自動化し、会話だけでリアルなソフトウェアを驚異的な速度で構築できます。
ただ、技術ログを一切見たくないドラッグ＆ドロップユーザーには向かないので、そういう場合はSoftrやWixを選ぶべきです。v0は会話でエンジニアリングするビルダー向けのツールです。
