アーティファクト

アーティファクト（artifact）は、Claude Code がセッションから claude.ai 上の非公開 URL に公開する、ライブで操作できる Web ページです。ブラウザで開くと、セッションが進むにつれてその場で更新されます。他の人にも見せたいときは、ページ上部の共有から共有します。

• 対象プランは Pro・Max・Team・Enterprise で、/login でサインインしたセッションが必要です（使える条件は後述）
• 端末の文字では見づらい出力に向きます：注釈つきの差分、ダッシュボード、案の並べ比較、長い作業の進捗の記録
• 公開した後は、同じ URL を更新でき、共有相手にはその場で反映されます
• MCP コネクタ（MCP サーバーをつなぐ）から、ページを開くたびに最新のデータを取れます
• 1つの自己完結したページで、バックエンドはありません。バックエンドのある社内ツールは、自前のインフラにデプロイします

作る#

出力がページに向くとき、Claude が自分で公開することがあります。頼むときは、機能の名前を言うか、欲しい見た目の出力を言葉で説明します。テキストで読むより見るほうが楽なもの（注釈つきの差分、グラフ、比較する案の集まり）が向きます。

Make an artifact that walks through this PR with the diff annotated inline.

Build a dashboard artifact of last week's deploy failures by service and keep it updated as you investigate.

• 場所を指定しなければ、Claude は、プロジェクトの外の一時ディレクトリに HTML か Markdown のファイルとしてページを書き、それを公開します
• プランモード以外では、自分が入力したプロンプトに応じて Claude が公開する新しいアーティファクトは、権限プロンプトも分類器の審査もなく通ります。ただし、コネクタの呼び出しやファイルのダウンロードなど、ページの実行時の機能を宣言する公開は除きます。プランモードでは、各アーティファクトの最初の公開の前に確認が出ます
• アーティファクトは、共有するまで自分だけに見えます。公開（public）で共有した後は、会話ごとに1回、変更前に承認を求めます（権限モードの auto では、分類器が審査します）
• フィーチャーフラグの取得をオフにしていると、各アーティファクトの最初の公開の前に確認が出ます（auto では分類器の審査）
• 初回の公開後、Claude が URL を出力し、ブラウザで新しいページが開きます。claude.ai・Claude Desktop・Claude モバイルアプリから、リモートコントロール経由でプロンプトを送った場合は、セッションを動かすマシンでタブが開かず、次にターミナルで入力したプロンプトから Claude が公開したときに開きます。Ctrl+] で、セッションの直近のアーティファクトをいつでも開き直せます
• タイトルと絵文字は Claude が選び、claude.ai のギャラリーと共有リンクに出ます。ページの内容に合うブラウザのタブのアイコン（グラフやカレンダーなど）も選べます。指定したければ頼みます
• 自動でブラウザを開かないようにするには、環境変数 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 を設定します
• 「公開できない」と返す、またはリンクなしでローカルの HTML ファイルを書くときは、そのセッションでツールが有効ではありません（使える条件を確認）

更新する#

ページの修正を頼むか、長い作業の途中で再公開させます。Claude は元のファイルを編集し、同じ URL に公開し直します。

Add a per-region breakdown below the summary chart and republish.

ページを開いている人には、その場で更新が出ます。公開のたびに版（バージョン）になり、ページ上部の「Share」から、閲覧者に見せる版を選べます。別のセッションから更新するには、Claude にその URL を渡すか、/artifacts から添付します（どちらもなければ、新しいセッションは更新ではなく新しいアーティファクトを作ります）。

Update https://claude.ai/code/artifact/5fbea6f3-... with today's numbers.

探し直す（/artifacts）#

Claude Code で /artifacts を実行すると、自分が所有するものと、共有されたものがすべて一覧されます。Claude Code v2.1.208 以降が必要です。一覧は claude.ai アカウントから読むので、新しいセッションでも、/clear の後でリンクが端末から流れたときでも使えます。

共有する#

