Codex Design と Claude Design の比較。
Claude Design と Codex Design は、どちらも AI エージェントと一緒にデザインし、そのまま作ることができます。本当の問いは、どのエージェントと作業するかです。Claude Design は Claude と Claude Code の一部で、Codex Design は Codex にデザインキャンバスを加える独立したプラグインです。
2026年11月6日 更新 · 約 6 分で読めます
結論から
Claude を使っているなら、Claude Design を使いましょう。すべての Claude プランに組み込まれていて、UI だけでなくスライドや 1 枚ものの資料、マーケティング素材も作れ、Claude Code ともつながります。Codex を使っているなら、Claude Design はワークフローに入りません。Codex Design が同じ役割を埋めます。Codex が画面をライブ HTML として横に並べるキャンバスで、作る前に比べて磨き込めます。
- Claude Design を選ぶのは、Claude か Claude Code で作業している、UI と同じツールでスライドや資料も作りたい、すべてのデザインを照合するチーム共通のデザインシステムが必要な場合です。
- Codex Design を選ぶのは、Codex で作業していて、すべてのデザインを自分のコンピューター上の HTML ページとして持ち、同じエージェントにそのまま作らせたい場合です。
それぞれのツールとは
Claude Design は Anthropic のデザインツールです。2026 年 4 月に Anthropic Labs のリサーチプレビューとして専用サイトで公開され、いまは Claude 本体に組み込まれています。Claude のどの会話でも、Artifacts タブでも、Claude Code の /design でも使えます。モックアップ、クリックできるフロー、1 枚ものの資料などのビジュアル素材を作ります。要素にコメントしたり、テキストを直接編集したり、Claude が作るスライダーで余白や色を調整したり、要素をドラッグ、リサイズ、整列したりできます。GitHub リポジトリやデザインファイルからデザインシステムを取り込み、出力をそれに照らして確認します。作品は PPTX、PDF、HTML にエクスポートでき、Claude Code に引き継いだり、コネクタ経由で Canva、Miro、Adobe などのアプリに送ったりできます。
Codex Design は、私たちが開発した Codex 向けの独立したプラグインです。ローカルのキャンバスを追加し、Codex がデザインした画面をライブ HTML ページとして、モックアップ画像やリファレンスの隣に並べます。要素を選んでサイドバーでフォント、色、余白を変えることも、Codex に頼んで磨き込み続けることもできます。キャンバスのプロジェクトはお使いのコンピューターに保存されます。
並べて比較
| Claude Design | Codex Design | |
|---|---|---|
| 作れるもの | モックアップ、クリックできるフロー、1 枚ものの資料などのビジュアル素材 | Web サイトとアプリのモックアップ（ライブ HTML ページ）と、モックアップ画像 |
| 動作する場所 | Claude の会話と Artifacts タブ、そして Claude Code の /design | Codex の中。キャンバスはお使いのコンピューター上（macOS と Linux） |
| 出力とコード | PPTX、PDF、HTML へのエクスポート。Claude Code への引き継ぎ。Canva、Adobe、Miro、Lovable、Vercel などへのコネクタ | ローカルプロジェクト内の HTML ページと画像。選んだデザインは Codex がコードで実装 |
| 料金 | Free を含むすべての Claude プランに含まれ、プランの利用上限の範囲内で使えます。Claude Pro は月額 $20 | キャンバスプロジェクト 1 つまで無料。Pro は月額 $5 でプロジェクト無制限。Codex の利用料は別 |
| 向いている用途 | UI、スライド、資料をひとつの場所で作り、デザインシステムに沿わせたい Claude ユーザー | Codex を使っていて、作る前に UI の方向性を比べて磨き込みたい人 |
Claude Pro は年払いなら月額 $17 です。単体の claude.ai/design サイトは 2026 年 12 月 14 日まで利用できます。この比較は、2026 年 11 月 6 日時点の両プロダクトの公式サイトとドキュメントの内容にもとづいています。
Claude Design を選ぶべきとき
Claude Design が向いているのは、次のような場合です。
- Claude か Claude Code で作業している。 すでにプランに含まれていて、Claude Code の
/designなら、ターミナルやデスクトップアプリを離れずにデザインプロジェクトを作成、編集、同期できます。 - アプリの画面以外も必要。 1 枚ものの資料やマーケティング素材も作れ、スライドや資料には Claude Slides と Claude Docs が並んで使えます。
- チームに守らせたいデザインシステムがある。 GitHub リポジトリ、デザインファイル、アップロードから、1 つ以上のデザインシステムを取り込めます。Claude は結果を見せる前にそれらと照合し、管理者はチームを承認済みの 1 つのシステムに固定できます。
- 手で調整したい。 どの要素にもコメントでき、テキストをその場で編集でき、Claude が作る余白と色のスライダーを使えて、要素をドラッグ、リサイズ、整列できます。
- エンジニア以外にも共有したい。 すべての成果物にリンクが付き、共有するまでは非公開です。コネクタで Canva、Miro、Adobe などのツールに作品を送れます。
Codex Design を選ぶべきとき
- Codex で作業している。 Codex Design は、すでに使っているエージェントにデザインキャンバスをもたらすので、デザインのためにツールを切り替える必要がありません。選んだ方向性は、同じ会話の中で Codex に実装してもらえます。
- 画面を横に並べたい。 キャンバスは、Codex が生成するモックアップ画像や自分のリファレンスと一緒に、複数の方向性を並べて置くためのものです。
- ビジュアルですばやく調整したい。 HTML のモックアップで要素を選び、フォント、色、余白などのプロパティをサイドバーで調整できます。
- 作業を自分のマシンに置いておきたい。 キャンバスのプロジェクトはファイルとしてローカルに保存されます。ただし、Codex に共有した内容は、これまでどおり Codex が処理します。
- いまの Codex のプランのまま使いたい。 別の API キーも、トークンのウォレットもありません。キャンバスプロジェクト 1 つは無料で、Pro は月額 $5 でプロジェクト無制限です。Codex の利用分は Codex のプランから消費されます。
よくある質問
Codex 版の Claude Design はありますか？
Claude Design は Claude と Claude Code で動きます。Codex には Codex Design があります。これは似たデザインの工程を加える独立したプラグインで、画面がライブ HTML として横に並び、フォント、色、余白をビジュアルに編集できるキャンバスです。プロンプト 1 つで Codex にインストールできます。インストールガイドを参照してください。
Claude Design は無料ですか？
Anthropic によると、Claude Design は Free を含むすべての Claude プランに含まれています。使った分はプランの利用上限に数えられ、大きなリクエストほど多く消費します。
UI デザインには Claude Code と Codex のどちらを選ぶべきですか？
チームがすでに使っているエージェントを選び、足りないデザイン用のツールを加えましょう。どちらも質の高いフロントエンドのコードを書けます。違いは Codex と Claude Code の UI デザイン比較で詳しく解説しています。