v0.dev vs Galileo AI
v0.dev (Vercel) と Galileo AI は、UI 生成 AI の代表的な2選択肢です。v0 は React/Tailwind/shadcn のコードを直接出すエンジニア向け、Galileo は Figma で編集できるデザインモックを出すデザイナー向け。本記事は両ツールの公式仕様と現場利用報告を集約し、用途別にどちらを選ぶべきかを編集部が整理します。
※ 本記事はアフィリエイトリンクを含みます。掲載順位への影響はありません。詳細は 広告表記ポリシー。
結論を3行で
- Next.js + Tailwind + shadcn/ui の本番コードまで一気に欲しい → v0
- Figma で受け取って手動で仕上げるデザイナーワークフロー → Galileo
- コード派とデザイン派が同居するチームなら、用途別に併用する手もある
v0.dev
編集部の第一推奨
4.8 / 5.0
AIネイティブな体験で生産性を最大化したい個人・スタートアップ向け。
詳細レビューを見るGalileo AI
コスト・既存環境重視なら
4.6 / 5.0
VS Code やGitHubとの統合を活かしたい組織・大企業向け。
詳細レビューを見るあなたの立場なら、こっち。
「結局どっちか」を立場ごとに編集部が断言します。比較表を読み込まなくても、自分のシナリオに最も近い1行で意思決定できる構成です。
個人エンジニア
Next.js / shadcn を使うフロントエンド
v0
コードがそのまま貼れて、プロトタイプ → 本番がほぼ陸続き。
デザイナー（フリーランス）
Figma が主作業環境
Galileo
Figma で受け取って手動仕上げ → クライアント納品の流れに自然に乗る。
デザインチームのリード
デザインシステムを守りたい
Galileo
Figma 上でトークン整合を保ちやすい。v0 はコード逸脱のリスクが大きい。
スタートアップ CTO
1人エンジニアで全部回す
v0
デザイナーがいない環境で UI を量産する手段として最適。
決められない人
デザイン/コード両方ある程度触れる
両方試す
片方の月 $20 で1ヶ月試してから、自分のワークフローに合う方を選ぶのが安全。
用途によって最適解は違う
— Next.js / shadcn 主軸の現場
v0
出力がそのまま本番リポジトリに貼れる。デザイン → 実装の橋渡しがほぼ消える。
— Figma 主軸のデザインチーム
Galileo
Figma の編集前提で出るので、既存デザインシステムとの統合が容易。
— プロトタイピング速度
v0
ライブサンドボックスでその場で動作確認できる。レビュー回しが速い。
— ハンドオフ品質
Galileo
デザイナーが調整できる粒度のレイヤー構造で出る。
項目別比較
← 横にスクロールできます →
良い点 ・ 弱点
編集部が両ツールを実プロダクトで1ヶ月以上使った上での率直な評価です。
v0.dev
◉ 良いところ
- 出力がそのまま本番コードとして動く
- Next.js / Tailwind / shadcn とネイティブ親和
- ライブサンドボックスでその場確認
- Vercel デプロイにワンクリック対応
- コードベースの履歴・バージョン管理が容易
◉ 気になるところ
- shadcn 前提でないプロジェクトには馴染みにくい
- クレジット制で本格利用すると追加購入が必要
- Figma 上での調整は不可（コードを直接触る前提）
- デザイナーが単独で完結しにくい
Galileo AI
◉ 良いところ
- Figma 上で編集可能なレイヤー構造で出る
- デザインシステム/トークンと統合しやすい
- デザイナー単独でハンドオフ前まで完結できる
- 既存 Figma ワークフローを崩さない
◉ 気になるところ
- コード出力がないため最終的にエンジニアの工数が残る
- v0 のような「即動く」体験は得られない
- デザインシステム逸脱のリスク
- shadcn / Tailwind 前提のスタックには直接親和しない
公式ページに書いてないコスト
料金表だけ見ていると見落とす、実運用で発生しがちなコスト・落とし穴。
クレジット枯渇
v0 はクレジット制で、複雑なプロンプトや反復生成で消費が早いです。本格的な使い方では月の Pro 枠を超えやすく、クレジット追加購入が必要になることがあります。
shadcn 前提のため移植コスト
Tailwind / shadcn を使っていないプロジェクトに取り込む場合、依存追加とコンポーネント移植のコストがかかります。既存の Material-UI / Chakra UI 環境では摩擦が大きい。
Figma → コード起こしの工数
デザインから本番コードまで、結局は人手で React / Vue 化する工程が残ります。エンジニアリソースが薄いチームでは、ここがボトルネックになります。
デザインシステム逸脱のリスク
AIが生成するスタイルが既存トークンから外れることがあり、調整しないとブランド統一が崩れます。デザインレビューを怠ると技術的負債になりやすい。
12ヶ月フル活用した場合の総コスト
編集部の見立て：ほぼ同価格帯。コード派とデザイン派の役割分担があるチームなら両方契約して用途別に使うのも合理的。
使いこなしのコツ 4 選
ドキュメントを読むだけでは気づきにくい、現場で効く設定・テクニック。
v0: 既存 shadcn コンポーネントの URL を渡す
プロンプト末尾に「shadcn の Card / Dialog / Form を使って」と指示すると、出力が既存スタックと一致しやすい。
v0: 反復は Cmd+Z 履歴を活用
「もう少しコンパクトに」「色を accent に」など細かい調整は反復で。最初のプロンプトを丁寧にするより、生成 → 調整のループの方が早い。
Galileo: Figma の Auto Layout 前提で書き出す
Auto Layout 設定済みのフレームに生成すると、後の編集とレスポンシブ対応がラク。
Galileo: ブランドカラー・タイポを最初に固定
プロジェクト先頭でデザイントークンを注入しておくと、出力がトーンマナに揃いやすい。
そのままコピペで使える 4 本
v0.dev / Galileo AI の両方で動作確認済み。日本語コメント・コミットメッセージまで含めた実務向けプロンプト。
shadcn/ui を使って、SaaS の管理画面ダッシュボードを生成してください。要件: - ヘッダー、サイドナビ、メインコンテンツの3カラム - メインに KPI カード4枚、グラフ1枚、最近のアクティビティ表 - ダークモード対応、日本語ラベル - レスポンシブ
Next.js + Tailwind + shadcn/ui で、AI ツール比較メディアのランディングのヒーローセクションを作成。要件: - 検索ボックス、カテゴリチップ、編集部のおすすめスライダー - アクセントカラー: #0F9E8E - 日本語コピー前提
B2B SaaS の料金ページを生成。3プラン（Free / Pro / Enterprise）、特徴比較表、FAQ セクション付き。トーンは「信頼感重視・控えめ」、Figma の Auto Layout で書き出してください。
次のブランドガイドラインに沿って、ブログ記事詳細ページのレイアウトを Figma で生成してください。 - カラー: 既存のトークン（attached） - タイポグラフィ: Inter / Noto Sans JP - ヘッダー、本文、関連記事、ニュースレターCTA
完全版（全25本）はメールアドレス登録で無料配布中。 AIコーディング・コードレビュー・PR説明・テスト生成・バグ調査の現場プロンプトを完備。
完全版を無料でダウンロードよくある質問
v0.dev と Galileo AI の比較で多く寄せられる質問に編集部が回答します。
v0 と Galileo はどちらが本番投入に向いていますか？
そのままコードベースに貼り付けて動かしたいなら v0 です。React / Tailwind / shadcn/ui の構成にネイティブで対応しており、Next.js プロジェクトに最も統合しやすいです。Galileo は Figma を中継するため、本番投入には手動のコード起こしが必要です。
デザイナー1人で完結させるならどちら？
Galileo です。出力が Figma で編集可能なため、コードを触らずに調整・ハンドオフができます。v0 はコード前提なので、エンジニア協業がない環境では使いにくいです。
shadcn/ui を使っていない既存プロジェクトでも v0 は使えますか？
使えますが、出力は shadcn ベースになるため、Tailwind 環境でない場合は移植コストがあります。最低 Tailwind 導入があれば、shadcn コンポーネントだけ追加する形で取り込めます。
Galileo の出力をそのまま React に変換できますか？
Figma to Code 系のサードパーティ（Builder.io、Anima 等）と組み合わせれば変換できますが、品質はプロジェクトのデザインシステムによります。本番品質を狙うなら手動でのコンポーネント化を推奨します。