🧵
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に変換して使ってみます。

VSCode + 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
