はじめに
株式会社ネクストスケープ Chief Technology Office所属の小野塚です。
今回はGoogleのAIデザインツール、Stitchに関する記事になります。
AIデザインツールは皆さんもご存じの通り他にも色々ありまして、先日記事を書いたPencil.devもその１つです。
そしてこのStitch、こちらはGoogleが開発したものであり、昨年5月のGoogle I/Oにて発表されました。
昨年秋ごろにも触ったことがあったのですが、デザイン面はあまり詳しくないことと、デザインの素人として「おお！」と思えるものがなかったためにそのままとなっていました。
先日3月18日に大幅アップデートされたということで改めて記事として書いてみようと思います。
ログイン直後
ログインしてもらうとわかるのですが、引き続きベータ版となっておりまして無料で利用可能です。
モデルとしては以下になります（2026年3月20日時点）。
当たり前かもですが、GoogleのツールですのでGemini系、Gemini 3.0Flash、Gemini 3.1 Pro、あとはNano Banana Proで既存のアプリやサイトの再設計ができるRedesign、問題解決のためのIdeateの４つ（後半２つは「モデル」ではないと思いますが、選択肢の紹介として挙げておきます）。
今回は3.0 Flashでいきます。
デザイン依頼
早速デザインを依頼してみましょう。
「ToDoリスト機能の仕様を作成してください。タスクの追加、完了チェック、削除機能を含めて、基本的なToDoアプリとして動作するようにしたいです。」
そして、プロンプトを投げた結果が以下の画面。
Pencil同様、まずは画面が作成・表示されると思ったのですが、おもむろに「仕様書」が作成されました。
この仕様書の確認を求められると共に、更に修正したい点があるかどうか、その候補も挙げてくれます（以下選択肢が見切れてますが、ドラッグ＆ドラッグでスクロールします）。
そこで２の「期限の設定機能も追加してください～」を選んでみましょう。
そうすると以前の仕様書はそのままにもう１つ新たに作成されまして、これについても「え？」となりました。
先にこの後の話を書いてしまうとデザイン画面についても修正・改修を行った場合は過去のデザインをそのまま残して新しいデザインが「追加」する形となります。
今回「vibe designへの招待」として大幅アップデートした特徴の１つがこのキャンバス画面でして、「AI-native, infinite canvas」、直訳で「AIネイティブ無限キャンバス」という表現をしています。
デザイン作業には分岐・収束が頻繁に起きうるため、その過程全てをコンテキストとして残す、という思想がこの無限キャンバスにあり、そのため、仕様書についても過去のものは削除せず残しておく形になります（完全に不要であれば削除することも可能です）。
つまり、この無限キャンバスがStitchにおける「コンテキスト」のすべてになるわけです。
作られたToDoアプリの画面が以下になります。
当然プロンプトやプロジェクトによって違いはあるものの、Cursorからいきなり実装を行った場合とは異なり、かなりリッチな印象を受けます。
この後のデザイン調整は基本的にプロンプトによって行うことになりますが、文言変更に関しては右側のメニューアイコンから「Direct Edit」を選ぶと以下のように直接テキスト編集を行えます。
DESIGN.md
もう１つの特徴が「DESIGN.md」という設定ファイル。
ClaudeにおけるClaude.mdのように、そのデザインのルール（色・フォント等）がMarkdownファイルとして保存されています。
このMarkdownファイルがあることでそのプロジェクトにおけるデザインについて一貫性を持たせられることはもちろん、他のプロジェクト、他のツールにも共有することで一貫性を持たせることが可能になりました。
「FigmaファイルやブランドガイドのPDF、デザイナーの頭の中にしかない情報をDESIGN.mdに残す」と公式サイトにも書かれています。
これは個人的な考えですが、コーディングにおけるSSD、仕様駆動開発をデザインにも適用するための方法がこのDESIGN.mdなのではと（勝手に）思っています。
このDESIGN.mdは複数保持・管理が可能です。
以下のメニューで「Import from website」を選択し、URLを入力することで既存のサイトのデザインを取り込んでDESIGN.mdを作ることもできます。
予測ヒートマップ
あとは以前からあった機能ではあるのですが、興味深かったのでもう1つ機能の紹介を。
上部メニュー「Generate」から「予測ヒートマップ」を選択します。
すると以下のように実データではなくあくまで今のデザインに対する「予測」なのですが、ヒートマップが表示されます。
これを参考にして、意図に反してあまりユーザーが注目していないところ、操作していないところがあればデザインを見直してもらうといった使い方ができます。
他ツールとの連携、エクスポート
あとはこれも以前からの機能ではありますが、他ツールとの連携、エクスポートについて。
まずは以下プルダウンメニュー下からになりますが「ダウンロード」。こちらはZIPファイルがダウンロードされ、解答すると各画面のスタンドアロンHTMLと画像ファイル（pngファイル）が取得できます。
次に「Figmaにコピー」。こちらはクリップボードに画面デザインがコピーされ、Figmaを開いてペーストすれば簡単にFigma上にStitchで作成した画面デザインが貼り付けられます。
ただ、日本語ですと文字化けしている部分もありますのでこちらは注意が必要です。
その他のエクスポート対象の項目を挙げておきます。
特記すべきは「MCP」でしょうか。StitchのMCPサーバーを使ってCursorやClaudeなどのツールから接続することができます。
といったような色々な機能を持つStitchですが、Figmaライクの細かいデザイン調整はできません。
そのため、もしデザインにこだわりたい場合は
・まずはStitchでコンセプトを複数生成 → 2〜3 案に絞る → Figma にエクスポートしてピクセルレベルで調整
もしくは
・Cursor（や、他のAIツール）にデザインを取り込んで、Cursor側で微調整を行う
といったハイブリッドワークフローが現状の最善策になるのかなと思います。
また、単純なデザインツールではなく、画面遷移のトリガー等を指定し、複数画面を選択した上で以下の「Instant Prototype」を実行すると画面遷移のみの簡単なプロトタイプとして動作を確認することもできます。
モバイル、タブレット、デスクトップ（PC）といった画面サイズも設定できますのでPencil.devよりもプログラム・実装寄りのデザインツールと言えます。
終わりに
いかがでしょうか。
デザイナーの方というよりはエンジニアの方が使用する前提なのかなという部分はありますが、DESIGN.mdによってその思想を他のツールに連携することも可能となり、他のデザインツールと一線を画す、便利なツールになっていると思います。
まだこれからになりますが、最近更に進化を遂げたAI Studioの連携が気になっておりまして、また別途記事にできればと思います。
Googleは最近になってFirebase Studioの終了（～2027/3/22）と、AI Studio及びAntigravityへの移行を促しており、今後の動向が非常に気になっておりますのでまた何か新しい情報があればこのブログでも取り上げてみたいと思います。
当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。
（以下当社お問合せフォーム）
当社では一緒に働いてくれる仲間を募集しています。是非以下のサイトよりお申込みください。
