Claude Media
Claude Code Artifactsの共有ページが同じURLで自動更新される仕組み

Claude Code Artifactsの共有ページが同じURLで自動更新される仕組み

Claude Code artifactsは、セッションの作業を同じURLで更新し続ける共有ページに変える機能です。URLの形、共有範囲、更新とフォント指定、使える条件を解説します。

Anthropicは2026年6月18日、Claude Codeにartifacts機能を追加すると発表しました。PRのウォークスルーやダッシュボード、リリースチェックリストといった成果物を、コードベースやコネクタ、会話全体の文脈から1枚のWebページとして作り、同じURLのまま更新し続けられます。

Claude Code artifactsとは何か

Claude Code artifactsは、セッションの作業をライブで更新される共有可能なWebページに変える機能です。テキストより画面で見たほうが伝わる成果物を、コードベースやコネクタ、会話そのものを含むセッションの文脈全体から1枚のページとして構築します。インシデント調査からサービスのリファクタリング、数か月分のデータ分析まで、セッションが扱う作業の幅は広く、artifactsはそれを見て操作できるページに翻訳します。

Anthropicは社内テストで、スタンドアップ前にインシデント調査を始めたエンジニアの例を挙げています。ログを追ったClaudeにタイムラインと疑わしいコミット、エラー率のグラフをまとめたartifactを作らせ、リンクをチームに共有しました。調査が進むあいだにartifactは2回republishされ、スタンドアップが始まるころにはチーム全員が同じ画面を見ながら状況を把握できたといいます。エージェントが見つけたことを口頭で説明し直す手間が、共有ページ1枚で置き換わった格好です。

セッションの文脈からページが生まれ、同じURLで更新され続ける仕組み

artifactは、開いたブラウザの中でセッションの進行に合わせてその場で更新されるページです。Claudeがpublishするたびに新しいバージョンとして記録され、ページのShareコントロールからバージョンを選んで表示を切り替えられます。URLは変わらないため、一度共有したリンクは更新後も同じ場所を指し続けます。

Shareコントロールでは、閲覧者に見せるバージョンを選べます。画面には「Always share latest version」というトグルと、「Sharing version 2」のようなバージョンの選択欄があります。過去の版を開くVersion historyが消えたという報告は別の記事にまとめています。

artifactのURLはclaude.ai/code/artifact/で始まります。公開した直後にClaudeがURLを表示し、ブラウザも自動で開きます。URLを紛失したときは、claude.ai/code/artifactsのギャラリーか/artifactsの一覧で探せます。

作成の流れは単純です。出力の性質によってはClaudeが自律的にartifactをpublishすることもあれば、次のように直接依頼することもできます。

Make an artifact that walks through this PR with the diff annotated inline.

確認が入るかどうかはモードと中身で決まります。plan mode以外では、自分が打ったプロンプトへの応答として公開する新しいartifactは、プロンプトも分類器の審査もなく通ります。例外は、コネクタ呼び出しやファイルダウンロードといったランタイム権限を宣言する公開です。plan modeでは、artifactごとの最初の公開の前にClaude Codeが確認を求めます。

公開リンクで共有したあとは、変更前に会話ごとに1回承認を求められ、auto modeでは分類器が変更を審査します。feature-flagの取得を止めている場合は、artifactごとの最初の公開で確認が入ります。

タイトルと絵文字はClaudeが内容から自動で選び、ギャラリーや共有リンクの表示にそのまま使われます。ブラウザタブのアイコンも同様に内容に応じて選ばれるため、特定のタイトルや絵文字にしたい場合は名指しで頼む必要があります。

フォントを変えたいときは、使いたい書体名をプロンプトかデザインシステムの指示に書いて頼みます。Google Fontsなら読み込めます。それ以外の書体はClaudeがデータURIで埋め込み、読み込めない場合に備えて代替フォントも指定します。

ページ自体には技術的な制約があります。公開するファイルは.html・.htm・.mdのいずれかで、UTF-8またはBOM付きUTF-16LEとしてデコードできる必要があり、レンダリング後のサイズは16MiB以下に収める必要があります。外部画像は許可CDNからのものも含めてすべてCSPでブロックされ、データURIで埋め込む必要があります。スクリプトはcdnjs・unpkg・Tailwind・jQueryの各CDNとjsDelivrの一部パス、書体はGoogle Fontsからだけ読み込めます。それ以外の外部スクリプト・スタイルシート・フォントはブロックされます。ページはバックエンドを持たない単一ページなので、閲覧者を自分で認証することもできません。

別のセッションから同じartifactを更新するときの流れは次のとおりです。

手順