新しいアーティファクトは自分だけに見えます。共有するには、ブラウザで開き、ページ上部の「Share」を使います。ヘッダーには、作った全アーティファクトを一覧するギャラリー（claude.ai/code/artifacts）へのリンクもあります。

組織内の閲覧者は、公開した人を見られます。組織内に共有したものはタイトルメニューに名前が出て、公開のものは組織内のサインイン済みの閲覧者にヘッダーに出ます。サインインせずに公開リンクを開いた人や、組織の外の人には、名前の代わりに Content is user-generated and unverified. と出ます。

一緒に編集してもらう#

共有した相手は、既定では閲覧者で、公開した各版を見られますが、変更はできません。Team・Enterprise では、共有ダイアログで人を追加し、役割を「viewer」から「editor」に切り替えて、編集者にできます。編集者は、自分が別のセッションから更新するのと同じ方法（アーティファクトの URL を Claude に渡すか、/artifacts から添付する）で、Claude に現在の内容を取らせ、変更を足して再公開させます。ページを開いている全員に、更新がライブで出ます。

共有されたアーティファクトを読む#

共有されたアーティファクトを Claude に読ませるには、URL を渡すか、/artifacts から添付します。Claude は、他の人が書いたページを、WebFetch で Web ページを読むのと同じ方法で読みます。聞いたことの要約が返り、ページの生のままではありません。ページに書かれた指示は、中継せず、書いてあったと報告します。Claude Code はページの全ソースをローカルのファイルにも保存し、正確な内容が要るとき（編集者として再公開するときなど）に Claude が開けます。

次の場合、Claude Code は、権限モードやルールが求める確認に加えて、Claude がアーティファクトを読む前に承認を求めます。

• ネットワークアクセスのないクラウドセッション：クラウド環境のアクセスレベルが「None」のとき。auto mode では、分類器が代わりに承認できる。Cowork のセッションでは、承認は自分だけのもの
• 別の組織の公開アーティファクト：auto mode でも先に聞く。bypassPermissions モードのように Claude Code が聞けない場所では、Claude はそのアーティファクトを読めない。これらを読めるのは、フィーチャーフラグの取得がオンのあいだだけ
• 作成者かネットワーク設定を確認できない場合：誰が作ったかを確認できない、またはクラウドセッションのネットワーク設定を確認できないときは聞く。承認が及ぶのはその1回のリクエストだけ
• プランモード、またはフィーチャーフラグの取得をオフにした場合：プランモードのとき、またはフィーチャーフラグの取得をオフにしているときは、組織の他の人が作ったアーティファクトを Artifact ツールが読む前に聞く

WebFetch でアーティファクトを読むときは、WebFetch 自身の確認の規則がそのまま当てはまります。

コメントを集める#

組織内に共有したアーティファクトには、共有相手がページにコメントを付けられ、Claude にそのコメントを読ませて返信させられます。Claude Code v2.1.221 以降が必要です。Claude がコメントを読むのは、次の2つの場合です。

• 自分が読むよう頼んだとき：アーティファクトの URL を Claude に渡してコメントを求める。Claude は各スレッドを一覧し、編集できる人が Claude に送ったコメントに印を付ける
• 編集できる人が Claude にコメントを送ったとき：ページのスレッドで、「Send to Claude」でコメントを送るか、コメントに @claude を付ける。どちらでも、そのスレッドを有効にする

Claude が返信や解決をできるのは、有効になったスレッドだけです。ほかのスレッドは、人がページで解決するまで開いたままです。閲覧者には、各返信が「自分経由の Claude」からのものとして出ます。公開で共有した場合、公開リンクだけでアクセスする人には、コメントが見えず、追加もできません（既存のコメントのスレッドは残り、自分と編集者は読み返信できます）。

Read the comments on https://claude.ai/code/artifact/5fbea6f3-... and make the changes the commenters ask for.

「コメントを読めない」と Claude が言うときは、次を確認します。

