> ## Documentation Index > Fetch the complete documentation index at: https://code.claude.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # セッション出力をアーティファクトとして共有する > アーティファクトは Claude Code の作業をライブでインタラクティブなページに変え、claude.ai 上で非公開に保つか、組織と共有するか、公開リンクに公開できます。 {/* plan-availability: feature=artifacts plans=pro,max,team,enterprise providers=anthropic */} アーティファクトは Pro、Max、Team、および Enterprise プランで利用でき、[`/login`](/docs/ja/setup#authenticate) でサインインしたセッションが必要です。要件の完全なセットについては、[利用可能性](#availability)を参照してください。 アーティファクトは、Claude Code がセッションから claude.ai のプライベート URL に公開するライブでインタラクティブなウェブページです。ブラウザで開くと、セッションが続く間、ページはその場で更新されます。ページヘッダーから共有して、他の人にも見てもらうことができます。たとえば、アーティファクトを使用して、注釈付きの差分でプルリクエストをレビュアーに説明したり、セッションデータからダッシュボードを構築したり、Claude が作業する際に埋まっていく調査タイムラインを保持したりできます。 claude.ai/code/artifact で開かれたアーティファクト。ビューアヘッダーには、アーティファクトタイトル acme-funnel-fix、Share ボタン、および作成者アバターが表示されます。Share メニューが開いており、Always share latest version トグル、Sharing version 2 と表示されたバージョンピッカー、Everyone at Acme オーディエンスセレクタ、および Copy link ボタンが表示されます。ヘッダーの下には、2 つのモバイルモックアップが並んで表示され、ファネルチャート、およびメトリックカードの行が表示されます。

アーティファクトを使用する時期

ターミナルテキストが Claude が生成した出力に適さない場合、アーティファクトを使用します。つまり、行ごとに読むよりも見たり操作したりする方が簡単な出力です。Claude はセッションが到達できるもの（コードベースや[接続されたツール](/docs/ja/mcp)を通じて取得したデータを含む）からページを構築するため、ページは段落で説明するのに時間がかかるものを表示できます。たとえば、Claude に以下を依頼します。 * 注釈付きの差分でプルリクエストをレビュアーに説明する * セッションが既に取得したデータからダッシュボードをレンダリングする * 複数のデザインまたは実装オプションを並べて配置する * 長いタスクが実行される間に埋まっていく調査タイムラインを保持する * 出力を Slack に貼り付ける代わりに、チームメイトにリンクを送信する * [MCP コネクタを通じてライブデータを取得](#pull-live-data-with-mcp-connectors)する各ステータスボードを公開する [構築できるもの](#what-you-can-build)でこれらに対応するプロンプトを参照してください。また、[MCP コネクタを通じてライブデータを取得](#pull-live-data-with-mcp-connectors)でコネクタバックアップボードのプロンプトを参照してください。

アーティファクトではないもの

アーティファクトは作業のキャプチャであり、アプリケーションではありません。バックエンドのない単一の自己完結型ページであるため、フォーム入力を保存したり、複数のルートを提供したりすることはできません。また、誰かがそれを表示する際に外部データへのアクセスの唯一の方法は[MCP コネクタを呼び出す](#pull-live-data-with-mcp-connectors)ことです。バックエンド付きのホストされた内部ツールの場合は、代わりに独自のインフラストラクチャにデプロイしてください。制限の完全なセットについては、[ページの制約](#page-constraints)を参照してください。

アーティファクトを作成する

Claude は出力がページに適している場合、自動的にアーティファクトを公開することもあれば、直接リクエストすることもできます。リクエストするには、機能の名前を付けるか、プレーンテキストで必要なビジュアル出力を説明します。テキストとして読むよりも見る方が簡単なもの（注釈付きの差分、チャート、比較するオプションのセットなど）が良い候補です。以下のプロンプトは 2 つの例です。より多くのパターンについては、[構築できるもの](#what-you-can-build)を参照してください。 ```text wrap theme={null} このプルリクエストを通じて、差分がインラインで注釈されたアーティファクトを作成してください。 ``` ```text wrap theme={null} 先週のデプロイ失敗をサービス別にダッシュボードアーティファクトとして構築し、調査を進める際に更新し続けてください。 ``` Claude はプロジェクト内の HTML または Markdown ファイルにページを書き込み、公開します。新しいアーティファクトを公開する前に、Claude Code は許可を求めます。'Claude wants to publish "Deploy failures by service" (deploy-failures.html) to a private page on claude.ai」のようなメッセージが表示される場合があります。既に承認したアーティファクトを再公開しても、再度プロンプトは表示されません。 **Yes** を選択して公開します。Claude は URL を出力し、ブラウザは新しいページに開きます。ターミナルから最新のアーティファクトを再度開くには、いつでも `Ctrl+]` を押してください。 Claude はアーティファクトのタイトルとブラウザタブアイコンの絵文字を選択します。どちらも claude.ai の[アーティファクトギャラリー](#share-an-artifact)と共有リンクに表示されるため、特定のタイトルまたはアイコンが必要な場合は Claude に使用するよう依頼してください。 新しいアーティファクトが公開されたときにブラウザが自動的に開かないようにするには、環境で `CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0` を設定します。 Claude が公開できないと応答した場合、またはリンクなしでローカル HTML ファイルを書き込んだ場合、ツールはセッションで有効になっていません。[利用可能性](#availability)の要件を確認してください。

アーティファクトを更新する

Claude にページを修正するよう依頼するか、長時間実行されるタスクが進行状況を再公開するようにします。Claude は基になるファイルを編集し、同じ URL に再度公開します。 ```text wrap theme={null} 概要チャートの下に地域ごとの内訳を追加して、再公開してください。 ``` ページを開いている人は誰でも、その場で更新を見ることができます。公開するたびにバージョンになり、ページヘッダーの **Share** コントロールからビューアが見るバージョンを選択できます。 別のセッションからアーティファクトを更新するには、Claude にアーティファクトの URL を指定して、修正するよう依頼します。URL がない場合、新しいセッションは常に既存のアーティファクトを更新するのではなく、新しいアーティファクトを作成します。 ```text wrap theme={null} https://claude.ai/code/artifact/5fbea6f3-... を今日の数字で更新してください。 ```

アーティファクトを共有する

新しいアーティファクトは最初、あなただけに表示されます。これを共有するには、ブラウザでアーティファクトを開き、ページヘッダーの **Share** コントロールを使用してください。ヘッダーにはあなたがアーティファクトの作成者として表示されるため、共有した人は誰がページを公開したかを確認できます。また、[claude.ai/code/artifacts](https://claude.ai/code/artifacts) のあなたのギャラリーにリンクしており、ここには作成したすべてのアーティファクトが一覧表示されます。 共有できる相手はあなたのプランによって異なります。 * **組織内での共有**: Team プランと Enterprise プランでは、組織内の特定のユーザーまたは組織全体にアクセス権を付与できます。ビューアーは組織のメンバーとして claude.ai にサインインしてページを表示します。 * **公開共有**: インターネット上の誰でも開くことができるリンクを共有でき、claude.ai へのサインインは不要です。Pro プランと Max プランでは、公開リンクがアーティファクトを共有する唯一の方法です。Team プランと Enterprise プランでは、公開共有はオフになっており、Owner が [組織に対して有効にする](#control-public-sharing) まで使用できません。

他のユーザーと一緒に編集する

共有した人はデフォルトではビューアーです。つまり、公開した各バージョンを確認できますが、ページを変更することはできません。Team プランと Enterprise プランでは、ユーザーをエディターにすることもできます。共有ダイアログでユーザーを追加し、その役割を **viewer** から **editor** に切り替えます。 エディターは、[別のセッションからアーティファクトを更新する](#update-an-artifact) のと同じ方法で新しいバージョンを公開します。つまり、自分のセッションでアーティファクトの URL を Claude に提供し、Claude が現在のコンテンツを取得して変更を加えて再公開します。ページを開いているすべてのユーザーは各更新をリアルタイムで確認できます。

MCP コネクタで ライブデータを取得する

{/* plan-availability: feature=artifact-mcp plans=pro,max,team,enterprise providers=anthropic */} アーティファクトは、ページを表示するたびに [MCP コネクタ](/docs/ja/mcp#use-mcp-servers-from-claude-ai) を呼び出すことができるため、ページはセッションで構築されたスナップショットではなく、現在のデータを表示します。アーティファクトからのコネクタ呼び出しは Pro、Max、Team、Enterprise プランで利用可能であり、Claude Code v2.1.209 以降が必要です。以前のバージョンでは、Claude はセッション中に収集されたデータでページを公開します。 コネクタバックアップページを作成するには、プロンプトでコネクタと必要なデータを指定します。 ```text wrap theme={null} 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 はそれらを宣言で指定し、ページを表示するときに、各呼び出しは [表示アカウント独自のコネクタへの接続を通じて実行されます](#how-connector-calls-work-for-viewers)。Claude Code で設定するローカル MCP サーバー（`.mcp.json` のサーバーなど）は、Claude がページを構築している間にデータを提供できますが、公開されたページはそれらを呼び出すことはできません。 ページはロード時にデータを取得し、一定の間隔で、またはビューアがページのリフレッシュコントロールを使用するときにリフレッシュできます。レスポンスはビューアのブラウザにキャッシュされるため、再度開いたページはキャッシュされたレスポンスからすぐにレンダリングされ、その後新しい結果で更新されます。

ビューアのコネクタ呼び出しの仕組み

公開されたページがコネクタを呼び出すとき、呼び出しはそれを公開した人のアカウントではなく、ページを表示している人のアカウントを使用します。 * **各ビューアは独自のコネクタを使用します**。呼び出しは表示アカウントの接続されたツールを通じて行われるため、同じダッシュボードを開く 2 人は、アカウントがアクセスできるものに応じて異なるデータを表示できます。ページは誰の認証情報も表示しません。claude.ai はページの代わりに呼び出しを行います。 * **ビューアは最初にアクセスを承認します**。claude.ai はページの最初のコネクタ呼び出しの前に、各ビューアに権限を求めます。ビューアが拒否した場合、またはページが使用するコネクタを接続していない場合でも、ページはライブセクションなしで表示されます。 * **アクションもビューアのアカウントを使用します**。ページは、メッセージの投稿や問題の更新など、副作用を伴うコネクタツールを呼び出すコントロールを提供できます。アクションは、コントロールを選択した人のアカウントを通じて行われます。 コネクタバックアップページを共有する予定がある場合は、Claude に各ライブセクションに必要なコネクタを指定するフォールバックメッセージを含めるよう依頼してください。接続が不足しているビューアには、空のセクションの代わりに接続する内容が表示されます。 コネクタを呼び出すアーティファクトは、どのプランでも公開リンクで共有することはできません。Team および Enterprise プランでは、プライベートに保つか、[組織内で共有](#share-an-artifact) できます。公開リンクが唯一の共有方法である Pro および Max プランでは、コネクタバックアップアーティファクトはあなたにプライベートのままです。

ビューアに対してページがライブデータを表示しない

コネクタバックアップページがレンダリングされても、共有した人のライブセクションが空のままの場合は、これらの原因を確認してください。 * **ビューアがコネクタを接続していない**。コネクタはアカウントごとなので、各ビューアはページが呼び出すすべてのコネクタへの独自の接続が必要です。claude.ai の **Settings > Connectors** で追加してから、ページをリロードできます。 * **ビューアが権限要求を拒否した**。拒否はそのページロードの残りの間続きます。ページをリロードすると、権限要求が戻ります。 * **組織のコネクタ呼び出しがオフになっている**。所有者は管理設定で [**Enable artifact connectors** トグル](#control-connector-calls-from-artifacts) を制御します。

構築できるもの

アーティファクトは単一の HTML ページであるため、HTML、CSS、およびインラインの JavaScript で表現できるものはすべてスコープ内です。以下のパターンが最も頻繁に発生します。

変更を通じて説明する

差分またはデザイン変更をレンダリングするページを、関連する行の横に注釈を付けてリクエストします。これにより、レビュアーは説明から再構築するのではなく、コードの横にあなたの推論を読むことができます。 ```text wrap theme={null} このプルリクエストを通じて説明するアーティファクトを作成してください。差分をマージン注釈でレンダリングし、重大度別に検出結果をカラーコーディングしてください。 ```

代替案を比較する

1 つのページに複数のバリアントをリクエストして、互いに評価できるようにします。これはレイアウト、コピー、API シェイプ、または実装計画に機能します。 ```text wrap theme={null} 設定パネルの 4 つの明らかに異なるレイアウトを含むアーティファクトを作成してください。密度とグループ化を変更し、それぞれの下に 1 行のトレードオフを含むグリッドとしてレイアウトしてください。 ```

インタラクティブコントロールで調整する

スライダー、トグル、または入力フィールドを調整しているものにバインドするようリクエストします。これにより、説明する代わりに値を直接探索できます。 ```text wrap theme={null} イージングカーブ、期間、および遅延のスライダーを含むアーティファクトを構築してください。これにより、このトランジションの値を試すことができます。移動するとアニメーションがライブで表示されます。 ```

結果をセッションに戻す

アーティファクトは、Claude に返す決定の軽量エディタとして機能できます。エクスポートコントロールをリクエストして、ターミナルに貼り付けることができるテキストを生成します。これにより、ページとの相互作用の結果がページに留まるのではなく、セッションに流れ込みます。 ```text wrap theme={null} 各オープンイシューをドラッグ可能なカードとして Now、Next、Later、Cut 列全体に配置するトリアージボードアーティファクトを作成してください。「Copy as prompt」ボタンを追加して、ここに貼り付けるための最終的な順序を提供してください。 ```

進行中の作業を追跡する

長いタスクが実行される間、Claude にアーティファクトを最新の状態に保つよう依頼します。これにより、リンクを持つ人は誰でもターミナルを読まずにフォローできます。 ```text wrap theme={null} この移行計画をチェックリストアーティファクトに変換してください。完了したアイテムをチェックし、スキップしたものについてはメモを追加してください。 ```

ビジュアルデザインを改善する

Claude Code v2.1.183 以降、Claude はアーティファクトを構築するときに組み込みデザインスキルを適用するため、ページは追加のプロンプトなしで意図的なパレット、タイポグラフィ、およびレイアウトを取得します。そのスキルは、独自のものを選択する前に、プロジェクト内の既存のデザインシステムも探します。アーティファクトを製品のブランディングと一致させるために、Claude が見つけることができる場所（プロジェクトの [CLAUDE.md](/docs/ja/memory) またはリポジトリのテーマファイルなど）にデザイントークンを記録します。 ```markdown theme={null} ## Design system - Colors: primary #1a4d8f, accent #f59e0b, surface #f8fafc - Typography: Inter for body, JetBrains Mono for code - Spacing: 8px scale, 6px border radius ``` Claude はデザインシステムを独自の選択よりも高い優先度として扱い、プロンプトを両方よりも高い優先度として扱います。上記の見出しと形式は例です。色、フォント、および間隔の明確なリストはすべて機能します。

ページの制約

各アーティファクトは 1 つの自己完結型ページです。Claude Code は公開するファイルを HTML ドキュメントシェルでラップし、厳密なコンテンツセキュリティポリシー（CSP）の下で提供します。これはページが実行できることを形作ります。 | 制約 | 効果 | | :--------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 外部リクエストなし | CSP は、他のホストから読み込まれたスクリプト、スタイルシート、フォント、および画像をブロックします。また、`fetch`、XHR、および WebSocket 呼び出しもブロックします。Claude は CSS と JavaScript をインラインで埋め込み、画像をデータ URI として埋め込むため、ページは外部リクエストなしでレンダリングされます。[Connector 呼び出し](#pull-live-data-with-mcp-connectors)は例外です。ページはそれらを claude.ai に渡し、claude.ai がネットワーク呼び出しを自身で行います。 | | バックエンドなし | アーティファクトは静的ページです。フォームを通じて送信されたデータを保存したり、ビューアを自分で認証したりすることはできません。表示時にデータを取得する唯一の方法は、[MCP Connector を呼び出す](#pull-live-data-with-mcp-connectors)ことであり、独自の API ではありません。 | | 単一ページ | 相対リンクはページの横に何もデプロイされていないため、解決されません。複数セクションのコンテンツの場合、Claude は別のファイルではなく、ページ内アンカーを使用します。 | | ソースファイルタイプ | 公開されたファイルは `.html`、`.htm`、または `.md` である必要があります。Markdown ファイルはスタイル付き HTML としてレンダリングされます。 | | レンダリングサイズ | レンダリングされたページは 16 MiB 以下である必要があります。大きな埋め込み画像は、公開がサイズで失敗する場合の通常の原因です。 | アーティファクトを生成すると、他の応答と同様に出力トークンが使用され、スタイル付きページはターミナルテキストと同じコンテンツよりもトークン集約的です。インライン CSS、インタラクティブコントロール用の JavaScript、特にデータ URI として埋め込まれた画像が主な貢献者です。アーティファクトのトークンコストを削減するには、以下を実行します。 * 埋め込みラスター画像よりも図表に SVG または HTML と CSS を優先する * 不要なインタラクティビティを省略する * ページが大規模なデータセットを完全にインラインするのではなく、要約するようにする

利用可能性

アーティファクトには、以下のすべての条件が必要です。いずれかが満たされていない場合、Claude はローカル HTML ファイルを書き込むか、公開できないと言います。 | 要件 | 利用可能な場合 | | :-------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | プラン | Pro、Max、Team、または Enterprise。Pro および Max プランでは、アーティファクトはあなたにプライベートであり、共有するまで管理者管理は適用されません。Team プランでは、アーティファクトはデフォルトで有効です。Enterprise プランでは、Owner が claude.ai 管理設定で[有効にします](#manage-artifacts-for-your-organization)。 | | 認証 | セッションは claude.ai アカウントでバックアップされています。CLI またはデスクトップアプリで `/login` でサインインしてください。Claude Tag セッションはエージェントの ID を通じてサインインするため、追加の手順は不要です。API キー、[ゲートウェイトークン](/docs/ja/llm-gateway)、またはクラウドプロバイダー認証情報を使用するセッションは公開できません。 | | モデルプロバイダー | Anthropic API。[Amazon Bedrock](/docs/ja/amazon-bedrock)、[Google Cloud の Agent Platform](/docs/ja/google-vertex-ai)、または [Microsoft Foundry](/docs/ja/microsoft-foundry) では利用できません。 | | 組織ポリシー | カスタマー管理暗号化キー（CMEK）、HIPAA、および [Zero Data Retention](/docs/ja/zero-data-retention) は組織で有効になっていません。 | | サーフェス | Claude Code CLI バージョン 2.1.183 以降、または Claude デスクトップアプリバージョン 1.13576.0 以降。[Claude Tag](https://claude.com/docs/claude-tag/overview) セッションは、Claude Tag とアーティファクトの両方が組織で有効になっている場合、アーティファクトを公開することもできます。[Agent SDK](/docs/ja/agent-sdk/overview)、GitHub Action、MCP サーバーコンテキストではデフォルトでオフになっており、[`CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC`](/docs/ja/env-vars) が設定されている場合もオフになります。 |

アーティファクトを無効にする

組織の設定に関係なく、独自のセッションのアーティファクトをオフにするには、以下のいずれかを使用します。 | 方法 | 設定 | | :----------------------- | :------------------------------------ | | [設定ファイル](/docs/ja/settings) | `"disableArtifact": true` | | [環境変数](/docs/ja/env-vars) | `CLAUDE_CODE_DISABLE_ARTIFACT=1` | | [権限ルール](/docs/ja/permissions) | `permissions.deny` に `Artifact` を追加する |

組織のアーティファクトを管理する

Team および Enterprise プランの管理者は、[claude.ai 管理設定](https://claude.ai/admin-settings/claude-code)からアーティファクトを制御します。アーティファクトコンテンツは Anthropic が運用するインフラストラクチャに保存され、公開組織の認証されたメンバーにのみ表示されます。アーティファクトが[公開で共有](#control-public-sharing)されている場合を除きます。

アーティファクトを有効または無効にする

組織全体のアーティファクトを有効または無効にするには、**Settings > Claude Code > Capabilities** に移動し、**Artifacts** トグルを使用します。ロールベースのアクセス制御を備えた Enterprise プランでは、アーティファクトを特定のロールにスコープすることもできます。**Settings > Roles** に移動し、ロールを編集して、**Claude Code** グループの下の **Artifacts** 権限を設定します。

アーティファクトからのコネクタ呼び出しを制御する

[アーティファクトからのコネクタ呼び出し](#pull-live-data-with-mcp-connectors)には、アーティファクトのオン/オフを切り替える **Artifacts** トグルとは別の専用トグルがあります。[**Settings > Capabilities**](https://claude.ai/admin-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` と一緒にそのドメインをホワイトリストに追加します。完全なリストについては、[ネットワークアクセス要件](/docs/ja/network-config#network-access-requirements)を参照してください。

Compliance API でアーティファクトをリストおよび削除する

[Compliance API](https://docs.claude.com/en/api/compliance) は、組織のアーティファクトをリストしたり、特定のバージョンのコンテンツを取得したり、アーティファクトを削除したりするエンドポイントを提供します。 | メソッド | エンドポイント | | :------- | :------------------------------------------------------------------ | | `GET` | `/v1/compliance/code/artifacts` | | `GET` | `/v1/compliance/code/artifacts/{artifact_id}/versions/{version_id}` | | `DELETE` | `/v1/compliance/code/artifacts/{artifact_id}` | リクエストおよびレスポンススキーマについては、[Compliance API リファレンス](https://docs.claude.com/en/api/compliance/code/artifacts)を参照してください。 * アーティファクトと組み合わせる[プロンプティングパターンとワークフロー](/docs/ja/prompt-library)を参照する * 再利用するアーティファクトプロンプトを[スキル](/docs/ja/skills)に変換して、コマンドとして呼び出せるようにする * [MCP サーバーを接続](/docs/ja/mcp)して、Claude がアーティファクトにライブデータを取得できるようにする