別のセッションからartifactを更新する

  1. 1

    対象のartifactを指定する

    ClaudeにそのページのURLを渡すか、/artifactsの一覧から選んで現在のセッションにアタッチします。何も渡さないと、新しいセッションは既存のページを更新せず、別のartifactを作ります。

  2. 2

    一覧で操作を選ぶ

    /artifactsは自分が持つartifactと共有されたartifactを並べ、oでブラウザで開き、cでリンクをコピーし、Enterでアタッチします。v2.1.216より前のEnterはブラウザで開く動作でした。一覧はclaude.aiのアカウントから読み込むので、/clearのあとでも使えます。使えるのはv2.1.208以降です。

  3. 3

    更新を依頼する

    「このURLに今日の数字を反映して」のように頼むと、Claudeが現在の内容を取り込み、同じURLに新しいバージョンをpublishします。

コネクタ経由でデータを引き込み続けるダッシュボードのようなartifactも作れます。閲覧者ごとにデータが変わる挙動と、コネクタ呼び出しを止める設定はClaude Code ArtifactsのMCP連携で公開後もライブデータを更新するで扱っています。スマホやclaude.aiから頼むとPCにタブが開かない点はRemote Controlでartifactが開かない原因に書きました。

共有範囲と可用性の条件

新しく作られたartifactは自分だけに見える状態から始まり、共有はページ上部のShareコントロールから行います。共有できる範囲は加入プランで変わります。

くらべる

プランごとの共有手段

個人

Pro・Max

サインイン不要で誰でも開ける公開リンクが唯一の共有手段です。組織による管理は入りません。

組織

Team・Enterprise

特定の相手や組織の全員に共有でき、編集者権限も与えられます。公開リンクは既定でオフで、Ownerが組織向けに有効化するまで使えません。

公開リンクで開いた閲覧者には、公開者の名前の代わりに「Content is user-generated and unverified.」というラベルが出ます。サインインしていても組織外の閲覧者は同じ扱いです。組織内で共有したページでは、組織のメンバーにタイトルメニューで公開者の名前が見えます。公開リンクで開いたページでも、組織内でサインイン済みの閲覧者にはページヘッダーに公開者の名前が出ます。

利用するには次の5条件をすべて満たす必要があります。

条件内容
プラン内容Pro・Max・Team・Enterpriseのいずれか(Team・Enterpriseは既定でオン。Ownerが組織単位でオフにできる)
認証内容/loginでclaude.aiアカウントにサインインしたセッション。APIキー・ゲートウェイトークン・クラウド事業者の資格情報によるセッションは対象外
モデル提供元内容Anthropic API経由のみ。Amazon Bedrock・Google CloudのAgent Platform・Microsoft Foundry経由では使えない
組織のポリシー内容Customer-managed encryption keys(CMEK)・HIPAA・Zero Data Retentionのいずれかが有効な組織では使えない
実行面内容Claude Code CLIまたはClaude Desktopアプリv1.13576.0以降(組織でClaude Tagとartifactsが両方有効なら、Claude Tagセッションからも公開できる。自分で始めたclaude remote-controlのセッションも、v2.1.281以降なら公開できる)。Agent SDK・GitHub Action・MCPサーバーの実行文脈とCLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC設定時は既定でオフ

組織のポリシーはapi.anthropic.comから読み込まれ、読み込めないとartifactsは使えません。プロキシやVPN、Webフィルタがある環境ではapi.anthropic.comを通す必要があります。閲覧側では、claude.aiのビューアが*.claudeusercontent.comのサンドボックスからページを読み込むため、アウトバウンド通信を制限している組織はclaude.aiとあわせてこのドメインも許可リストに加えます。

Claude CodeをGitHub Actionsに組み込むで動かすGitHub Actionは、この既定オフの対象です。Agent SDKの実行文脈も同じで、APIキーで認証するセッションはそもそも公開できません。

個人の設定でartifacts自体を止める手段は4通りです。

  • /configのArtifacts行をオフにする(ユーザー設定に"enableArtifact": falseが書かれます)
  • 設定ファイルで"enableArtifact": falseを指定する(旧キーの"disableArtifact": trueも同じ効果)
  • 環境変数CLAUDE_CODE_DISABLE_ARTIFACT=1を設定する
  • 権限ルールのpermissions.denyにArtifactを加える

--settingsファイルや環境変数でオフにした場合と、管理者がmanaged settingsでオフにした場合は、どの設定ファイルでもオンに戻せません。プロジェクトの.claude/settings.jsonや.claude/settings.local.jsonに"enableArtifact": falseを書けば、そのプロジェクトだけで止められます。この指定はv2.1.242以降で効き、同じ場所のtrueではオンに戻りません。

domain:を付けないWebFetchのdenyまたはaskルールでは、artifactsは止まらず、artifactの読み取りも止まりません。WebFetch(domain:claude.ai)をdenyかaskに置くと、artifactの読み取りには効きます。