• Claude Code が v2.1.221 以降であること
• インストール、または v2.1.221 より前からの更新後の、最初のセッションでないこと（その最初のセッションでは、まだコメントを読めないことがあるので、新しいセッションを始めて、もう一度頼む）
• フィーチャーフラグの取得をオフにしていないこと

Claude が自分で返信する#

セッションがアーティファクトを公開した後、Claude Code はそのアーティファクトのコメントを監視します。編集できる人が Claude にコメントを送ると、すぐセッションに届き、頼まなくても、Claude がスレッドを読んで返信できます。Claude Code v2.1.228 以降が必要で、フィーチャーフラグの取得をオフにしていると監視しません。送られたコメントが届いたときの動きは、権限モードで決まります。

1時間以内に、そのアーティファクトで送られたコメントとスレッドの有効化の合計が60件に達すると、Claude は自分での返信をやめます（Comments are waiting on Artifact: <name> が1回出て、その1時間分のコメントが古くなると再開）。/tasks で、セッションが監視している各アーティファクトが、ライブ更新のタスクとして出ます。自分での返信を止める方法は3つです。

• アイドルのプロンプトで Ctrl+C を1回押す：セッションが監視するすべてのアーティファクトで返信を止め、次のメッセージを送ると再開する
• /tasks でそのタスクを止める：頼んで再開させるまで、そのアーティファクトでの返信を止める。再公開しても再開せず、セッションを再開しても止まったまま
• Ctrl+X Ctrl+K を3秒以内に2回押す：実行中のバックグラウンドのサブエージェントをすべて止めるのと同じ操作で、セッションの残りの間、すべてのアーティファクトでの返信も止める。返信の再開を頼んでも、この停止は解けない

コメントを届けるサービスが使えなくなる、または応答しなくなると、Claude Code はしばらく再接続を試みた後、セッションが監視していた各アーティファクトの監視をやめます。

Claude Code が自分で始めた監視は、アーティファクトに数時間動きがないと終わることがあります。監視を再開するには、アーティファクトをもう一度公開するか、Claude に監視を頼みます。

MCP コネクタから最新のデータを取る#

アーティファクトは、見られるたびにMCP コネクタを呼べるので、ページは、作ったセッションの時点のスナップショットではなく、今のデータを見せます。コネクタの呼び出しは、Pro・Max・Team・Enterprise で使え、Claude Code v2.1.209 以降が必要です（それより前の版では、Claude は、作る間にセッションが集めたデータでページを公開します）。コネクタを使うページを作るには、プロンプトにコネクタと欲しいデータを書きます。

Build a dashboard artifact of our open pull requests that pulls the live list through my GitHub connector when the page loads.

• Claude は、公開の一部として、ページが呼べるコネクタを宣言します。宣言にないコネクタは呼べません。対象は自分の claude.ai アカウントのコネクタだけで、閲覧時には、各呼び出しが、閲覧しているアカウント自身の接続を通して動きます。Claude Code で設定したローカルの MCP サーバー（.mcp.json のものなど）は、ページを作る間のデータ取得には使えますが、公開したページからは呼べません
• ページは、読み込み時にデータを取り、一定間隔か、ページの更新コントロールで更新できます。応答は閲覧者のブラウザにキャッシュされるので、開き直したページは、まずキャッシュから描画され、その後、新しい結果で更新されます

閲覧者の側の動きです。

• 各閲覧者が自分のコネクタを使う：呼び出しは閲覧しているアカウントの接続を通るので、同じダッシュボードを開く2人が、アカウントのアクセスによって違うデータを見ることがあります。ページが誰かの資格情報を見ることはなく、claude.ai がページに代わって呼び出します
• 閲覧者が先にアクセスを承認する：claude.ai は、ページの最初のコネクタ呼び出しの前に、各閲覧者に許可を求めます。断った人や、ページが使うコネクタを接続していない人は、ライブの部分なしでページを見ます
• 操作も閲覧者のアカウントで動く：メッセージの投稿や課題の更新など、副作用のあるコネクタのツールを呼ぶコントロールを置くこともできます。操作は、そのコントロールを選んだ人のアカウントで実行されます

