🧵
Google Stitchはv0を超えられるか？v0ユーザーが本気で比較検証してみた

2025/05/28に公開
 3秒まとめ
Google Stitchは Google が提供する AI 駆動の Web アプリ開発ツール

v0と比較して実際の出力を比較してみた

業務での実用性について率直に評価した結果をシェア

結論: 用途によっては v0 より優れている部分もあるが...

 どんな人向けの記事？
v0を普段使っているフロントエンド開発者

AI開発ツールの比較検討をしている方

Google Stitchが実際どうなのか気になっている方

















 はじめにGoogle は日本時間 5 月 21 日未明に開幕した年次イベント「Google I/O 2025」で、自然言語で指示を入力すると自動的に Web UI を生成するツール「Stitch」のベータ公開を発表しました。
私はふだんは v0 を愛用しているので、v0 より優れているのかが気になるところです。
ということで、実際に手を動かして両方のツールを同じタスクで比較検証してみることにしました！
いまなら Google Stitch は無料なので使いまくって使用感を確かめておくのがおすすめです。

 デザイン力を調査してみる
 0. はじめにGoogle Stitch の設定で、Standard Mode から Experimental Mode に切り替えて使ってみます。

Standard Mode では Gemini 2.5 Flash で、Experimental Mode だと gemini 2.5 Pro になります。

普段、Gemini 2.5 Pro を使っていますが、Flash に比べると格段に優秀なので。
また、Google Stitch の場合は Mobile/PC 向けの UI を最初に選択する必要があります。モバイル向けだと情報量が少ないので PC 向けに設定しておきます。

 1. 定性調査のインタビュー画面プロンプトは以下です。
定性調査のためのオンラインインタビューツールのUIを作ってください。
考える人によって機能やUIがかなり異なるので普通なら要求定義をちゃんと

していかないといけないような代物を投げつけてみます。
Google Stitch
Standard Modeでも一応試してみました。
v0
考察
圧倒的にv0が良い。機能のアイデアも広げてくれる。

 2. 調査票作成画面アンケート調査の調査票を作成するUIを作ってください。
最終的には調査背景、調査目的、設問作成、回収数、ターゲットなどが出力されてほしいです。
Google Stitch






Standard Modeでもやってみましたが、人によってはこちらのほうが良いと思います。

ただのUIだけではなくてサービスレベルで考えてくれて外部設計を作ってくれています。
v0
考察
Google StitchのStandard Modeはサービスとしての外部設計を一通り作ってくれた感じです。工程で言えば、外部設計の第1段階という感じです。

それに対してv0は出力が1画面しか出力できないのでヒアリングのフォームだけを作ってくれた感じです。
これは、圧倒的にGoogle Stitchが素晴らしいです。指示したこと以上に視野を広げてくれています。逆にv0は意図をあんまり汲み取れていないです。

 3. 個人開発サービスの改善プロンプト
以下のようなトライアスロンのリザルトを分析するサービスを提供しています。
もっと良いUIを作ってください。
https://ai-triathlon-result.teraren.com/archive/2025/tateyama_duathlon/athletes/athlete-459
Google Stitch


v0
考察
どちらもありではあるが、オリジナルのUIからかなり情報が削られてしまっている。

 4. Eコマースサイトのランディングページプロンプト
モダンなEコマースサイトのランディングページを作成してください。
- ヒーローセクション
- 商品一覧
- 特徴紹介
- お客様の声
- フッター
レスポンシブ対応で、アニメーションも含めてください。
Google Stitch






v0
Google StitchはLPだけじゃなくて、他のページやコンポーネントも生成してきた。

 コーディング力を調査してみるこのUIのコードを見てみる。


 HTML/CSS出力以下のようなコードが出力される。

:::detailsクリックしてコードを表示
<html><head>
<meta charset="utf-8"/>
<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Plus+Jakarta+Sans%3Awght%40400%3B500%3B700%3B800" onload="this.rel='stylesheet'" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"/>
<title>Stitch Design</title>
<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<style type="text/tailwindcss">
  @layer base {
    :root {
    --primary-color: #0c77f2;
    --secondary-color: #e7edf4;
    --text-primary: #0d141c;
    --text-secondary: #49709c;
    --background-color: #f8fafc;}
    body {
    font-family: "Plus Jakarta Sans", "Noto Sans", sans-serif;
    color: var(--text-primary);
    }
    .icon-btn {
    @apply flex items-center justify-center size-10 rounded-lg bg-transparent text-slate-700 hover:bg-slate-200 transition-colors;
    }
  }
  .material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
  }
  </style>
