Claude Design大型アップデート｜押さえておきたい新機能5つを解説

【著者プロフィール】天秤AIメディア編集部／ GMO天秤AI株式会社筆者: 生成AIの最新情報や使い方ガイド、活用事例などを紹介するメディアです。 AI初心者の方向けの情報からニッチな情報まで発信中！

📌 この記事の要約

Claude Designが大幅アップデート
2026年6月17日（米国現地時間）、AnthropicがClaude Designのベータ機能を刷新。デザインシステムの横断管理、Claude Codeとの双方向連携、キャンバス直接編集など主要新機能が一挙追加された。
デザインシステムのインポートが強化
GitHubリポジトリ・デザインファイル・rawデータの3通りで自社ルールを取り込み可能に。Claudeが自動照合・修正を行い、管理者権限によるロック機能で組織全体のガイドライン統一もしやすくなった。
Claude Codeとの双方向連携が目玉
/design-syncでデザインをClaude Codeへ引き継ぎ、/design コマンドでターミナルからデザイン編集が可能に。デザインと実装の手戻りを大幅に削減できる。
9種の外部コネクタと利用上限の統合
Adobe・Canva・Vercelなど9種のコネクタで外部ツールへの書き出しが可能になったほか、利用上限がチャット等と共通化され、より多くの操作を実行しやすくなった。

はじめに

2026年6月17日（現地時間）、AnthropicがAIデザイン制作ツール「Claude Design」のベータ機能を大幅にアップデートしました。この記事では、デザインシステムの横断管理やClaude Codeとの双方向連携など主要な新機能を整理し、実務でどう活用できるかをわかりやすく解説します。

Claude Designとは？アップデートの背景

Claude DesignのキャンバスとClaude Codeのターミナルが並列表示された画面。左側にデザイン編集パネル、中央にクラウドファンディングページのデザインプレビュー、右側にClaude Codeのターミナルウィンドウと/design-syncコマンドの入力画面が表示されている

Claude Designは、Anthropicが提供するAIを活用したデザイン制作ツールです。チャット感覚でプロンプトを入力するだけで、ランディングページやプレゼンテーションなどのビジュアルデザインを生成できます。claude.ai/design からアクセスするか、デスクトップアプリのサイドバーにある「デザイン」から利用できます。

Claudeデスクトップアプリのサイドバーメニュー。「デザイン」項目が赤枠でハイライトされている

提供開始から1週間で100万人が利用

Anthropicによると、Claude Designは提供開始からわずか1週間で100万人超が利用したとのこと。急速な普及を受けて、ユーザーからのフィードバックをもとにした大規模なアップデートが今回実施されました。

対応プランと料金

Claude DesignはClaude Pro・Max・Team・Enterpriseの各プランでベータ版として提供されており、追加料金なしで既存のサブスクリプションに含まれます。Enterpriseユーザーの場合はデフォルトで無効になっているため、管理者が組織設定で有効化する必要があります。なお、Enterprise環境では成果物の共有は組織内のみに限定されます。

ClaudeのプランページのUI。無料・Pro・Maxの3プランの料金と機能一覧が表示されており、ProプランにはClaude Designが含まれることが明記されている

Claude Designの新機能5選

① デザインシステムのインポートが大幅強化

「デザインシステム」とは、ブランドカラー・フォント・ボタンの形など「見た目のルールをまとめた決まりごと集」のこと。これがあると、誰が作っても会社として統一感のある仕上がりになります。今回、この決まりごと集をClaude Designに読み込ませる（インポートする）機能が刷新されました。

あらかじめ自社のルールを読み込ませておけば、Claudeは最初から自社の色・フォント・パーツを使ってデザインを作ってくれます。読み込ませる方法は GitHubリポジトリ・デザインファイル・rawデータのアップロードの3通りで、1つでも複数でも取り込み可能。エンジニアでない方はアップロードを使えば十分です。さらにClaudeは、できあがったデザインを自社のルールと照合し、ズレがあればユーザーが確認する前に自動修正します。

大規模なチーム向けには新たな管理者権限も追加されました。承認済みの標準システムを1つ設定して編集をロックできるため、社内ガイドラインに沿ったデザインを組織全体で統一しやすくなりました。

Claude Designのデザインシステム設定画面。GitHubリポジトリのリンク、コンピューターからのフォルダアップロード、.figファイルのアップロード、フォント・ロゴ・アセットの追加という4つの取り込み方法が表示されている

② Claude Codeとの双方向連携が可能に

今回のアップデートの目玉ともいえる機能です。Claude Codeとの行き来がスムーズになりました。

Claude Designからコーディングへ渡す場合： まず /design-syncで自社のデザインのルールを取り込んでデザインを作成。完成したら「Export（書き出し）」から「Hand off to Claude Code」を選ぶだけで、デザイン・使用パーツ・「なぜこうしたか」という意図までひとまとめにしてClaude Codeへ受け渡せます。スクリーンショットから作り直すのではなく、その続きから開発できます。
Claude Codeからデザインへ戻す場合： /designコマンドを使えばターミナルを離れることなく、デザインプロジェクトの作成・編集・同期が可能です。

この連携により、「デザインとコーディングを行き来するたびに手戻りが発生する」という従来の課題が大きく解消されます。

Claude Designの「Send to...」メニュー。Claude Code・Adobe for creativity・Canvaの3つの送信先が表示され、それぞれに「Send」ボタンが付いている