コネクタを使うページは、プランと組織の設定が許す範囲で、組織内にも公開でも共有できます。ただし、サインインせずに公開リンクを開いた人や、組織の外の人には、コネクタの呼び出しは動かず、ライブの部分なしでページが表示されます。

組織内の閲覧者に、ページは描画されるがライブの部分が空のままのときの原因です。

• 閲覧者がコネクタを接続していない：コネクタはアカウントごとなので、ページが呼ぶすべてのコネクタに、各閲覧者が自分の接続を持つ必要がある。claude.ai の「Settings > Connectors」で追加して、ページを再読み込みする
• 閲覧者が許可の確認を断った：断りはそのページの読み込みの間だけ有効。再読み込みすると、許可の確認が戻る
• 組織でコネクタの呼び出しがオフ：Owner が管理設定の「Enable artifact connectors」トグルを制御する
• ページが、コネクタにないツール名を呼んでいる：影響を受ける部分は、自分を含む全員で空になる。少数のツールしか公開しないゲートウェイ型のコネクタの背後にある個別のツール名をページが名指ししたときに起こりうる。ページが呼ぶツール名を直して公開し直すよう、Claude に頼む。Claude がページを公開し、そのコネクタのツールがセッションで使えるとき、Claude Code はページが宣言したツール名を照合し、一致しない名前を Claude に警告し、1つも一致しなければ公開を拒否します（v2.1.265 より前は、確認せずに公開した）

ファイルのダウンロードを出す#

アーティファクトは、ページが生成するファイル（表の CSV、グラフの PNG など）を閲覧者に出せます。閲覧者は、ボタンなどのダウンロードのコントロールで保存します。ファイルのダウンロードは、claude.ai がアカウントごとに有効にする実行時の機能で、Claude は、コントロールを作る前に、アカウントにあるかを確認します。普通のダウンロードリンクやページのスクリプトからは保存できません（claude.ai の閲覧画面が、ページ自身が始めるダウンロード（data: や blob: の URL へのリンクを含む）をブロックするため）。そう作られたボタンがあるページは、ダウンロード機能で作り直すよう頼みます。

Add a button that downloads this table as a CSV file.

Claude は、コネクタを宣言するのと同じように、公開の一部としてダウンロード機能を宣言します。

作れるもの#

アーティファクトは1枚の HTML ページなので、HTML・CSS・インラインの JavaScript で書けるものはすべて対象です。よく出る型です。

見た目を整える#

Claude はアーティファクトを作るとき、組み込みのデザインスキルを使うので、追加の指示なしでも、配色・タイポグラフィ・レイアウトが整います。このスキルは、自分で選ぶ前に、プロジェクトの既存のデザインシステムも探します。デザイントークン（デザインシステムが繰り返し使う、色・文字・余白の名前付きの値）を、Claude が見つけられる場所（プロジェクトの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

Claude は、デザインシステムを自分の選択より優先し、プロンプトをその両方より優先します。見出しと形式は例で、色・フォント・余白の分かりやすい一覧なら何でも使えます。書体は、アーティファクトのページが読み込める唯一の外部のフォントの取得元である Google Fonts から読み込めます。それ以外の書体は @font-face の data URI として埋め込み、すべての書体にフォールバックの並びを付けるので、フォントが読めなくてもページは描画されます。特定の書体を使うには、プロンプトかデザインシステムに書きます。

Slides・Design・Docs のテンプレートから始める#

ゼロからページを作る代わりに、claude.ai アカウントのテンプレートから始められます。プレゼンテーションは Claude Slides、見た目のデザインは Claude Design、ほかの人が読んで編集する文書は Claude Docs です。それぞれが claude.ai の専用エディタで開き、自分やチームメイトが直接、または Claude に頼んで変更でき、PowerPoint・PDF・Word などに書き出せます。

