Google Stitch vs Tencent Ardot：AI ラフ生成か、本格デザインワークスペースか

結論

Google Stitch と Tencent Ardot は、どちらも自然言語から UI を生成できます。ただし、解決する工程が異なります。

Stitch は「AI による最初の一歩」。Web で説明を入力すると、数秒で画面の方向性が出てきます。正式なデザインがない段階の探索に向いています。
Ardot は「Figma + AI」に近いワークスペース。テキストからの UI 生成に加えて、ベクター編集、自動レイアウト、コンポーネント、変数、チームライブラリ、共同編集、権限管理、デザインからコードへの引き継ぎまで備えています。

方向性をすばやく確認したいだけなら Stitch が軽く、デザインをチームの業務フローに載せたいなら Ardot が向いています。両者をリレー的に使うこともできます。

それぞれ何か

Google Stitch は Google Labs の AI UI デザインツールです。テキストや画像から画面を生成し、DESIGN.md、MCP、Agent Skills を通じてデザインの文脈を後続のワークフローへ渡せます。主に Web で利用でき、素早い探索やコンセプト検証に向いています。

Tencent Ardot は Tencent Design の AI ネイティブ設計プラットフォームで、macOS、Windows、Web に対応しています。AI 生成を本格的なデザインエディタに組み込み、テキストからの UI 生成、画像からデザインへの変換、Figma の .fig インポート、ベクター編集、自動レイアウト、コンポーネントバリアント、デザイン変数、チームライブラリ、コメント、権限、操作ログ、開発者向けの注釈やコードスニペットを提供します。

主な違い

項目	Google Stitch	Tencent Ardot
位置づけ	AI による UI 生成と探索	AI ネイティブのデザインワークスペース
プラットフォーム	Web	macOS / Windows / Web
テキストから UI	強み。プロンプト中心	強み。本格エディタに統合
画像からデザイン	対応	対応。生成後に細かく編集可能
Figma の扱い	Fast モードで Figma に書き出して仕上げ可能。`.fig` インポートの入口ではない	`.fig` インポートに対応し、レイアウト、スタイル、コンポーネントを保持
ベクター編集 / 自動レイアウト	基本機能	本格的な機能
デザインシステム	DESIGN.md とデザイン文脈	コンポーネント、変数、モード、チームライブラリ
チーム協業 / 権限 / 監査	限定的	充実
デザインからコード	HTML 書き出し。React/Vue などに変換可能。DESIGN.md、MCP/CLI/Skills	注釈、CSS/iOS/Android コードスニペット、MCP、CodeBuddy（React/Vue/ミニプログラム）
料金	現在無料	Starter 無料。Pro/Team/Enterprise は期間限定無料 + AI Credits
中国本土からのアクセス	Google サービスの可用性に依存	Tencent Cloud 製品。中国本土のチーム向け

AI 生成：どちらもラフを作れるが、重点が違う

Stitch の強みは「手順の少なさ」です。デザインツールを先に覚える必要はありません。一文を入力すれば画面が出てきて、追加のプロンプトでレイアウト、色、情報密度を調整できます。プロダクトマネージャー、創業者、開発者、複数の方向性を素早く比べたいデザイナーに向いています。

Stitch には複数の Design Mode があります。Thinking with 3 Pro は複雑なロジックや本番候補の画面、Redesign は既存画面へのスタイル適用、Fast は高速ワイヤーフレームと Figma 書き出しに向いています。また、一度に 1〜5 個のバリエーションを生成でき、Creative Range で現在のデザインからの逸脱度を調整できます。

Ardot もテキストから UI、画像からデザインに対応しますが、AI はエディタの中のアシスタントに近い存在です。生成後もベクターツール、自動レイアウト、コンポーネント、変数を使って編集を続けられます。公式には AI 画像生成、アイコン生成、リンクから UI への変換、AI 検索なども用意されています。生成した画面をそのまま作り込みたいチームほど、ツールを行き来する手間が減ります。

編集とデザインシステム

ここが両者の最も大きな違いです。

Stitch は生成とデザイン文脈に重点を置きます。DESIGN.md を使って、色、書体、間隔、コンポーネントのルールを AI が読める形に整理できます。デザインをスクロール可能なインタラクティブプロトタイプに変換し、ホバーなどの状態を確認することもできます。デザイン意図を伝えるには便利ですが、従来型の本格デザインエディタではありません。