</head>
<body class="bg-background-color">
<div class="relative flex size-full min-h-screen flex-col group/design-root overflow-x-hidden">
<div class="layout-container flex h-full grow flex-col">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 px-6 sm:px-10 py-4 bg-white shadow-sm">
<div class="flex items-center gap-6 lg:gap-10">
<div class="flex items-center gap-3 text-primary-color">
<div class="size-6 text-primary-color">
<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<path clip-rule="evenodd" d="M24 4H6V17.3333V30.6667H24V44H42V30.6667V17.3333H24V4Z" fill="currentColor" fill-rule="evenodd"></path>
</svg>
</div>
<h2 class="text-xl font-bold tracking-tighter">FashionForward</h2>
</div>
<nav class="hidden md:flex items-center gap-6 lg:gap-8">
<a class="text-slate-700 hover:text-primary-color text-sm font-medium transition-colors" href="#">New Arrivals</a>
<a class="text-slate-700 hover:text-primary-color text-sm font-medium transition-colors" href="#">Men</a>
<a class="text-slate-700 hover:text-primary-color text-sm font-medium transition-colors" href="#">Women</a>
<a class="text-slate-700 hover:text-primary-color text-sm font-medium transition-colors" href="#">Accessories</a>
<a class="text-slate-700 hover:text-primary-color text-sm font-medium transition-colors" href="#">Sale</a>
</nav>
</div>
<div class="flex items-center gap-3 sm:gap-4">
<label class="relative flex-col min-w-32 !h-10 max-w-sm hidden sm:flex">
<div class="flex w-full flex-1 items-stretch rounded-lg h-full bg-slate-100">
<div class="text-slate-500 flex items-center justify-center pl-3">
<span class="material-symbols-outlined text-xl">search</span>
</div>
<input class="form-input flex w-full min-w-0 flex-1 resize-none overflow-hidden rounded-lg text-slate-700 focus:outline-0 focus:ring-2 focus:ring-primary-color/50 border-none bg-transparent h-full placeholder:text-slate-500 px-3 text-sm font-normal" placeholder="Search products..." value=""/>
</div>
</label>
<div class="flex gap-1">
<button aria-label="Search Mobile" class="icon-btn" title="Search">
<span class="material-symbols-outlined sm:hidden">search</span>
</button>
<button aria-label="Wishlist" class="icon-btn" title="Wishlist">
<span class="material-symbols-outlined">favorite_border</span>
</button>
<button aria-label="Shopping Cart" class="icon-btn" title="Shopping Cart">
<span class="material-symbols-outlined">shopping_bag</span>
</button>
</div>
<button class="ml-2">
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 border-2 border-slate-200 hover:border-primary-color transition-colors" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuARxqvbE3wZ7BIaNHTKx_ii3Y9WspWUS_9jGx99gtJp1W2z1Nfttx0F4Vm3--hQ3gsveZm2P7b71eW8CcE0FXQN9V3PL-02mUhbLpVWa39txa09v4ShBij9lSQwINXrq4DsEm-iMUmPjeKbJmbgCDF8pqy_RVTbmTpbxKZCQmTJZS99G4HgD84ngE0POGB6KaghByFat6svmGJ-NtoO_JpTH_pcuVydr24nv26fdiRHs90ywd0tExZ2g5UvPhSWWjdL_xAGTuvcvS4");'></div>
</button>
</div>
</header>
<main class="flex flex-1 justify-center items-center px-4 sm:px-6 lg:px-8 py-10 sm:py-16">
<div class="w-full max-w-6xl">
<div class="@container">
<div class="relative overflow-hidden rounded-xl shadow-2xl">
<div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuC_tkVGaCvcqLyJ3y2pXrW3CWvUZwaElnVoR1hZjy5cB8DH3vGd4fHeGByomZUXIj5KKwQI6wYZtpoulARXzVXPGymX5wGUf-MKxD7VxTg7sbhg6QXDjr4RehcAXr8J8HiknnBARLA-TJLS2ZZ1jsKm7lhPjf0e7SMb5P2bGmMxwYLAAR_528_a7ytnJGEFOM-1Xqq8msmo-9R8I6EgotmaDAfEMOZVjFusFW8U3mcnapudWqO8sqsGKb8qTRTeIeRSqWhvlm_plBs");'>
<div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-black/10"></div>
</div>
<div class="relative flex min-h-[500px] sm:min-h-[600px] flex-col gap-6 items-center justify-center text-center p-6 sm:p-12 @[640px]:items-start @[640px]:text-left @[640px]:w-3/5 @[1024px]:w-1/2">
<div class="flex flex-col gap-4">
<h1 class="text-white text-4xl sm:text-5xl lg:text-6xl font-extrabold leading-tight tracking-tight">
          Step into Style
          </h1>
<p class="text-slate-200 text-base sm:text-lg lg:text-xl font-normal leading-relaxed max-w-md @[640px]:max-w-none">
          Discover the latest trends and timeless classics in our curated collection. Elevate your wardrobe with pieces that speak to your unique style.
          </p>
</div>
<a class="flex min-w-[120px] max-w-[280px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-12 px-6 sm:h-14 sm:px-8 bg-primary-color text-white text-base sm:text-lg font-bold leading-normal tracking-wide shadow-md hover:bg-blue-600 transition-all duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-primary-color/50" href="#">
<span class="truncate">Shop Now</span>
<span class="material-symbols-outlined ml-2">arrow_forward</span>
</a>
</div>
</div>
</div>
</div>
</main>
</div>
</div>

