Googleが提供するStitchはAIを活用したWebデザインツールです。一度ニュース記事として2025年10月に取り上げていますが、その後も随時新機能が加わり、また先月11月にNano Banana Pro、今月12月にはGemini 3 Pro Thinkingが導入されたことで、デザイン機能が強化されました。これによって、Stitchによるバイブデザイン（Vibe Design）が見えてきているようです。この記事では、先月から今月にかけて追加された新機能を中心に改めてStitchについて紹介します。

Stitchの基本操作とリデザイン機能

Stitchは、プロンプトからUIを生成し、自然言語の指示で編集できるデザインツールです。操作の流れは「生成→選択→編集→共有または実装ツールへ引き渡し」です。

具体的には以下のような手順で進めます。

1. Stitchのトップページで「アプリ」または「ウェブ」を選択し、作りたい画面や変更したい画面を文章や画像で説明して（＝プロンプトを入力して[1]）生成ボタンを押します。すると新規プロジェクトページに遷移し、エージェントが（プロジェクトページに右側に広がるキャンバスに）画面を生成します。
2. その後、生成された画面に対する追加の編集を指示したり、別の画面の生成や別のデザインをプロンプトで指示していきます。その際、生成された画面をコンテキストとして添付できるのが特徴です[2]。画面を生成するたびに、キャンバスに画面が追加されていきます。
3. そうして作りたい画面が一式できたら、共有リンクを発行して他のメンバーに見せたり、画面の画像やコードを出力して実装へつなげたりします。もちろん、ローカルに保存することもできます。

デフォルトエージェントがGemini 3 Pro Thinkingに

12月の更新で、デフォルトのエージェントとしてGemini 3 Pro Thinkingが導入されました。これにより、入力プロンプトに対する推論能力が上がり、描く前に“⁠デザインについて考える⁠”ことができると言います。複雑なダッシュボードの生成や複雑なDOM操作、ピクセルパーフェクトなCSSの扱いに強くなっているそうです。

Nano Banana Proを使ったリデザイン機能

11月の更新で、Nano Banana Proを搭載したリデザインエージェントによる「リデザイン（Redesign⁠）⁠」機能が導入されました。既存サイトのスクリーンショットなどをコンテキストとして取り込み、自然言語でリデザイン（編集）を指示できます[3]。たとえば、次のような指示が可能だと言います。

• 「このページを若いオーディエンス向けにリデザインして」
• 「次に最もありそうなページを作成して」
• 「カートに追加するユーザーの数を増やして」
• 「ボタンを10ピクセル下に移動して」

具体的な手順はトップページで、モバイルの画面のリデザインであれば「アプリ」を、パソコンの画面のリデザインであれば「ウェブ」をまずは選択します。そしてプロンプト入力欄にある、エージェント選択欄から「Redesign」を選択して、＋ボタンからキャプチャ画像を添付したのち、編集したい内容を書いて生成します。なお12月の更新で、＋ボタンからWebサイトのURLを入力することで、Stitchがスクリーンショットを撮ってコンテキストに加えられるようになり、キャプチャ画像を添付する手間が省けるようになっています。

リデザイン機能を使う際に、「⁠UIの変更を指示する」のではなく、次のように「目的を伝える」ことも良い方法だと挙げています。

• 「ボタンを大きくして」ではなく「このページの使いやすさを修正して」
• 「ロゴを目立たせて」ではなく「このページの直帰率（リバウンド率）を下げて」

デフォルトエージェントで生成した画面はコードもあわせて生成しますが、リデザインエージェントで作成した画面はコードを生成しません。しかし12月の更新で、リデザインエージェントが出力した画面をコードに変換する「コードのバージョン（Code version⁠）⁠」が追加されています。生成されている画面を選択して、画面上部に表示されるメニューから「Generate⁠」⁠→「⁠コードのバージョン」を選ぶと、その隣にコード版の画面が新たに生成されます。

新しい編集操作

次に、プロジェクトページにおける新しい編集操作について紹介します。

バリエーション生成の高速化と［+3x］ボタン

10月末の更新で、最大6つの異なるバリエーションを一度に要求できるようになりました（例：「4つのレイアウトを見せて⁠」⁠）⁠。また、プロンプト入力欄に編集してほしい内容を書いたうえで［+3x］ボタンを押してから生成すれば、その3案を出せるようになっています。

画像／スクリーンショットをキャンバスに取り込む

11月の更新で、イメージ画像や既存画面などのスクリーンショットをキャンバスに持ち込み、画面生成や編集のコンテキストとして使えるようになりました。画面にイメージ画像を差し込んだり、言葉での説明が難しいUIのニュアンス（余白、密度、写真の扱い、トーンなど）をスクリーンショットと一緒に見せて伝えられるようになっています。

画像の取り込み方法は「ドラッグ＆ドロップ」「⁠貼り付け」「⁠アップロードボタン」「⁠プロンプトに添付」の4通りです。また、画面と画像を同時に選択（Ctrl＋クリック）して、次の生成・編集のコンテキストとして渡せるようになっています。「⁠リデザイン」系のワークフローとも相性が良いと言います。

プロトタイプ機能で画面を“縫い合わせる”

12月の更新で、プロトタイプ（Prototype）機能が公開されました。これによって、複数の画面を選択して“⁠stitch⁠”（縫合）することで、クリック可能なユーザーフロー画面を構築できるようになりました。この機能は、Stitchの名前の由来にもなっている「縫い合わせる」というコンセプトを体現するものだと言います。

