はじめに
ソフトウェア開発で一番時間かかるところはどこ？って聞かれたら、僕の答えはコーディングじゃないんですよ。UIデザインなんです。
僕はフルスタックエンジニアです。API書いたり、ロジック組んだり、データベース最適化したり——こういう作業は一日中やっても全然苦にならないんですよね。でもUIを作るとなると、毎回めっちゃ深いため息が出るんですよ。draw.ioは確かに速いんですけど、できたモックアップがね、正直「ボロボロ」なんです。一目で「あ、これエンジニアが自分で描いたやつだな」ってバレる。気合い入れてFigma開いて、ちまちまドラッグ&ドロップして午後いっぱいかけても、やっぱりプロのデザイナーが作ったものには全然かなわない。料理のセンスがない人が頑張って作るみたいな感じで、手間はかけてるのにどこか足りないんですよね。
そしたらある日、dev界隈でGoogle Stitchが話題になり始めたんです。みんな結果をシェアしてて、僕はそれ見て「え、これマジでAIが作ったの？」って驚いちゃって。気になりすぎてすぐ試してみたんですけど、ぶっちゃけかなりびっくりしました。生成されたUIがめっちゃプロっぽくて、滑らかで、僕が必死に描いてたものよりずっと見栄えがいいんですよ。アイデアから完成モックアップまでの時間が、数時間から数分に縮まりました。もっと早く知りたかったなーと本気で思いましたね。
この記事は、僕がStitchを実際に使ってみて学んだことをまとめたものです。僕みたいにUIデザインで苦労してるエンジニアの皆さんの参考になれば嬉しいです。
Stitchって何？
StitchはGoogleが作ったAIベースのUIデザインプラットフォームです。今はまだBETA段階なんですけど、Googleはstitch.withgoogle.comっていう専用サイトをちゃんと立ち上げてるんですよね。前はGoogle Labsの中に入ってただけだったのに。これ見ると、Googleはこのプロダクトにかなり本気なんだなって感じます。
コアのアイデアはすごくシンプルで、テキストでUIを説明すると、Stitchがそれを作ってくれるんです。Figmaの使い方を知らなくても、デザインスキルがなくても大丈夫。自分が何を作りたいかを言葉にできればOKなんですよ。
Stitchの画面はかなりすっきりしてます。左側にプロジェクト一覧と参考用のサンプルがあって、真ん中にプロンプト入力エリアがあります。デザインの種類をアプリ（モバイル）かWebか選べるようになってて、下の方にはプロンプトの候補がいくつか表示されてるので、クリックするだけですぐ試せます。入門にはめっちゃ便利ですよ。
注目の機能
プロンプトからUI生成
これがコア機能であり、僕が一番感動した機能です。自然言語で説明を入力すると、Stitchが完成したUIを生成してくれるんですよ。グレーのワイヤーフレームじゃなくて、ちゃんと色もタイポグラフィもレイアウトも整った、お客さんにそのままデモできるレベルのデザインが出てくるんです。
プロンプトの例はこんな感じ：
"An app for marathon runners to engage with a community, find partners, get training advice, and find races near them."
Stitchはホーム画面からレース詳細、プロフィールページまで、必要な画面を全部作ってくれます。初めて試した時、思わずうなずいちゃいましたね。想像以上にこっちの意図を汲み取ってくれるんですよ。
Stitchには複数のAIモデルが用意されてて、目的に応じて使い分けられます：
| Model | 説明 |
|---|---|
| 3 Flash | Gemini 3.0 Flashによる高品質なHTMLデザイン。速くて、大抵のケースはこれで十分 |
| Thinking with 3 Pro | Gemini 3 Proを使用、品質と深い推論を重視。遅いけど仕上がりがより洗練される |
| Redesign | Nano Banana Proで既存のアプリやWebサイトをリデザイン。既存UIをリニューアルしたい時にめっちゃ使える |
| Ideate | 課題を投げると、複数のデザインアイデアが返ってくる。ブレスト段階にぴったり |
僕は普段、速さ重視のタスクには3 Flashを、複雑でAIにじっくり考えてほしいデザインにはThinking with 3 Proを使ってます。この2つの品質差はけっこうはっきりしてて、Proの方が「きれい」な結果を出すんですけど、Flashは何倍も速いんですよね。
柔軟な編集機能
生成した後に最初の結果に「縛られる」ことがないんです。ここはStitchで僕が高く評価してるポイントで、実際のところ最初のプロンプトで100%思い通りになることなんてほぼないじゃないですか。
Stitchでは2つの方法で編集できます：
- Edit Text — デザイン上のテキストを直接編集。変えたいテキストをクリックすれば、そのまま修正できる
- Edit With AI — プロンプトでAIに変更を指示する。「このボタンをもっと大きくして青色に変えて」みたいな感じ
どの要素でもクリックして、「Edit Text」でテキストを直接編集するか、「Edit With AI」で変更内容を説明すればOKです。AIが的確に対応してくれて、デザインの他の部分に影響を与えないんですよ。
いいなと思うのは、細かい部分だけ調整できて、全体を再生成しなくていいところ。クレジットの節約にもなるし、気に入ってる部分はそのまま残せるんです。
バリエーション生成とHeat map
僕が気に入ってる機能の一つがGenerate Variantsです。同じデザインの異なるバージョンを複数作ってくれるんですよ。それぞれレイアウト、配色、配置が違ってて。「レイアウト変えたらどうなるかな」って自分で想像する必要がなくて、3〜4パターンがパッと出てくるので比較して選べるんです。
さらに驚いたことに、StitchはデザインのHeat mapも作れるんですよ。Heat mapはUI上でユーザーが最も注目しそうなエリアを可視化してくれるもので、実際のユーザーテストを実施しなくてもUXの評価ができちゃうんです。
初めてこのHeat map見た時はかなりびっくりしました。無料で使えるツールなのにUX分析まで付いてるって、正直Googleちょっと太っ腹すぎませんかね。
Export — デザインからコードへ
Export機能はエンジニアにとってStitchが真価を発揮するところです。選択肢がなんと6つもあるんですよ：
| Format | 説明 |
|---|---|
| AI Studio | HTML + 画像をGoogle AI Studioにエクスポートして、Geminiで開発を続行 |
| Figma | Figmaに変換してデザイナーがさらに調整 |
| Jules | Jules（GoogleのAIコーディングエージェント）にエクスポート |
| zip | コード一式をzipファイルでダウンロード |
| Clipboard | コードをクリップボードにコピーして、プロジェクトに直接ペースト |
| MCP | IDEで直接使えるMCPプロンプトを生成 |
僕が一番よく使うのはMCPとzipですね。MCPはIDEにそのまま統合できてワークフローがシームレスになるし、zipはコードをざっと確認したい時に便利なんです。
AI Studioにエクスポートすると、Stitchが画像とHTMLを含むプロンプトを作って、Google AI Studioにそのまま送ってくれます。「これらの画面のようなアプリを作って」っていうプロンプトが画像ファイルやHTMLと一緒に自動生成されるんですよ。そこからGeminiがデザインを完成したアプリに仕上げてくれます。このフローはかなりスムーズですね。
MCP統合 — デザインがIDEの中で直接動く
ここが僕が一番強調したいところで、僕のワークフローを完全に変えてくれた部分なんです。
**MCP（Model Context Protocol）**を使うと、IDE内のAIコーディングエージェントがStitchに直接接続できるんですよ。ブラウザを開かなくても、IDE内でUIデザインの作成・編集・管理が全部できちゃう。聞くとそんなに大したことないように思えるかもしれないけど、実際使ってみるとめっちゃ快適なんです。ブラウザとコードエディタを行ったり来たりしなくていいのがこんなに楽だとは思わなかった。
Claude Codeの設定
コマンド一行でOKです：
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR-API-KEY"
YOUR-API-KEYを自分のAPIキーに置き換えるだけ。Claude Codeが自動的にStitchを認識して接続してくれます。
Antigravityの設定
Agent Panelで右上の三点メニューをクリックして、MCP Servers → Manage MCP Servers → View raw configを選んで、以下を追加します：
{
"mcpServers": {
"stitch": {
"serverUrl": "https://stitch.googleapis.com/mcp",
"headers": {
"X-Goog-Api-Key": "YOUR-API-KEY"
}
}
}
}
Claude CodeとAntigravity以外にも、StitchはCursor、VSCode、Gemini CLIのMCPもサポートしてます。各IDEの設定方法は記事末尾の参考リンクを見てくださいね。
14個のMCPツールが使える
接続が成功すると、14個のツールにアクセスできるようになります。4つのグループに分かれてますよ：
-
Project Management —
create_project,get_project,delete_project,list_projects -
Screen Management —
list_screens,get_screen -
AI Generation —
generate_screen_from_text,upload_screens_from_images,edit_screens,generate_variants -
Design Systems —
create_design_system,update_design_system,list_design_systems,apply_design_system
Design Systemsグループは特に注目ですね。プロジェクト専用のデザインシステムを作って、全画面に適用できるんですよ。つまり、UIがプロジェクトのtech stackやデザインスタイルと一貫性を保てて、「画面ごとにバラバラ」にならないんです。
実際のワークフロー
これが僕が毎日使ってるワークフローで、今まで試したどのデザインプロセスよりスムーズだと感じてます：
- デザインしたい画面のアイデアを考える
- IDE内でプロンプトを書くと、AIエージェントがMCP経由で
generate_screen_from_textを呼び出す - 結果を確認して、気に入らなければ
edit_screensで修正 -
generate_variantsでさらに選択肢を増やす - tech stackに合うデザインシステムを適用
- HTML/CSSコードを取得してプロジェクトに統合
全部IDE内で完結するんですよ。タブ切り替えなし、コピペなし、ブラウザ不要。アイデアから統合可能なUIまで、全部が開発ワークフローの中に収まってる。僕にとってこれがStitchの本当の価値なんです。きれいなUIを作れるツールってだけじゃなくて、エンジニアのワークフローの「正しい場所」にちゃんとハマるところがすごいんですよ。
Googleがめっちゃ太っ腹 — 毎日400クレジット無料
正直に言うと、Stitchの無料枠を見た時はちょっとびっくりしました。毎日もらえるのがこれです：
- デザインの新規作成・編集に400クレジット
- Redesign機能に15 Daily Redesign Credits
400クレジットって聞くとピンとこないかもしれないですけど、僕の実体験だと、30〜50ページくらいは余裕で作成・編集できて、クレジットはまだ残ってます。集中すれば1日でプロジェクト全体の画面を作り切れることもありますよ。実際、15画面くらいの小さなサイドプロジェクトのUIを午前中に仕上げたんですけど、クレジットは半分も使ってなかったんです。
今はBETA段階なのでGoogleが無料で開放してくれてます。いつ課金が始まるかわからないので、興味があるなら早めに活用しておくのがおすすめですよ。
効果的なプロンプトのコツ
使い込んでいく中で気づいたことをいくつかまとめますね：
具体的であればあるほど良い結果が出ます。「A fitness app」だと、すごく一般的な結果になっちゃうんですよ。でも「An app for marathon runners to engage with a community, find partners, get training advice, and find races near them」って書くと、Stitchが何を求めてるかちゃんと理解して、ずっとイメージに近いUIを作ってくれます。
形容詞でデザインの「雰囲気」を設定しましょう。「A vibrant and encouraging fitness tracking app」っていうプロンプトだと、「A minimalist and focused meditation app」とは全然違う配色やスタイルが出てくるんです。ほんの数語の形容詞を足すだけで、結果がかなり変わりますよ。
**一度に一つずつ修正しましょう。**一回のプロンプトに変更をたくさん詰め込まないのがコツです。「Change the primary button color to blue」の方が、「Change button color, add search bar, and resize the hero image」より正確な結果が出ます。一つずつ分けてプロンプトを投げた方が、思い通りになりやすいんです。
**画像の説明は具体的に。**画像を変えたい場合は、位置と内容をはっきり指定しましょう。「change the doctor image」じゃなくて「On the Team page, change Dr. Carter's lab coat to black」みたいに書くのがポイントです。
**UI/UXの専門用語を使いましょう。**Stitchは「navigation bar」「call-to-action button」「card layout」「hero section」みたいな用語をすごくよく理解します。正しい用語を使えば、より正確な結果が得られますよ。
IDE/CLI向けのSkills
MCP以外にも、Stitchの使用体験を最適化するためのSkillsがコミュニティで開発されてます：
google-labs-code/stitch-skills — Google Labs公式の6つのSkillsで、54K以上のインストール実績があります。react:components、design-md、stitch-loop、enhance-prompt、shadcn-ui、remotionが含まれてて、特にenhance-promptはプロンプトの自動改善にめっちゃ役立ちますよ。
sickn33/antigravity-awesome-skills/stitch-ui-design — Stitchで効果的なプロンプトの書き方をガイドしてくれるSkillで、初めての人やデザイン品質を上げたい人にぴったりです。
インストール方法や使い方の詳細は下の参考リンクをチェックしてくださいね。
まとめ
Stitchはプロのデザイナーの代わりにはならないです。これははっきり言っておきたいんですよね。でも僕みたいなエンジニアにとっては、すごくリアルな課題を解決してくれるんです。デモ用、プロトタイプ用、自分が作ってるプロダクトをちゃんと理解するために「十分いい」UIを作れる——デザインツールと格闘しなくていいんですよ。
draw.ioで四角や丸をドラッグ&ドロップするのに何時間もかけてた僕が、今は数分の説明でまともなUIが手に入るようになりました。そして僕が一番気に入ってるのは、UIがきれいなことじゃないんです。MCPワークフローなんですよ。IDE内でアイデアを書いて、tech stackに合った完成UIまで、全部が開発プロセスの中にきれいに収まってる。
もしあなたがエンジニアで、UIデザインを効率化したいと思ってるなら、Stitchは試す価値ありますよ。特に今は無料で毎日400クレジットもらえるんだから。失うものは何もないじゃないですか。