「デザインを言葉で注文して、コードごと受け取る」ツールが出てきた
2025年5月、GoogleがStitchというツールを発表した。Google I/O（Googleの年次開発者イベント）で公開されたもので、現在はGoogle Labsの実験プロジェクトとして誰でも無料で使える。
何ができるかをひとことで言うと、「こんな画面を作りたい」と日本語や英語で説明すると、AIがWebサイトやアプリの画面デザインを自動で生成してくれるツールだ。手書きのスケッチやスクリーンショットを写真で撮ってアップロードすれば、それをもとにデザインを起こすこともできる。
しかも、出力されるのは「きれいな画像」だけではない。そのままWebサイトとして使えるHTMLとCSS（画面の構造と見た目を記述するコード）がセットで出てくる。FigmaというデザインツールへのワンクリックExportにも対応しているので、デザイナーがそこから微調整を加えることもできる。
裏側ではGoogleのAI「Gemini 2.5 Pro」が動いている。標準モードなら月350回、高品質モードでも月50回まで生成できるので、試行錯誤しながら使い込める余裕がある。
なぜこのツールが気になったのか
自分はクライアントの広告用LPをClaude Code（AIコーディングツール）で内製している。HTML1ファイル＋Tailwind CSSという構成で、修正からデプロイまで数分というサイクルを回している。
この運用は速い。速いけれど、「最初のデザインをどう決めるか」という工程は毎回手探りだった。Claude Codeはコードを書くのは得意だが、「この事業にはどんな画面構成がいいか」「ファーストビューの印象をどう作るか」というデザインの初期案を出すのは守備範囲外だ。
もしGoogle Stitchで「シニア向け・スマホ中心・信頼感のあるLP」とプロンプトを書いてデザインの土台をつくり、そのHTMLをClaude Codeに渡して細部を作り込む、という流れができたら。デザイナーに依頼する工程をまるごとスキップできる可能性がある。
そこで、StitchとClaude Codeがどこまで連携できるのかを調べてみた。
調べてわかったこと──StitchはClaude Codeと「直接つながる」設計になっていた
結論から言うと、Google StitchにはClaude Codeのようなコーディングエージェントと接続するための仕組みが最初から用意されていた。
接続の手段は大きく2つある。
1つ目はAPI接続だ。APIとは「ソフト同士が情報をやりとりするための窓口」のこと。Stitchは自分のプロジェクトに対してAPIキー（接続用の鍵）を発行できるので、外部のプログラムからStitchのデータに直接アクセスできる。
2つ目がMCP接続だ。MCPというのはModel Context Protocolの略で、AIエージェントが外部ツールと会話するための共通規格のようなものだ。Google StitchはこのMCPに対応しており、Claude Codeとの接続に推奨されている方式でもある。
接続の仕組みをもう少し具体的に
MCPで接続するには、stitch-mcpという橋渡しツールを使う。これはStitchのAPIをClaude Codeが理解できる形式に翻訳してくれるCLI（ターミナルで動くツール）で、GitHubで公開されている。
初期設定はターミナルでコマンドを1つ実行するだけだ。ウィザード形式でGoogleアカウントの認証やAPIキーの設定が進むので、手順に従えば完了する。そのあとClaude Codeの設定ファイルにstitch-mcpの情報を数行書き加えれば、Claude Codeが「stitch」というツールを呼び出せるようになる。
これで何ができるかというと、Claude CodeからStitchのデザインデータを直接取得できる。たとえば「このプロジェクトのトップページのHTMLを持ってきて」と指示すれば、Stitchで作ったデザインのコードがそのままClaude Codeの手元に届く。デザインのスクリーンショット画像を取得することもできる。
Googleが公式で出している「スキル」がさらに面白い
stitch-mcpだけでも十分だが、Googleはさらにstitch-skillsという拡張機能群を公開している。google-labs-codeというGoogleの公式リポジトリで管理されていて、Claude Codeに追加のスキルをインストールする形で使える。
たとえばdesign-mdというスキルは、Stitchのプロジェクトを分析して「このデザインはどんな色・フォント・余白ルールで構成されているか」をドキュメント化してくれる。デザインシステムの設計書が自動で出てくるようなものだ。
react-componentsというスキルは、Stitchで作った画面をReactコンポーネント（再利用可能な部品）に変換する。enhance-promptは、「ログインページ作って」のような曖昧な指示を、Stitchが理解しやすい具体的なプロンプトに書き換えてくれる。
stitch-loopはさらに大胆で、ひとつのプロンプトから複数ページのWebサイトを自動生成する。トップページ、サービスページ、お問い合わせページ……といった構成をまとめて作り、ファイルの整理まで自動でやる。
これらのスキルはターミナルでコマンドを1つ実行するだけでインストールできる。
実際にStitch × Claude Codeで作ったデザイン例
調査だけでなく、実際にStitchとClaude Codeの連携を使ってデザインを生成してみた。
クリエイティブエージェンシーのポートフォリオサイト
「超ハイエンドなクリエイティブエージェンシーのポートフォリオ」というプロンプトで生成したのが、以下のデザインだ。ダークテーマをベースに、非対称レイアウトとエディトリアルデザインを組み合わせた、かなり攻めた構成が出てきた。
Stitchが生成したのはヒーローセクション、Selected Works（実績ギャラリー）、モバイル対応のヒーローセクションの3画面。それぞれ異なるレイアウトパターンで、デバイスモックアップや写真素材も自動で配置されている。
注目すべきは、これらが単なる「画像」ではなく、HTMLとCSSのコードとして出力されている点だ。Claude Codeはこのコードを直接受け取って、テキストの差し替え、アニメーションの追加、レスポンシブ対応の微調整といった作業をその場で実行できる。
医療系クリニックのランディングページ
もう一つ、実用的な例として医療系クリニックのLP用ヒーローセクションも生成した。「膝の再生医療を提供するクリニック」というコンテキストで、信頼感のあるデザインが出力された。こちらはビジネス用途を想定した、より実務寄りの成果物だ。
どちらの例でも、Stitchでデザインの土台を作り、Claude Codeで細部を調整するという流れがスムーズに機能した。デザイナーへの発注→確認→修正依頼というサイクルが、プロンプト入力→生成→即座に調整というサイクルに置き換わる感覚だ。
この連携が「LP制作の現場」にとって何を意味するか
ここからは調査結果を踏まえた考察になる。
今まで広告用LPを作ろうとすると、大きく3つの工程が必要だった。まずデザイナーがワイヤーフレームとデザインカンプを作る。次にエンジニアがそれをHTMLに起こす。最後に運用担当がテキストや画像を差し替えながらABテストを回す。
StitchとClaude Codeの連携が実用レベルに達すれば、最初の2工程がほぼ消える。Stitchに「こんなLPを作りたい」と伝えてデザインの土台を受け取り、Claude Codeでコードを整えてデプロイする。修正が必要なら、Claude Codeにその場で指示して数分で反映する。
外注なら50〜150万円かかっていたLP制作が、ツール利用費だけで完結する可能性がある。しかも納期が1〜2ヶ月から数日になる。修正のたびに3営業日待つ必要もない。
もちろん、現時点では注意点もある。Stitchの出力はあくまで「土台」であって、そのまま本番で使えるクオリティとは限らない。配色やレイアウトが期待どおりにならないことはあるし、業界固有の広告規制や細かいUXの調整は人間が判断する必要がある。
ただ、「ゼロから作る」と「土台を直す」では、かかる時間がまったく違う。デザインの初期案をAIに任せて、人間は判断と微調整に集中する。この役割分担がようやく現実的になってきたということだ。
現時点での制約と、今後の見通し
Google StitchはまだGoogle Labsの実験プロジェクトという位置づけだ。いつ仕様が変わるかわからないし、stitch-mcpも開発者個人による実験的なツールとして公開されている（ただし開発者はGoogleのデベロッパーアドボケイトで、stitch-skillsはGoogleの公式リポジトリで管理されている）。
2026年3月時点では、StitchのMCP接続は英語のプロンプトが前提だ。日本語でどこまで精度が出るかは、実際に試しながら検証していく段階にある。
それでも、「デザイン→コード→デプロイ」の流れがAIツールの連携だけで完結する道筋が見えてきたのは確かだ。GoogleもAnthropicもこの方向に投資を続けている。半年後には、今よりずっとスムーズに動く環境が整っている可能性が高い。
新しいツールが出たら「今すぐ使えるか」ではなく「半年後にどう使えるか」で評価する。そのために今から触っておく。これが、変化の速い領域でポジションを取り続けるための基本動作だと考えている。
