Claudeでデザインシステムを設定する

デザインシステムは、Claudeにあなたのブランドを教えます。設定して組織内で共有すれば、チームがClaudeで作成するプレゼンテーション、デザイン、プロトタイプは、あなたのカラー、タイプ、コンポーネントから始めることができます。

1. デザインシステムとは

デザインシステムとは、企業のデザインに関する決定事項を一度だけ書き留め、人間とソフトウェアの両方が再利用できる形にしたものです。Claudeでは、主に次の要素で構成されています。

2. Claudeがあなたのデザインシステムを持つと何が変わるか

Claudeは、設定なしでもプロンプトから優れたプレゼンテーションや画面を作成できます。しかし、あなたのブランドを見たことがないため、独自のデフォルトを使用し、結果はあなたの会社らしく見えません。

デザインシステムがあれば、Claudeはあなたのカラーとタイプを使用し、デザインシステムに含まれていればチームの実際のコンポーネントも使用します。

Claudeは、プレゼンテーション、デザイン、プロトタイプを作成する際にあなたのデザインシステムを使用します。カラー、タイプスタイル、フォントはそのすべてに適用され、デザインとプロトタイプでは実際のコンポーネントも使用できます。デザインのどの部分にどのコンポーネントが使われたかを確認するには、そのデザインの該当部分を選択してください。アウトラインが異なる色で表示され、レイヤーリストにその名前が表示されます。

3. 始める前に

• デザインシステムは、Pro、Max、Team、Enterpriseプランでベータ版として提供されています。Freeプランでは利用できません。
• TeamおよびEnterpriseプランでは、オーナーが組織設定 > アーティファクトの下でデザインシステムテンプレートを管理します。Enterpriseでは最初はオフになっています。以下で説明する場所にデザインシステムが表示されない場合は、まずこの設定を確認してください。
• アクセス権を持つ人なら誰でも、デザインシステムを作成し、使用し、特定の人と共有できます。組織全体と共有したり、デフォルトに設定したりするには、組織のオーナーが必要です（セクション7）。
• チームがすでにスタンドアロン版のClaude Design（claude.ai/design）にデザインシステムを持っている場合は、再構築する代わりにそれを移行できます。詳しくは以下のスタンドアロン版Claude Designからの移行を参照してください。

4. デザインシステムを作成する

新しいデザインシステムを開始する

デザインシステムは、どの会話のメッセージボックスからでも、または設定からでも開始できます。

メッセージボックスから: +メニューを開き、デザインシステムを選択し、次に新しいデザインシステムを選択します。2つの選択肢があります。

• Claudeを使用は、新しい会話の横に空のデザインシステムを開きます。ここでブランドファイルをアップロードしたり、接続済みのツールから取り込んだり、ブランドを説明したりできます。
• Claude Codeを使用は、コードリポジトリにすでに存在するデザインシステム向けです。Claude Codeはリポジトリのトークンとコンポーネントを読み取ります。

設定から: 設定 > デザインシステムには、使用できるデザインシステムが一覧表示され、新しいデザインシステムボタンがあります。

デザインシステム自体がアーティファクトです。開いたり、編集したり、共有したりできるページであり、アーティファクトページに他の作業と一緒に表示されます。

入力方法を選ぶ

新しいデザインシステムは、どこから始めればよいかわからない場合は？という質問と、入力方法ごとのカードが表示された空のページとして開きます。カードを選択すると、Claudeがページの横の会話で開始します。ブランドファイルをアップロードでは、まずファイルを追加してからデザインシステムを作成を選択します。

GitHubから同期する

カラー、タイプ、コンポーネントがすでにコードに存在する場合に使用します。Claudeはどのリポジトリを読み取るか、何を取り込みたいかを尋ねます。コードを読み取ってページに入力し、リポジトリ自体は変更しないように設計されています。

