Claude Code Artifactsのフォント変更とデザイン指定の方法
Artifactsのフォントや配色はプロンプトかCLAUDE.mdで指定できます。書体の入手先の制約、artifact-designという名前の扱い、共同編集の条件まで。
Claude Code Artifactsは、ダッシュボードやPRレビュー画面をその場で作ってclaude.aiに公開する機能です。ビルド時にはデザインスキルが配色・タイポグラフィー・レイアウトを整え、CLAUDE.mdにデザイントークンを書いておけばそれを優先して使います。Team・Enterpriseプランでは、公開したArtifactを他の人に編集者権限で渡し、同じページを一緒に更新できます。
Artifactのページの書体を変えたいときは、プロンプトかCLAUDE.mdに書体の名前を書きます。claude.aiのチャット画面の書体を変えたいなら外観設定で切り替えます。「artifact-design」という名前のコマンドは公式のコマンド一覧になく、組み込みのデザインスキルは自動で適用されます。
この記事は「配色が思い通りにならない」「フォントや外部ライブラリが効かない」「共有相手が編集できない」「コメントに返信してくれない」といった症状から逆引きできるように、原因になりやすい順に並べています。
配色が思い通りにならないとき — 効いているのはどの指定か
Artifactは1枚の自己完結したHTMLページです。Claude Codeは組み込みのデザインスキルを適用し、まずプロジェクト内に既存のデザインシステムがないかを探してから、自分の配色を決めます。デザイントークンとは、色・タイポグラフィー・余白といった値に名前を付けて再利用する仕組みのことです。
配色が決まる優先順位(上ほど強い)
- 1
その場のプロンプト
「この1枚だけ暗い背景で」のように直接指定します。公式はプロンプトの指定を
CLAUDE.mdより優先すると説明しています。 - 2
CLAUDE.mdかテーマファイルの記録
プロジェクトの全Artifactに効きます。自社ブランドに揃えたいときの置き場所です。
- 3
デザインスキル自身の判断
上の2つが無いときだけ効きます。何も指定しなければ、Claude Codeが選んだ配色で仕上がります。
何も指定しない場合の既定の作風はモデルにも左右されます。Opus 4.8には暖色クリーム背景・セリフ体の作風があり、避けたいときは具体的な代替仕様が要ります。よく使うプロンプトをSkillにしておけば、毎回同じ指示を再現できます。
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見出しやリストの書式は例で、色・フォント・余白がはっきり読み取れるリストならスキルは認識します。書ける項目の全体は公式に列挙されていないので、色・フォント・余白の3種類が確実な範囲です。CLAUDE.mdにはほかにも様々な設定を書けるため、書き方の型はCLAUDE.mdを実用に引き上げる10のパターンを参照してください。
フォントを変更するには — Claudeが読み込める書体の範囲
Artifactのページの書体には、専用の設定画面やコマンドはありません。変えたい書体の名前をプロンプトかCLAUDE.mdに書き、Claudeにページを作り直してもらいます。
- 1枚だけ変えるなら、プロンプトに「本文はNoto Sans JP、コードはJetBrains Monoで」のように書く
- 全Artifactで揃えるなら、上の
Typography:の行に書体を書いておく - 書体を指定しなければ、デザインスキルが選ぶ
書体の入手先はGoogle Fontsだけが外部から読み込める経路です。それ以外の書体はClaude Codeが@font-faceのデータURIとしてページ内に埋め込み、どの書体にもフォールバックのフォントスタックを付けます。Google Fontsに届かない環境でも、フォールバックの書体で表示は崩れません。
「artifact-design」とは何か — 組み込みデザインスキルの扱い
artifact-designは、Artifactsの見た目を整える組み込みデザインスキルを指して使われる名前です。公式のArtifactsのページはこれを「組み込みのデザインスキル」と呼び、Artifactを作るときにClaudeが自動で適用すると説明しています。コマンド一覧にはスキルとして/artifact-capabilitiesと/artifact-diagrammingが載っていますが、/artifact-designという項目は載っていません。自分で呼び出す操作はなく、見た目を変える手段は、上で見たプロンプトとCLAUDE.mdの指定です。
外部フォントやスクリプトが効かないとき — ページの制約
Artifactは静的な1ページで、厳格なコンテンツセキュリティポリシー(CSP)の下で配信されます。デザインを作り込む前に、次の制約を知っておくと手戻りが減ります。
| 制約 | 内容 |
|---|---|
| 外部リクエスト | 内容フォントはGoogle Fontsのみ。スクリプトはcdnjs・unpkg・Tailwind CDN・jQuery CDNと、jsDelivrの/npm/などの一部パスのみ。unpkgはv2.1.281の変更履歴で追加が告知されています |
| ブロックされるもの | 内容外部画像、上記以外のスクリプト・スタイルシート・フォント。fetch・XHR・WebSocketは、ページ自身のオリジンとGoogle Fontsのホストにしか届かない |
| バックエンド不在 | 内容閲覧者を認証できない。外部データの取得はclaude.ai経由のMCPコネクタ呼び出しで行う |
| ダウンロード | 内容ページ自身がダウンロードを開始できない。CSV出力などはダウンロード機能の宣言が必要で、アカウント単位で有効化される |
| 単一ページ | 内容相対リンクは解決されない。複数セクションはページ内アンカーで表現する |
| ファイル形式 | 内容.html・.htm・.mdのみで、UTF-8か、BOM付きのUTF-16LEとして読める必要がある。Markdownはスタイル付きHTMLで表示される |
| レンダリングサイズ | 内容16MiB以下。データURIの画像を詰め込むと超えやすい |
外部画像は完全にブロックされ、ラスター画像はデータURIでの埋め込みになります。図解はSVGか、HTMLとCSSだけで組むと制約に触れず、出力トークンも抑えられます。生成には出力トークンを使うため、インタラクティブ性を絞り、大きなデータはページ側で要約してから埋め込むとコストが下がります。
会社のネットワークでArtifactが崩れる場合は、IT管理者に許可を頼む先が決まっています。ビューアーは*.claudeusercontent.comの隔離されたオリジンから配信され、claude.aiと並べて許可する必要があります。フォント用のfonts.googleapis.comとfonts.gstatic.comは任意で、ブロックしてもフォールバックの書体で描画されます。ライブラリ用のCDNはcdnjs.cloudflare.com・cdn.jsdelivr.net・cdn.tailwindcss.com・code.jquery.com・unpkg.comです。これらをブロックすると、依存する部分だけが動かなくなり、フォントと違って代替は働きません。
そもそもArtifactが公開されないとき — 利用条件
Claudeが「公開できない」と答えるか、リンクなしでローカルにHTMLを書くだけのときは、次のいずれかが満たされていません。
- Pro・Max・Team・Enterpriseのいずれか。EnterpriseはOwnerが管理画面で有効化している必要があります
/loginで入ったclaude.aiアカウントのセッション。APIキー、ゲートウェイトークン、クラウドプロバイダの資格情報のセッションでは公開できません- モデル提供元がAnthropic API。Amazon Bedrock、Google Cloudのエージェントプラットフォーム、Microsoft Foundryでは使えません
- 組織でCMEK(顧客管理の暗号鍵)、HIPAA、ゼロデータリテンションが有効でない
- 面がClaude Code CLI、またはClaudeデスクトップアプリ1.13576.0以降(Claude TagとArtifactsの両方が有効なら、Claude Tagのセッションからも公開できます)。Agent SDK、GitHub Action、MCPサーバーの文脈では既定でオフで、
CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFICを設定した場合もオフになります
組織のポリシーはapi.anthropic.comから読み込まれるため、プロキシやVPNが止めているとArtifactは使えなくなります。バックグラウンドで再試行されるので、通り道を開ければポリシーの読み込み後に使えるようになります。
共有相手が編集できないとき — プランごとの共有の違い
共有できる範囲はプランで決まる
Pro・Max
作ったArtifactは自分だけが見られ、共有する方法は誰でも開ける公開リンクだけです。編集者という役割自体がありません。コネクタを呼び出すArtifactは全プランで公開リンクにできないため、Pro・Maxでは共有手段がなくなります。
Team・Enterprise
組織内の特定の人や全員に共有でき、共有ダイアログで閲覧者(viewer)から編集者(editor)へ役割を切り替えられます。公開リンクは、Ownerが組織で有効にするまでオフです。
閲覧者は公開されたバージョンを見るだけです。編集者は、ArtifactのURLをClaudeに渡すか/artifactsから添付します。Claudeが現在の内容を取得して変更を反映し、再公開すると、ページを開いている全員にその場で更新が届きます。
/artifactsは自分が所有するArtifactと共有されたArtifactの一覧で、選んでoで開き、cでリンクをコピーし、Enterでセッションに添付します。v2.1.208以降で使え、Enterでの添付はv2.1.216以降です。URLも添付も渡さない別セッションは、更新ではなく新しいArtifactを作ってしまいます。
公開リンクをサインインせずに開いた人と組織外の人には、公開者の名前の代わりにContent is user-generated and unverified.と表示されます。組織内でサインインしている人には名前が出ます。複数人での同時編集が必要なら、Pro・MaxではなくTeam・Enterpriseが前提になります。
コメントにClaudeが返信しないとき
組織内で共有したArtifactには、共有された相手がコメントを残せます。条件はClaude Code v2.1.221以降とTeam・Enterpriseプランで、公開リンクで共有したArtifactはコメントを受け付けません。ページにはComments aren't available while this Artifact is shared publicly.と出ます。既存のスレッドがあるArtifactを公開リンクに切り替えるなら、先にスレッドを削除します。
コメントが読まれるきっかけは2つです。あなたがURLを渡して「コメントを読んで」と頼む場合と、編集できる人がスレッドでSend to Claudeを使うか@claudeと書いて、スレッドを有効にした場合です。Claudeが返信や解決をできるのは、有効になったスレッドだけです。
後者はv2.1.228以降なら、セッションが動いている間ずっとArtifactを見張り、届いた瞬間にClaudeが読めます。ただしv2.1.283以降は、自動で始まった見張りが3.5時間何も起きないと終わります。再公開するか見張り直すと再開します。届いたときの動きは権限モードで決まります。
コメントが届いたときの3つの動き
自動で返信する
投稿に承認が要らない権限モードのときです。読んで返信し、変更を求められていればページも編集して、
Auto-replied to comment thread on Artifact: <name>などと表示します。承認を待つ
Plan mode以外で投稿に承認が必要なときは、
Comments are waiting on Artifact: <name>と出ます。読む許可と投稿の許可を別々に求められます。Plan modeで止まる
同じ表示が出たまま、Plan modeを抜けて読むよう頼むまで返信しません。
1時間に60件のコメント・スレッド起動を処理すると、そのArtifactへの自動返信は止まり、古いコメントが1時間の枠から外れるごとに再開します。この上限に達したときも上のComments are waitingが1回だけ表示されます。
最初に確認する条件もあります。インストールやv2.1.221未満からの更新の最初のセッションでは、コメントをまだ読めないことがあります。新しいセッションで頼み直します。フィーチャーフラグの取得をオフにしていると、見張り自体が動きません。
自動返信を止める3つの方法
/tasksには、セッションが見張っているArtifactが一覧で並びます。止め方によって効く範囲と再開の条件がまったく違います。
| 止め方 | 効く範囲 | 再開 |
|---|---|---|
| アイドルのプロンプトでCtrl+Cを1回 | 効く範囲見張っている全Artifact | 再開次のメッセージを送ると再開 |
/tasksでタスクを止める | 効く範囲そのArtifactだけ | 再開再公開しても再開せず、セッションを再開しても止まったまま。頼めば再開 |
| Ctrl+X Ctrl+Kを3秒以内に2回 | 効く範囲全Artifact(バックグラウンドサブエージェント全停止のコマンド) | 再開セッション終了まで。頼んでも戻らない |
コメントを届けるサービスが止まったときは、Claude Codeがしばらく再接続を試みたあと、見張りをやめます。
/design・/design-syncとは別の仕組み
Artifactのデザインスキルは、その場のページを作るときにCLAUDE.mdを参照する仕組みです。名前の似たコマンドは対象が違います。/designは、UIのモックや画面遷移をキャンバス上のアートボードとして下書きし、Claude Designのartifactとして公開するコマンドです。/design-syncは、リポジトリのReactデザインシステムをClaude Designにアップロードするコマンドで、使い方はdesign-syncの使い方にあります。Artifactが参照するのはCLAUDE.mdの記述で、/design-syncでアップロードした内容との連動は公式に書かれていません。
まとめ
共同編集やコメント返信が効かないときは、プランと公開リンクの有無を最初に見ます。claude.ai側のArtifacts自体の使い方はClaude Projects完全ガイドで扱っています。