Google Stitch

✨ 概要

Google Stitch は、Google Labs が提供する無料の AI UI デザインツールだ。URL は stitch.withgoogle.com。もともと Galileo AI というサービスで、Google が 2025 年に買収して改名、2025 年 5 月の Google I/O で正式発表された。使い方はひとこと：自然言語でインターフェースやアプリを説明すると、高精度の UI プロトタイプとフロントエンドのコードが返ってくる。画像やスケッチ、音声を渡すこともでき、デザイン経験は一切不要だ。

対象はプロのデザイナーではない。「頭の中に絵はあるが手が動かない」人たち——プロダクトマネージャー、創業者、フルスタックエンジニア向けだ。Stitch は「縫う」という意味で、Google はこの発想を vibe design と呼ぶ。線引き（ワイヤーフレーム）から始めるのではなく、事業のゴールや感触、視覚的な参照から始める。

「どこにボタンを置くか」ではなく「どんな感触にしたいか」から始まる。

🧩 主な機能と特徴

Stitch は 2 つの時代に分けられる。2025 年の登場時は「1 画面ジェネレーター」、2026 年 3 月の大型アップデートで「AI ネイティブな設計キャンバス」になった。まず基本機能：

• テキストからの UI 生成：一文の説明で画面ができる。
• 画像・音声・スケッチ入力：スクリーンショットや手書きのラフを視覚的な参照として渡せる。
• 自然言語での反復：「ダークモードにして」「モーダルを追加して」と話しかければ直る。
• Figma 書き出し：Auto Layout、命名済みレイヤー、編集可能なコンポーネント付き。
• HTML / CSS 書き出し：Tailwind CSS と Google Fonts で、そのままフロントエンドに渡せる。
• 公開共有：2025 年 10 月 16 日に追加。生成結果をワンクリックでリンク共有できる。

2026 年 3 月の更新で上限が一気に上がった：

• マルチ画面生成：1 回で最大 5 画面まで関連する画面を生成。
• 無限キャンバス：全画面を 1 枚のキャンバスに並べられる。
• Voice Canvas：音声でリアルタイムにデザインを編集・指摘。
• インタラクティブなプロトタイプ：画面をつなぎ、遷移を定義し、Play でフローをプレビュー。
• デザインシステムのインポート：URL または DESIGN.md ファイルから取り込む。
• Agent Manager：複数の方向性を並行して探索。
• 書き出しの拡張：Figma / HTML / Tailwind / React / ZIP / MCP / AI Studio / Jules に対応。

🤖 AI機能と基盤技術

裏側は Google 自社の Gemini 系。初期は Gemini 2.5 Pro / Flash、その後 Gemini 3 Flash、3.1 に移行し、Nano Banana がデザインの描き直し（リペイント）を担当する。モデル選びはユーザーには見えないが、生成品質と速度はじわじわ上がってきた。

ユーザーが選ぶのはモードで、モードごとにモデル戦略が異なる：

• Standard：高速で、Figma への書き出しに対応。ほとんどのタスクはこれで足りる。
• Experimental：Gemini 2.5 Pro を使い、忠実度が高い。画像入力を受け付け、HTML / CSS を書き出すが Figma には出さない。

根底にあるのは vibe design。Stitch は「アイデアの増幅器」を目指していて、ユーザーは方向性と感触を、モデルはピクセルを担当する。だから細かいピクセル編集ツールというより、速く出す道具という性格が強い。

🛠️ 使い方

インストールは不要。stitch.withgoogle.com を開いて Google アカウントでログインするだけ。典型的な流れ：

• モードを選ぶ。迷ったら Standard から。
• 画面を説明する。ピクセル指定より事業ゴールで語る方が効く——「ヨガスタジオの予約アプリのホーム、落ち着いた雰囲気で余白多め」のように。
• 参照があれば渡す。スクリーンショットでもラフでも、音声で話しかけてもいい。
• 結果を見て、自然言語で直す：「メインカラーを濃い緑に」「ボトムナビに 4 つ目のタブを追加」。
• 書き出す。精修するなら Figma、そのまま渡すなら HTML / CSS。

日本の開発者なら、DevelopersIO や Classmethod の検証記事が参考になる。実際に触った人の所感を見てから入るのが早い。

💡 活用のコツ