• カラー、タイプスタイル、スペーシング、角丸の半径、フォント、ロゴ、ドキュメントがインポートされます。
• コンポーネントは選択制です。Claudeは見つけたコンポーネントを一覧表示し、どれを含めるか尋ねます。取り込むにはプロジェクトのビルドを実行する必要があるため、Claudeは先に確認します。
• インターフェースのコードがどのフォルダにあるかをClaudeに伝えると、リポジトリ全体を読む必要がなくなります。
• 後で再度同期することもできます。変更された値は更新され、新しい値は追加され、使用上の注意、概要テキスト、フォント、アセットはそのまま残ります。コードがトークンを定義しなくなった場合、Claudeはそれを一覧表示し、削除する前に確認します。

コネクタから構築する

ブランドがデザインツール、共有ドライブ、またはClaudeに接続したwikiに保管されている場合に使用します。Claudeは、どのコネクタにブランドやデザインの作業が含まれているかを確認し、見つかったものを伝え、そこから構築することを提案します。

何も接続していない場合、Claudeはブランドについていくつかの簡単な質問をし、その回答から下書きを作成します。

ブランドファイルをアップロードする

ブランドがロゴ、フォント、ガイドラインPDF、トークンファイル、完成したスライドや画面の一部など、ファイルとして保管されている場合に使用します。Claudeは追加したファイルを読み取り、そこからデザインシステムの最初の下書きを作成します。

• 完成したプレゼンテーションや製品のスクリーンショットなど、実際に使用されているブランドを示すファイルは、ガイドラインPDFだけよりもClaudeにとって多くの手がかりになります。
• 最初の下書きは意図的に小さくまとめられています。その後Claudeは、それで十分か、さらに進めるべきかを尋ねます。
• Claudeは、ファイルに示されていない値を入力する前に確認するように設計されています。

スタンドアロン版Claude Designから移行する

チームがスタンドアロン版のClaude Design（claude.ai/design）でデザインシステムを構築していた場合、再構築する代わりにClaudeに取り込むことができます。移行が完了するまでは、設定 > デザインシステムでスタンドアロンタグが付き、Claudeは会話の中でそれらを使用できません。

1回の移行で組織全体がカバーされるため、1人が全員分を行えば済み、その人がオーナーである必要はありません。移行はアーティファクトページから開始します。元のデータは変更されません。

移行された各デザインシステムには、残り1つのステップがあります。デザインシステムのオーナーがそれを開き、移行を完了するを選択して、Claudeにリクエストを送信します。リクエストがコピーされたというメッセージが表示された場合は、それをClaudeとの会話に貼り付けて送信してください。その後Claudeはファイルを再編成し、各セクションをプレビューしてページ上で編集できるようにします。それまでの間も、Claudeに変更を依頼することは可能です。

スタンドアロン版は終了予定です。終了日、共有される内容、デザインシステムを移行できない場合の対処法については、移行に関するヘルプセンターの記事を参照してください。

5. ページに目を通し、Claudeへのメモを残す

デザインシステムのページは、チームがそれをレビューし編集する場所であり、Claudeにその使い方を伝える使用上の注意を残す場所でもあります。

ページについて

概要テキスト、トークンの値、注意事項、フォント、アセットはページ上で直接編集できます。テーマを追加したり、コンポーネントのコードを変更したりするには、ページの横の会話でClaudeに依頼してください。

使用上の注意

デザインシステムをレビューする際、Claudeへの使用上の注意を残すことができます。注意事項は、カラー、タイプスタイル、コンポーネントの使い方と、使うべきでない場面をClaudeに伝えます。Claudeは、そのコンポーネントを使って構築する前に、そのコンポーネントの注意事項を読みます。

6. Claudeが構築時にどう使うか

各リクエストに対して、Claudeはまず概要を読み、その後はタスクに必要なデザインシステムの部分だけを読みます。

組織にデフォルトのデザインシステムがある場合、Claudeは確認せずにそれを使用します。デザインシステムはあるがデフォルトがない場合、Claudeはどれを使うか尋ねます。

