アーティファクトは、Claude Code がセッションから claude.ai のプライベート URL に公開するライブでインタラクティブなウェブページです。ブラウザで開くと、セッションが続く間、ページはその場で更新されます。ページヘッダーから共有して、他の人にも見てもらうことができます。たとえば、アーティファクトを使用して、注釈付きの差分でプルリクエストをレビュアーに説明したり、セッションデータからダッシュボードを構築したり、Claude が作業する際に埋まっていく調査タイムラインを保持したりできます。
アーティファクトを使用する時期
ターミナルテキストが Claude が生成した出力に適さない場合、アーティファクトを使用します。つまり、行ごとに読むよりも見たり操作したりする方が簡単な出力です。Claude はセッションが到達できるもの（コードベースや接続されたツールを通じて取得したデータを含む）からページを構築するため、ページは段落で説明するのに時間がかかるものを表示できます。たとえば、Claude に以下を依頼します。- 注釈付きの差分でプルリクエストをレビュアーに説明する
- セッションが既に取得したデータからダッシュボードをレンダリングする
- 複数のデザインまたは実装オプションを並べて配置する
- 長いタスクが実行される間に埋まっていく調査タイムラインを保持する
- 出力を Slack に貼り付ける代わりに、チームメイトにリンクを送信する
- MCP コネクタを通じてライブデータを取得する各ステータスボードを公開する
アーティファクトではないもの
アーティファクトは作業のキャプチャであり、アプリケーションではありません。バックエンドのない単一の自己完結型ページであるため、フォーム入力を保存したり、複数のルートを提供したりすることはできません。また、誰かがそれを表示する際に外部データへのアクセスの唯一の方法はMCP コネクタを呼び出すことです。バックエンド付きのホストされた内部ツールの場合は、代わりに独自のインフラストラクチャにデプロイしてください。制限の完全なセットについては、ページの制約を参照してください。アーティファクトを作成する
Claude は出力がページに適している場合、自動的にアーティファクトを公開することもあれば、直接リクエストすることもできます。リクエストするには、機能の名前を付けるか、プレーンテキストで必要なビジュアル出力を説明します。テキストとして読むよりも見る方が簡単なもの（注釈付きの差分、チャート、比較するオプションのセットなど）が良い候補です。以下のプロンプトは 2 つの例です。より多くのパターンについては、構築できるものを参照してください。Ctrl+] を押してください。
Claude はアーティファクトのタイトルとブラウザタブアイコンの絵文字を選択します。どちらも claude.ai のアーティファクトギャラリーと共有リンクに表示されるため、特定のタイトルまたはアイコンが必要な場合は Claude に使用するよう依頼してください。
新しいアーティファクトが公開されたときにブラウザが自動的に開かないようにするには、環境で CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 を設定します。
Claude が公開できないと応答した場合、またはリンクなしでローカル HTML ファイルを書き込んだ場合、ツールはセッションで有効になっていません。利用可能性の要件を確認してください。
アーティファクトを更新する
Claude にページを修正するよう依頼するか、長時間実行されるタスクが進行状況を再公開するようにします。Claude は基になるファイルを編集し、同じ URL に再度公開します。アーティファクトを共有する
新しいアーティファクトは最初、あなただけに表示されます。これを共有するには、ブラウザでアーティファクトを開き、ページヘッダーの Share コントロールを使用してください。ヘッダーにはあなたがアーティファクトの作成者として表示されるため、共有した人は誰がページを公開したかを確認できます。また、claude.ai/code/artifacts のあなたのギャラリーにリンクしており、ここには作成したすべてのアーティファクトが一覧表示されます。 共有できる相手はあなたのプランによって異なります。- 組織内での共有: Team プランと Enterprise プランでは、組織内の特定のユーザーまたは組織全体にアクセス権を付与できます。ビューアーは組織のメンバーとして claude.ai にサインインしてページを表示します。
- 公開共有: インターネット上の誰でも開くことができるリンクを共有でき、claude.ai へのサインインは不要です。Pro プランと Max プランでは、公開リンクがアーティファクトを共有する唯一の方法です。Team プランと Enterprise プランでは、公開共有はオフになっており、Owner が 組織に対して有効にする まで使用できません。
他のユーザーと一緒に編集する
共有した人はデフォルトではビューアーです。つまり、公開した各バージョンを確認できますが、ページを変更することはできません。Team プランと Enterprise プランでは、ユーザーをエディターにすることもできます。共有ダイアログでユーザーを追加し、その役割を viewer から editor に切り替えます。 エディターは、別のセッションからアーティファクトを更新する のと同じ方法で新しいバージョンを公開します。つまり、自分のセッションでアーティファクトの URL を Claude に提供し、Claude が現在のコンテンツを取得して変更を加えて再公開します。ページを開いているすべてのユーザーは各更新をリアルタイムで確認できます。MCP コネクタで ライブデータを取得する
アーティファクトは、ページを表示するたびに MCP コネクタ を呼び出すことができるため、ページはセッションで構築されたスナップショットではなく、現在のデータを表示します。アーティファクトからのコネクタ呼び出しは Pro、Max、Team、Enterprise プランで利用可能であり、Claude Code v2.1.209 以降が必要です。以前のバージョンでは、Claude はセッション中に収集されたデータでページを公開します。 コネクタバックアップページを作成するには、プロンプトでコネクタと必要なデータを指定します。.mcp.json のサーバーなど）は、Claude がページを構築している間にデータを提供できますが、公開されたページはそれらを呼び出すことはできません。
ページはロード時にデータを取得し、一定の間隔で、またはビューアがページのリフレッシュコントロールを使用するときにリフレッシュできます。レスポンスはビューアのブラウザにキャッシュされるため、再度開いたページはキャッシュされたレスポンスからすぐにレンダリングされ、その後新しい結果で更新されます。
ビューアのコネクタ呼び出しの仕組み
公開されたページがコネクタを呼び出すとき、呼び出しはそれを公開した人のアカウントではなく、ページを表示している人のアカウントを使用します。- 各ビューアは独自のコネクタを使用します。呼び出しは表示アカウントの接続されたツールを通じて行われるため、同じダッシュボードを開く 2 人は、アカウントがアクセスできるものに応じて異なるデータを表示できます。ページは誰の認証情報も表示しません。claude.ai はページの代わりに呼び出しを行います。
- ビューアは最初にアクセスを承認します。claude.ai はページの最初のコネクタ呼び出しの前に、各ビューアに権限を求めます。ビューアが拒否した場合、またはページが使用するコネクタを接続していない場合でも、ページはライブセクションなしで表示されます。
- アクションもビューアのアカウントを使用します。ページは、メッセージの投稿や問題の更新など、副作用を伴うコネクタツールを呼び出すコントロールを提供できます。アクションは、コントロールを選択した人のアカウントを通じて行われます。
ビューアに対してページがライブデータを表示しない
コネクタバックアップページがレンダリングされても、共有した人のライブセクションが空のままの場合は、これらの原因を確認してください。- ビューアがコネクタを接続していない。コネクタはアカウントごとなので、各ビューアはページが呼び出すすべてのコネクタへの独自の接続が必要です。claude.ai の Settings > Connectors で追加してから、ページをリロードできます。
- ビューアが権限要求を拒否した。拒否はそのページロードの残りの間続きます。ページをリロードすると、権限要求が戻ります。
- 組織のコネクタ呼び出しがオフになっている。所有者は管理設定で Enable artifact connectors トグル を制御します。
構築できるもの
アーティファクトは単一の HTML ページであるため、HTML、CSS、およびインラインの JavaScript で表現できるものはすべてスコープ内です。以下のパターンが最も頻繁に発生します。変更を通じて説明する
差分またはデザイン変更をレンダリングするページを、関連する行の横に注釈を付けてリクエストします。これにより、レビュアーは説明から再構築するのではなく、コードの横にあなたの推論を読むことができます。代替案を比較する
1 つのページに複数のバリアントをリクエストして、互いに評価できるようにします。これはレイアウト、コピー、API シェイプ、または実装計画に機能します。インタラクティブコントロールで調整する
スライダー、トグル、または入力フィールドを調整しているものにバインドするようリクエストします。これにより、説明する代わりに値を直接探索できます。結果をセッションに戻す
アーティファクトは、Claude に返す決定の軽量エディタとして機能できます。エクスポートコントロールをリクエストして、ターミナルに貼り付けることができるテキストを生成します。これにより、ページとの相互作用の結果がページに留まるのではなく、セッションに流れ込みます。進行中の作業を追跡する
長いタスクが実行される間、Claude にアーティファクトを最新の状態に保つよう依頼します。これにより、リンクを持つ人は誰でもターミナルを読まずにフォローできます。ビジュアルデザインを改善する
Claude Code v2.1.183 以降、Claude はアーティファクトを構築するときに組み込みデザインスキルを適用するため、ページは追加のプロンプトなしで意図的なパレット、タイポグラフィ、およびレイアウトを取得します。そのスキルは、独自のものを選択する前に、プロジェクト内の既存のデザインシステムも探します。アーティファクトを製品のブランディングと一致させるために、Claude が見つけることができる場所（プロジェクトの CLAUDE.md またはリポジトリのテーマファイルなど）にデザイントークンを記録します。ページの制約
各アーティファクトは 1 つの自己完結型ページです。Claude Code は公開するファイルを HTML ドキュメントシェルでラップし、厳密なコンテンツセキュリティポリシー（CSP）の下で提供します。これはページが実行できることを形作ります。
アーティファクトを生成すると、他の応答と同様に出力トークンが使用され、スタイル付きページはターミナルテキストと同じコンテンツよりもトークン集約的です。インライン CSS、インタラクティブコントロール用の JavaScript、特にデータ URI として埋め込まれた画像が主な貢献者です。アーティファクトのトークンコストを削減するには、以下を実行します。
- 埋め込みラスター画像よりも図表に SVG または HTML と CSS を優先する
- 不要なインタラクティビティを省略する
- ページが大規模なデータセットを完全にインラインするのではなく、要約するようにする
利用可能性
アーティファクトには、以下のすべての条件が必要です。いずれかが満たされていない場合、Claude はローカル HTML ファイルを書き込むか、公開できないと言います。アーティファクトを無効にする
組織の設定に関係なく、独自のセッションのアーティファクトをオフにするには、以下のいずれかを使用します。組織のアーティファクトを管理する
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 と一緒にそのドメインをホワイトリストに追加します。完全なリストについては、ネットワークアクセス要件を参照してください。
Compliance API でアーティファクトをリストおよび削除する
Compliance API は、組織のアーティファクトをリストしたり、特定のバージョンのコンテンツを取得したり、アーティファクトを削除したりするエンドポイントを提供します。
リクエストおよびレスポンススキーマについては、Compliance API リファレンスを参照してください。
関連リソース
- アーティファクトと組み合わせるプロンプティングパターンとワークフローを参照する
- 再利用するアーティファクトプロンプトをスキルに変換して、コマンドとして呼び出せるようにする
- MCP サーバーを接続して、Claude がアーティファクトにライブデータを取得できるようにする