- アーティファクトを使用する時期を判断する
- アーティファクトを作成、更新、共有する
- より豊かなページのためのプロンプティングパターンを適用する
- ビジュアルデザインを改善して、アーティファクトが製品のブランディングと一致するようにする
- ページの制約と利用可能性の要件を理解する
- アーティファクトを無効にするか、組織のアーティファクトを管理する
アーティファクトを使用する時期
Claude が生成した出力が、行ごとに読むよりも見たり操作したりする方が簡単な場合、アーティファクトを使用します。Claude はセッションが到達できるもの（コードベースや接続されたツールを通じて取得したデータを含む）からページを構築するため、ページは段落で説明するのに時間がかかるものを表示できます。たとえば、Claude に以下を依頼します。- 注釈付きの差分でプルリクエストをレビュアーに説明する
- セッションが既に取得したデータからダッシュボードをレンダリングする
- 複数のデザインまたは実装オプションを並べて配置する
- 長いタスクが実行される間に埋まっていく調査タイムラインを保持する
- 出力を Slack に貼り付ける代わりに、チームメイトにリンクを送信する
アーティファクトではないもの
アーティファクトは作業のキャプチャであり、アプリケーションではありません。バックエンドのない単一の自己完結型ページであるため、フォーム入力を保存したり、表示時に API を呼び出したり、複数のルートを提供したりすることはできません。バックエンド付きのホストされた内部ツールの場合は、代わりに独自のインフラストラクチャにデプロイしてください。制限の完全なセットについては、ページの制約を参照してください。アーティファクトを作成する
Claude は出力がページに適している場合、自動的にアーティファクトを公開することもあれば、直接リクエストすることもできます。リクエストするには、機能の名前を付けるか、プレーンテキストで必要なビジュアル出力を説明します。テキストとして読むよりも見る方が簡単なもの（注釈付きの差分、チャート、比較するオプションのセットなど）が良い候補です。以下のプロンプトは 2 つの例です。より多くのパターンについては、構築できるものを参照してください。Ctrl+] を押してください。
Claude はアーティファクトのタイトルとブラウザタブアイコンの絵文字を選択します。どちらも claude.ai のアーティファクトギャラリーと共有リンクに表示されるため、特定のタイトルまたはアイコンが必要な場合は Claude に使用するよう依頼してください。
新しいアーティファクトが公開されたときにブラウザが自動的に開かないようにするには、環境で CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 を設定します。
Claude が公開できないと応答した場合、またはリンクなしでローカル HTML ファイルを書き込んだ場合、ツールはセッションで有効になっていません。利用可能性の要件を確認してください。
アーティファクトを更新する
Claude にページを修正するよう依頼するか、長時間実行されるタスクが進行状況を再公開するようにします。Claude は基になるファイルを編集し、同じ URL に再度公開します。アーティファクトを共有する
新しいアーティファクトは、あなただけに表示されます。ブラウザで開き、ページヘッダーの Share コントロールを使用して、組織内の特定の人またはすべての人にアクセス権を付与します。ヘッダーはあなたをアーティファクトの作成者として名前を付けるため、共有した人は誰がページを公開したかを見ることができます。また、claude.ai/code/artifacts のギャラリーにリンクしており、作成したすべてのアーティファクトが一覧表示されます。 共有は組織で停止します。ビューアは、アーティファクトを公開した同じ組織のメンバーとして claude.ai にサインインする必要があり、組織外で表示可能にするオプションはありません。組織外の人に基になるコンテンツを送信するには、Claude に HTML ファイルを依頼し、そのファイルを直接共有してください。 アーティファクトは表示可能であり、共同編集ではありません。共有した人は公開した各バージョンを見ることができますが、ページを変更することはできません。あなたが唯一のライターのままです。構築できるもの
アーティファクトは単一の HTML ページであるため、HTML、CSS、およびインラインの JavaScript で表現できるものはすべてスコープ内です。以下のパターンが最も頻繁に発生します。変更を通じて説明する
差分またはデザイン変更をレンダリングするページを、関連する行の横に注釈を付けてリクエストします。これにより、レビュアーは説明から再構築するのではなく、コードの横にあなたの推論を読むことができます。代替案を比較する
1 つのページに複数のバリアントをリクエストして、互いに評価できるようにします。これはレイアウト、コピー、API シェイプ、または実装計画に機能します。インタラクティブコントロールで調整する
スライダー、トグル、または入力フィールドを調整しているものにバインドするようリクエストします。これにより、説明する代わりに値を直接探索できます。結果をセッションに戻す
アーティファクトは、Claude に返す決定の軽量エディタとして機能できます。エクスポートコントロールをリクエストして、ターミナルに貼り付けることができるテキストを生成します。これにより、ページとの相互作用の結果がページに留まるのではなく、セッションに流れ込みます。進行中の作業を追跡する
長いタスクが実行される間、Claude にアーティファクトを最新の状態に保つよう依頼します。これにより、リンクを持つ人は誰でもターミナルを読まずにフォローできます。ビジュアルデザインを改善する
Claude はアーティファクトを構築するときに組み込みデザインスキルを適用するため、ページは追加のプロンプトなしで意図的なパレット、タイポグラフィ、およびレイアウトを取得します。そのスキルは、独自のものを選択する前に、プロジェクト内の既存のデザインシステムも探します。アーティファクトを製品のブランディングと一致させるために、Claude が見つけることができる場所（プロジェクトの CLAUDE.md またはリポジトリのテーマファイルなど）にデザイントークンを記録します。ページの制約
各アーティファクトは 1 つの自己完結型ページです。Claude Code は公開するファイルを HTML ドキュメントシェルでラップし、厳密なコンテンツセキュリティポリシー（CSP）の下で提供します。これはページが実行できることを形作ります。| 制約 | 効果 |
|---|---|
| 外部リクエストなし | CSP は、他のホストから読み込まれたスクリプト、スタイルシート、フォント、および画像をブロックします。また、fetch、XHR、および WebSocket 呼び出しもブロックします。Claude は CSS と JavaScript をインラインで埋め込み、画像をデータ URI として埋め込むため、ページは外部リクエストなしでレンダリングされます。 |
| バックエンドなし | アーティファクトは静的ページです。フォームを通じて送信されたデータを保存したり、ビューアを自分で認証したり、表示時に API を呼び出したりすることはできません。 |
| 単一ページ | 相対リンクはページの横に何もデプロイされていないため、解決されません。複数セクションのコンテンツの場合、Claude はページ内アンカーではなく、別のファイルを使用します。 |
| ソースファイルタイプ | 公開されたファイルは .html、.htm、または .md である必要があります。Markdown ファイルはスタイル付き HTML としてレンダリングされます。 |
| レンダリングサイズ | レンダリングされたページは 16 MiB 以下である必要があります。大きな埋め込み画像は、公開がサイズで失敗する場合の通常の原因です。 |
- 埋め込みラスター画像よりも図表に SVG または HTML と CSS を優先する
- 不要なインタラクティビティを省略する
- ページが大規模なデータセットを完全にインラインするのではなく、要約するようにする
利用可能性
アーティファクトには、以下のすべての条件が必要です。いずれかが満たされていない場合、Claude はローカル HTML ファイルを書き込むか、公開できないと言います。| 要件 | 利用可能な場合 |
|---|---|
| プラン | Team または Enterprise。Team プランでは、アーティファクトはデフォルトで有効です。Enterprise プランでは、管理者が claude.ai 管理設定で有効にします。 |
| 認証 | /login で claude.ai にサインインしています。API キー、ゲートウェイトークン、またはクラウドプロバイダー認証情報を使用するセッションは公開できません。 |
| モデルプロバイダー | Anthropic API。Amazon Bedrock、Google Cloud Vertex AI、または Microsoft Foundry では利用できません。 |
| 組織ポリシー | カスタマー管理暗号化キー（CMEK）、HIPAA、および Zero Data Retention は組織で有効になっていません。 |
| サーフェス | Claude Code CLI、または Claude デスクトップアプリバージョン 1.13576.0 以降。Agent SDK、GitHub Action、MCP サーバーコンテキストではデフォルトでオフになっており、CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC が設定されている場合もオフになります。 |
アーティファクトを無効にする
組織の設定に関係なく、独自のセッションのアーティファクトをオフにするには、以下のいずれかを使用します。組織のアーティファクトを管理する
Team および Enterprise プランの管理者は、claude.ai 管理設定からアーティファクトを制御します。アーティファクトコンテンツは Anthropic が運用するインフラストラクチャに保存され、公開組織の認証されたメンバーにのみ表示されます。アーティファクトを有効または無効にする
組織全体のアーティファクトを有効または無効にするには、Settings > Claude Code > Capabilities に移動し、Artifacts トグルを使用します。ロールベースのアクセス制御を備えた Enterprise プランでは、アーティファクトを特定のロールにスコープすることもできます。Settings > Roles に移動し、ロールを編集して、Claude Code グループの下の Artifacts 権限を設定します。保持ポリシーを設定する
アーティファクトが自動削除される前にどのくらい保持されるかを設定するには、Settings > Data & privacy controls に移動します。作成者にまだプライベートなアーティファクトと共有されているアーティファクトに対して、別の保持期間を設定できます。監査ログを確認する
アーティファクトの公開、共有、および削除は、それぞれ組織の監査ログにclaude_artifact_* イベントタイプの下に表示されます。これは claude.ai の会話で作成されたアーティファクトに使用されるのと同じファミリーです。
ビューアドメインをホワイトリストに登録する
claude.ai のビューアは、サンドボックス化された*.claudeusercontent.com オリジンから各アーティファクトを読み込みます。組織が送信ネットワークアクセスを制限している場合は、claude.ai と一緒にそのドメインをホワイトリストに追加します。完全なリストについては、ネットワークアクセス要件を参照してください。
Compliance API でアーティファクトをリストおよび削除する
Compliance API は、組織のアーティファクトをリストしたり、特定のバージョンのコンテンツを取得したり、アーティファクトを削除したりするエンドポイントを提供します。| メソッド | エンドポイント |
|---|---|
GET | /v1/compliance/code/artifacts |
GET | /v1/compliance/code/artifacts/{artifact_id}/versions/{version_id} |
DELETE | /v1/compliance/code/artifacts/{artifact_id} |
関連リソース
- アーティファクトと組み合わせるプロンプティングパターンとワークフローを参照する
- 再利用するアーティファクトプロンプトをスキルに変換して、コマンドとして呼び出せるようにする
- MCP サーバーを接続して、Claude がアーティファクトにライブデータを取得できるようにする