メインコンテンツへスキップ
Artifacts は Pro、Max、Ultra、Team、Enterprise プランで利用可能で、/login でサインインしたセッションが必要です。要件の完全なセットについては、利用可能性を参照してください。
アーティファクトは、Claude Code がセッションから claude.ai 上のプライベート URL に公開するライブでインタラクティブな Web ページです。ブラウザで開くと、セッションが続く間、その場で更新されます。他の人にも見てもらいたい場合は、ページヘッダーから共有します。
claude.ai/code/artifact で開かれたアーティファクト。ビューアヘッダーには、アーティファクトタイトル acme-funnel-fix、Share ボタン、著者アバターが表示されています。Share メニューが開いており、Always share latest version トグル、Sharing version 2 と表示されたバージョンピッカー、Everyone at Acme オーディエンスセレクタ、Copy link ボタンが表示されています。ヘッダーの下には、2 つのモバイルモックアップが並んで表示され、ファネルチャート、メトリクスカードの行が表示されています。

アーティファクトを使用する場合

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

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

アーティファクトは作業のキャプチャです。バックエンドのない 1 つの自己完結型ページなので、複数のルートを提供することはできません。バックエンドを備えたホストされた内部ツールの場合は、代わりに独自のインフラストラクチャにデプロイしてください。制限の完全なセットについては ページの制約 を参照してください。

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

Claude は出力がページに適している場合、自動的にアーティファクトを公開することがあります。また、直接リクエストすることもできます。リクエストするには、機能の名前を指定するか、希望する視覚的な出力をプレーンテキストで説明してください。テキストとして読むより見る方が簡単なもの(注釈付きの diff、チャート、比較するオプションのセットなど)が良い候補です。以下のプロンプトは 2 つの例です。詳細は構築できるものを参照してください。
場所を指定しない限り、Claude はページを HTML または Markdown ファイルとしてプロジェクト外の一時ディレクトリに書き込み、公開します。アーティファクトは共有するまで、ユーザー本人だけが見られるプライベートな状態のままです。 最初の公開後、Claude は URL を出力し、ブラウザで新しいページが開きます。
  • ページを再度開く:任意の時点で Ctrl+] を押すと、セッションの最新のアーティファクトを再度開けます
  • このセッションのアーティファクトを確認する:プロンプトの下にある ⧉ ピルに、アーティファクトの名前、またはセッションに複数ある場合はその数が表示されます。フルスクリーンレンダリングでは、これをクリックすると /artifacts の一覧が開きます
  • ブラウザが開かないようにする:環境で CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 を設定します
  • Remote Control:claude.ai、Claude Desktop、または Claude モバイルアプリから Remote Control 経由でプロンプトを送信した場合、セッションを実行しているマシンではタブが開きません。ブラウザは、ターミナルで入力したプロンプトから Claude が次にアーティファクトを公開したときに開きます
Claude はアーティファクトのタイトルと、チャートやカレンダーなどページの内容に合ったブラウザタブアイコンを選択します。タイトルは claude.ai のアーティファクトギャラリーと共有リンクに表示されます。特定のタイトルやタブアイコンを使いたい場合は、Claude に依頼してください。 Claude が公開できないと応答した場合、またはリンクなしでローカル HTML ファイルを書き込んだ場合、セッションでアーティファクトが有効になっていません。利用可能性の要件を確認してください。ターミナルに Artifacts need a claude.ai login と表示された場合は、サインイン方法について該当するエラーの項目を参照してください。

公開前に Claude Code が確認する場合

入力したプロンプトに応じて Claude が公開する新しいアーティファクトは、権限プロンプトや分類器のレビューなしで処理されます。以下の場合、Claude Code はまず確認を求めるか、auto モードでは分類器に公開をレビューさせます。 作業ディレクトリ外のファイルをユーザーの承認なしで Claude が読み取れるようにするには、起動時に --add-dir を使用するか、セッション中に /add-dir を使用して、そのフォルダを作業ディレクトリとして追加します。Claude は、これらのディレクトリ内のファイルと、ページを書き込む一時ディレクトリ内のファイルを、確認なしですでに読み取ります。 公開のプロンプトに Also makes 1 edit to that file on disk. のような文が含まれている場合、Claude はアーティファクトのファイルの変更と公開を 1 つのステップで行います。プロンプトを承認すると、Claude Code はページを公開してから、変更をファイルに書き込みます。

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