• ピクセルではなくゴールを語る：vibe design は意図に反応する。「注文が楽に感じられるレジ画面」の方が「左余白 40px」より効く。
• 反復は 1 回 1 つ：一度に 5 つ頼むより、ひとつずつ直す方が出力が安定する。
• 参照画像でスタイルを寄せる：好きなアプリのスクショを渡すと、言葉だけより格段に狙ったスタイルに近づく。
• DESIGN.md でデザインシステムを固定：チームのカラーやタイポのトークンがあれば一度インポートしておく。
• Stitch は入口、Figma は仕上げ：Auto Layout と命名レイヤー付きで書き出されるので、Figma での精修が楽。
• 並行探索：Agent Manager で複数方向を同時に走らせ、良さそうなものだけ残す。
• 作り込む前にプロトタイプで確認：マルチ画面生成とインタラクティブプレビューで、実装前にクリックの流れを検証できる。

🌍 世界での利用状況

Google は Stitch の登録数や月間アクティブ数を公表していない。具体的な数字は鵜呑みにしない方がいい。確認できるのは勢いで、2026 年 3 月の大型アップデート当日、Figma の株価は約 8〜9% 下落した。無料ツールのメジャーリリースが、数十億ドル規模のデザイン企業の株価を動かした——市場はこれを現実の脅威と読んだ。

日本の現場では、デザイナーが初稿を出す前の「たたき台」、PM が企画を通す前の「絵」、エンジニアが要件を固める前の「共通認識」として使われることが多い。日本語プロンプトへの対応はまだ発展途上で、精度を求めるなら英語で指示するのが無難だというのが現場の感触だ。

💰 料金

Stitch は無料。有料プランも試用カウントダウンもない。無料枠は月およそ 350 回の標準生成と 200 回の実験生成。個人のプロトタイピングや初期のアイデア出しには十分な量で、高頻度で回すと上限に当たるが、今のところ公式の有料拡張はない。Google の料金設定を待つか、ペース配分で使うしかない。

ただし無料 = コストゼロではない。Stitch が返すものには、アクセシビリティ対応、境界ケースの処理、バックエンド連携、ハードコード値の置き換えがまだ必要だ。ツール代より人件費を予算に組み込む方が現実的だ。

⚖️ 長所・短所・限界

長所

• 敷居がゼロ：デザインスキルがなくても高精度の UI が出る。
• マルチモーダル入力：テキスト・画像・音声・スケッチに対応。
• 書き出しが実用的：Figma はレイヤー構造付き、HTML/CSS は Tailwind。
• 反復が速い：「ダークモードにして」がそのまま編集になる。

短所

• 作るのは UI であって、動くアプリではない。初期版は静的状態で実インタラクションはなく、今のプロトタイプでも本番製品にはまだ距離がある。
• Figma の代替ではない：成熟したプラグインエコシステムも共同編集もオフラインもない。
• 地味な作業は残る：アクセシビリティ、境界ケース、バックエンド連携、ハードコード値の置き換え。
• 高度に独創的なデザインや大規模プロジェクト（10 画面超）は苦手。
• 精度が出るのは主に英語プロンプト。

🔄 類似ツールとの比較

Figma との関係はすっきりしている：Stitch は入口であって、ライバルではない。Figma 書き出しに Auto Layout と命名レイヤーが付くのは、そのまま Figma で作業を続けさせるためだ。

v0、Lovable、Replit、Cursor といったコード生成系との違いは、最適化対象が「動くコード」か「見た目」か。Stitch も HTML/CSS/React を出すが、第一の仕事はデザインであってランタイムではない。

Uizard、Framer AI、Recraft といった他の AI デザインツールと比べると、Stitch の強みは Gemini の土台と価格——摩擦のない本物の無料枠だ。前身の Galileo AI はすでにこの製品に吸収されている。

まとめるなら、Stitch は「プロジェクトの最初の 5 分」に勝つ道具で、最後の詰めには手を出さない。

❓ よくある質問

Stitch と Gemini の関係は？

Stitch がプロダクトで、Gemini はそのエンジン。モードによって Gemini 3 Flash、3.1、Nano Banana、2.5 Pro が裏で動く。

本当に無料？

無料。月およそ 350 回の標準生成と 200 回の実験生成で、クレジットカードも不要。

Figma に書き出せる？

Standard なら書き出せる。Auto Layout、命名レイヤー、編集可能なコンポーネント付き。Experimental は Figma に出さず、HTML/CSS を書き出す。

完全に使えるアプリは作れる？

作れない。UI とプロトタイプであって、本番ソフトウェアではない。バックエンド、アクセシビリティ、境界ケースは自分で。

Figma の代わりになる？

ならない。Figma に仕事を流し込む入口であって、代替ではない。

日本語でも使える？

対応は進んでいるが、最も安定するのは英語プロンプトだ。