デザインとエンジニアリングの間には、長年「ハンドオフ」という名の断絶がありました。デザイナーがプロトタイプを仕上げ、仕様書を書き、エンジニアがそれを読んで実装する。その過程でどうしても情報が失われ、「モックアップと違う」というやり取りが繰り返されてきました。FigmaやZeplinはその橋渡しを試みましたが、変換の損失を根本からなくすことはできませんでした。Anthropicが今回のアップデートで打ち出したのは、「同じAIがデザインもコードも担う」という、別の角度からの解法です。
AnthropicはClaude Designの大規模アップデートを2026年6月17日に展開開始した。ローンチから2か月での大型改定となる。
最大の新機能は、デザインシステムインポートの刷新だ。GitHubリポジトリ、デザインファイル、アップロードファイルからデザインシステムを取り込み、Claudeはそのコンポーネントに基づいて制作し、出力をデザインシステムと照合して自動修正したうえでユーザーに提示する。組織管理者が標準デザインシステムを承認・ロックダウンできる管理者ロールも追加された。
デザインとコードの双方向連携も実現した。完成したデザインをClaude Codeへワンステップでハンドオフできるほか、Claude Codeターミナルからの /design コマンドでデザイン作業を起動することも可能になった。
トークン消費問題への対応として、Claude Designの利用制限がチャット・Claude Cowork・Claude Codeと共通化され、ほとんどのユーザーで利用余地が拡大する。1ターンあたりのトークン消費量削減とエラー率低下も図られた。エディターも刷新され、要素のドラッグ・リサイズ・整列操作が可能になった。Adobe、Canva、Gamma、Lovable、Miro、Replit、Vercel、Wix等との新インテグレーションも追加された。初週利用者は100万人を超えている。
【編集部解説】
Claude Designが4月17日のローンチから2か月で大型アップデートを迎えました。今回の改定で何が変わったかを一言で言えば、「デザイン単体のツール」から「コードと地続きになったデザイン環境」への転換です。その意味を、機能の中身と制約の両面から整理します。
今回のアップデートで最も注目すべきは、デザインシステムのインポート機能の刷新です。GitHubリポジトリ、デザインファイル、アップロードファイルのいずれからでも、組織のデザインシステムを取り込めるようになりました。取り込んだ後の動作がポイントです。Claudeはそのコンポーネントを使って制作し、出力をデザインシステムと照合し、ユーザーが画面を見る前に自動修正まで行います。さらに組織管理者は、標準デザインシステムを承認してチーム全体への適用と編集のロックダウンを設定できる管理者ロールも与えられました。AIが「なんとなく整ったデザイン」を出すのではなく、企業の既存資産を読み込んで「その組織のデザインルールに沿ったもの」を生成する仕組みです。これはデザイナー不在の組織にとってよりも、ブランドガイドラインを持つ組織が「AIに既存のルールを守らせる」ための機能として機能するという設計思想が読み取れます。
コードとの連携については双方向の統合が実現しました。デザインが完成したらClaude Codeへのハンドオフが行われ、コーディングエージェントはスクリーンショットや再構築なしにそのまま実装を引き継げます。逆に、Claude Codeのターミナルから /design コマンドを打つことで、開発者はコーディング環境を離れずにデザインを生成・編集・同期できます。デザインとエンジニアリングの引き継ぎは、FigmaのDev ModeやZeplinが長年取り組んできた課題です。
仕様書やコードスニペットを生成して橋渡しを試みてきましたが、デザイナーのプロトタイプとエンジニアの実装の間にはつねに情報の損失が生じてきました。Anthropicがとるアプローチは根本的に異なります。「同じAIが両方を担い、同じコンポーネントライブラリを共有すれば、変換の損失自体が起きない」という考え方です。これが正しく機能するかどうかは実運用での検証が必要ですが、FigmaやZeplinが「フォーマット変換」でギャップを埋めようとしてきたのに対し、Claude Designが狙うのは「媒介ツール不要」という別の解法です。
トークン消費問題への対応は、2段構えで行われました。まず利用制限の構造を変えました。これまでClaude Designは独立した別枠として運用されていましたが、今後はチャット・Claude Cowork・Claude Codeと共通の利用枠を使います。ほとんどのユーザーで利用余地が広がると説明されています。あわせて、1ターンあたりのトークン消費量を削減しエラー率を低下させたとしています。ただし、元記事が指摘する通り、この問題の根は構造的なものです。生成型デザインツールとしての性質上、Claudeはバリエーション一つを出すたびにレイアウト・タイポグラフィ・カラー・スペーシング・レスポンシブ・コンテンツを同時に推論し、完全な出力を生成する必要があります。これはチャットの質問応答とは根本的に異なるトークン負荷であり、効率化の施策は「限界点を先送りするもの」ではあっても、構造そのものを変えるものではありません。利用上限に敏感なユーザーにとって、この点は引き続き注意が必要です。
なお、Anthropicが同時期に公開した約40万件のClaude Codeセッションの分析によれば、コーディングの成功率を左右する主要因はコーディング能力ではなくドメイン専門知識であることが示されています。主要な職業はすべて、ソフトウェアエンジニアと遜色のない成功率でコーディングタスクをこなしたことが示されています。この知見はClaude Designの方向性と符合します。デザイナーがコードを書けるようになる必要はなく、デザインの問題を深く理解しているからこそAIを使いこなせる、という設計の前提です。
Claude Designにアクセスするには claude.ai/design またはClaudeデスクトップアプリのサイドバーから開けます。利用には Pro・Max・Team・Enterpriseのいずれかのプランが必要で、Enterpriseでは管理者によるオン設定が必要です。
【用語解説】
デザインシステム
企業やプロダクトのブランドを構成する視覚的ルールの集合体。カラー、タイポグラフィ、余白、ボタンや入力欄などのUIコンポーネント仕様が含まれる。大規模な組織ほどガイドラインの徹底が難しく、通常は専任デザイナーが運用を担う領域。今回のアップデートでClaude DesignはGitHubリポジトリ等から読み込んで自動適用できるようになった。
ハンドオフ（Handoff）
デザイナーからエンジニアへ作業を引き継ぐプロセス。従来はFigmaのDev ModeやZeplinなどが仕様書・コードスニペットを生成して橋渡しを行ってきたが、変換時の情報損失が慢性的な課題だった。Claude Designでは完成デザインをそのままClaude Codeへ渡す仕組みを採る。
Figma Dev Mode / Zeplin
デザインファイルからエンジニア向けの仕様書やコードスニペットを生成するツール。デザインとコードの橋渡しを担ってきたが、変換の過程で情報が失われることが多く、「モックアップと実装が乖離する」問題を根本解決するには至っていないと長年指摘されてきた。
【参考リンク】
Claude Design（外部）
Claude DesignへのアクセスURL。Pro・Max・Team・Enterpriseプランで利用可能。ブラウザから直接アクセスするか、Claudeデスクトップアプリのサイドバーから開ける。Enterprise組織では管理者によるオン設定が必要。
Introducing Claude Design by Anthropic Labs（外部）
Claude Design初期ローンチ（2026年4月17日）の公式発表ページ。機能概要、対応プラン、CanvaやBrilliantとのパートナーシップが記載されている。
Set up your design system in Claude Design（外部）
デザインシステムの設定手順を説明する公式ヘルプ記事。コードベース・スライドデッキ・デザインファイルなどのアセット種別と設定フローが解説されている。
【参考記事】
Anthropic’s design assistant now works better with its coding agent｜Engadget（外部）
今回のアップデート概要をEngadgetが報道。ローンチ2か月での大型改定、利用枠の共通化、100万ユーザー突破の事実を報じている。
Claude Design will now stick to your brand guidelines instead of generic AI mockups｜Digital Trends（外部）
エディター刷新とAdobe・Canva・Miro・Vercel等との新インテグレーション追加を中心に報道。
【関連記事】
Claude Design始動─Anthropicがデザインツール市場に参入、Claude Opus 4.7が下支え
Claude Designがどのようなツールとして登場したか、ローンチ時の発表はこちらからご確認いただけます。
Figma、デザインAIエージェントをキャンバスに統合 — チームメイトとして並走するベータ提供開始
Claude Designが狙う領域で、Figmaが独自のAIエージェント統合を進めている動向もあわせてご確認ください。
Claude Code、ルーティン機能を公開—眠っている間にAIが開発を進める時代へ
Claude Codeに昨今追加された非同期自動化機能との組み合わせについては、こちらの記事をご参照ください。
【編集部後記】
バイブコーディングという言葉が定着し、「コードは書くものではなく、AIに生成させるもの」という感覚が広がっています。Claude Designが目指すのは、その流れをデザイン領域にも引き込み、プロンプト一つでプロトタイプからコードまで完結させる世界です。設計思想としての方向性は明快で、FigmaやZeplinが変換で橋渡しを試みてきたのとは根本的に異なるアプローチといえます。ただ、その野心的な構造が同時に、トークンという計算資源を大量に消費することも意味しています。利用枠の共通化と効率化で対応の手は打たれましたが、生成型デザインの推論コストそのものは変わっていません。AIが「作る」ことの経済的なコストと、私たちが享受する利便性のバランスをどう引き直すか。それはClaude Designに限らず、AI活用全般で私たちが向き合い続ける問いです。