Claude にページを修正するよう依頼するか、長時間実行されるタスクが進行状況に応じて再度公開するようにします。Claude は基になるファイルを編集し、同じ URL に再度公開します。
ページを開いているすべてのユーザーは、その場で更新を確認できます。公開するたびにバージョンになり、ページヘッダーの Share コントロールから、ビューアーに表示するバージョンを選択できます。 別のセッションからアーティファクトを更新するには、Claude にその URL を指定するか、/artifacts で添付します。どちらもない場合、新しいセッションは既存のアーティファクトを更新する代わりに、新しいアーティファクトを作成します。

アーティファクトを再度見つける

Claude Code で /artifacts を実行すると、所有しているアーティファクトと共有されているアーティファクトが一覧表示されます。現在のセッションのアーティファクトは This session の下に最初に表示されます。 アーティファクトを選択し、次のいずれかのキーを押します。
  • Enter:現在のセッションにすでに添付されている場合はブラウザで開き、添付されていない場合は添付します
  • o:ブラウザで開きます
  • c:リンクをコピーします
  • d:クラウドセッション以外では、確認後に所有しているアーティファクトを完全に削除します。そのリンクは自分を含むすべてのユーザーに対して機能しなくなります
Claude Code は claude.ai アカウントからリストを読み込むため、/artifacts は新しいセッションでも、/clear の後でアーティファクトのリンクがターミナルからスクロールアウトした場合でも機能します。

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

新しいアーティファクトは最初、あなただけに表示されます。共有するには、ブラウザでアーティファクトを開き、ページヘッダーの Share コントロールを使用してください。ヘッダーには claude.ai/code/artifacts のギャラリーへのリンクもあり、作成したすべてのアーティファクトが一覧表示されます。 組織内のビューアーは、ページを公開した人を確認できます。組織内で共有されたアーティファクトでは、あなたの名前がタイトルメニューに表示され、公開アーティファクトでは、組織内のサインイン済みビューアーのページヘッダーに表示されます。公開リンクをサインインせずに開いたビューアー、または組織外からアクセスしたビューアーには、あなたの名前の代わりに Content is user-generated and unverified. というラベルが表示されます。 共有できる相手はプランによって異なります。
  • 組織内: Team プランと Enterprise プランでは、組織内の特定のユーザーまたは全員にアクセス権を付与できます。ビューアーは、ページを表示するために claude.ai に組織のメンバーとしてサインインします。
  • 公開: インターネット上の誰でも開くことができるリンクを共有でき、claude.ai へのサインインは不要です。Team プランと Enterprise プランでは、Owner が 組織に対して公開共有を有効にする まで、公開共有はオフになっています。
ページにタブやセクションなど複数のビューがある場合は、そのうちの 1 つに直接リンクできます。Claude にリンクを依頼してください。
各リンクは、アーティファクトのリンクの末尾に #overview などのアンカーを付けたものです。

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

共有相手はデフォルトではビューアーです。公開した各バージョンを表示できますが、ページを変更することはできません。Team プランと Enterprise プランでは、ユーザーをエディターにすることもできます。共有ダイアログで、ユーザーを追加し、その役割を viewer から editor に切り替えます。 エディターは、別のセッションからアーティファクトを更新する のと同じ方法で新しいバージョンを公開します。アーティファクトの URL を Claude に提供するか、/artifacts から添付し、Claude が現在のコンテンツを取得して変更を反映して再公開します。ページを開いているすべてのユーザーが各更新をリアルタイムで確認できます。 Claude がページの古いコピーを保持している間にエディターが公開した場合、Claude Code はそのコピーに基づく公開を拒否します。その後、Claude は自身の変更を新しいバージョンにマージして、再度公開します。

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

