グラレコ

はじめに 👋

Anthropic の Claude Design に、2026年6月17日のアップデートが入りました。テーマは「ブランドに沿ったまま、毎日の業務で使えるようにする（stays on brand for daily work）」です。デザインシステムの取り込みが強化され、Claude Code との連携も深まり、エディタの安定性やトークン効率まで一気に底上げされました。

この記事では、Claude Design の今回のアップデートについて次のことを整理します。

そもそも Claude Design とは何で、何が作れるのか
今回のアップデートで強化された5つのポイント
デザインシステムの取り込みと「ブランド準拠」の仕組み
Claude Code との連携（/design と /design-sync）
使い始め方と、対応プラン・制限事項

想定読者は、Claude Design や Claude Code を業務で使っている、あるいは導入を検討しているデザイナー・PM・エンジニアの方です。なお、Claude Design は Anthropic Labs の ベータ（研究プレビュー） という位置づけで、本記事の内容は執筆時点（2026年6月）のものです。

💡 補足：Claude Design 自体が公開されたのは2026年4月17日です。今回（6月17日）はそれを「日常の実務に耐える」方向へ進化させたアップデート、という関係になっています。

Claude Design とは何か 🖌️

まず前提のおさらいです。Claude Design は、Claude と 会話しながらビジュアル成果物を作る ツールです。デザインやインタラクティブなプロトタイプ、スライド、ワンページャー、ピッチデック、ランディングページ、SNS用の素材まで、幅広い「見せるもの」を対象にしています。

画面は、左にチャット、右にキャンバスという2画面構成です。チャットで要望を伝えると、キャンバスに成果物が描き出され、そこへコメントや直接編集を重ねて仕上げていきます。

この図のポイントは、Claude Design が「プロンプトを投げて出力を受け取るだけ」ではなく、会話と直接編集を行き来しながら仕上げる 作りになっている点です。

作れるものの具体例としては、ダッシュボード、モバイルアプリのオンボーディングフロー、ランディングページ、フォーム、社内管理ツールなどが挙げられています。アクセスは claude.ai/design か、Claude デスクトップアプリのサイドバーからです。対応プランは Pro / Max / Team / Enterprise で、Enterprise では既定でオフ（管理者が有効化）になっています。

今回のアップデートの全体像 🚀

ここからが本題です。2026年6月17日のアップデートは、ひとことで言えば「試しに触るツールから、毎日の業務で使えるツールへ」という方向の強化でした。具体的には、次の5つの柱があります。

この図のポイントは、5本柱がバラバラの機能追加ではなく、「作ったものが、ブランドからも実装からもズレない」という一貫した狙いに向かっていることです。順番に見ていきます。

ちなみに、Claude Design は公開からの 初週で100万人以上 が利用したと発表されています。今回のアップデートは、その立ち上がりを受けて「本格的な実務利用」に応える内容になっています。

① デザインシステム統合の強化 🎯

今回いちばんの目玉が、デザインシステムの統合です。

これまでも Claude Design はきれいな成果物を出せましたが、「自社のブランドカラーやコンポーネントに揃っているか」は別問題でした。今回のアップデートで、自分たちのデザインシステムを取り込み、出力をそれと自動で照合して直す ようになりました。

取り込み元は1つでも複数でもよく、次のようなソースに対応しています。

GitHub リポジトリ
デザインファイル
アップロード（手元のファイル）
ローカルのコードベース（Claude Code 経由）

取り込んだあとの流れを図にすると、こうなります。

この図のポイントは、生成して終わりではなく、「生成 → 照合 → 自動修正」のループ が回るところです。プロジェクトをまたいでも、ブランドガイドラインへの準拠が保たれます。

Enterprise 向けには、もう一段の仕組みがあります。管理者が 標準のデザインシステムを承認してロック できるので、組織全体で「正しいブランド」から外れにくくなります。

💡 「AIが作るときれいだけど自社っぽくない」という、デザインAIのいちばんの悩みどころに正面から手を入れたのが今回の強化です。

② Claude Code との連携 🔗

2つめの柱は、Claude Code との連携です。デザインとコードの間にあった「受け渡しの段差」を埋めにいく機能で、2つのスラッシュコマンドが鍵になります。

/design-sync — デザインシステムを Claude Design に取り込むコマンド。GitHub リポジトリ、デザインファイル、アップロード、ローカルのコードベースから取り込めます。これを使うと、Claude Design で作るものが 既存コンポーネントから始まる ようになります。
/design — Claude Code（ターミナル）から離れずに、デザインプロジェクトを作成・編集・同期できるコマンド。

そして、Claude Design と Claude Code を 行き来しても作業が同期 されます。デザインがソフトウェアになる段階では Claude Code に引き継げて、しかも「スクリーンショットから作り直す」のではなく、既存の作業の続きから実装 が始まります。

この往復の流れをシーケンス図で示します。

この図のポイントは、デザインと実装が 一方通行ではなく、同期したまま往復できる ことです。デザイナーが整えたものをエンジニアがゼロから作り直す、という無駄が減ります。

💡 もし Claude Code で /design や /design-sync が見当たらない場合は、/update を実行して最新のスキルを取得してみてください。

③ エディタの安定性と細かい制御 🧰