</body></html>
:::
実際に開発に使うために React に変換して使ってみます。

Visual Studio Code + Cline が適していると思うので HTML/CSS のコードを React にしてもらいつつ、リポジトリの初期設定をしてもらうようにプロンプトで指示しました。
時間は 5 分ぐらいかかり、$0.4443 かかりました。
コンポーネントを良い感じに分割して作ってくれました。

動きました。


 Figmaに出力してコードを生成Google Stitch から Figma に出力できます。Figma からコードを生成できるので試してみたいと思います。

(現時点で、Google Chrome を使わないとできないです。Brave の最新では対応していませんでした。)
Figma にコピーすると以下のような感じでコンポーネントが作られています。
Figma to HTMLプラグインを使ってReactのコードを出力してみます。
しかしながら、以下のダイアログが出たので Convert ボタンを押してもファイルがダウンロードされませんでした。

ブラウザの Developer Tool を見るとエラーが起きてました。
Figma to HTML の最終更新日が 2 年以上前であり、プラグインのコメント欄にも「使えない！」というコメントの嵐なのでなので現在は使えないようです。
課金して Locofy を使うなどしか無さそうです。Figma からソースコードへの変換は厳しそうです。
もし Figma 経由で HTML コードを生成できるならばサービスの外部設計時に、以下のワークフローでも使えそうだなと思いましたが現状は無理そうです。
Google Stitch を何回も実行
=> Figma に蓄積。
=> コンポーネントなどを整理。
=> Figma to HTML で React のコードを一気に生成。

 評価
 v0との機能比較実際に使ってみて感じた両ツールの比較を表にまとめてみました：


項目
Google Stitch
v0


ベースフレームワーク
HTML/CSS
React/Next.js

デザインクオリティ
シンプル・実用的
モダン・洗練

料金
無料（制限あり）
有料プラン推奨

マルチモーダル
Standard 非対応/Experimental対応
対応

エコシステム
Figma
Vercel/GitHub


 比較結果

項目
Google Stitch
v0


サービス全体設計
★★★★
★★

デザイン品質
★★
★★★★★

コード品質
★
★★★★

実装速度
★★★
★★★

カスタマイズ性
★
★★★★★


 考察使用感
Google Stitch
外部設計。UI デザインを作るというイメージ。ページのフローも生成してくれる。全体の外部設計。
より抽象的な指示で全体最適ができそう。
初回プロンプトを入力した後に絶対に確認が入ってから実行される。必ず Plan して Act する流れ。
最大 6 画面の生成。

v0
ページを作る感じ。React のコードがアウトプット出でてくる。
ミクロな感じ。SPA に良い。
作った UI がすぐに Deploy できるのでデモできちゃう。フロントエンドはほとんどこれで完成させられる。


現時点でのポジショニングはこんな感じになると思います。


 まとめ実際に両方のツールを使ってみた結果、どちらも素晴らしいツールだということがわかりました！
Google Stitchは、特にプロトタイプ作成や小規模プロジェクトでは有効だと感じました。

一方で、v0はデザイン品質と開発体験において一歩リードしており、エンジニア向けという感じがしました。
また、vercel には様々な SDK が提供されているので v0 で作ったフロントエンドに対して簡単にバックエンドを統合できる状態になっているという利点は大きいです。Google の既存アセットである Google Cloud を使って同じようなことをしてきたらとても強力かと思いますがそこを攻めてくるかどうかはわかりません。例えば Stitch で UI を作って、クリック 1 発で Cloud Run にデプロイといったこと。
個人的には、用途に応じて使い分けるのがベストだと考えています：

アイデア検証段階、サービス設計段階: Google Stitch

本格開発段階: v0
みなさんも実際に両方試してみて、自分のプロジェクトに最適なツールを見つけてみてくださいね！
項目	Google Stitch	v0
ベースフレームワーク	HTML/CSS	React/Next.js
デザインクオリティ	シンプル・実用的	モダン・洗練
料金	無料（制限あり）	有料プラン推奨
マルチモーダル	Standard 非対応/Experimental対応	対応
エコシステム	Figma	Vercel/GitHub
項目	Google Stitch	v0
サービス全体設計	★★★★	★★
デザイン品質	★★	★★★★★
コード品質	★	★★★★
実装速度	★★★	★★★
カスタマイズ性	★	★★★★★
3秒まとめ

どんな人向けの記事？

はじめに

デザイン力を調査してみる

0. はじめに

1. 定性調査のインタビュー画面

2. 調査票作成画面

3. 個人開発サービスの改善

4. Eコマースサイトのランディングページ

コーディング力を調査してみる

HTML/CSS出力

Figmaに出力してコードを生成

評価

v0との機能比較

比較結果

考察

まとめ

Discussion