誰かがアーティファクトを共有した場合、Claude にそれを読ませることができます。Claude にその URL を提供するか、/artifacts から添付してください。 Claude は他の人が書いたページを、WebFetch でウェブページを読む方法と同じように読みます。つまり、生のページではなく、質問した内容の要約を取得し、その要約はページに書き込まれた指示を報告しますが、それらを実行する代わりに報告するのです。Claude Code はまた、ページの完全なソースをローカルファイルに保存します。Claude は、アーティファクトを エディター として再発行する場合など、正確なコンテンツが必要な場合にそのファイルを開くことができます。 次の場合、Claude Code は、権限モードやルールによって求められるプロンプトに加えて、Claude がアーティファクトを読む前にユーザーの承認を求めます。
  • ネットワークアクセスのないクラウドセッション:クラウド環境 の場合、None レベルがこれに該当します。auto モード では代わりに分類器が承認できますが、Cowork セッションでは、承認できるのはユーザー本人だけです。
  • 別の組織の公開アーティファクト:Claude Code は auto モードであっても、まずユーザーに確認します。bypassPermissions モードなど、Claude Code がユーザーに確認できない場合、Claude はそのアーティファクトを読むことができません。Claude がこれらのアーティファクトを読めるのは、機能フラグの取得 がオンになっている間だけです。
  • 所有者またはネットワーク設定が未確認:Claude Code がアーティファクトの作成者を確認できない場合、またはクラウドセッションのネットワーク設定を確認できない場合は確認を求めます。ユーザーの承認はその 1 回のリクエストにのみ適用されます。
  • plan モード:plan モード では、Claude Code は、組織内の他の人が作成したアーティファクトを Artifact ツールが読む前に確認を求めます。
Claude が WebFetch でアーティファクトを読む場合も、WebFetch 自体の プロンプトのルール は引き続き適用されます。

アーティファクトのコメントを収集する

組織内でアーティファクトを共有すると、共有相手はページにコメントを残すことができ、Claude がそのコメントを読んで返信することができます。Claude Code v2.1.221 以降が必要です。Claude がコメントを読む場合は 2 つあります。
  • Claude に読むよう依頼する場合:Claude にアーティファクトの URL を提供し、コメントを求めます。Claude は各スレッドをリストアップし、アーティファクトを編集できるユーザーが送信したコメントをマークします。
  • アーティファクトを編集できるユーザーが Claude にコメントを送信する場合:ページのスレッドで、Send to Claude でコメントを送信するか、その中で @claude にメンションします。どちらの方法でも、スレッドが有効になります。
Claude は有効になったスレッドにのみ返信または解決できます。その他のスレッドは、ユーザーがページで解決するまで開いたままになります。ビューアーは、各返信が Claude から送信されたものとして表示されます(あなた経由で)。 アーティファクトを公開共有する場合、公開リンク経由でのみアクセスできるユーザーはコメントを表示できず、追加することもできません。既存のコメントスレッドはアーティファクトに残り、あなたとそのエディターはまだそれらを読んで返信できます。 コメントを自分で読むよう Claude に依頼するには、URL を提供します。
Claude がコメントを読めないと言う場合は、バージョン、セッション、フィーチャーフラグ設定を確認してください。
  • 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> が表示されます。
  • Claude があなたを待つ:プランモード外で、返信の投稿に承認が必要な場合、Comments are waiting on Artifact: <name> が表示されます。その後、Claude はスレッドを読む承認を求め、返信を投稿する承認を再度求めます。
  • Claude がプランモードで一時停止する:Comments are waiting on Artifact: <name> が表示され、Claude はプランモードを終了して読んで返信するよう求めるまで返信しません。
Claude は、1 時間以内にそのアーティファクトで 60 件の送信されたコメントまたはスレッド有効化を処理した後、アーティファクトへの自動返信を停止します。Comments are waiting on Artifact: <name> が 1 回表示され、Claude はその時間のコメントが古くなると再開します。 /tasks を実行すると、セッションが監視しているアーティファクトを確認できます。/tasks は、Claude Code が自動で開始した監視を System tasks 行の下にまとめます。その行で Enter を押すと、一覧が表示されます。Claude に開始を依頼した監視は Monitors の下に表示されます。 以下のいずれかの方法で、Claude の自動返信を停止できます。
  • アイドルプロンプトで Ctrl+C を 1 回押す:Claude はセッションが監視しているすべてのアーティファクトへの返信を一時停止します。次のメッセージを送信した後、返信が再開されます。
  • /tasks でタスクを停止する:Claude はそのアーティファクトへの返信を停止し、そこで返信を再開するよう求めるまで停止したままになります。アーティファクトを再度公開しても返信は再開されず、セッションを再開しても停止は適用されたままになります。
  • 3 秒以内に Ctrl+X Ctrl+K を 2 回押す:すべての実行中のバックグラウンドサブエージェントを停止するコードは、セッションの残りの間、Claude がすべてのアーティファクトに返信するのも停止します。Claude に返信を再開するよう求めても、この停止は元に戻りません。
Claude Code が自動で開始した監視は、アーティファクトで数時間アクティビティがない状態が続くと終了することがあります。監視を再開するには、アーティファクトを再度公開するか、Claude に監視するよう依頼してください。 コメントを配信するサービスが利用できなくなるか、応答を停止した場合、Claude Code はしばらく再接続を試み、その後、セッションが監視していた各アーティファクトの監視を停止します。

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

アーティファクトは、誰かが閲覧するたびに MCP コネクタを呼び出せます。そのため、ページにはそれを作成したセッション時点のスナップショットではなく、最新のデータが表示されます。アーティファクトからのコネクタ呼び出しは Pro、Max、Ultra、Team、Enterprise プランで利用でき、Claude Code v2.1.209 以降が必要です。それより前のバージョンでは、Claude はページの作成中にセッションが収集したデータをそのまま使ってページを公開します。 コネクタを利用するページを作成するには、プロンプトでコネクタと必要なデータを指定します。
Claude は公開処理の一環として、ページが呼び出せるコネクタを宣言します。ページはその宣言に含まれないコネクタを呼び出せません。対象となるのは claude.ai アカウントのコネクタのみです。Claude が宣言でそれらを指定し、誰かがページを閲覧すると、各呼び出しはそのコネクタに対する閲覧しているアカウント自身の接続を通じて実行されます。.mcp.json のサーバーなど、Claude Code で設定したローカルの MCP サーバーは、Claude がページを作成する間はデータを提供できますが、公開されたページからは呼び出せません。 ページは読み込み時にデータを取得し、一定間隔で、または閲覧者がページ上の更新コントロールを使ったときに再取得できます。レスポンスは閲覧者のブラウザにキャッシュされるため、再度開いたページはキャッシュされたレスポンスからすぐに描画され、その後新しい結果で更新されます。

閲覧者に対するコネクタ呼び出しの仕組み

公開されたページがコネクタを呼び出すとき、その呼び出しには公開した人のアカウントではなく、ページを閲覧している人のアカウントが使われます。
  • 各閲覧者は自分のコネクタを使用します:呼び出しは閲覧しているアカウントの接続済みツールを通じて行われるため、同じダッシュボードを開いた 2 人でも、それぞれのアカウントがアクセスできる内容に応じて異なるデータが表示されることがあります。ページが誰かの認証情報を参照することはありません。claude.ai がページに代わって呼び出しを行います。
  • 閲覧者は最初にアクセスを承認します:claude.ai は、ページが最初にコネクタを呼び出す前に、各閲覧者に権限を求めます。拒否した閲覧者や、ページが使用するコネクタを接続していない閲覧者にも、ライブセクションを除いたページが表示されます。
  • アクションにも閲覧者のアカウントが使われます:ページには、メッセージの投稿や issue の更新など、副作用のあるコネクタツールを呼び出すコントロールを用意できます。そのアクションは、コントロールを選択した人のアカウントを通じて実行されます。
コネクタを利用するページを共有する予定がある場合は、各ライブセクションに、必要なコネクタ名を示すフォールバックメッセージを含めるよう Claude に依頼してください。そうすれば、接続が不足している閲覧者には空のセクションではなく、何を接続すべきかが表示されます。 プランと組織の設定で許可されている範囲で、コネクタを利用するページを共有し、組織内または一般に公開できます。claude.ai にサインインせずに公開リンクを開いた閲覧者や、組織外の閲覧者に対しては、コネクタ呼び出しは実行されません。そのような閲覧者には、ライブセクションを除いたページが表示されます。

閲覧者にライブデータが表示されない

コネクタを利用するページは描画されるものの、組織内の閲覧者に対してライブセクションが空のままになる場合は、次の原因を確認してください。
  • 閲覧者がコネクタを接続していない:コネクタはアカウントごとに設定されるため、各閲覧者はページが呼び出すすべてのコネクタについて、自分自身の接続が必要です。claude.ai の Customize > Connectors でコネクタを追加してから、ページを再読み込みしてもらいます。
  • 閲覧者が権限の確認を拒否した:拒否はそのページ読み込みの間だけ有効です。ページを再読み込みすると、権限の確認が再び表示されます。
  • 組織でコネクタ呼び出しが無効になっている:Owner が管理設定の Enable artifact connectors トグルを制御します。
  • ページが、コネクタの公開していないツール名を呼び出している:該当するセクションは、自分を含むすべての人に対して空のままになります。これは、独自のツールを少数しか公開していないゲートウェイ型のコネクタについて、その背後にある個々のツールをページが指定している場合に発生することがあります。ページが呼び出すツール名を修正して再度公開するよう Claude に依頼してください。 Claude がページを公開する際、そのコネクタのツールがセッションで利用可能な場合、Claude Code はページが宣言するツール名をそれらと照合し、一致しない名前について Claude に警告します。一致する名前が 1 つもない場合は公開を拒否します。v2.1.265 より前では、ツール名を照合せずにページを公開していました。

ファイルダウンロードを提供する

アーティファクトは、ページが生成するファイル(テーブルの CSV エクスポートやチャートの PNG など)をビューアーに提供できます。ビューアーはページ上のダウンロードコントロール(ボタンなど)を通じてそれを保存します。ファイルダウンロードは claude.ai が提供するランタイム機能で、アカウント単位で有効になるため、Claude はコントロールを構築する前にアカウントがこの機能を持っているかどうかを確認します。 ビューアーは通常のダウンロードリンクやページ上のスクリプトからファイルを保存することはできません。これは、claude.ai のアーティファクトビューアーがページ自体が開始するダウンロード(data: または blob: URL へのリンクを含む)をブロックするためです。ページにこのような方法で構築されたダウンロードボタンがある場合は、Claude にダウンロード機能を使用して再構築するよう依頼してください。 ファイルを提供するには、プロンプトでコントロールとファイル形式をリクエストしてください。
Claude はダウンロード機能を公開の一部として宣言します。これはコネクターを宣言する方法と同じです。

構築できるもの

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

変更を通じて説明する

差分またはデザイン変更をレンダリングするページを、関連する行の横に注釈を付けてリクエストします。これにより、レビュアーは説明から再構築するのではなく、コードの横にあなたの推論を読むことができます。

代替案を比較する

1 つのページに複数のバリアントをリクエストして、互いに評価できるようにします。これはレイアウト、コピー、API シェイプ、または実装計画に機能します。

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

スライダー、トグル、または入力フィールドを調整しているものにバインドするようリクエストします。これにより、説明する代わりに値を直接探索できます。

結果をセッションに戻す

アーティファクトは、Claude に返す決定の軽量エディタとして機能できます。エクスポートコントロールをリクエストして、ターミナルに貼り付けることができるテキストを生成します。これにより、ページとの相互作用の結果がページに留まるのではなく、セッションに流れ込みます。

進行中の作業を追跡する

長いタスクが実行される間、Claude にアーティファクトを最新の状態に保つよう依頼します。これにより、リンクを持つ人は誰でもターミナルを読まずにフォローできます。

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

