AIデザインスタックは分化した：Claude Design、Codex Sites、Figma、Lovart、そしてMCPlatoのコントロールルーム

2026年に向けたClaude Design、Sites in Codex、Figma、Lovart、MCPlatoの詳細レビュー。AIデザインが勝者総取りの単一カテゴリではなく、Web体験スタックに属する理由を整理します。

公開日 2026-06-05

2026年に問うべきでない質問は、**「どのAIデザインツールが最高か？」**です。

より鋭い問いは、**AIにどの仕事を任せたいのか？**です。創業者にはランディングページのコンセプトが必要です。プロダクトチームにはレスポンシブなWeb体験が必要です。エンジニアにはホストされたdemoが必要です。グロースにはキャンペーンビジュアルが必要です。「AIデザイン」は、視覚探索、ホスト型Web作成、デザインシステムガバナンス、マーケティングクリエイティブ、そしてコントロールルーム型の調整に分かれました。

だからこそ、Claude Design、Sites in Codex、Figma、Lovart、MCPlatoは1本のランキングではなく、1つのスタックに属します。

スタジオの作業空間から抽象的なレスポンシブWeb体験が立ち上がる高品質な編集風ヒーロー画像

図1：AIデザインは1つの万能キャンバスではなく、Web体験スタックになりつつあります。

名前の現実確認：Claude Designは実在する。Codex Sitesは略称である

Anthropicは2026年4月17日に、Anthropic Labs research previewとして Claude Design を発表しました。¹ 会話と直接的な修正を通じて、デザイン、インタラクティブプロトタイプ、視覚的な1ページ資料、マーケティング素材、初期のランディングページコンセプトを作成できます。¹ つまりこれは2026年の実在するプロダクト方向性ですが、まだpreviewであり、プロフェッショナルなデザインガバナンスの代替ではありません。

Codex Sites は便利な略称ですが、公式名称は Sites または the Sites plugin inside Codex です。OpenAIの開発者ページのタイトルは「Sites – Codex」で、この機能をSites pluginによりCodexから「build and deploy hosted sites」する方法として定義しています。² Sitesにより、CodexはOpenAIがホストするWebサイト、Web app、ゲームを作成、保存、デプロイ、検査できます。²

境界線は重要です。Sitesはpreviewであり、ChatGPT BusinessおよびEnterpriseワークスペースで利用できます。Businessでは既定で有効、Enterpriseでは管理者RBACで制御されます。² 出力はCloudflare Worker互換のES modulesである必要があり、すべてのSites deployment URLは本番デプロイです。² これはホスト型Web体験ワークフローとして扱うべきであり、最終的な本番デザインとして扱うべきではありません。

プロダクト別レビュー

Claude Design は、体験がまだ曖昧なときの出発点として最も強力です。チームがデザインシステムにコミットする前に、homepage、onboarding flow、プロダクトナラティブ、プロトタイプがどのように感じられるかを探索できます。強みはスピードと会話型の細化です。限界は権威性です。審美眼を提案することはできますが、チームにはアクセシビリティ確認、ブランド判断、下流の所有権が依然として必要です。

Sites in Codex が最も魅力的なのは、望む成果物が実際にホストされたWeb面である場合です。ランディングページ、内部ツール、dashboard、インタラクティブdemo、小さなWeb app、ゲームなどです。構造化された要件、コードコンテキスト、またはレビュー可能なWeb体験として公開したい既存プロジェクトを持つチームに適しています。OpenAIのWeb development use-case collectionはWeb作業におけるCodexの役割を補強し、Codex changelogは時間とともにプラットフォーム変更を追うのに適しています。³⁴ 弱点は、本番URLが完了したという錯覚を生みやすいことです。デプロイは、ブランド、法務、パフォーマンス、セキュリティの承認ではありません。

