Anthropic、「Claude Design」をアップデート　デザインシステム連携やClaude Code連携に対応

AIでウェブサイトやバナーを生成させると、見た目は整っていても自社のブランドガイドラインから完全に浮いてしまうことがあります。結局デザイナーがFigmaで一から作り直すことになる、という経験をした人は少なくないはずです。

公開初週で100万人以上が利用したAnthropicの「Claude Design」が、そうした現場の課題に直接切り込む大幅アップデートを発表しました。Claudeデスクトップアプリのサイドバーに常駐するようになったほか、claude.ai/designからも利用可能です。

独自のデザインシステムを厳格に反映

今回の目玉は、独自デザインシステムの読み込み機能の大幅な刷新です。GitHubリポジトリやデザインファイル、直接アップロードによって、1つまたは複数のデザインシステムを取り込めるようになりました。

Claudeは取り込んだコンポーネントを使ってレイアウトを組み立てるだけでなく、出力前にデザインシステムと照合し、色やパーツのズレを自動修正してから表示します。組織利用向けには、管理者が社内標準のシステムを承認して編集をロックできる権限も追加されました。

キャンバスの操作性も向上しています。要素を直接ドラッグ、リサイズ、整列できるレイアウト操作が加わり、何百もの安定性修正が施されました。また、利用制限枠がClaude Codeなど他の作業と統合されたため、上限に引っかかる頻度も減っています。

スクショを投げ合う時代は終わり、Claude Codeと直接連携

開発者にとって最も実用的なのが、ターミナル作業ツール「Claude Code」とのシームレスな同期です。

これまでは画面モックアップのスクリーンショットをAIに見せてコード化させる手法が一般的でしたが、これからは「/design-sync」コマンドでデザインシステムを取り込み、Designで作ったレイアウトをそのままClaude Codeに引き継げます。ゼロからの再構築や画像認識の曖昧さに頼る必要はありません。

逆にターミナルやデスクトップのClaude Code側から「/design」を呼び出してプロトタイプを生成したり、既存コードを動くプロトタイプに変換することも可能です。成果物はPDFやPowerPoint、HTMLのほか、Adobe、Canva、Lovable、Miro、Replit、Vercel、Wixといった外部ツールに直接エクスポートできます。

なぜ重要か

このアップデートは、生成AIツールが単なる「アイデア出しのおもちゃ」から「本格的な業務パイプライン」へと踏み出したことを意味しています。

これまでのデザイン生成AIは、きれいな画像を出すだけで自社プロダクトには流用できないケースがほとんどでした。GitHubなどからデザインシステムを読み込ませ、コンポーネント単位で整合性を保てるなら、エンジニアや個人開発者にとってプロトタイプ制作のハードルは劇的に下がります。有料プランユーザーであれば、今すぐ試す価値が十分にあります。

Anthropicのアプローチも巧みです。FigmaやAdobeと真っ向から衝突するスタンドアローンなツールを目指すのではなく、Claude Codeを軸に開発現場のハブとなり、Adobe、Canva、Vercelといった既存サービスと連携するオープンな姿勢をとっています。これによって、上流の設計から下流のデプロイまでをClaude経由で完結させやすくなります。

懸念点があるとすれば、複雑に入り組んだ大規模企業のデザインシステムを、GitHub連携だけで破綻なく解釈できるかどうかです。しかし、プロンプトでの曖昧な指示を捨て、コードベースのルールでAIを縛る方向に舵を切ったことは、実務向けAIツールとして極めて合理的な進化だと言えます。