3つめは、地味ですが効いてくる改善です。エディタに 直接的で細粒度のコントロール が入りました。ドラッグ、リサイズ、配置といったレイアウト操作が、思ったとおりに効くようになっています。

加えて、数百件の安定性修正 が行われたと発表されています。デザインツールは「思ったところに思ったものが置けない」だけでストレスが溜まるので、ここが安定するのは日常使いに直結します。

「会話で大枠を作り、細部は手で詰める」という、デザイナーが普段やっている進め方にツールが寄ってきた、という見方ができます。

④ トークン効率とエラーの改善 ⚡

4つめは、コストと安定動作にかかわる改善です。ポイントは2つあります。

ひとつは、使用上限（usage limits）の共有 です。Claude Design は、チャット・Claude Cowork・Claude Code と同じ使用上限を共有するようになりました。製品ごとに別枠で消費するのではなく、ひとつのプールを分け合うイメージです。

この図のポイントは、4つの製品が 同じ枠を共有 することです。どこでどれだけ使ったかを横断で考えればよくなり、見通しが立てやすくなります。

もうひとつは、効率そのものの改善です。平均ターンあたりのトークン使用量が削減 され、エラーも大幅に減った とされています。1回のやり取りが軽くなれば、同じ上限でもより多く試行錯誤できます。

⑤ エクスポートと連携先の拡充 📦

5つめは、作ったあとの「出口」の強化です。成果物を信頼できる形で外に出せるよう、エクスポートと連携先が増えました。

エクスポート形式は次のとおりです。

PDF / PowerPoint（PPTX） — 今回、信頼性が高められた形式
ZIP / HTML スタンドアロン — 成果物一式やそのまま開けるページとして
Claude Code へのハンドオフ — 実装フェーズへの引き継ぎ（②の連携）

外部ツールとのコネクタも拡充されました。発表時点で対応しているのは次の9つで、今後さらに増える予定です。

コネクタ	主な用途（パートナーコメントより）
Adobe	SNS投稿・プレゼン・フライヤーなどの作成支援
Base44	アプリ構築への連携
Canva	初期プロンプトから実用的な成果物へ
Gamma	デッキ生成後のカスタマイズを容易に
Lovable	スケッチから本番対応アプリへシームレスに移行
Miro	初期案をコラボレーティブキャンバスへ展開
Replit	設計から構築・配布まで一貫したワークフロー
Vercel	「アイデアから本番まで」のパスを短縮
Wix	デザインからヘッドレスバックエンドへ直結

連携先をマップにすると、Claude Design が「制作のハブ」として周辺ツールにつながっていく構図が見えます。

この図のポイントは、Claude Design が成果物を抱え込まず、普段使っているツールへ流していける ようになっていることです。デザインの「作りっぱなし」を防げます。

使い始め方 🛠️

実際に触ってみる流れも整理しておきます。基本は次の7ステップです。

この図のポイントは、5と6を 行き来しながら仕上げる 反復ループになっていることです。一発で完成させるのではなく、確認と修正を重ねる前提です。

対応プランと有効化の条件は、次のように整理できます。

この図のポイントは、Enterprise だけ既定でオフ だという点です。組織で使えない場合は、まず管理者設定を確認するのが近道です。

共有については、組織内での共有、リンク共有、編集権限の付与に対応しています。なお Enterprise ユーザーの共有は組織内に限定されます。

制限事項と注意点 ⚠️

便利になった一方で、ベータならではの制限も残っています。導入前に把握しておきたいところです。

コメント機能に一部の不安定さ が残っています
大規模なコードベースではパフォーマンスが落ちる ことがあります
複数人での同時編集はまだ未成熟 です
対応は Web・デスクトップのみ で、モバイルなどは対象外です

💡 「研究プレビュー（Anthropic Labs）」という位置づけなので、ここは今後の改善が見込まれる部分でもあります。本格運用に乗せる前に、チームの使い方で詰まらないか小さく試すのがおすすめです。

まとめ 🎁

今回の Claude Design のアップデートは、派手な新機能というより「毎日の実務で使えるように、土台を固めた」アップデートだと捉えると分かりやすいです。デザインシステムを取り込んでブランド準拠を自動で保ち、Claude Code とシームレスに往復し、エディタとトークン効率まで地道に改善する。どれも「試して終わり」から「業務に組み込む」への橋渡しになっています。

導入を考えるときに押さえておきたいのは、次の3点です。

ブランド準拠が自動化されたこと。デザインシステムを取り込めば、「きれいだけど自社っぽくない」を仕組みで防げます。
デザインと実装が同期したまま往復できること。/design と /design-sync で、スクショからの作り直しがなくなります。
対応プランと有効化に条件があること。Pro / Max / Team / Enterprise が対象で、Enterprise は管理者の有効化が必要です。

まずは手元の小さな成果物 — ランディングページ1枚やフォーム1つ — を、自社のデザインシステムを取り込んで作ってみるところから始めるのがおすすめです。そこで「ブランドにちゃんと沿うか」を体感できれば、チームへ広げる判断がしやすくなります。

デザインから実装までの距離が、また一段縮まりました。「作ったものが、ブランドからも実装からもズレない」 — そんな状態を、普段の道具立ての延長で目指せるようになっています。

参考 📚