Claude Media
Claude Code Artifactsのデザインシステムと共同編集
Claude Codeチュートリアル

Claude Code Artifactsのデザインシステムと共同編集

ArtifactsはCLAUDE.mdのデザイントークンを優先して配色を決め、Team/Enterpriseでは他の人を編集者にできます。設定方法と制約を解説します。

読了目安 約9分

Claude Code Artifactsは、ダッシュボードやPRレビュー画面をその場で作ってclaude.aiに公開する機能です。ビルド時にはデザインスキルが自動で配色・タイポグラフィー・レイアウトを整え、CLAUDE.mdにデザイントークンを書いておけばそれを優先して使います。Team・Enterpriseプランでは、公開したArtifactを他の人に編集者権限で渡し、同じページを一緒に更新していくこともできます。

Artifactsのデザインシステム連携とは何か

Artifactは1枚の自己完結したHTMLページで、Claude Codeがv2.1.182以降でビルド時に組み込みのデザインスキルを適用します。デザイントークンとは、色・タイポグラフィー・余白といった値に名前を付けて再利用する仕組みのことで、CLAUDE.mdやテーマファイルに記録しておくとデザインスキルがそれを見つけて使います。

このスキルはまずプロジェクト内に既存のデザインシステムがないか探し、無ければ自分の判断で配色を決めます。優先順位は明確です。その場のプロンプトでの指定が最優先、次にCLAUDE.md等に記録したデザインシステム、最後にデザインスキル自身のデフォルト判断という順に効きます。何も指定しなければ、Claude Codeが選んだ配色でページが仕上がります。

ステップ1 — CLAUDE.mdにデザイントークンを書く

プロジェクトのCLAUDE.mdか、リポジトリ内のテーマファイルに、色・フォント・余白を書いておきます。公式ドキュメントが示す例はこの形です。

## Design system
 
- Colors: primary #1a4d8f, accent #f59e0b, surface #f8fafc
- Typography: Inter for body, JetBrains Mono for code
- Spacing: 8px scale, 6px border radius

見出しの文言やリストの書式は例であって固定フォーマットではありません。色・フォント・余白がはっきり読み取れるリストであれば、デザインスキルは認識します。ここに書いた内容は、以降そのプロジェクトで作るすべてのArtifactに効きます。1回のArtifactだけ配色を変えたいときは、CLAUDE.mdを編集せず、プロンプトで直接指定する方が早く済みます。

フォントについては、Claude CodeがGoogle Fontsから書体を読み込めます。これはArtifactのページが外部から読み込める唯一のフォント源です。指定したフォントが読み込めない場合に備えて、Claude Codeは他の書体をすべて@font-faceのデータURIとしてページ内に埋め込み、どの書体にもフォールバックのフォントスタックを付けます。特定の書体を使いたいときは、プロンプトかCLAUDE.mdのデザインシステムで名前を指定します。

Artifactsの公開自体にも利用条件があります。Pro・Max・Team・Enterpriseのいずれかのプランが必要で、claude.aiアカウントでのサインインが前提です。APIキーやゲートウェイトークン、クラウドプロバイダの資格情報で使っているセッションではArtifactsを公開できません。EnterpriseプランではさらにOwnerが機能を有効化している必要があります。

ステップ2 — ページの制約を理解しておく

Artifactは静的な1ページで、Claude Codeが厳格なコンテンツセキュリティポリシー(CSP)の下でHTMLドキュメントとして配信します。デザインを作り込む前に、この制約を知っておくと手戻りが減ります。

制約内容
外部リクエスト内容フォントはGoogle Fontsのみ、スクリプトはcdnjs・jsDelivrの一部パス・Tailwind CDN・jQuery CDNの4ホストのみ読み込み可能。外部画像は完全にブロックされる
バックエンド不在内容フォームの送信内容を保存できず、閲覧者を認証することもできない。閲覧時に外部データを取得する手段はMCPコネクタ経由の呼び出しに限られる
単一ページ内容相対リンクは解決されない。複数セクションはページ内アンカーで表現する
ファイル形式内容公開できるのは.html・.htm・.mdのみ。Markdownはスタイル付きHTMLとしてレンダリングされる
レンダリングサイズ内容16MiB以下が上限。画像をデータURIで埋め込みすぎると超過しやすい

外部画像が読み込めない制約は見落としやすいポイントです。図解を入れたいときはラスター画像でなくSVG、もしくはHTMLとCSSだけで表現すると制約に触れずに済みます。Artifactの生成は出力トークンを消費するため、インタラクティブ性を絞り、大きなデータセットはページ側で要約してから埋め込む方がコストも抑えられます。

ステップ3 — 共同編集者を追加する

Team・Enterpriseプランでは、共有ダイアログで相手を追加し、役割を閲覧者(viewer)から編集者(editor)に切り替えられます。閲覧者はあなたが公開したバージョンを見るだけですが、編集者は自分のセッションから同じArtifactを更新できます。

編集者が更新する手順は、あなたが別セッションから同じArtifactを更新するときと同じです。ClaudeにそのArtifactのURLを渡すか/artifactsから添付し、Claudeが現在の内容を取得したうえで編集者の変更を反映して再公開します。ページを開いている全員に、その更新がその場で反映されます。

Pro・Maxプランには編集者という役割自体がありません。Artifactは自分専用のまま、共有は誰でも開ける公開リンクにする以外の方法がないため、複数人での同時編集が必要ならTeam・Enterpriseプランへの移行を検討する場面になります。

コメントでの共同作業とClaudeの自動返信