組織全体の管理は、有効化・ロールごとの権限範囲・公開範囲・保持期間・監査ログ・Compliance APIでの一覧削除という単位に分かれています。設定項目ごとの挙動はClaude Code Artifactsの組織管理にまとめているので、Owner権限で運用する場合はそちらを確認してください。公開リンクへの切り替えで拒否されるときの切り分けはClaude Artifactsで公開できないときの原因と対処にあります。

編集者権限を与えられた相手も、ページを画面上で直接書き換えるわけではありません。閲覧者と同じように最新版を見られるだけでなく、自分のセッションからそのartifactのURLを指定してrepublishできる、という形の共同編集です。Claudeが現在の内容を取り込んだうえで変更点を反映するため、更新のたびにClaudeとのやり取りを経由する点は、作者本人が更新する場合と変わりません。

他人のartifactをClaudeに読ませる

共有されたartifactは、URLを渡すか/artifactsからアタッチするとClaudeに読ませられます。Claudeが得るのはWebFetchと同じ要約で、生のページではありません。ページに書き込まれた指示は、実行されずに「指示が書かれていた」と報告されます。完全なソースはローカルファイルに保存され、編集者としてrepublishするときなど、正確な内容が要る場面でClaudeが開きます。

読み取りの前に承認を求められるのは、次の場合です。

  • ネットワークアクセスなし(Noneレベル)のクラウド環境のセッション
  • 別の組織の公開artifact(auto modeでも確認が入り、bypassPermissionsのように尋ねられない場面では読めない)
  • 作成者やネットワーク設定を確認できないとき
  • plan modeのとき、またはfeature-flagの取得を止めているとき(自分の組織の他人のartifactが対象)

コメントの受け取りとClaudeの自動返信

組織内で共有したartifactには、v2.1.221以降でコメントを付けられます。公開リンクだけで開いた閲覧者にはコメントが見えず、付けることもできません。Claudeがスレッドに返信や解決をできるのは、編集権限を持つ人が「Send to Claude」で送ったか、@claudeでメンションして起動したスレッドだけです。起動していないスレッドは、人が解決するまで開いたままです。

v2.1.228以降は、セッションが公開したartifactをセッションの実行中ずっと監視し、起動されたコメントに自動で返信します。動きはパーミッションモードで分かれます。

状況画面の表示Claudeの動き
確認なしで返信を投稿できるモード画面の表示Auto-replied to comment thread on Artifact: <name>Claudeの動き読んで返信し、依頼があればartifactも編集する
plan mode以外で、返信に承認が要るモード画面の表示Comments are waiting on Artifact: <name>Claudeの動きスレッドの読み取りと返信の投稿を、それぞれ確認してから行う
plan mode画面の表示同上Claudeの動きplan modeを抜けて頼むまで返信しない

1時間に60件という上限は、返信の数ではなく、処理したコメントやスレッドの起動の件数です。上限に達すると「待機中」の表示が1回出て、古いコメントが1時間を過ぎるにつれて再開します。止めたいときは、アイドル状態のプロンプトでCtrl+Cを1回押します。/tasksでその監視タスクを止めれば、再度頼むまで返信しません。Ctrl+X Ctrl+Kを3秒以内に2回押すと、そのセッションの全artifactで自動返信が止まります。

artifactsはTeam・Enterprise限定のベータからPro・Maxの個人利用まで広がった

公式ブログでの発表は、Team・Enterprise向けのベータ提供として書かれていました。共有範囲も、組織内の認証済みメンバーのみが閲覧でき公開はできない、という設計で紹介されています。現行の公式ドキュメントでは、対象プランがPro・Maxにも広がったのに合わせて共有範囲も変わりました。対象プランと共有範囲の両方が広がっており、プラン別の違いは上の比較に書いたとおりです。

発表では「複数のデザイン案を並べて比較する」使い方が触れられていました。編集者権限を使った共同編集の挙動は、デザインシステムと共同編集で扱っています。プロジェクトの進捗を同じURLで育てる公式プラグインは、project-artifactプラグインの使い方にあります。

まとめ

Pro・Maxなら追加の設定なしで公開リンクを作れるので、まず1枚作って共有してみる流れで足ります。Team・Enterpriseで公開リンクが出ないときは、Ownerに外部共有の有効化を頼むのが先です。公開リンクと保持期間の設定はOwnerの管理画面での操作が要りますが、組織内共有と編集者の付与は作者がShareから行えます。

CI・Agent SDK・MCPサーバー上のセッションや、Bedrock・Google Cloud・Microsoft Foundry経由の環境では使えない前提で、共有ページを使わない構成にしておくのが安全です。

参照した一次ソース

この記事の記述は、次の一次ソースと照合しています。更新時に参照先が変わった場合は一覧も更新します。

  1. claude.com/blog/artifacts-in-claude-code
  2. code.claude.com/docs/en/artifacts
この記事を共有:XはてブLinkedIn