Figma は、プロダクトおよびWebデザインのプロフェッショナルな信頼できる情報源であり続けます。Figma SitesはデザインチームにWeb向けの作成経路を提供し、Figma Makeはチャット、添付ファイル、point-and-edit、スタイルコンテキスト、コードエディタ、publishing betaを備えたprompt-to-appワークフローを追加します。⁵⁶ Figma Design AIは、アセット検索、コンテンツ置換、インタラクション、レイヤー名変更、テキスト操作、画像ツール、ベクター化、First Draftをカバーします。FigmaのAI agentは2026年5月20日に限定beta展開を開始しました。⁷⁸ このWebスタックはいまもデザインシステムの規律に依存しています。⁹

Lovart は、クリエイティブおよびマーケティング向けのビジュアルエージェントとして捉えるのが適切です。公式ページでは、自然言語パイプライン、統合キャンバス、画像と動画の生成、レイヤーレベル編集、一括生成、PNG/SVG書き出しが強調されています。¹⁰ そのため、キャンペーンの世界観、ムードボード、hero imageの方向性、プロダクト写真コンセプト、ローンチ用バリエーションに役立ちます。レスポンシブなデザインシステムを統制したり、ホスト済みサイトを検査したりする場所としては最適ではありません。

MCPlato はコントロールルームレイヤーに適しています。プロフェッショナルなデザインキャンバスでも、ホスト型サイトプラットフォームでも、専門的なマーケティング画像スタジオでもありません。サイトプロジェクトが調査、ソース資料、長時間タスク、承認、セッション、成果物の規律、引き継ぎに依存する場合に有用です。観察可能なオフィスAI作業に関するMCPlatoの公開ポジショニングは、Claude Design、Codex、Figma、Lovartの周辺作業を調整するワークスペースであることを示しており、それらの代替ではありません。¹¹

比較表：各ツールが担うべき仕事

プロダクト / ワークフロー	主なJob-to-be-done	得意なこと	苦手なこと	最適な入力	出力 / 成果物	最適なユーザー	向いていない用途	スタック内での推奨役割
Claude Design	会話型の視覚探索	コンセプト、プロトタイプ、ランディングページ方向性、1ページ資料	最終的なデザインシステム権威	ブリーフ、プロダクトアイデア、参考スタイル、直接フィードバック	視覚コンセプト、プロトタイプ、体験レイアウト草案	創業者、PM、方向性を探るデザイナー	ピクセル単位の本番デザイン	体験アイデア出しレイヤー
Sites in Codex	ホスト型Web体験の作成	Webサイト、Web app、ゲーム、dashboard、内部ツール、demo	視覚的な審美眼、ガバナンス、レビュー規律	要件、コード/プロジェクトコンテキスト、制約、レビュー基準	ホスト済みWebサイト、Web app、内部ツール、dashboard、ランディングページ、インタラクティブdemo	エンジニア、技術系オペレーター、プロダクトチーム	レビューなしの公開や新しいブランドアイデンティティ作業	ホスト型プロトタイプとWeb実行レイヤー
Figma	プロフェッショナルデザインの信頼できる情報源	デザインシステム、コラボレーション、レスポンシブWebデザイン、管理されたアセット	人間のデザイン判断の置き換え	コンポーネント、スタイル、プロダクト要件、チームライブラリ	デザインファイル、プロトタイプ、サイト、ブランドアセット	デザインおよびプロダクトチーム	非構造的な調査オーケストレーション	記録システムとしてのデザインレイヤー
Lovart	マーケティングクリエイティブ探索	ムードボード、キャンペーンビジュアル、ブランド方向性、一括クリエイティブ	デザインシステムガバナンス、サイト検査	ブランドプロンプト、キャンペーン目標、視覚リファレンス	画像、動画、レイヤー化されたクリエイティブアセット、書き出し	マーケター、クリエイター、ブランドチーム	プロダクトUIの信頼できる情報源	クリエイティブ探索レイヤー
MCPlato	観察可能な複数資料にまたがる作業調整	調査、承認、セッション、成果物、非同期タスク、引き継ぎ	専門的なデザインキャンバスまたはホスト型Web runtime	ソース、ローカル資料、タスク計画、承認、ブリーフ	レポート、アウトライン、タスク履歴、納品物	オペレーター、リサーチャー、PM、作業を管理するチーム	Figma、Codex、Lovart、またはデザイナーの置き換え	コントロールルームレイヤー