組織内で共有したArtifactには、共有された相手がコメントを残せます。Claude Code v2.1.221以降かつTeam・Enterpriseプランが条件で、公開リンクで共有したArtifactにはコメント機能自体がありません。既存のコメントスレッドがあるArtifactを公開リンクに切り替えたい場合は、先にスレッドを削除する必要があります。

Claudeがコメントを読むきっかけは2つです。ひとつはあなたがArtifactのURLを渡して「コメントを読んで」と頼む場合、もうひとつはコメントした人がスレッドで@claudeと書くかページ上のClaude用の操作を使って送る場合です。後者を送ると、Claude Code v2.1.228以降ではセッションがそのArtifactへのコメントを見張り続け、送られてきた瞬間に読んで返信できます。

自動返信するかどうかは権限モード次第です。承認なしで投稿できるモードならClaudeがそのまま返信し、変更を求められていればページも編集します。承認が必要な設定では「コメントが待機しています」という表示が出て、読む許可と投稿の許可を別々に求められます。Plan mode中は同様の表示が出たまま、Plan modeを抜けて指示するまで返信しません。1時間に60件のコメント・スレッド起動を処理すると、その時間はそのArtifactへの自動返信が止まり、古いコメントが1時間の枠から外れるごとに再開します。

自動返信を止める方法は3つあり、それぞれ効く範囲が違います。

止め方効く範囲
Ctrl+Cを1回押す効く範囲セッションが見張っている全Artifactへの返信が止まる。そのArtifactを再度公開すると再開する
/tasksでタスクを止める効く範囲そのArtifactへの返信だけが、セッションが続く限り止まったままになる
Ctrl+X Ctrl+Kを3秒以内に2回押す効く範囲バックグラウンドサブエージェント全停止のコマンドで、セッション終了まで全Artifactへの自動返信が止まる

使い分け早見表 — デザインシステムをどこに書くか

同じ「配色を揃える」目的でも、効かせたい範囲によって書く場所が変わります。

やりたいこと書く場所効く範囲
このArtifact1枚だけ配色を変える書く場所プロンプトで直接指定効く範囲そのビルド1回だけ
プロジェクトの全Artifactを自社ブランドに揃える書く場所CLAUDE.mdかテーマファイルにデザイントークンを記録効く範囲そのプロジェクトの以降すべてのArtifact
繰り返し使うArtifactの指示をコマンド化する書く場所よく使うプロンプトをSkillにする効く範囲呼び出すたびに同じ指示が再現される
何も指定せず任せる書く場所何も書かない効く範囲デザインスキルが自分の判断で配色を決める

CLAUDE.mdにはデザイントークン以外にも様々な設定を書けます。他の書き方の型はCLAUDE.mdを実用に引き上げる10のパターンにまとまっています。

/design-syncとは別の仕組み

Claude Codeには、Artifactのデザインスキルとは別に/design-syncというコマンドがあります。両者は名前が似ていますが対象がまったく違います。Artifactのデザインスキルは、Claude Codeの中でその場のArtifact(単発のHTML/Reactページ)を作るときにCLAUDE.mdを参照する仕組みです。一方/design-syncは、リポジトリのReactデザインシステムそのものをClaude Designという別プロダクトへアップロードするコマンドで、こちらはdesign-syncの使い方で解説しています。Artifact用のデザイントークンと、Claude Design側に同期したコンポーネントは別々に管理される点に注意します。

よくあるつまずき

  • フォントが指定通りに出ない: Google Fonts以外の外部フォントは読み込めません。ブロックされると自動でフォールバックの書体になります
  • ライブラリを読み込むスクリプトが動かない: cdnjs・jsDelivrの一部パス・Tailwind CDN・jQuery CDN以外のホストはCSPでブロックされます
  • 編集者を追加する項目が見当たらない: 編集者ロールはTeam・Enterpriseプラン限定です。Pro・Maxでは公開リンクでの共有のみになります
  • 公開リンクにしたらコメントが消えた: 公開リンクで共有したArtifactはコメント自体を受け付けません。既存スレッドは事前に削除しておく必要があります
  • Claudeがコメントに返信しなくなった: Ctrl+Cを押した直後か、/tasksでそのArtifactの監視を止めたか、1時間に60件の処理上限に達している可能性があります

よくある質問

CLAUDE.mdに書いたデザイントークンとプロンプトでの指定はどちらが優先されますか

その場のプロンプトが最優先です。次にCLAUDE.mdやテーマファイルに記録したデザインシステム、最後にデザインスキル自身のデフォルト判断という順で効きます。

編集者を追加したArtifactを間違って公開リンクにしても大丈夫ですか

編集者の役割自体はTeam・Enterpriseの組織内共有の話で、公開リンクとは別の共有形態です。ただしコメントスレッドがある状態で公開リンクに切り替えることはできないため、先にスレッドを削除する必要があります。

デザインスキルはv2.1.182より前のバージョンでも動きますか

動きません。ビルド時に自動で配色・タイポグラフィー・レイアウトを整えるこのデザインスキルは、Claude Code v2.1.182以降が条件です。それより前のバージョンでは、この自動適用は行われません。

まとめ

Artifactsのデザインは、プロンプトでの指定・CLAUDE.mdのデザイントークン・デザインスキル自身の判断という3段階の優先順位で決まります。プロジェクト全体で配色を揃えたいならCLAUDE.mdに、その場限りならプロンプトに書くのが基本です。Team・Enterpriseプランでは編集者ロールとコメントへの自動返信で複数人の共同作業が回せますが、Pro・Maxでは公開リンクでの共有に限られます。claude.ai側のArtifacts自体の使い方はClaude Projects完全ガイドでも扱っているので、あわせて確認してください。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →