Google Stitch → Google AI Studio でデザインからコードまでを一気通貫でやってみた

2026.04.16

「デザインしたUIを、そのままコードにしたい」

これはフロントエンド開発に関わるすべての人が抱える願望だ。Figmaのデザインをエンジニアに渡してコーディングしてもらうまでの時間と手間、デザインとコードの乖離、実装してみたら「なんか違う」というやり直し——こういったロスを、どこかで解消したかった。

Google Stitch と Google AI Studio を組み合わせることで、「デザイン → コード」の工程が一気通貫でつながることを知ったのは、2026年3月のStitch 2.0アップデートのニュースを読んだときだ。

実際に試してみた。その一部始終を記録する。

結論から言うと——Google Stitch で設計したUIをGoogle AI Studioに渡すことで、Geminiモデルがデザインを解釈してフロントエンドコードを生成するワークフローが実現できる。「デザインからプロトタイプ動作するコード」まで1時間以内で完結するケースも出てきた。ただし、生成されたコードをそのまま本番に使えるかどうかは別の話で、レビューと調整は欠かせない。

Google Stitch と Google AI Studio の関係

Google AI Studioとは、GoogleのGeminiモデルを使ってコードの生成・修正・テストができるWebベースのAI開発環境です。Google Labsが提供しており、テキストプロンプトや画像を入力としてコードを生成できます。2026年3月のStitch 2.0アップデートで、StitchからAI Studioへの直接エクスポートに対応し、デザインからコード生成までのワークフローが大幅に簡略化されました。

一言で言うと「Stitch＝UIデザイン担当、AI Studio＝コード生成担当」という役割分担だ。StitchがデザインとDESIGN.mdを生成し、AI Studioがそれを受け取ってReact・HTML/CSS・Flutterなどのコードに変換する。

Stitch 2.0が実現したデザイン→コード連携

2026年3月19日のStitch 2.0アップデートで追加された主な機能のひとつが、コーディングツールとの統合強化だ。

GoogleはStitch向けのSDKとMCPサーバーを公開し、Google AI Studio・Claude Code・Cursor・Gemini CLIといったコーディングアシスタントがStitchのデザインアセットを直接取り込めるようになった。これにより、デザインとコーディングの間の「コンテキストスイッチ」が大幅に削減された。

MindStudioが発表した「Stitch → AI Studio フルワークフロー」の解説記事（2026年）によると、このワークフローはGeminiが「両フェーズを担当する」ことで、デザインと実装の意図のズレを最小化するとされている。

実際にやってみた：ダッシュボード画面の設計からコード生成まで

実際に試したのは、タスク管理アプリのダッシュボード画面だった。

Step 1：Stitch でUIを設計する

Google Stitch でダッシュボード画面を設計した。プロンプト：「タスク管理アプリのダッシュボード。今日のタスク一覧（完了/未完了のチェックボックス付き）、進捗サマリー（円グラフ）、優先度別のタスク数バッジ。ライトモード、Outlined アイコン、白背景・ブルーアクセント。デスクトップ向け2カラムレイアウト。」

生成されたデザインを確認し、色・レイアウト・フォントを微調整してから、DESIGN.mdを生成してプロジェクトに保存した。

Step 2：AI Studioにエクスポートする

Stitch 2.0では「Export to AI Studio」のオプションが追加された。これをクリックすると、設計したUI画面のスクリーンショット・DESIGN.md・コンポーネント情報がまとめてAI Studioに渡される。

AI Studioのインターフェース上には、Stitchから渡された画像とデザイン情報が表示される。ここから「このデザインをReactコードに変換して」と指示を出すことができる。

Step 3：AI Studioでコードを生成・調整する

「このダッシュボード画面をReact + Tailwind CSSで実装してください。コンポーネントを分割し、タスクリストは配列データから動的にレンダリングする構成で。」という指示を送ったところ、GeminiがReactコンポーネントを生成した。

生成されたコードは、Stitch のデザインに近い見た目を持っていた。Tailwind CSSのクラスでカラーパレットが再現されており、DESIGN.mdの色設定を参照した形跡があった。

実際に使ってみてわかったのは、DESIGN.mdがあるとコード生成の品質が格段に上がるということだ。DESIGN.mdなしで生成したコードとDESIGN.mdありで生成したコードを比べると、後者の方がデザイントークンの一貫性が明らかに高かった。

ワークフロー全体の評価：何ができて、何ができないか

「Stitch → AI Studio」ワークフローを数週間使ってみた率直な評価をまとめる。

得意なこと

静的なUIのプロトタイプ生成：シンプルなCRUD画面・ダッシュボード・フォームなど、状態変化が少ない画面のコードは精度が高い
デザイントークンの引き継ぎ：DESIGN.mdを渡すことで、カラー・フォント・スペーシングがコードに反映される
コンポーネントの分割提案：AI StudioのGeminiは、ひとつの画面を適切なコンポーネントに分割してくれることが多い
スピードの大幅短縮：デザイン完了からプロトタイプ動作確認まで、以前は半日かかっていたものが1〜2時間に短縮された

苦手なこと・注意点

複雑な状態管理：APIとの連携・認証フロー・複雑なユーザーインタラクションは、生成コードに修正が多く必要になる
本番品質の担保：生成されたコードは「動くプロトタイプ」として使えるが、パフォーマンス最適化・アクセシビリティ対応・セキュリティは別途対応が必要
アニメーション・インタラクション：Stitch 自体がアニメーションの設計に対応していないため、動的な表現はコード生成後に手動で追加する必要がある

このワークフローが特に有効なシーン

Stitch → AI Studio ワークフローが特に力を発揮するのは、以下のようなシーンだ。

社内ツール・管理画面の開発：デザインの精度よりスピードが求められる社内ツールでは、Stitch でラフを作りAI Studioでコードを生成してそのまま使うケースが増えている
プロトタイプ・PoC の作成：「動くもの」を素早く見せたい場面で、Figmaの静止プロトタイプより「実際に動くコード」の方が説得力が高いことがある
スタートアップの0→1フェーズ：デザイナーとエンジニアが別々にいない小さなチームで、一人で「デザインもコードも」やらなければならない場面に特に有効

よくある失敗と対処法

失敗1：DESIGN.mdなしでエクスポートした——DESIGN.mdがないとコード生成時にカラーやフォントが汎用的な値になってしまいます。必ずDESIGN.mdを用意してからエクスポートしましょう。
失敗2：生成コードをそのまま本番に使おうとした——AI Studioが生成したコードはプロトタイプ品質です。エラーハンドリング・アクセシビリティ・パフォーマンスは必ず追加対応が必要です。
失敗3：1画面を一気にコード化しようとした——複雑な画面を一度にコード化しようとすると、生成コードが肥大化して修正が難しくなります。「ヘッダーコンポーネント」「タスクカードコンポーネント」のように、コンポーネントごとに分けてコード生成する方が品質が上がります。
失敗4：使用フレームワークを明示しなかった——「コードに変換して」だけでは、React・Vue・Angular・Vanilla JSのどれで生成するかが不定になります。「React + TypeScript + Tailwind CSS」のように技術スタックを明示しましょう。
失敗5：Stitch のデザインが完成していない状態でエクスポートした——デザインが中途半端な状態でエクスポートすると、コードも中途半端になります。Stitch でデザインを固めてからエクスポートするのが原則です。

よくある質問（FAQ）

Q. Google Stitch から Google AI Studio へのエクスポートは無料で使えますか？

A. Google Stitch自体は無料プランで利用できます（日次クレジット制）。Google AI Studioも無料枠があります。ただし、両サービスとも利用量によっては有料プランへの移行が必要になる場合があります。最新の料金情報は各公式サイトをご確認ください。

Q. React以外のフレームワーク（Vue・Flutter・SwiftUIなど）でもコード生成できますか？

A. Google AI Studioは多様なフレームワーク・言語でのコード生成に対応しています。Vue.js・Flutter・Swift（SwiftUI）・Kotlin（Jetpack Compose）などのプロンプトでも動作します。ただしフレームワークによって生成精度にばらつきがあり、ReactとHTML/CSSが最も精度が高い傾向があります。

Q. Stitch → AI Studio のワークフローはエンジニア以外でも使えますか？

A. 生成されたコードを理解・修正するにはある程度のプログラミング知識が必要です。ただし「動くプロトタイプを素早く作って見せる」という目的であれば、コーディング経験の少ない方でもStackBlitz・CodeSandboxなどのオンラインエディタで生成コードを実行・確認することは可能です。

Q. 生成されたコードの品質はどのくらい信頼できますか？

A. プロトタイプや社内ツール用途では十分な品質が出ることが多いです。ただし本番プロダクトへの適用には、経験あるエンジニアによるコードレビューが必要です。特にXSS対策・CSRF対策などのセキュリティ、画面読み上げソフト対応などのアクセシビリティは自動生成に頼らず、必ず確認・補完してください。

Q. Stitch のデザインとAI Studioで生成されたコードの見た目が大きく違う場合、どうすればいいですか？

A. まずDESIGN.mdが正しくエクスポートされているか確認しましょう。次に、AI Studioへの指示に「Stitch のデザインと完全に一致させること」「カラーはDESIGN.mdの値を使うこと」を明示して再生成してみましょう。それでも差異が大きい場合は、特定の部分（ボタンのスタイルのみなど）をコンポーネント単位で再生成するアプローチが効果的です。