③ キャンバス上で直接編集できるエディタ

AIが生成したデザインを修正する方法は、これまでチャットで文章を打つだけでした。今回のアップデートで、より直感的な4つの編集方法が使えるようになっています。

チャットで「全体をもっとシンプルに」といった大きな変更を指示するほか、キャンバス上の特定の要素をクリックしてコメントを残す（インラインコメント）、テキストを直接クリックして書き換える、スペース・色・角の丸みなどを調整するスライダーを操作するという4通りの方法で編集できます。慣れ親しんだデザインツールのように、見ながら触って直せるイメージです。

Anthropicは数百件の安定性修正も実施しており、日常的な業務使用に耐えうる品質に近づいています。

④ 利用上限がチャットなどと共通化

Claude Designの利用上限が、チャット・Claude Cowork・Claude Codeの利用枠と統合されました。これにより、多くのユーザーはこれまでよりも多くの操作を実行できるようになります。また、同じ結果を得るための1ターンあたりのトークン消費量も削減され、エラー発生率も大幅に下がったとのことです。

⑤ 外部ツールへの書き出しコネクタが9種に拡大

PDF・PowerPointへのエクスポートに加え、以下の外部サービスへの書き出しコネクタが利用可能になりました。

Claude Designの「Add a destination」パネル。Adobe・Base44・Gamma・Lovable・Miro・Replit・Vercel・Wixの各コネクタが一覧表示されている

Adobe
Base44
Canva
Gamma
Lovable
Miro
Replit
Vercel
Wix

デザインのアイデア出しをClaude Designで行い、仕上げや公開を使い慣れた既存ツールで完結させるという分業ワークフローが実現しやすくなっています。今後もコネクタの拡充が予定されています。

Claude Design × Claude Codeの連携ワークフロー

デザインから始める場合（/design-syncコマンド）

デザイン先行でプロジェクトを進める場合の流れは以下の通りです。

claude.ai/design またはデスクトップアプリでClaude Designを開く
/design-sync コマンドでデザインシステムを取り込む
プロンプトでデザインを生成・キャンバス上で直接調整する
「Export」→「Hand off to Claude Code」でClaude Codeに引き継ぎ、そのままコーディングを進める

コーディングから始める場合（/designコマンド）

コード実装が先行している場合も、Claude Designとのシームレスな連携が可能です。

ターミナル上で /designコマンドを実行する
既存のコードベースからデザインプロジェクトを作成・編集する
ライブプロトタイプとして確認しながら調整を加える
そのままClaude Codeで実装を続けてデプロイまで完結させる

どのチームに向いているか？活用シーン別まとめ

Claude Designの新機能は、チームの規模や役割によって特に恩恵を受けやすいシーンが異なります。

活用シーン別にClaude Designの新機能をまとめた表。個人のデザイナー・デザイン×エンジニア連携チーム・社内デザインガイドラインを持つ企業・マーケターや非デザイン職の4つのシーンと、それぞれで活用できる新機能が対応している

特に注目したいのは、デザインとエンジニアリングの境界線を越えて作業できる点です。従来は「デザイナーがFigmaで作ったものをエンジニアが見ながら実装し直す」という手戻りが当然のように発生していました。Claude DesignとClaude Codeの連携は、このプロセスを根本から変える可能性を持っています。AIがデザインの意図をコードとして引き継ぐことで、プロトタイプから実装までの工数を大幅に短縮できるでしょう。

よくある質問（FAQ）

Q. Claude Designは無料で使えますか？ Claude DesignはClaude Pro・Max・Team・Enterpriseの各有料プランに追加料金なしで含まれています。現時点では無料プランでの提供はされていないため、利用するにはいずれかの有料プランへの加入が必要です。

Q. Claude Codeを持っていなくてもClaude Designは使えますか？ はい、Claude Designは単独でも利用できます。Claude Codeとの連携機能はあくまでオプションであり、デザイン生成・キャンバス編集・外部ツールへの書き出しといった主要機能はClaude Codeなしでも問題なく使用できます。

Q. デザインシステムはどのような形式で取り込めますか？ GitHubリポジトリ・デザインファイル・rawデータのアップロードの3つの方法から取り込むことができます。複数のデザインシステムを同時に読み込むことも可能で、Claudeがコンポーネントを参照しながら制作を進めます。

まとめ

2026年6月17日にAnthropicが発表したClaude Designのアップデートは、単なる機能追加にとどまらず、デザインとコーディングを一気通貫でつなぐワークフローの実現という点で注目に値します。

主なアップデートポイントを振り返ると、以下の通りです。

デザインシステムのインポートが柔軟になり、チーム全体で一貫性を保ちやすくなった
「Hand off to Claude Code」ボタンでデザインの意図ごとClaude Codeに引き継げるようになった
キャンバス上での4通りの直接編集とエラー削減で日常業務に使いやすくなった
Adobe・Canva・Vercelなど9種のコネクタでそのまま外部ツールへ出力できる

まずは claude.ai/design にアクセスして、自社のデザインシステムを取り込むところから始めてみてください。プランをお持ちであれば今日から追加費用なしで試せます。Claude CodeとあわせてAIネイティブなデザイン開発フローを構築できるか、ぜひ実際に体験して確かめてみてください。

参照ソース一覧

Anthropic公式ブログ「Claude Design now stays on brand for daily work」（2026年6月17日）：https://claude.com/blog/claude-design-stays-on-brand-for-daily-work