Claude がアーティファクトを構築する際、組み込みのデザインスキルを適用するため、ページは追加のプロンプトなしで意図的なパレット、タイポグラフィ、レイアウトを取得します。そのスキルはまた、独自のものを選択する前に、プロジェクト内の既存のデザインシステムを探します。デザイントークンは、デザインシステムが再利用する名前付きの色、タイポグラフィ、スペーシング値です。アーティファクトを製品のブランディングと一致させるために、Claude が見つけられる場所(プロジェクトの CLAUDE.md またはリポジトリのテーマファイルなど)に記録します。
Claude はデザインシステムを独自の選択肢より高い優先度として扱い、プロンプトを両方より高い優先度として扱います。上記の見出しと形式は例です。色、フォント、スペーシングの明確なリストであれば、どのようなものでも機能します。 タイポグラフィについて、Claude は Google Fonts からタイプフェイスを読み込むことができます。これはアーティファクトページが読み込むことができる唯一の外部フォントソースです。Claude は他のタイプフェイスを @font-face データ URI としてインライン化し、すべてのタイプフェイスにフォールバックスタックを提供するため、フォントが読み込まれない場合でもページは引き続きレンダリングされます。特定のタイプフェイスを使用するには、プロンプトまたはデザインシステムで名前を付けます。

スライド、デザイン、またはドキュメントテンプレートから開始する

ページをゼロから構築する代わりに、Claude は claude.ai アカウント上のテンプレートの 1 つからアーティファクトを開始できます。プレゼンテーション用の Claude Slides、ビジュアルデザイン用の Claude Design、または他の人が読んで編集するドキュメント用の Claude Docs です。各テンプレートは claude.ai 上の独自のエディターで開き、あなたとチームメンバーが直接変更するか Claude に変更を依頼でき、PowerPoint、PDF、Word などの形式にエクスポートできます。 テンプレートから開始するには、「移行ノートを木曜日のレビュー用のデッキに変換する」や「このプランをチーム用のドキュメントとして作成する」など、必要な内容を説明します。Claude は一致するテンプレートを選択し、リクエストとセッションが既に持っている内容から入力し、リンクを提供します。デッキまたはデザインの場合、/slides または /design をブリーフと共に実行することもできます。
テンプレートはベータ版です。Pro、Max、Ultra、Team プランではデフォルトで有効になっています。Enterprise プランでは、Owner が Organization settings > Artifacts の下で 各テンプレートを有効にします。組織で Slides テンプレートが無効になっている場合、/slides は表示されません。Design テンプレートが無効になっている場合、/design はデザインを作成しません。両方のコマンドには Claude Code v2.1.265 以降と アーティファクトが利用可能 なセッションが必要です。

スライドデッキを作成する

デッキが何をカバーしているか、誰のためのものかを説明するブリーフと共に /slides を実行します。
Claude は Claude Slides アーティファクトを作成し、リンクを提供します。デスクトップブラウザーで開いてデッキを編集またはプレゼンテーションします。ブリーフなしで /slides を実行した場合、Claude は何かを作成する前にデッキが何についてであるべきかを尋ねます。

デザインキャンバスを作成する

UI、画面フロー、ランディングページ、またはポスターをモックアップするために、ページを構築するのではなく、/design をブリーフと共に実行します。Claude はデザインを 1 つのキャンバス上のアートボードとして作成し、キャンバスを Claude Design アーティファクトとして公開します。ブリーフは描画する内容を指定します。
公開されたアーティファクトをデスクトップブラウザーで開いてアートボードを確認します。アートボード上の要素を選択して変更すると、編集は自動的に保存されます。各アートボードを PNG または PDF としてエクスポートできます。

Claude Docs でドキュメントを作成する

Claude Docs は Claude Code にコマンドではなく claude.ai コネクター として到達します。接続されている場合、/mcp はそれを claude.ai Claude Docs としてリストします。他の人のためのドキュメントのリクエストは、アーティファクトページではなく Claude Docs に送られます。仕様、提案、またはセッションで作成したプランの書き込みです。Claude はドキュメントが作成されたときにドキュメントのリンクを提供します。 README などのコードベースに属するドキュメントはファイルのままです。Claude が Claude Docs に配置するであろう何かのためにファイルを取得するには、.docx またはリポジトリ内の Markdown ファイルなどの形式を指定します。claude.ai Claude Docs コネクタのみをオフにするには、claude.ai コネクタを無効にする を参照してください。