Ardot は Figma に近い編集機能を備えます。ベクターグリッド、ブール演算、3D 回転、自動レイアウト、コンポーネントバリアント、コンポーネントプロパティ、デザイン変数、複数テーマのモードなどです。チームはコンポーネント、スタイル、変数を共有ライブラリに公開でき、複数画面を同じ設計体系に保てます。デザインシステムを長期的に維持するチームでは、単発の生成よりもこうした機能が重要になります。

Figma 移行とチーム協業

Ardot は .fig ファイルのインポートに対応し、レイアウト、スタイル、コンポーネントを保持すると公式に説明しています。既存の Figma ワークフローがあるチームは、ゼロから作り直すのではなく、AI を備えた新しいワークスペースとして Ardot を検討できます。

Stitch は Fast モードでワイヤーフレームを Figma に書き出して仕上げられますが、主な入口はテキスト、画像、Code-to-Design などのフローで、.fig インポートではありません。既存のデザインファイル管理を置き換えるというより、方向性探索の段階に向いています。

協業面では、Ardot はリアルタイムコメント、注釈、バージョン比較、権限センター、操作ログを備えます。Stitch は個人の探索色が強く、同じようなチームガバナンスは担いません。デザインレビュー、資産の引き継ぎ、権限管理が必要なら、Ardot の完成度が上です。

デザインからコード、MCP

両者とも Agent ワークフローへ向かっていますが、方向性は異なります。

Stitch は MCP、CLI、Agent Skills を使って、デザイン文脈を Claude Code、Cursor、Gemini CLI、Antigravity などのツールへ渡します。Stitch の HTML 出力は、LLM によって React、Vue、Angular、Jetpack Compose、Flutter、SwiftUI などに変換できます。プロンプト中心のチームにとって、プロンプトとデザイン文脈を実行可能なタスクに変えやすいのが強みです。

Ardot は開発者向けの注釈、コンポーネントバリアントの確認、CSS、iOS、Android のコードスニペットを提供します。公式 MCP ドキュメントでは、プロジェクト、キャンバス、デザイン変数、コンポーネントライブラリなどのツールが公開され、CodeBuddy、Cursor、Claude Code などの MCP クライアントに対応しています。公式ドキュメントでは、MCP 経由で CodeBuddy に渡し、React、Vue、ミニプログラムなどの高再現度コードを生成できると説明されています。デザインファイル自体を成果物として扱う、デザインチーム主導のワークフローに向いています。

料金と可用性

2026 年 10 月 28 日時点：

Stitch は現在無料で利用できます。ただし、Google が料金や地域ごとの提供状況を変更する可能性があります。
Ardot は Starter 個人版が無料です。Pro、Team、Enterprise は現在期間限定で無料ですが、AI 機能は AI Credits で計測されます。チームが大きくなると、シート数と Credits が実質的なコストになります。

可用性について、Ardot は Tencent Cloud の製品で、中国本土のチームにとっては比較的直接的です。Stitch は Google アカウントに依存し、地域やネットワーク環境によって利用しにくい場合があります。どちらも各社の最新情報を確認してください。

どちらを選ぶか

Google Stitch が向くケース：

まだデザインがなく、複数の UI 方向を素早く比較したい
本格的なデザインツールを先に覚えたくない
プロンプト中心のワークフロー、DESIGN.md、Google エコシステムを重視する
長期的なデザインシステム運用よりも、コンセプト検証が中心

Tencent Ardot が向くケース：

実際に編集できるデザインワークスペースが必要
既存の Figma ファイルを滑らかに移行したい
コンポーネント、変数、共有ライブラリ、権限、監査ログが必要
中国本土のチームで、アクセスの安定性を重視する
デザインをそのまま開発引き継ぎや MCP ワークフローへつなげたい

組み合わせたワークフロー

実用的なのは、どちらか一方を永久に選ぶことではなく、工程ごとに使い分ける方法です。

Stitch で 2〜3 の画面方向を生成し、情報構造と視覚的な雰囲気を決める
選んだ方向を Ardot に持ち込み、コンポーネント、変数、レスポンシブの詳細、チームレビューを行う
Ardot の注釈、コードスニペット、MCP で引き継ぐ。または Stitch の DESIGN.md と Skills で Coding Agent につなぐ

Stitch の起稿スピードを残しつつ、Ardot の編集と協業の深さを活用できます。

まとめ

Stitch と Ardot は、どちらも AI デザインツールボックスに入れる価値がありますが、同じ種類のツールではありません。Stitch は「ゼロから方向性へ」、Ardot は「方向性から納品できるデザインへ」が得意です。探索だけなら Stitch で十分です。デザインをチームの業務プロセスに組み込むなら、Ardot の完成度が上です。両者をリレー的に使うほうが、単独で使うより効果的なことが多いです。