2626 文字
13 分

Google StitchとVercel v0の比較検証：同じプロンプトで生成結果を比べた

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出力#

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

クリックしてコードを表示
<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,[email protected],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 Stitchv0
ベースフレームワークHTML/CSSReact/Next.js
デザインクオリティシンプル・実用的モダン・洗練
料金無料（制限あり）有料プラン推奨
マルチモーダルStandard 非対応/Experimental対応対応
エコシステムFigmaVercel/GitHub

比較結果#

項目Google Stitchv0
サービス全体設計★★★★★★
デザイン品質★★★★★★★
コード品質★★★★★
実装速度★★★★★★
カスタマイズ性★★★★★★

考察#

  • 使用感
    • 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とVercel v0の比較検証：同じプロンプトで生成結果を比べた
https://blog.teraren.com/posts/google-stitch/
作者
Yuki Matsukura
公開日
2025-05-27
ライセンス
CC BY-NC-SA 4.0
WordPressをSQLite対応してGitで管理し、AWS Lightsail Containerへデプロイする構成
日本郵便のデジタルアドレス：7桁コードで届く仕組みの可能性と限界

関連記事

Palantir AIPの正体：なぜ「Chat」ではなく「OS」なのか？そのアーキテクチャを解剖する
2025-12-03Programming
「Claude Codeで効率的に開発するための知見管理」をコマンド1発で自分のプロジェクトに反映する方法
2025-06-12Programming
19年運用したWordPress 661記事をAstro + Cloudflare Pagesへ移行した手順と技術的ポイント
19年運用したWordPress 661記事をAstro + Cloudflare Pagesへ移行した手順と技術的ポイント
2026-03-10Programming
この記事が役に立ったら
GitHub Sponsorsで応援できます

コメント