Google Stitch「Vibe Design」入門——自然言語でUI/UXデザインを生成するAIツールの実力

はじめに

「Vibe Coding」という言葉がエンジニアの間で市民権を得てから約1年。ついにデザインの世界にも同じ波がやってきました。

2026年3月19日、Googleは自社のUIデザインAIツール「Stitch」の大型アップデートを発表し、**「Vibe Design」**という新しいコンセプトを提唱しました。ワイヤーフレームやピクセル単位の指定ではなく、ビジネスの目的や「こんな感じにしたい」という感覚を伝えるだけで、AIが高精度なUIデザインを生成するというアプローチです。

フロントエンドエンジニアとして、こんな課題を感じたことはないでしょうか。

Google Stitchの「Vibe Design」は、これらの課題に対して斬新な解決策を提示しています。

この記事を読み終わると、以下ができるようになります：

• Vibe Designのコンセプトと従来のUIデザインプロセスとの違いを理解できる
• Google Stitchの主要機能を把握し、実際に操作できる
• Figma/HTML/CSSエクスポートを使ったClaude Code連携ワークフローを構築できる
• Figmaとの使い分けを判断できる

Vibe Designとは何か

従来のデザインプロセスとの比較

従来のUIデザインプロセス:
  要件定義 → ワイヤーフレーム → モックアップ → プロトタイプ → デザインシステム → 実装

Vibe Design:
  ビジネス目的 + 感覚的な指示 → AI生成 → 微調整 → エクスポート → 実装

Vibe Designが革新的なのは、入力の抽象度です。従来のデザインツールでは「ここにボタンを配置して、色は#3B82F6で、角丸は8px」と具体的に指示する必要がありました。Vibe Designでは「SaaSのダッシュボードで、データ分析に特化した、プロフェッショナルで信頼感のあるUI」という抽象的な指示から出発します。

Gemini 2.5 Proが支えるマルチモーダル理解

Stitchの背後で動いているのは、GoogleのGemini 2.5 Proです。テキスト・画像・音声のマルチモーダル入力を受け取り、UIデザインとして出力します。

入力可能なモダリティ:
┌───────────────────────────────────────┐
│ テキスト: 「ECサイトのカート画面」       │
│ 画像:     競合サイトのスクリーンショット  │
│ 音声:     「もっとミニマルにして」        │
│ スケッチ:  手描きのワイヤーフレーム写真   │
│ URL:      既存サイトのURLを参考に         │
└───────────────────────────────────────┘
            ↓ Gemini 2.5 Pro
┌───────────────────────────────────────┐
│ 出力: 高精度なUIデザイン（複数画面）     │
│   ├─ Figmaファイル                      │
│   ├─ HTML/CSS/JSコード                  │
│   ├─ React/Vue/Svelteコンポーネント     │
│   └─ デザイントークン (JSON)             │
└───────────────────────────────────────┘

Google Stitchの主要機能

1. 無限キャンバス

従来のデザインツールと同様のキャンバスUIですが、AIがリアルタイムでデザインを生成します。複数のデザイン候補を並べて比較したり、バリエーションを無限に展開できます。

2. 音声操作

「このボタンをもう少し目立たせて」「背景色をもっと温かみのある感じに」といった音声指示でデザインを修正できます。キーボードやマウスに触れずにイテレーションを回せるため、ブレインストーミング段階で特に効力を発揮します。

3. 一度に5画面生成

単一画面ではなく、アプリケーション全体のフローを一括で生成できます。

プロンプト例:
「フリーランス向けの請求書管理アプリ。
 ダッシュボード、請求書一覧、請求書作成、
 クライアント管理、設定画面の5画面を生成してください。
 配色はNavy基調でプロフェッショナルな印象に。」

→ 5画面が一貫したデザインシステムで同時生成

一貫性の維持はVibe Designの大きな強みです。5画面すべてが同じカラーパレット、タイポグラフィ、コンポーネントスタイルで生成されるため、後からデザインシステムを整える手間が省けます。

4. エクスポート機能

5. SDK・MCPサーバー連携

StitchはMCPサーバーを公式に提供しており、Claude CodeやCursorから直接呼び出せます。

// .claude/settings.json
{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "@google/stitch-mcp-server"],
      "env": {
        "GOOGLE_STITCH_API_KEY": "your-api-key"
      }
    }
  }
}

MCP連携が設定されていると、Claude Code上で以下のようなワークフローが実現します。

# Claude Codeでの会話例

You: ランディングページを作りたい。SaaS向けで、ヒーロー、
     機能紹介、料金プラン、CTAの4セクション構成で。

Claude: Stitchを使ってデザインを生成します。

[MCP: stitch.generate_design]
  prompt: "SaaS landing page with hero, features, pricing, CTA sections"
  style: "modern, clean, professional"
  export: "react-tsx"

Claude: デザインが生成されました。React TSXコンポーネントとして
        エクスポートし、プロジェクトに統合します。

[Tool: Write] src/components/landing/HeroSection.tsx
[Tool: Write] src/components/landing/FeaturesSection.tsx
[Tool: Write] src/components/landing/PricingSection.tsx
[Tool: Write] src/components/landing/CTASection.tsx

実践: Vibe Designでランディングページを作る

Step 1: Google Stitchへのアクセス

