アーティファクトは、Claude Code がセッションから claude.ai 上のプライベート URL に公開するライブでインタラクティブな Web ページです。ブラウザで開くと、セッションが続く間、その場で更新されます。他の人にも見てもらいたい場合は、ページヘッダーから共有します。

アーティファクトを使用する場合
ターミナルテキストが Claude が生成したものを表示するのに適さない場合にアーティファクトを使用してください。つまり、1 行ずつ読むよりも見たり操作したりする方が簡単な出力です。Claude はセッションが到達できるもの(コードベースや 接続されたツール を通じて取得するデータを含む)からページを構築するため、説明に段落が必要になるようなものを表示できます。たとえば、Claude に以下のことを依頼してください。- 注釈付きの差分を使用してレビュアーをプルリクエストの説明をする
- セッションが既に取得したデータからダッシュボードをレンダリングする
- 複数の設計または実装オプションを並べて配置する
- 長いタスクが実行されている間に入力される調査タイムラインを保持する
- Slack に出力を貼り付ける代わりに、チームメイトにリンクを送信する
- MCP コネクタを通じて新しいデータを取得する状態ボードを公開する
アーティファクトではないもの
アーティファクトは作業のキャプチャです。バックエンドのない 1 つの自己完結型ページなので、複数のルートを提供することはできません。バックエンドを備えたホストされた内部ツールの場合は、代わりに独自のインフラストラクチャにデプロイしてください。制限の完全なセットについては ページの制約 を参照してください。アーティファクトを作成する
Claude は出力がページに適している場合、自動的にアーティファクトを公開することがあります。また、直接リクエストすることもできます。リクエストするには、機能の名前を指定するか、希望する視覚的な出力をプレーンテキストで説明してください。テキストとして読むより見る方が簡単なもの(注釈付きの diff、チャート、比較するオプションのセットなど)が良い候補です。以下のプロンプトは 2 つの例です。詳細は構築できるものを参照してください。- Auto モード:分類器がプロンプトの代わりに公開をレビューするため、Claude はプロンプトを表示せずにページを公開できます。セッションが開始される権限モードはプランによって異なります。詳細は開始時の権限モードを参照してください。
- Manual および Accept edits モード:Claude Code は権限を要求します。「Claude wants to publish deploy-failures.html, uploading it to claude.ai (Anthropic’s servers) to host as the page “Deploy failures by service”, private to you until you share it」のようなメッセージが表示される場合があります。Yes を選択して公開します。
- Claude がページのコネクタ呼び出しやファイルダウンロードなどのランタイム機能を宣言する場合
- その後、公開で共有した場合
- その後、特定の人またはあなたの組織と共有し、最新バージョンが視聴者が見るバージョンとして選択された場合
Ctrl+] を押して、セッションの最新アーティファクトを再度開きます。
Claude はアーティファクトのタイトルと絵文字を選択し、両方が claude.ai のアーティファクトギャラリーと共有リンクに表示されます。Claude はまた、チャートやカレンダーなど、ページが何であるかに一致するブラウザタブアイコンを選択することもできます。特定のタイトル、絵文字、またはタブアイコンが必要な場合は、Claude に要求してください。
新しいアーティファクトが公開されたときにブラウザが自動的に開くのを停止するには、環境で CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 を設定します。
Claude が公開できないと応答した場合、またはリンクなしでローカル HTML ファイルを書き込んだ場合、ツールはセッションに対して有効になっていません。利用可能性の要件を確認してください。
アーティファクトを更新する
Claude にページを修正するよう依頼するか、長時間実行されるタスクが進行状況に応じて再度公開するようにします。Claude は基になるファイルを編集し、同じ URL に再度公開します。/artifacts で添付します。どちらもない場合、新しいセッションは既存のアーティファクトを更新する代わりに、新しいアーティファクトを作成します。
アーティファクトを再度見つける
Claude Code で/artifacts を実行して、所有しているすべてのアーティファクトと共有されているすべてのアーティファクトをリストアップします。1 つを選択して、o を押してブラウザで開くか、c を押してそのリンクをコピーします。Enter キーを押して現在のセッションに添付します。v2.1.216 より前のバージョンでは、Enter キーでブラウザで開きました。Claude Code は claude.ai アカウントからリストを読み込むため、新しいセッションで機能し、リンクがターミナルからスクロールアウトした後の /clear の後でも機能します。Claude Code v2.1.208 以降が必要です。
アーティファクトを共有する
新しいアーティファクトは最初、あなただけに表示されます。共有するには、ブラウザでアーティファクトを開き、ページヘッダーの Share コントロールを使用してください。ヘッダーには claude.ai/code/artifacts のギャラリーへのリンクもあり、作成したすべてのアーティファクトが一覧表示されます。 組織内のビューアーは、ページを公開した人を確認できます。組織内で共有されたアーティファクトでは、あなたの名前がタイトルメニューに表示され、公開アーティファクトでは、組織内のサインイン済みビューアーのページヘッダーに表示されます。公開リンクをサインインせずに開いたビューアー、または組織外からアクセスしたビューアーには、あなたの名前の代わりにContent is user-generated and unverified. というラベルが表示されます。
共有できる相手はプランによって異なります。
- 組織内: Team プランと Enterprise プランでは、組織内の特定のユーザーまたは全員にアクセス権を付与できます。ビューアーは、ページを表示するために claude.ai に組織のメンバーとしてサインインします。
- 公開: インターネット上の誰でも開くことができるリンクを共有でき、claude.ai へのサインインは不要です。Pro プランと Max プランでは、公開リンクがアーティファクトを共有する唯一の方法です。Team プランと Enterprise プランでは、Owner が 組織に対して公開共有を有効にする まで、公開共有はオフになっています。
他のユーザーと一緒に編集する
共有相手はデフォルトではビューアーです。公開した各バージョンを表示できますが、ページを変更することはできません。Team プランと Enterprise プランでは、ユーザーをエディターにすることもできます。共有ダイアログで、ユーザーを追加し、その役割を viewer から editor に切り替えます。 エディターは、別のセッションからアーティファクトを更新する のと同じ方法で新しいバージョンを公開します。アーティファクトの URL を Claude に提供するか、/artifacts から添付し、Claude が現在のコンテンツを取得して変更を反映して再公開します。ページを開いているすべてのユーザーが各更新をリアルタイムで確認できます。
共有されたアーティファクトを読む
誰かがアーティファクトを共有した場合、Claude にそれを読ませることができます。Claude にその URL を提供するか、/artifacts から添付してください。
Claude は他の人が書いたページを、WebFetch でウェブページを読む方法と同じように読みます。つまり、生のページではなく、質問した内容の要約を取得し、その要約はページに書き込まれた指示を報告しますが、それらを実行する代わりに報告するのです。Claude Code はまた、ページの完全なソースをローカルファイルに保存します。Claude は、アーティファクトを エディター として再発行する場合など、正確なコンテンツが必要な場合にそのファイルを開くことができます。
アーティファクトのコメントを収集する
組織内でアーティファクトを共有すると、共有相手はページにコメントを残すことができ、Claude がそのコメントを読んで返信することができます。Claude Code v2.1.221 以降と Team または Enterprise プランが必要です。これは、組織内で共有したアーティファクトのみがコメントを受け付けるためです。Claude がコメントを読む場合は 2 つあります。- Claude に読むよう依頼する場合:Claude にアーティファクトの URL を提供し、コメントを求めます。Claude は各スレッドをリストアップし、アーティファクトを編集できるユーザーが送信したコメントをマークします。
- アーティファクトを編集できるユーザーが Claude にコメントを送信する場合:ページのスレッドで、Send to Claude でコメントを送信するか、その中で
@claudeにメンションします。どちらの方法でも、スレッドが有効になります。
Comments aren't available while this Artifact is shared publicly.」と表示されます。既にコメントスレッドがあるアーティファクトを公開リンクに切り替えるには、まずスレッドを削除してください。
コメントを自分で読むよう Claude に依頼するには、URL を提供します。
- Claude Code v2.1.221 以降を実行しています。
- Claude Code をインストールした後、または v2.1.221 より前のバージョンからアップグレードした後の最初のセッションではありません。インストールまたはアップグレード後の最初のセッションでは、Claude はまだコメントを読めない可能性があります。新しいセッションを開始して、もう一度試してください。
- フィーチャーフラグ取得をオフにしていません。
Claude にコメントに自動で返信させる
セッションがアーティファクトを公開した後、Claude Code はセッションが実行されている限り、そのアーティファクトのコメントを監視します。アーティファクトを編集できるユーザーが Claude にコメントを送信すると、すぐにセッションに到達し、Claude はスレッドを読んで、あなたに尋ねることなく返信できます。 Claude Code v2.1.228 以降が必要です。フィーチャーフラグ取得をオフにした場合、Claude Code はコメントを監視しません。 権限モードによって、送信されたコメントが到着したときに Claude が何をするかが決まります。- Claude が自動で返信する:権限モードで Claude が確認を求めずに返信を投稿できる場合、Claude はスレッドを読んで返信し、コメントが変更を求めている場合はアーティファクトを編集します。
Auto-replied to comment thread on Artifact: <name>またはAuto-edited Artifact: <name> in response to a comment threadが表示されます。 - Claude があなたを待つ:プランモード外で、返信の投稿に承認が必要な場合、
Comments are waiting on Artifact: <name>が表示されます。その後、Claude はスレッドを読む承認を求め、返信を投稿する承認を再度求めます。 - Claude がプランモードで一時停止する:
Comments are waiting on Artifact: <name>が表示され、Claude はプランモードを終了して読んで返信するよう求めるまで返信しません。
Comments are waiting on Artifact: <name> が 1 回表示され、Claude はその時間のコメントが古くなると再開します。
/tasks を実行して、セッションが監視している各アーティファクトをライブアップデートタスクとしてリストアップされたものを確認します。以下のいずれかの方法で、Claude がアーティファクトに自動で返信するのを停止できます。
- アイドルプロンプトで Ctrl+C を 1 回押す:Claude はセッションが監視しているすべてのアーティファクトへの返信を一時停止します。次のメッセージを送信した後、返信が再開されます。
/tasksでタスクを停止する:Claude はそのアーティファクトへの返信を停止し、そこで返信を再開するよう求めるまで停止したままになります。アーティファクトを再度公開しても返信は再開されず、セッションを再開しても停止は適用されたままになります。- 3 秒以内に
Ctrl+X Ctrl+Kを 2 回押す:すべての実行中のバックグラウンドサブエージェントを停止するコードは、セッションの残りの間、Claude がすべてのアーティファクトに返信するのも停止します。Claude に返信を再開するよう求めても、この停止は元に戻りません。
MCP コネクタで ライブデータを取得する
アーティファクトは、誰かがそれを表示するたびに MCP コネクタ を呼び出すことができるため、ページはセッションから取得したスナップショットではなく、現在のデータを表示します。アーティファクトからのコネクタ呼び出しは Pro、Max、Team、Enterprise プランで利用可能であり、Claude Code v2.1.209 以降が必要です。以前のバージョンでは、Claude はセッション中に収集したデータでページを公開します。 コネクタバックアップページを作成するには、プロンプトでコネクタと必要なデータを指定します。.mcp.json など Claude Code で設定するローカル MCP サーバーは、Claude がページを構築している間にデータを提供できますが、公開されたページはそれらを呼び出すことはできません。
ページはロード時にデータを取得し、間隔で更新するか、表示者がページの更新コントロールを使用するときに更新できます。応答はビューアのブラウザにキャッシュされるため、再度開いたページはキャッシュされた応答からすぐにレンダリングされ、その後新しい結果で更新されます。
ビューアのコネクタ呼び出しの仕組み
公開されたページがコネクタを呼び出すとき、呼び出しはそれを公開した人のアカウントではなく、ページを表示している人のアカウントを使用します。- 各ビューアは独自のコネクタを使用します。呼び出しは表示アカウントの接続されたツールを通じて行われるため、同じダッシュボードを開く 2 人は、アカウントがアクセスできる内容に応じて異なるデータを表示できます。ページは誰の認証情報も表示しません。claude.ai はページに代わって呼び出しを行います。
- ビューアは最初にアクセスを承認します。claude.ai は、ページの最初のコネクタ呼び出しの前に、各ビューアに権限を求めます。ビューアが拒否した場合、またはページが使用するコネクタを接続していない場合でも、ページはライブセクションなしで表示されます。
- アクションもビューアのアカウントを使用します。ページは、メッセージの投稿や問題の更新など、副作用を伴うコネクタツールを呼び出すコントロールを提供できます。アクションは、コントロールを選択した人のアカウントを通じて実行されます。
ページがビューアのライブデータを表示しない
コネクタバックアップページがレンダリングされても、共有した人のライブセクションが空のままの場合は、これらの原因を確認してください。- ビューアがコネクタを接続していない。コネクタはアカウントごとであるため、各ビューアはページが呼び出すすべてのコネクタへの独自の接続が必要です。claude.ai の Settings > Connectors で接続を追加してから、ページを再度読み込むことができます。
- ビューアが権限要求を拒否した。拒否はそのページロードの残りの間続きます。ページを再度読み込むと、権限要求が戻ります。
- 組織のコネクタ呼び出しがオフになっている。所有者は管理設定で Enable artifact connectors トグル を制御します。
- ページがコネクタが公開していないツール名を呼び出している。影響を受けたセクションはあなたを含むすべての人に対して空のままです。これは、ページが、独自のツールのみを公開するゲートウェイスタイルコネクタの背後にある個別のツールに名前を付けるときに発生する可能性があります。Claude にページが呼び出すツール名を修正して再度公開するよう依頼してください。 Claude がページを公開し、そのコネクタのツールがセッションで利用可能な場合、Claude Code はページが宣言するツール名をそれらと照合し、一致しない名前について Claude に警告し、一致しない場合は公開を拒否します。v2.1.265 より前では、それらをチェックせずにページを公開していました。
ファイルダウンロードを提供する
アーティファクトは、ページが生成するファイル(テーブルの CSV エクスポートやチャートの PNG など)をビューアーに提供できます。ビューアーはページ上のダウンロードコントロール(ボタンなど)を通じてそれを保存します。ファイルダウンロードは claude.ai が提供するランタイム機能で、アカウント単位で有効になるため、Claude はコントロールを構築する前にアカウントがこの機能を持っているかどうかを確認します。 ビューアーは通常のダウンロードリンクやページ上のスクリプトからファイルを保存することはできません。これは、claude.ai のアーティファクトビューアーがページ自体が開始するダウンロード(data: または blob: URL へのリンクを含む)をブロックするためです。ページにこのような方法で構築されたダウンロードボタンがある場合は、Claude にダウンロード機能を使用して再構築するよう依頼してください。
ファイルを提供するには、プロンプトでコントロールとファイル形式をリクエストしてください。
構築できるもの
アーティファクトは単一の HTML ページであるため、HTML、CSS、およびインラインの JavaScript で表現できるものはすべてスコープ内です。以下のパターンが最も頻繁に発生します。変更を通じて説明する
差分またはデザイン変更をレンダリングするページを、関連する行の横に注釈を付けてリクエストします。これにより、レビュアーは説明から再構築するのではなく、コードの横にあなたの推論を読むことができます。代替案を比較する
1 つのページに複数のバリアントをリクエストして、互いに評価できるようにします。これはレイアウト、コピー、API シェイプ、または実装計画に機能します。インタラクティブコントロールで調整する
スライダー、トグル、または入力フィールドを調整しているものにバインドするようリクエストします。これにより、説明する代わりに値を直接探索できます。結果をセッションに戻す
アーティファクトは、Claude に返す決定の軽量エディタとして機能できます。エクスポートコントロールをリクエストして、ターミナルに貼り付けることができるテキストを生成します。これにより、ページとの相互作用の結果がページに留まるのではなく、セッションに流れ込みます。進行中の作業を追跡する
長いタスクが実行される間、Claude にアーティファクトを最新の状態に保つよう依頼します。これにより、リンクを持つ人は誰でもターミナルを読まずにフォローできます。ビジュアルデザインを改善する
Claude がアーティファクトを構築する際、組み込みのデザインスキルを適用するため、ページは追加のプロンプトなしで意図的なパレット、タイポグラフィ、レイアウトを取得します。そのスキルはまた、独自のものを選択する前に、プロジェクト内の既存のデザインシステムを探します。デザイントークンは、デザインシステムが再利用する名前付きの色、タイポグラフィ、スペーシング値です。アーティファクトを製品のブランディングと一致させるために、Claude が見つけられる場所(プロジェクトの CLAUDE.md またはリポジトリのテーマファイルなど)に記録します。@font-face データ URI としてインライン化し、すべてのタイプフェイスにフォールバックスタックを提供するため、フォントが読み込まれない場合でもページは引き続きレンダリングされます。特定のタイプフェイスを使用するには、プロンプトまたはデザインシステムで名前を付けます。
デザインキャンバスを作成する
UI、画面フロー、ランディングページ、またはポスターをモックアップするために、ページを構築するのではなく、/design をブリーフと共に実行します。Claude はデザインを 1 つのキャンバス上のアートボードとして作成し、キャンバスを Design アーティファクトとして公開します。ブリーフは描画する内容を指定します。
/design は アーティファクトが利用可能 なセッションと Claude Code v2.1.265 以降が必要です。
ページの制約
各アーティファクトは 1 つの自己完結したページです。Claude Code は公開するファイルを HTML ドキュメントシェルでラップし、厳密なコンテンツセキュリティポリシー(CSP)の下で提供します。これはページが実行できることを形作ります。
アーティファクトを生成することは、他のレスポンスと同様に出力トークンを使用し、スタイル付きページはターミナルテキストと同じコンテンツよりもトークン集約的です。インライン CSS、インタラクティブコントロール用の JavaScript、特にデータ URI として埋め込まれた画像が主な要因です。アーティファクトのトークンコストを削減するには:
- 埋め込みラスター画像よりも図表に SVG または HTML と CSS を優先する
- 必要のないインタラクティビティを省略する
- ページが大規模なデータセットを完全にインライン化するのではなく要約するようにする
利用可能性
アーティファクトには、以下のすべての条件が必要です。いずれかが満たされていない場合、Claude はローカル HTML ファイルを書き込むか、公開できないと言います。アーティファクトを無効にする
組織の設定に関わらず、自分のセッションのアーティファクトをオフにするには、以下のいずれかを使用します。--settings ファイルで、または CLAUDE_CODE_DISABLE_ARTIFACT でアーティファクトをオフにした場合、あるいは管理者が 管理設定 でアーティファクトをオフにした場合、どの設定ファイルもアーティファクトを再度オンにすることはできません。v2.1.242 より前では、優先度スタック の上位にあるファイルが、下位のファイルで "enableArtifact": false が設定されていても、アーティファクトを再度オンにすることができました。
プロジェクトの .claude/settings.json または .claude/settings.local.json で "enableArtifact": false を設定して、そのプロジェクト内のセッションのアーティファクトをオフにすることもできます。どちらのファイルでも "enableArtifact": true はアーティファクトを再度オンにしません。プロジェクトおよびローカル設定でこのキーを尊重するには、Claude Code v2.1.242 以降が必要です。
domain: 部分のない WebFetch 拒否またはアスクルールを追加した場合、アーティファクトをオフにしたり、アーティファクト読み取りをブロックしたりしません。deny または ask の WebFetch(domain:claude.ai) ルールはアーティファクト読み取りに適用されます。
組織のアーティファクトを管理する
Team プランと Enterprise プランのオーナーは、claude.ai 管理設定からアーティファクトを管理できます。アーティファクトのコンテンツは Anthropic が運用するインフラストラクチャに保存され、アーティファクトが公開で共有されていない限り、発行元の組織の認証済みメンバーのみに表示されます。アーティファクトを有効または無効にする
組織全体のアーティファクトを有効または無効にするには、Settings > Claude Code > Capabilitiesに移動して、Artifacts トグルを使用します。ロールベースのアクセス制御を備えた Enterprise プランでは、アーティファクトを特定のロールにスコープすることもできます。Settings > Rolesに移動してロールを編集し、Claude Code グループの下の Artifacts 権限を設定します。アーティファクトからのコネクタ呼び出しを制御する
アーティファクトからのコネクタ呼び出しには、アーティファクトのオン/オフを切り替える Artifacts トグルとは別の専用トグルがあります。Settings > Capabilitiesに移動して、Enable artifact connectors トグルを使用します。同じトグルは claude.ai の会話で作成されたアーティファクトからのコネクタ呼び出しも管理します。そのため、Settings > Claude Code ではなく Settings > Capabilities の下に配置されています。公開共有を制御する
公開共有は Team プランと Enterprise プランではデフォルトでオフになっているため、メンバーはオーナーがオンにするまで、組織内でのみアーティファクトを共有できます。メンバーがサインインなしで誰でも表示できるパブリックリンクにアーティファクトを公開できるようにするには、Settings > Claude Code > Capabilities に移動して、Artifacts トグルの下の External sharing をオンにします。オフに戻すと、各アーティファクトのオーディエンスを変更することなく、既存のパブリックリンク経由のアクセスがブロックされます。再度有効にすると、アクセスが再開されます。保持ポリシーを設定する
アーティファクトが自動削除される前に保持される期間を設定するには、Settings > Data & privacy controlsに移動します。作成者にのみプライベートなアーティファクトと共有されたアーティファクトに対して、別々の保持期間を設定できます。監査ログを確認する
アーティファクトの公開、共有、削除は、それぞれ組織の監査ログにclaude_artifact_* イベントタイプの下に表示されます。これは claude.ai の会話で作成されたアーティファクトに使用されるのと同じファミリーです。
ビューアドメインをホワイトリストに登録する
claude.ai のビューアは、サンドボックス化された*.claudeusercontent.com オリジンから各アーティファクトを読み込みます。組織が送信ネットワークアクセスを制限している場合は、claude.ai と共にそのドメインをホワイトリストに追加します。完全なリストについては、ネットワークアクセス要件を参照してください。
Google Fontsからタイプフェイスを読み込むアーティファクトは、fonts.googleapis.com と fonts.gstatic.com もリクエストします。どちらのホストもオプションです。ブロックすると、アーティファクトはフォールバックタイプフェイスでレンダリングされます。フォントリクエストが即座に失敗するように、サイレントドロップではなく高速拒否でブロックして、ページの最初のレンダリングが遅延しないようにします。
アーティファクトは、React やチャートパッケージなどの JavaScript ライブラリを cdnjs.cloudflare.com、cdn.jsdelivr.net、cdn.tailwindcss.com、code.jquery.com から読み込むことができ、他の外部ホストからは読み込めません。これらのホストをブロックすると、ライブラリに依存するアーティファクトの部分が機能しません。ブロックされたフォントとは異なり、ブロックされたライブラリにはフォールバックがありません。ブロックされたライブラリリクエストが即座に失敗するように、ここでも高速拒否でブロックして、タイムアウトするまでハングしないようにします。
Compliance API でアーティファクトをリストおよび削除する
Compliance APIは、組織のアーティファクトをリストアップし、特定のバージョンのコンテンツを取得し、アーティファクトを削除するエンドポイントを提供します。
リクエストとレスポンススキーマについては、Compliance API リファレンスを参照してください。
関連リソース
- アーティファクトと組み合わせるプロンプティングパターンとワークフローを参照する
- 再利用するアーティファクトプロンプトをスキルに変換して、コマンドとして呼び出せるようにする
- MCP サーバーを接続して、Claude がアーティファクトにライブデータを取得できるようにする