Codex Design と Google Stitch の比較。
Google Stitch と Codex Design は、どちらも AI が生成した画面をキャンバスに並べます。違いは、そのキャンバスがどこにあるかです。Stitch は Google Labs が提供するスタンドアロンのデザインツールで、Codex Design は、完成したデザインを実際に作るコーディングエージェントの Codex にキャンバスを追加します。
2026年11月6日 更新 · 約 6 分で読めます
結論から
どちらも AI で UI を探るのに向いています。コーディングエージェントを使っていないなら、Stitch のほうが始めやすいです。ブラウザのタブを開いて、画面を言葉で説明するだけだからです。すでに Codex で開発しているなら Codex Design のほうがしっくりきます。デザインがコードの隣にあり、同じ会話のまま実装まで進められるからです。
- Google Stitch を選ぶのは、セットアップなしでブラウザ上でデザインしたい、声で話しながらアイデアを詰めたい、あるいは Google AI Studio や Antigravity で続きを作る予定がある場合です。
- Codex Design を選ぶのは、すでに Codex を使っていて、すべてのデザインを自分のコンピューター上のライブ HTML ページとして持ち、ビジュアル編集と会話で磨き込んでから、同じエージェントに作らせたい場合です。
それぞれのツールとは
Google Stitch は Google Labs のデザインツールです。Google は「AI ネイティブなソフトウェアデザインキャンバス」と呼んでいます。テキスト、音声、画像でインターフェースを説明すると、デザインエージェントが無限のキャンバス上に高精度な画面を生成します。画面どうしをつないでクリックできるプロトタイプにしたり、デザインのルールを DESIGN.md ファイルにまとめたり、作品を Google AI Studio や Antigravity にエクスポートしたり、Netlify で公開したりできます。Stitch には、ほかのツールとつなぐための MCP サーバーと SDK もあります。
Codex Design は、私たちが開発した Codex 向けの独立したプラグインです。ローカルのキャンバスを追加し、Codex がデザインした画面をライブ HTML ページとして、モックアップ画像やリファレンスの隣に並べます。要素を選んでサイドバーでフォント、色、余白を変えることも、Codex に頼んで磨き込み続けることもできます。キャンバスのプロジェクトはお使いのコンピューターに保存されます。
並べて比較
| Google Stitch | Codex Design | |
|---|---|---|
| 作れるもの | 高精度な UI デザインと、クリックして操作できるプロトタイプ | Web サイトとアプリのモックアップ（ライブ HTML ページ）と、モックアップ画像 |
| 動作する場所 | ブラウザ上（stitch.withgoogle.com） | Codex の中。キャンバスはお使いのコンピューター上（macOS と Linux） |
| 出力とコード | フロントエンドのコード、Figma に貼り付けられるデザイン、DESIGN.md。AI Studio と Antigravity にエクスポート、Netlify で公開 | ローカルプロジェクト内の HTML ページと画像。選んだデザインは Codex がコードで実装 |
| 料金 | Google は Stitch の料金を公表していません | キャンバスプロジェクト 1 つまで無料。Pro は月額 $5 でプロジェクト無制限。Codex の利用料は別 |
| 向いている用途 | コーディング環境なしで UI のアイデアをすばやく探りたい人。特に Google のツールで作業する人 | Codex を使っていて、作る前に UI の方向性を比べて磨き込みたい人 |
どちらのプロダクトも変化が速く、この比較は 2026 年 11 月 6 日時点の公式サイトとドキュメントの内容にもとづいています。
Google Stitch を選ぶべきとき
Stitch が向いているのは、次のような場合です。
- コーディングエージェントを使っていない。 Stitch はブラウザのタブで動きます。Codex Design には、プラグインに対応した Codex、Codex CLI、そしてコンピューターに Node.js が必要です。
- 考えながら話したい。 Stitch のキャンバスに話しかけて、デザインへのフィードバックをもらったり、その場で変更したりできます。
- クリックできるプロトタイプをすぐに作りたい。 Stitch は画面をつないで通しで操作できるフローにでき、次に必要な画面を生成することもできます。
- Google のエコシステムで作業している。 デザインは Google AI Studio と Antigravity にエクスポートでき、Netlify で公開すればそのまま Web に出せます。
- 既存のサイトから始めたい。 Stitch は任意の URL からデザインシステムを抽出できます。
Codex Design を選ぶべきとき
- すでに Codex で開発している。 キャンバスはコードを書くエージェントの中にあるので、デザインと実装のあいだにエクスポートの手順はありません。選んだ方向性は、同じ会話の中で Codex に実装してもらえます。
- UI の画像ではなく HTML がほしい。 すべての画面がライブ HTML ページで、要素インスペクターとページのバージョン履歴もあります。
- リファレンスと方向性を見比べたい。 Codex が生成するモックアップ画像や自分のリファレンスを、HTML の画面と並べて置けます。
- 作業を自分のマシンに置いておきたい。 キャンバスのプロジェクトはローカルに保存されます。ただし、Codex に共有した内容は、これまでどおり Codex が処理します。
- わかりやすい料金がいい。 別の API キーも、トークンのウォレットもありません。キャンバスプロジェクト 1 つは無料で、Pro は月額 $5 でプロジェクト無制限です。Codex の利用権限とプランの上限は、引き続き適用されます。
組み合わせて使う
Stitch と Codex は、デザインシステムの形式を共有しています。DESIGN.md は Stitch で生まれたもので、Codex は DESIGN.md ファイルを指定すれば読み込みます。Stitch のプロジェクトからファイルをエクスポートしてリポジトリに加えれば、Codex がキャンバスでデザインする画面にも、同じ色、タイポグラフィ、余白が反映されます。DESIGN.md：Codex にデザインシステムを渡すを参照してください。
よくある質問
Codex Design は Google Stitch の代わりになりますか？
Codex を使っているなら、なります。どちらも説明からキャンバス上に UI を生成します。Stitch はブラウザで使うスタンドアロンのツールで、Codex Design は Codex にキャンバスを加えるので、デザインとコードをひとつの場所で扱えます。Codex を使っていないなら、Stitch のほうがより直接的な選択肢です。
Stitch の DESIGN.md を Codex で使えますか？
はい。DESIGN.md は Google Labs が公開したオープンな形式で、Stitch はエクスポートとインポートに対応しています。ファイルをプロジェクトに置き、Codex に従うよう頼んでください。形式とセットアップは DESIGN.md のガイドで解説しています。
Codex Design は Codex に加えて別料金がかかりますか？
Codex Design はキャンバスプロジェクト 1 つまで無料で、Pro は月額 $5 でプロジェクト無制限です。モデルの利用料は含まれません。Codex が生成する分は、いつもどおり Codex のプランの利用枠から消費されます。料金を参照してください。