ページの制約

各アーティファクトは 1 つの自己完結したページです。Claude Code は公開するファイルを HTML ドキュメントシェルでラップし、厳密なコンテンツセキュリティポリシー(CSP)の下で提供します。これはページが実行できることを形作ります。 アーティファクトを生成することは、他のレスポンスと同様に出力トークンを使用し、スタイル付きページはターミナルテキストと同じコンテンツよりもトークン集約的です。インライン CSS、インタラクティブコントロール用の JavaScript、特にデータ URI として埋め込まれた画像が主な要因です。アーティファクトのトークンコストを削減するには:
  • 埋め込みラスター画像よりも図表に SVG または HTML と CSS を優先する
  • 必要のないインタラクティビティを省略する
  • ページが大規模なデータセットを完全にインライン化するのではなく要約するようにする

利用可能性

Artifacts には以下のすべての条件が必要です。いずれかが満たされていない場合、Claude はローカル HTML ファイルを作成するか、公開できないと述べます。 Artifacts が組織に対して許可されているかどうかは、Claude Code が api.anthropic.com から読み込む組織のポリシーから決まります。Claude Code がポリシーを読み込めない場合、Artifacts は利用できません。リクエストすると、Claude がその理由を説明します。 プロキシ、VPN、またはウェブフィルターが関係している場合は、IT 管理者に api.anthropic.com を許可するよう依頼してください。Claude Code はバックグラウンドで再試行を続け、ポリシーが読み込まれて許可されると、Artifacts が利用可能になります。

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

組織の設定に関わらず、自分のセッションのアーティファクトをオフにするには、以下のいずれかを使用します。 --settings ファイルで、または CLAUDE_CODE_DISABLE_ARTIFACT でアーティファクトをオフにした場合、あるいは管理者が 管理設定 でアーティファクトをオフにした場合、どの設定ファイルもアーティファクトを再度オンにすることはできません。 プロジェクトの .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 が運用するインフラストラクチャに保存され、アーティファクトが公開で共有されていない限り、発行元の組織の認証済みメンバーと共有先の人のみに表示されます。

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

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

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

アーティファクトからのコネクタ呼び出しには、アーティファクトのオン/オフを切り替える Artifacts トグルとは別の専用トグルがあります。Organization settings > Capabilitiesに移動して、Enable artifact connectors トグルを使用します。同じトグルは claude.ai の会話で作成されたアーティファクトからのコネクタ呼び出しも管理します。

公開共有を制御する

公開共有は Team プランと Enterprise プランではデフォルトでオフになっています。メンバーがサインインなしで誰でも表示できるパブリックリンクにアーティファクトを公開できるようにするには、Organization settings > Artifactsに移動して、Artifacts トグルの下の External sharing をオンにします。オフに戻すと、各アーティファクトのオーディエンスを変更することなく、既存のパブリックリンク経由のアクセスがブロックされます。再度有効にすると、アクセスが再開されます。

保持ポリシーを設定する

アーティファクトが自動削除される前に保持される期間を設定するには、Organization settings > Data and privacyに移動します。作成者にのみプライベートなアーティファクトと共有されたアーティファクトに対して、別々の保持期間を設定できます。

監査ログを確認する

アーティファクトの公開、共有、削除は、それぞれ組織の監査ログに 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、および unpkg.com から読み込むことができ、他の外部ホストからは読み込めません。これらのホストをブロックすると、ライブラリに依存するアーティファクトの部分が機能しません。ブロックされたフォントとは異なり、ブロックされたライブラリにはフォールバックがありません。ブロックされたライブラリリクエストが即座に失敗するように、ここでも高速拒否でブロックして、タイムアウトするまでハングしないようにします。

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

Compliance APIは、組織のアーティファクトをリストアップし、特定のバージョンのコンテンツを取得し、アーティファクトを削除するエンドポイントを提供します。 リクエストとレスポンスのスキーマについては、Compliance API リファレンスを参照してください。