「Google Stitch で作ったUIを、次にどうするか。」
これがしばらく自分の中の問いだった。UIの形は素早く作れるようになったが、それをエンジニアに渡すまでの間に「設計の整理」と「実装指示」という作業が残っていた。この2つが、意外と時間がかかっていた。
そこで試したのが、Google Stitch で作ったUIをClaudeに渡して「設計の整理と実装指示を書いてもらう」という組み合わせだ。
やってみたら、思っていた以上に機能した。UIを生成してから実装指示を書くまでのフローが、以前の半分以下の時間になった。この記事は、その組み合わせのやり方と、使ってみて分かったことを全部書いたものだ。
一言で言えば、Google Stitch が「見た目を作る」部分を担い、Claudeが「設計を言語化する」部分を担うことで、デザインから実装指示までの一連の作業をAI同士の分業で進められる。この組み合わせは、エンジニアへの引き渡しコストを大幅に削減する。
なぜ2つを組み合わせようと思ったか
Google Stitch を使い始めてから、「UIを作る」作業は速くなった。でも、作ったUIをエンジニアに渡すまでには、まだいくつかの作業が残っていた。
その一つが「設計の言語化」だ。
UIを見れば「こういう画面にしたい」というのは分かる。でも、エンジニアに渡すためには「このボタンはクリックしたら何が起きるか」「このリストはどこからデータを取得するか」「このフォームの入力値をどこに送るか」という、設計の詳細を文章で整理する必要がある。
この「UIからテキストの設計書を作る」という作業が、意外と頭を使うし時間もかかる。そこで思ったのが「これ、Claudeに頼めるんじゃないか」ということだった。
Claudeとは何か
Claude（クロード）とは、Anthropic社が開発した大規模言語モデルを使ったAIアシスタントのことです。テキストの生成・要約・分析・コード作成など、言語に関連した幅広いタスクに対応できます。UIの説明から実装指示を書いたり、設計ドキュメントを整理したりするのが得意な領域の一つです。
実際のワークフロー
試行錯誤の結果、今使っているワークフローはこういう流れだ。
ステップ1：Google Stitch でUIを生成する
まずGoogle Stitch でUIを生成する。このとき、画面全体を一度に生成するのではなく、「このページのメインコンテンツ部分」「ヘッダー」「フォームセクション」のようにセクション単位で生成する方が、後のステップで扱いやすい。
生成したUIのスクリーンショットを保存しておく。これがClaudeへの入力になる。
ステップ2：スクリーンショットをClaudeに渡して設計を整理してもらう
Claudeに生成したUIのスクリーンショットを添付して、こんなプロンプトで依頼する。
「このUIのスクリーンショットを見て、以下を整理してください。①このページの目的・ユーザーが達成したいこと、②主要なUIコンポーネント一覧と各コンポーネントの役割、③インタラクションが必要な要素（ボタン・フォームなど）とその動作の仕様案、④エンジニアが実装時に確認すべき項目のチェックリスト。」
Claudeはスクリーンショットを分析して、UIの構造と設計の整理を文章で返してくれる。これが「設計書のたたき台」になる。
ステップ3：生成された設計書を確認・修正する
Claudeが出した設計書は、正確な部分と不正確な部分が混在する。スクリーンショットから読み取れない情報（「このボタンを押したらどのAPIを叩くか」など）は当然入っていない。
自分の意図と違う部分を修正し、Claudeが読み取れなかった情報を追記する。この「確認・修正」作業が以前の「ゼロから書く」より圧倒的に速い。
ステップ4：ClaudeにエンジニアへのHTML/CSS実装指示を書いてもらう
設計書が固まったら、今度はClaudeに「このUIをHTMLとCSSで実装するための指示書を書いてください」と依頼する。Google Stitch でエクスポートしたHTMLコードと設計書を両方渡して、「このHTMLコードをベースに、以下の設計書の要件を満たすように実装するための指示をエンジニア向けに書いてください」とお願いする。
Claudeが出す実装指示は、エンジニアが実装を始めるのに十分な情報を含んでいることが多い。もちろん確認と調整は必要だが、ゼロから書くよりはるかに速い。
実際に試してみて良かったこと
このワークフローを3ヶ月使い続けて、特に効果を感じたことを紹介する。
「見えていないものを言語化してくれる」
Claudeにスクリーンショットを渡すと、自分が意識していなかった部分を指摘してくれることがある。「このフォームにはバリデーションの処理が必要です」「このリストは空の状態のUIも設計した方が良いでしょう」というような指摘だ。
自分一人でUIを設計していると「動いている状態」ばかり考えて「エッジケース」を見落とすことがある。Claudeの指摘がチェックリストとして機能し、見落としが減った。
エンジニアへの質問が減った
以前は「このUIを実装するには何が必要か」という問いをエンジニアに直接投げていた。今はClaudeがその橋渡しをしてくれることで、エンジニアへの「仕様確認」の質問が減った。
実際に一緒に仕事をしているエンジニアから「最近、仕様のやり取りが少なくなりましたね」と言われた場面があった。ClaudeとGoogle Stitch の組み合わせが、エンジニアとのコミュニケーションコストを下げていた。
うまくいかなかったこと
良いことだけではなかった。組み合わせてみて、うまくいかなかった部分もある。
スクリーンショットだけでは情報が足りない場面がある
Claudeはスクリーンショットから多くの情報を読み取れるが、「色のHEXコード」「フォントの正確なサイズ」「余白の正確なpx値」のような数値情報は読み取れないことがある。
こういった数値情報が必要な場面では、Google Stitch のエクスポート機能でCSSコードを書き出し、そのコードをClaudeに渡すことで補完できる。スクリーンショットだけでなく、コードも一緒に渡す方が精度が上がる。
Claudeの出力を鵜呑みにしてはいけない
Claudeが生成する設計書や実装指示は、あくまでも「たたき台」だ。特に「APIの設計」「データベースの構造」のような、スクリーンショットからは分からない技術的な部分は、Claudeの出力に誤りが含まれることがある。
「Claudeが書いたから正しい」ではなく、「Claudeが出したたたき台を自分が確認・修正する」という前提で使うことが重要だ。
このワークフローが特に向いている場面
- 小規模チームや個人開発で、デザインもディレクションもエンジニアリングも一人でこなす必要がある場面
- クライアントへの提案段階で、UIと設計書をセットで用意したい場面
- プロトタイプを作って検証する際に、設計の整理まで素早くやりたい場面
- エンジニアと非同期でコミュニケーションを取る必要があり、仕様を文書化する必要がある場面
よくある質問（FAQ）
Q1. ClaudeとChatGPTでは、この使い方に違いはありますか？
どちらも画像を読み取って文章を生成する能力を持っているため、基本的な使い方は同様です。Claude（特にClaude 3以降）はテキストの構造化と分析が得意な傾向があり、設計書のような構造化されたドキュメントを生成させるのに向いています。用途に合わせて試してみて、自分に合う方を選ぶのが良いと思います。
Q2. ClaudeにUIのスクリーンショットを渡すのに特別な操作は必要ですか？
Claude.aiのWebインターフェースやAPI（画像対応モデル）では、画像ファイルをドラッグ&ドロップまたはアップロードボタンで添付できます。特別な設定は不要で、通常のファイル添付と同じ操作です。PNG・JPGなどの一般的な画像形式に対応しています。
Q3. この方法でどれくらい時間が短縮できましたか？
私の場合、「UIを作ってからエンジニアに仕様書を渡すまで」の時間が、体感で50〜60%短縮されました。特に「設計書のたたき台を作る」作業が、以前は1〜2時間かかっていたものが20〜30分で終わるようになりました。ただし、最終的な確認・修正は依然として必要です。
Q4. エンジニアがこの方法を嫌がることはありますか？
「AIが書いた仕様書を確認するのは抵抗がある」という反応をする方もいます。最初からAI生成と明かすより、「たたき台を作ってきた」という形で渡して、一緒に確認しながら修正していく進め方の方が受け入れられやすい場合があります。最終的な仕様確認は人間が行うことを明示することが大切です。
Q5. Google Stitch のHTMLコードをClaudeに渡す際の注意点はありますか？
HTMLコードが長い場合、Claudeのコンテキスト上限に引っかかることがあります。その場合は、コード全体ではなくCSSの一部や、特定のコンポーネントのコードだけを渡す方法が有効です。「このCSSからカラーコードと主要なフォントサイズを抽出してください」のように、目的を絞って依頼すると効率的です。
Q6. 設計書以外にClaudeが役に立った使い方はありますか？
はい、いくつかあります。Google Stitch で生成したUIのアクセシビリティチェックリストを作ってもらう、UIのコピー（テキスト）を改善してもらう、プロンプトのたたき台を作ってもらう——これらも効果的でした。「UIについて考えること全般」をClaudeが補助してくれるイメージです。
Q7. この組み合わせを使うのにコストはかかりますか？
Google Stitch は無料プランあり、ClaudeもClaude.aiのWebインターフェースなら無料プランがあります。本格的に使う場合は両ツールの有料プランを検討することになりますが、まずは無料プランで試して効果を確認してから課金を判断することをおすすめします。
Q8. Google Stitch とClaudeを連携させる公式な方法はありますか？
2026年4月時点では、公式なAPI連携やプラグインは提供されていません。現在は「スクリーンショットをコピー&ペーストで渡す」「エクスポートしたHTMLコードを貼り付ける」というシンプルな方法での連携です。将来的にMCPや公式連携が実現すれば、よりシームレスなワークフローになる可能性があります。
2つのAIが「デザインの橋渡し」をしている
Google Stitch とClaudeを組み合わせて使い続けて思うのは、「2つのAIがデザインプロセスの異なる部分を担っている」ということだ。
Google Stitch は「見た目を作る」。Claudeは「意味を言語化する」。この2つの役割が補完し合うことで、「UIを生成する」→「設計を整理する」→「実装指示を書く」という一連の作業が、一人でも現実的な時間でこなせるようになった。
デザイナー・ディレクター・エンジニアが揃ったチームでは、それぞれの専門家がこれらの役割を担う。でも小規模チームや個人では、一人がすべてをこなす必要がある場面がある。そういった場面で、AIの分業は思っていたより実用的に機能する。
まずはスクリーンショットを一枚、Claudeに渡してみてほしい。「UIから設計書を作ってください」と依頼するだけで始められる。