Stitchは stitch.withgoogle.com からアクセスできます。Googleアカウントでログインするだけで利用開始できます。

無料枠: 月350回の生成（1生成 = 1画面）

Step 2: デザインの生成

Stitchのエディタ画面を開き、プロンプトを入力します。

プロンプト例（日本語OK）:

「個人開発者向けのポートフォリオサイト。
 ダークテーマで、ミニマルだけど印象的なデザイン。
 ヒーローセクションにアニメーションの背景を配置。
 プロジェクト紹介はカードレイアウトで。
 技術スタックのアイコンを表示するセクションも追加。」

数秒で3つのバリエーションが生成されます。気に入ったものを選び、追加の指示で微調整します。

Step 3: エクスポートとプロジェクトへの統合

React TSXでエクスポートした場合、以下のようなファイル構成で出力されます。

stitch-export/
├── components/
│   ├── HeroSection.tsx
│   ├── ProjectCard.tsx
│   ├── TechStack.tsx
│   └── ContactForm.tsx
├── styles/
│   └── design-tokens.ts
├── assets/
│   └── hero-bg.svg
└── index.tsx

エクスポートされたコードは、TailwindCSSのユーティリティクラスを使用しています。

// HeroSection.tsx (Stitch生成コード例)
import type { FC } from "react";

interface HeroSectionProps {
  title: string;
  subtitle: string;
  ctaText: string;
  onCtaClick: () => void;
}

export const HeroSection: FC<HeroSectionProps> = ({
  title,
  subtitle,
  ctaText,
  onCtaClick,
}) => {
  return (
    <section className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gray-950">
      {/* アニメーション背景 */}
      <div className="absolute inset-0 opacity-20">
        <div className="animate-blob absolute left-1/4 top-1/4 h-72 w-72 rounded-full bg-purple-500 mix-blend-multiply blur-xl" />
        <div className="animate-blob animation-delay-2000 absolute right-1/4 top-1/3 h-72 w-72 rounded-full bg-blue-500 mix-blend-multiply blur-xl" />
      </div>

      <div className="relative z-10 text-center">
        <h1 className="text-5xl font-bold tracking-tight text-white md:text-7xl">
          {title}
        </h1>
        <p className="mx-auto mt-6 max-w-2xl text-lg text-gray-300">
          {subtitle}
        </p>
        <button
          onClick={onCtaClick}
          className="mt-10 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 px-8 py-4 text-lg font-semibold text-white transition hover:shadow-lg hover:shadow-purple-500/25"
        >
          {ctaText}
        </button>
      </div>
    </section>
  );
};

生成されたコードは、型定義済み・プロップス分離・セマンティックHTMLという点で、そのままプロジェクトに統合できる品質です。

Step 4: Claude Codeでの仕上げ

Stitchで生成したコードをプロジェクトに配置した後、Claude Codeでビジネスロジックや動的データの接続を行います。

# Claude Codeでの作業例
You: Stitchで生成したHeroSection.tsxにフェードインアニメーションを追加して。
     framer-motionを使って、スクロールに連動するパララックス効果もつけて。

このように、**デザイン（Stitch）→ コード生成（Stitch Export）→ ロジック実装（Claude Code）**という分業が自然に成立します。

Figmaとの比較と使い分け

使い分けの指針：

• Stitch向き: プロトタイプの高速作成、デザイナー不在のチーム、MVP開発、ランディングページ
• Figma向き: ブランドガイドラインに厳密に準拠する必要がある案件、大規模デザインシステムの管理、デザイナーとのコラボレーション

実務では両方を併用するのが最も効率的です。Stitchで初期デザインを高速に生成し、Figmaにエクスポートしてデザイナーがブラッシュアップするというワークフローが、筆者のチームでは定着しつつあります。

デザイナーとエンジニアの協業の変化

Vibe Designの登場で、デザイナーとエンジニアの関係性は大きく変わります。

従来のワークフロー:
  デザイナー → デザイン作成 → エンジニアに渡す → コーディング → 確認 → 修正
  (ウォーターフォール的、待ち時間が多い)

Vibe Design時代のワークフロー:
  エンジニア → Stitchで初期デザイン生成 → デザイナーがレビュー・ブラッシュアップ
  → エンジニアがClaude Codeで実装 → 並行してイテレーション
  (並行作業、待ち時間が激減)

デザイナーの役割は「ゼロからデザインを作る人」から**「AIが生成したデザインの品質を担保し、ブランドの一貫性を守る人」**へとシフトしていきます。これはデザイナーの価値が下がるということではなく、より戦略的・クリエイティブな判断に集中できるようになるということです。

まとめ

Google Stitchの「Vibe Design」は、UIデザインの民主化において大きな一歩です。

今すぐ試すべきこと：

• stitch.withgoogle.com でアカウントを作成し、無料枠でデザインを生成してみる
• MCP連携を設定し、Claude Codeからのデザイン生成ワークフローを試す
• 既存プロジェクトのランディングページやダッシュボードをStitchで再デザインしてみる
• Figmaへのエクスポートを試し、既存のデザインワークフローとの統合を検討する

月350回の無料生成枠があるため、リスクゼロで試せます。「デザインができないからプロトタイプが進まない」という状況は、Vibe Designによって過去のものになりつつあります。

Vibe Codingの次はVibe Design。自然言語がUIデザインの共通言語になる時代が、始まりました。