Claude Designで自社のデザインシステムを設定する手順

Claude Designのデザインシステムは、渡した資産から配色・フォント・コンポーネントを抽出し、以後の新しいデザインに自動で適用する仕組みです。入力にできるのは、コードベース、スライドや文書、ロゴやカラーパレットのファイルです。Team・Enterpriseでは、1人が設定すれば組織の全員がそれを使います。

Claude Design本体はベータを終えてFreeを含む全プランで使えますが、デザインシステムの機能はPro・Max・Team・Enterpriseが対象です。最初に迷いやすいのは「自分のプランで使えるのか」と「誰が作るのか」なので、そこから確認します。

自分のプランでデザインシステムを使えるか

デザインシステムは、Pro・Max・Team・Enterpriseの各プランで使えます。Pro・Max・Teamでは最初からオンで、Enterpriseだけは、オーナーが組織設定の「Artifacts」で「Design systems」をオンにするまで使えません。Team・Enterpriseに限る機能と思われがちですが、個人プランでも作れます。

HIPAA対応の構成をとる組織でも、オーナーが規約に同意すれば組織設定の「Artifacts」でClaude Designをオンにできます。ただしBAAの対象外なので、保護対象の医療情報は入れません。

もう1つの落とし穴は、設定が2か所に分かれていることです。会話やArtifactsタブの中でデザインする場合と、claude.ai/designの単体のClaude Designは、それぞれ別の設定で管理されます。片方をオンにしても、もう片方は有効になりません。

権限の考え方は次のとおりです。既定では、デザインシステムを使える人なら誰でも作成・編集でき、公開・組織の既定にする操作・削除もできます。Enterpriseでは、この3操作をカスタムロールの「Claude Design Admin」権限で特定の人に限定できます。

設定先は組織設定の「Roles」です。ロールの「Admin permissions」タブにある「Product admin」で「Claude Design Admin」を「Can manage」にします。そのロールをグループに割り当て、各ユーザーのロールを「Custom」にします。権限の無い人も、公開済みのデザインシステムの作成・編集・利用はできます。公開・既定設定・削除を試すと、管理者に連絡するよう案内が出ます。権限を誰にも割り当てなければ、全員がこれまでどおり操作できます。Enterpriseの「Design systems」capabilityを使うと、作成と編集そのものもグループ単位で絞れます。

単体のClaude Designは、組織設定の「Claude Design」にある「Enable for your organization」のトグルで有効にします。この単体版は2026年12月14日に閉じるため、作ったデザインシステムの移し方はClaude Designの移行手順にまとめています。

作り方は3つ — 手持ちの素材で選ぶ

デザインシステムの作り方は1通りではありません。素材の形で入口が変わります。

チャットから作る場合は、つないだアプリ、アップロードしたファイル、Figmaファイル、スライド、ロゴ、フォントを材料に、Claudeへ作成を頼みます。コードが中心なら、Claude Codeで/design-syncを実行します。

/design-syncは、GitHubのリポジトリ、デザインファイル、アップロードした素材、手元のコードベースから、1つまたは複数のデザインシステムを取り込めます。Claudeは実際のコンポーネントで組み立て、出力をデザインシステムと照らして直してから見せます。

claude.ai/designで以前に作ったデザインシステムは、サイドバー下部の「Design」タブを開き、バナーの「Migrate team design systems」を押すと取り込めます。取り込まれたものは、Claude Codeを含むどのチャットでも使える成果物になります。整理が必要な場合は、各システムに出る「Let Claude clean it up」で、ガイド・トークン・コンポーネントをClaudeに整えてもらえます。作った後の管理は、設定の「Design systems」で行います。

claude.ai/designで作る4ステップ

ここからは、単体のClaude Design(claude.ai/design)で組織のデザインシステムを作る手順です。

デザインシステムは組織ごとに作られ、公開するとその組織のホーム画面から作るプロジェクトに使われます。作業前に、対象の組織を選んでいるかを確かめます。

素材は1種類で足りるが、完成品を1つ混ぜる

素材は1種類でも始められます。種類を増やすほど、抽出の材料は増えます。受け付ける素材は4種類です。コードベース(Reactのコンポーネントライブラリなど)と、プロトタイプ(スクリーンショット・Webの画面遷移・既存のデザインファイル)があります。スライドや文書も、PowerPointやPDFでブランドが出ていれば使えます。残る1つは、ロゴ・カラーパレット・タイポグラフィーの見本といった個別のアセットです。

精度を左右するのは、仕様書だけで済ませないことです。完成したランディングページやマーケティングサイトのほうが、色見本より、ブランドの雰囲気を多く伝えます。

取り込みの質は素材の質で決まります。整理されていないコードベースや欠けたファイルは、そのまま出力に表れます。巨大なリポジトリはブラウザが重くなりやすいので、Claude Codeからつなぎ、/design-syncで同期します。

生成された中身を確かめる

