「人手のUI設計では低品質」 AIエージェントと喋る「バイブデザイン」で成果物の品質向上へ:DESIGN.mdで再利用もできる
GoogleはUIデザインツール「Stitch」を刷新。自然言語からUIデザインの生成、反復、共同作業を一貫して行える「無限キャンバス」などを搭載した。
Google Labsは、2026年3月18日(米国時間)、UI(ユーザーインタフェース)デザインツール「Stitch」をAIネイティブな「無限キャンバス」構造に再設計したと発表した。
プロトタイピングまでをカバーする「無限キャンバス」
Stitchの新しいUIでは、アイデアの初期検討から動作可能なプロトタイプ(試作品)の制作までを単一のキャンバスで行える。画像やテキスト、既存のコード資産などを直接キャンバスに取り込み、自然言語によるプロンプトでUIを構成できる。
Google Labsは、「AIによる試行錯誤の高速化が、結果として成果物の品質向上に寄与する」と述べている。
DESIGN.md、バイブデザインなど機能拡充
デザインエンジニアリングの効率化に向け、以下の機能が拡充されている。
- デザインシステムの抽出
URLから既存のWebサイトのデザインシステムを読み込む - 「DESIGN.md」
エージェント向けに定義されたマークダウンファイル。デザインルールを記述し、他のStitchプロジェクトや外部のコーディングツールとの間でエクスポートやインポートが可能。設計の再利用性を高め、ツール間の障壁を低減する - 音声入力によるバイブデザイン(Vibe design)
「Live Mode」(プレビュー)を選択すれば、音声入力で感覚的にStitchと共同作業できる
「Agent manager」による複数案の並行管理
今回の刷新では、プロジェクトのコンテキスト(背景情報)を理解して推論を行う「デザインエージェント」が統合された。
さらに、複数のアイデアを並行して検討および作業したい場合のために、新機能として「Agent manager」(エージェントマネジャー)が導入されている。Agent managerは進捗(しんちょく)を追跡し、複数の異なるアプローチを同時に検証する際の管理の煩雑さを軽減する狙いがあるという。
静的デザインをインタラクティブなプロトタイプに変換
Stitchは、生成された静的なUIを数秒でインタラクティブなプロトタイプに変換する。画面をつなぎ合わせ、「Play」をクリックするだけでインタラクティブなアプリケーションのフローをプレビューできる。クリック操作に基づいて論理的に次の画面を自動生成し、ユーザージャーニー(画面遷移)を自動でマッピングする。
MCP、SDKを通じた開発環境との連携
デザインから実装への移行を支援するためにエコシステムとの連携も強化された。
Stitch MCP(Model Context Protocol)サーバおよびSDK(ソフトウェア開発キット)を使用すると、「Stitch Agent Skills」やツールを通じてStitchを活用できる。「Google AI Studio」「Antigravity」といったAI開発ツールへデザインをエクスポートすることも可能だ。
Copyright © ITmedia, Inc. All Rights Reserved.
関連記事
MCP、A2A、UCP、AP2……乱立するAIプロトコル、どこでどう使うべき?
Googleは、AIエージェント開発の文脈で広まりつつある6つの主要プロトコル「MCP」「A2A」「UCP」「AP2」「A2UI」「AG-UI」についてサンプルコードとともに、それぞれの役割を解説した。
【上級者向け】Windows 11の「隠し機能」を先取り! 未開放の新デザインを「ViVeTool」で有効化する方法
Windows 11には、実装済みでも未公開の「隠し機能」が数多く眠っている。本Tech TIPSでは、Microsoftの内部ツールと同等の操作ができる「ViVeTool」を使い、新デザインの[スタート]メニューや最新のバッテリー表示を一足先に体験する手順を解説する。2026年最新の「Feature ID」リストも掲載する。
Google、AIがUIを自動生成する時代に備えたプロトコル「A2UI」をオープンソース化 どのような仕組みなのか?
Googleは「A2UI」プロジェクトをオープンソースで公開した。マルチエージェントメッシュの時代にエージェントが安全かつ効率的にUIを生成するためのプロトコルだ。
デザインツールのFigma、6つの生成AI機能を追加する「Figma AI」を発表
デザインツールのFigmaは、6つの生成AI機能を追加する「Figma AI」を発表した。Figma AIはβ版として、全ユーザーに向けて順次提供される予定だ。
Google AI StudioとGeminiを使ってデザインをコード化 Googleが紹介した3つの活用法
GoogleはGoogle AI StudioとGeminiを使い、Android Studio内でアプリのデザインをコードに変換する方法を公式ブログで紹介した。本記事ではそこで紹介されたGoogle AI StudioとGeminiを活用する3つの方法を紹介する。