始めるには、欲しいものを説明します（「移行のメモを木曜のレビュー用のデッキにして」「この計画をチーム用の文書にまとめて」）。Claude が合うテンプレートを選び、依頼とセッションにある内容で埋めて、リンクを渡します。デッキとデザインには、/slides と /design に要旨を付けて実行する方法もあります。

コードベースに置くべき文書（README など）はファイルのままです。Claude Docs に回るものをファイルで欲しいときは、.docx やリポジトリの Markdown など、形式を指定します。コネクタをオフにするには、deniedMcpServers に claude.ai Claude Docs を足すか、/mcp のトグルを使います。

ページの制約#

各アーティファクトは、自己完結した1枚のページです。Claude Code は、公開するファイルを HTML 文書の殻で包み、厳格なコンテンツセキュリティポリシー（CSP）の下で配信するので、ページにできることが決まります。

アーティファクトの生成は、ほかの応答と同じく出力トークンを使い、スタイル付きのページは、同じ内容の端末のテキストよりトークンを多く使います（インラインの CSS、操作用の JavaScript、特に data URI で埋め込む画像が主な要因）。トークンの費用を減らすには、図には埋め込みのラスタ画像より SVG か HTML と CSS を選ぶ、要らない操作を省く、大きなデータは全部をインラインにせず、ページに要約させる、のが効きます。

使える条件#

アーティファクトには、次のすべての条件が要ります。満たさないと、Claude はローカルの HTML ファイルを書くか、公開できないと答えます。

組織でアーティファクトを許すかは、Claude Code が api.anthropic.com から読み込む組織のポリシーで決まります。ポリシーを読み込めないと、アーティファクトは使えず、頼むと Claude が理由を伝えます。プロキシ・VPN・Web フィルターがある場合は、IT 管理者に api.anthropic.com を通すよう頼みます。Claude Code は裏で再試行を続け、ポリシーが読み込まれて許可されると、使えるようになります。

無効にする#

組織の設定にかかわらず、自分のセッションでアーティファクトをオフにする方法です。

--settings のファイルか CLAUDE_CODE_DISABLE_ARTIFACT でオフにした後、または管理者が管理設定でオフにした後は、どの設定ファイルもオンに戻せません。プロジェクトの .claude/settings.json か .claude/settings.local.json に "enableArtifact": false を書くと、そのプロジェクトのセッションでオフにできます（どちらの true もオンに戻さない。プロジェクト・ローカル設定でこのキーを守るのは Claude Code v2.1.242 以降）。domain: の部分のない WebFetch の deny や ask のルールは、アーティファクトをオフにせず、アーティファクトの読み取りもブロックしません。WebFetch(domain:claude.ai) の deny や ask のルールは、アーティファクトの読み取りにも適用されます。

組織での管理（Team・Enterprise の Owner）#

Team・Enterprise の Owner は、claude.ai の管理設定（claude.ai/admin-settings/artifacts）でアーティファクトを制御します。アーティファクトの内容は Anthropic が運用するインフラに保存され、公開で共有されていない限り、公開した組織の認証済みメンバーと、そのメンバーが共有した相手だけに見えます。

アーティファクトが Google Fonts の書体を読み込むと、fonts.googleapis.com と fonts.gstatic.com も要求します（どちらも任意で、ブロックするとフォールバックの書体で描画されます）。アーティファクトは、React やチャートのライブラリなどの JavaScript ライブラリを、cdnjs.cloudflare.com・cdn.jsdelivr.net・cdn.tailwindcss.com・code.jquery.com・unpkg.com からだけ読み込めます。これらをブロックすると、ライブラリに頼る部分は動かず、ブロックしたフォントと違って代替はありません。どちらも、黙って捨てるのではなく、すぐ拒否するようにブロックします（要求が即座に失敗し、待ちで描画を遅らせないため。ネットワーク要件の全体はネットワークと LLM ゲートウェイ）。

Compliance API では、組織のアーティファクトの一覧、特定の版の内容の取得、アーティファクトの削除ができます。