7. 組織内で共有する

最初は、新しいデザインシステムを使用できるのはあなただけです。特定の人と共有することができ、組織のオーナーは全員と共有してデフォルトに設定することができます。

手順

1. まず自分で試す: デザインシステムにコンテンツが保存されるとすぐに、+ > デザインシステムメニューに表示されます。ブランドについて何も言わずに、普通のプレゼンテーションを依頼してみてください。そのプレゼンテーションがあなたの会社らしく見えれば、デザインシステムは機能しています。
2. レビューすべき人と共有する: デザインシステムのページ上部にある共有を選択し、招待します。相手の+ > デザインシステムメニューのあなたと共有済みの下に表示されます。変更できるようにすべき人には編集アクセス権を付与してください。
3. 組織のオーナーに全員と共有してもらう: まず共有からオーナーを招待し、オーナーアクセス権を付与します。その後、オーナーが共有で対象を[あなたの組織]の全員に設定し、確定します。これにより、デザインシステムはすべてのチームメンバーのメニューに表示されます。
4. 必要であればデフォルトに設定する: 全員と共有された後、組織のオーナーが共有でデフォルトのデザインシステムをオンにするか、設定 > デザインシステムでその横にあるデフォルトに設定を選択します。組織ごとにデフォルトは1つだけで、新しいものを設定すると古いものは置き換えられます。

すべてのデザインシステムを一箇所で確認する

設定 > デザインシステムには、自分自身のデザインシステム、自分と共有されているもの、組織と共有されているものが一覧表示されます。+ > デザインシステムメニューの下部にあるデザインシステムを管理からも同じページを開けます。

• 利用可能者列には、それぞれを誰が使用できるかが表示され、デフォルトにはデフォルトバッジが付きます。
• まだスタンドアロン版のClaude Designにあるデザインシステムには、スタンドアロンタグが付きます。
• 自分のデザインシステムは、行のメニューから開く、共有する、名前を変更する、削除することができます。

TeamおよびEnterprise組織のオーナーは、組織設定 > アーティファクトの下で組織と共有されているすべてのデザインシステムも確認でき、そこでデフォルトを設定または解除できます。

8. 日常的に使用する

チームメンバーに表示される内容

デザインシステムが全員と共有されると、すべてのチームメンバーの+ > デザインシステムメニューに表示されます。デフォルトに設定されると、プレゼンテーションやデザインを開始する際にすでに選択された状態になります。

デフォルトは、同じデバイスですでに選択しているデザインシステムを置き換えることはありません。会話でどれも使用しないようにするには、すべてのチェックボックスを外してください。メッセージボックスの下のチップにはデザインシステムなしと表示されます。

最新の状態に保つ

デザインシステムはいくつかの方法で更新できます。

• 小さな変更: ページを編集します。値、概要テキスト、注意事項は編集するたびに保存されます。
• 大きな変更: ページの横の会話でClaudeに依頼します。テーマを追加したり、コンポーネントを変更したりする場合はこの方法です。
• コードから作成されたデザインシステム: コードを変更してから、再度GitHubから同期します。注意事項とページの編集内容は保持されます。
• すでに作成したプレゼンテーションやデザイン: それぞれが作成時点のデザインシステムの独自コピーを保持しています。更新するにはClaudeに依頼してください。

トラブルシューティング

その他のリソース

• Claudeでスライドやプレゼンテーションを作成するとプロトタイプやUXにClaudeを使用するでは、デザインシステムの実際の使用例を紹介しています。
• プレゼンテーションやデザインの共有・編集については、Claudeアーティファクトでチームと協働するを参照してください。
• Claude Designにおけるデザインシステムやスタンドアロン版Claude Designからの移行について詳しくは、ヘルプセンターをご覧ください。オーナーは、組織の設定をアーティファクト管理者ガイドで確認できます。