手順は、（⁠同一のデザインが適用された）複数画面を選択して、その上部に表示されるメニューから「Generate⁠」⁠→「⁠プロトタイプ」を選択します。すると、選択した画面の隣に、フローを確認できるプロトタイプ画面が生成されます[4]。

このプロトタイプ画面を選択して、上部に表示されるメニューから「Interact」を選択すると、画面上のボタンが押せるようになります（＝インタラクティブモードに入り、「⁠Interact」メニューも「Interacting」メニューに切り替わります⁠）⁠。「⁠Interact」の隣にある「Restart」メニューを押すと画面全体が再描画され、フローも初期状態になります。

プロトタイプ画面を編集することも可能です。その際、画面上の要素（div要素）を選択して、具体的に指示を与えることも可能です。たとえば、その要素がどの画面に遷移するかを指定できると言います。

このプロトタイプ機能により、次のような作業を行えるようになりました。

• クリック可能なユーザーフローの作成
• インタラクションとアニメーションのテスト
• 画面上の要素（div）をクリックして編集をリクエスト
• これらのコンテキストをすべて、Google AI Studioや他のコーディングエージェントへのエクスポート

つまり、UIの生成だけでなく、画面の導線や遷移といったUXを確認できるようになりました。このことを指して、StitchのProduct DirectorであるKelly Schaefer氏は「わたしたちはバイブデザイン時代にいる」と言及しています。

複数画面を同時に編集する

さらに12月の最新の更新で、Parallel Editing（並列編集）が導入されました。特定の画面に対する編集が終わらないうちに他の画面に対する編集を行ったり、同じ画面に対して5つの異なる編集案を一度に行えるようになりました[5]。

予測ヒートマップ

11月の更新で、ユーザーがWebサイトのどの部分を注目するかを解析する「予測ヒートマップ（Predictive Heatmaps⁠）⁠」をNano Banana Proを利用してボタン一つで生成できるようになりました。デザインした画面に対して、ユーザーの視線が意図した場所に集まっているかを、データが揃う前に確認できます[6]。

コマンドパレットの実装や右クリックメニューの強化

12月の更新で、Cmd/Ctrl+Kでコマンドパレットを呼び出し、「⁠ズーム」「⁠特定の画面へ移動」などをキーボードで実行できるようになりました。UIから辿れないオプション（例：チャットを隠して集中するZen Mode）もここから使えるとのことです。さらに、Ctrl＋矢印キーで画面間を素早く移動できるようになりました。

また、画面やキャンバスを右クリックして、多くのメニューを呼び出せるようになっています。

共有機能⁠・エクスポートの強化

共有機能やエクスポート機能も強化され、デザインから実装へつなげる部分の摩擦が減っています。

共有機能を使って他ユーザーによるリミックスが可能に

前回の記事でも取り上げたように、Stitchで作成したプロジェクトは共有できます。11月の更新で、プロジェクトの共有機能は、共有されたユーザーはプロジェクトを複製し、リミックス（編集）できるようになりました。

さらに、ラフなコンセプトを共有して「別方向でリミックスしてもらう」といった使い方ができ、ブレインストーミング、教育用テンプレート、ハッカソンなどの場面に向くということです。

1クリックでAI Studioへエクスポート

11月の更新で、AI Studioへの「エクスポート」ボタンが導入され、これまで手動でHTMLをコピー＆ペーストしたりする作業が不要になりました[7]。

AI Studioへエクスポートすると、AI Studioが表示され、プロンプト入力欄にコンテキスト（HTML＋スクリーンショット）が添付された状態になります。

複数画面のコードをクリップボードへ一括コピー

12月の更新で、複数画面をクリップボードへエクスポートする機能（Multi-Screen Export to Clipboard）も導入されました。選択したすべての画面のコードを、セパレーターで整形された状態でワンクリックでコピーできます。ファイルの受け渡しなしで、IDEやコーディングエージェントへ貼り付けて続きが書けるようになります。

Jules統合

10月末の更新で、Julesへの統合（プレビュー）も発表されています。生成した画面を選んで「エクスポートボタンを押して「Jules」を選択すると、リポジトリを選択して、Julesのタスクを作成できます[8]。なお、リポジトリを選択するには、Jules側でGitHubへ接続している必要があります。

使用制限の変更⁠：日次使用制限の導入とクレジット体系

Stitchの使用制限は、以前は月ごとに決まっていましたが、11月に日ごとの使用量が導入されました（現在、200クレジット/日、リデザインクレジット15/日⁠）⁠。この変更により、もっともアクティブなユーザーで月の使用可能量が最大7倍まで増えているはずだと説明しています。また新しいクレジットの内訳が設定されました[9]。

• ラピッドエージェント：1クレジット／画面
• プロエージェント：3クレジット／画面
• リデザインエージェント：3クレジット／画面
• インタラクティブ画面は初期生成で3クレジット、編集ごとに1クレジット

さらに利用制限を増やしたい場合には、Trusted Testerプログラムへの参加も案内しています。

まとめ

Stitchは「デザインを作るツール」から、「⁠デザイン→プロトタイプ→実装をつなぐツール」になっています。また、プロトタイプ機能によって、UXの確認も可能になりました。バイブデザイン時代の到来を感じさせるStitchが、来年以降どのように進化していくのか、期待したいところです。