生成されるものは4つあります。色はプライマリー・セカンダリー・アクセントの配色として、文字はファミリー・サイズ・ウェイトのタイポグラフィーとして抽出されます。部品はボタン・カード・ナビゲーションなどのコンポーネント、配置は余白・グリッド・ページ構造のレイアウトパターンです。見た目の確認は、実際にプロジェクトを作って行います。

「〇〇(自社プロダクト名)のランディングページを作って」
「〇〇に関する主要指標を示すダッシュボードをデザインして」
「チームでよく使うテーマについて、1枚のワンページャーを作って」

期待と違うなら、素材の不足を疑います。素材を足してから、もう一度抽出させます。

公開の前後で何が変わるか

公開前は、他のメンバーが組織のホーム画面から新規プロジェクトを作っても、既定のデザインが使われます。「Published」をオンにした後は、組織のホーム画面から作るプロジェクトに自社のものが使われます。検証と本番反映の境目は、この1つのトグルです。

組織に共有されたデザインシステムは、組織設定の「Artifacts」の「Design systems」に、所有者と最終更新日つきで並びます。メンバーが新しい成果物を始めるときにも一覧が出て、組織の既定が選ばれた状態になっています。

このトグルが切り替えるのは新規プロジェクトの既定であり、プロジェクトの共有範囲は別の仕組みで決まります。共有範囲を確認したいときは、プロジェクトの共有設定を見ます。

ブランドが変わったとき — Remixで更新する

ロゴが刷新されても、素材を全部アップロードし直す必要はありません。組織設定のClaude Designで、対象のデザインシステムの「Open」を押し、画面右上の「Remix」を押します。左側にチャットが開くので、Claudeと会話しながら色やコンポーネントを直します。既存のシステムが起点です。

組織への広げ方 — 先にデザインシステム、あとから人を増やす

Anthropicの管理者ガイドは、デザインシステムの設定を、全社展開より先に済ませる順序を勧めています。先に全員へ開放すると、出力は動くけれどもブランドに沿わない汎用的なものになるためです。

担当には、ブランドとプロダクトの両方のデザイナーを入れることが勧められています。ブランドだけだと、画面部品の規約が抜けやすくなるからです。展開の段階は、次の4つが例示されています。

一度に招待できる人数に厳密な上限はありません。段階ごとに次は誰の番かを告知し、初期の段階では短い説明会や相談時間を設け、デザインシステムへの改善要望を集める窓口を用意することが勧められています。

Enterpriseでは、段階的な開放をカスタムロールで行えます。単体のClaude Designはカスタムロールで、会話やArtifactsタブの中のデザインは「Design」の権限で絞れます。

運用上の疑問にも、管理者ガイドは答えています。複数のブランドやチームごとにデザインシステムを持てます。メンバー全員が素材を上げ直す必要はなく、設計者が作れば、組織内のプロジェクトは自動でそれを使います。

公開したあとの共有とセキュリティの扱い

管理者から「デザインシステムを公開すると、プロジェクトの中身も見えてしまうのか」と聞かれる場面があります。管理者ガイドによると、Claude Designのプロジェクトのプレビューは、Anthropicが運用する別のコンテンツドメイン上のサンドボックス化されたiframeで動きます。プレビュー内のコードから、Claudeのアカウントやログイン、エディターには届きません。

プレビューを開くときの許可は、短時間だけ有効な署名付きトークンで確認されます。トークンは開くたびに共有権限と照合されるため、誰かのアクセスを外せば、その人はすぐに開けなくなります。公開で組織に開かれるのはデザインシステムそのものです。プロジェクトは作成者だけに見える状態から始まり、共有は「Share」で個別に決めます。

よくあるつまずき

• 作業中の組織が対象の組織かを確かめます。ステップ1で組織を選んでから進めます
• 仕様書やカラーパレット1枚だけで済ませると、レイアウトや部品の雰囲気が伝わりません。完成した画面を1つ入れます
• 検証で満足して「Published」を押し忘れると、チームには反映されません
• Enterpriseで、Design systemsがオーナーによってオンになっていないと、作る入口そのものが出ません
• 会話内のデザインと単体のClaude Designは別設定なので、片方をオンにして、もう片方も使えると思い込まないようにします

デザインシステムを設定したあとの使い方

設定はゴールではなく起点です。チームがプロジェクトを作り始めるときの基本操作は、Claude Designの使い方ガイドで扱っています。Claude Codeでコードを書いているチームなら、/design-syncでリポジトリ側のコンポーネントを同期できます。手順はClaude Code design-syncの使い方にあります。design-syncはコードからClaude Designへ、本記事の手順はブランド資産全般からClaude Designへという違いです。

Claude Designがどんなプロダクトとして発表されたかは、Claude Design発表の記事で確認できます。デザイナーの実務での使い分けはClaude Designのデザイナー実務での使い方 — 4つの活用場面にあります。

まとめ

使えるかどうかはプランの種類よりも、Enterpriseかどうか、そして会話内と単体のどちらで使うかで決まります。素材がコードならdesign-sync、ブランド資産ならチャットかclaude.ai/designと、入口を素材で選ぶと迷いません。