AI支援Web体験ワークフローの高品質な半3D建築断面図

図2：このスタックは、探索、管理されたデザイン、ホスト型実行、クリエイティブアセット、調整を分離します。

シナリオ別推奨マトリクス

シナリオ	主な推奨	補助ツール	理由
ランディングページの視覚方向性	Claude Design	Lovart, Figma	Claude Designは初期探索を加速します。Lovartはムードとキャンペーン方向性を広げます。
レスポンシブサイトデザイン	Figma	Claude Design, MCPlato	Figmaがコンポーネント、レスポンシブ挙動、コラボレーション、レビュー可能な意思決定を担うべきです。
Prompt-to-web appプロトタイプ	Sites in Codex	Figma Make, MCPlato	Sites in Codexは技術コンテキストからホスト型Web appやdemoを作る用途に合います。
内部dashboard/ツール	Sites in Codex	Figma, MCPlato	Codexはホスト型の技術面を作れます。FigmaはUXパターンを統制し、MCPlatoは要件を調整します。
マーケティングキャンペーンアセット	Lovart	Figma Buzz, Claude Design	Lovartはクリエイティブの多様性、ムードボード、ローンチビジュアルにより適しています。Figma Buzzは一括アセットを支援します。
サイト構築前の複数資料リサーチ	MCPlato	Claude Design, Figma	MCPlatoはソース収集、ノート、承認、引き継ぎの中心です。
既存プロジェクトからホスト型demoへ	Sites in Codex	MCPlato	Codex Sitesは互換性のあるWeb作業をホスト型デプロイに変換できます。MCPlatoは注意事項を追跡します。
デザインシステムに管理されたWeb体験	Figma	Sites in Codex	Figmaが記録システムを担います。Codexは互換性のある実装をレビュー用に公開できます。
長期間のサイトプロジェクト調整	MCPlato	Figma, Sites in Codex, Lovart	複数段階のサイト作業には、見える調査、意思決定、アセット、デプロイメモ、承認が必要です。

チームが避けるべきこと

まず、ホストされたURLを最終承認として扱わないことです。OpenAIのSitesドキュメントは、すべてのdeployment URLが本番デプロイであると明示しています。² 動作するdemoであっても、ソースレビュー、アクセシビリティレビュー、ブランドレビュー、セキュリティレビュー、ステークホルダー承認が必要です。

次に、略称で所有権を混同しないことです。「Codex Sites」は便利なタイトルですが、公式機能はCodex内のSitesです。Figmaは管理されたデザインシステムを担うべきです。LovartをプロダクトUIの信頼できる情報源にしてはいけません。Claude Designを完成した本番デザインとして扱うべきではありません。MCPlatoは資料と意思決定を調整すべきであり、デザインキャンバスやホスティングレイヤーのふりをすべきではありません。

デザインキャンバス、ホスト型Webオブジェクト、クリエイティブスタジオ、調整デスクを比較する高品質な編集風プロダクト写真

図3：クリエイティブ、デザイン、デプロイ、調整の面が区別されていると、Web作業はより安全になります。

結論：勝つワークフローはスタックである

2026年のAIデザインスタックは、1つの勝者に収束していません。専門化しています。Claude Designは体験と視覚方向性を探索します。Figmaはデザインシステムとレスポンシブなコラボレーションを統制します。Lovartはキャンペーンビジュアルとブランド世界のバリエーションを作成します。Sites in Codexは適したアイデアやプロジェクトをホスト型Web体験に変えます。MCPlatoは調査、ソース資料、承認、反復、引き継ぎを観察可能な状態に保ちます。

優れたチームは所有権を割り当てます。Claude Designで探索し、Figmaで統制し、Lovartでキャンペーンアセットを生成し、Sites in Codexで適したプロジェクトをホスト型demoに変え、証拠と意思決定が見える場所で長期作業を調整します。