Claude Code Artifacts入門—Pro/Maxで解放されたライブ共有ページ

Claude Code Artifacts入門—Pro/Maxで解放されたライブ共有ページ | mohablog

2026年7月第2週のアップデートで、Claude CodeのArtifactsがProとMaxプランに解放されました。ターミナルで作った成果物を、claude.ai上のライブページとして発行してURLで共有できる機能。できること・できないことを、公式ドキュメント “Share session output as artifacts” を軸にまとめました。

目次

ターミナルの出力がclaude.aiのライブページになる

公式ドキュメントはartifactを「セッションから発行される、claude.ai上のプライベートURLで開くライブなWebページ」と定義しています。肝はライブであること。ブラウザで開いたままにしておくと、セッションの進行に合わせてページがその場で書き換わります。

想定されている用途は、diffに注釈を付けたPRウォークスルー、セッションが集めたデータのダッシュボード、長時間タスクの進行に合わせて埋まっていく調査タイムラインなど。実行結果をSlackに貼る代わりにリンクを1本送る運用が、公式の例に挙がっています。

実体はHTMLかMarkdownのファイル1枚

Claudeはプロジェクト内に.htmlか.mdのファイルを書き、それを発行します。発行できる形式は.html / .htm / .md。MarkdownはスタイルつきのHTMLとしてレンダリングされます。元ファイルは手元に残ります。発行できない環境でも、ローカルで開けば内容の確認は可能。

“What an artifact is not” が引く線

公式ドキュメントには “What an artifact is not” というセクションがあり、artifactは「作業のキャプチャであってアプリケーションではない」と明言されています。バックエンドのない1枚のページなので、フォーム入力の保存も複数ルートの配信も不可。バックエンドつきの社内ツールが要るなら自前のインフラにデプロイする、という線引きです。

Pro/Maxプランで使えるようになった

Artifactsは2026年6月にTeam/Enterprise向けに登場し、7月第2週のアップデートでPro/Maxに広がりました。公式ドキュメントの “Availability” に載っている条件を表にしました。

要件条件
プランPro / Max / Team / Enterprise。EnterpriseはOwnerによる有効化が必要
認証/loginでclaude.aiアカウントにサインインしたセッション。APIキーやゲートウェイトークンでは発行不可
モデルプロバイダAnthropic APIのみ。Amazon Bedrock / Vertex AI / Microsoft Foundryは対象外
バージョンCLI v2.1.183以降、またはデスクトップアプリ v1.13576.0以降
組織ポリシーCMEK / HIPAA / Zero Data Retentionが有効な組織では使えない

発行できないときに確認する箇所

Claudeが「発行できない」と答える、あるいはローカルにHTMLを書くだけでリンクが出ない場合、そのセッションではartifactツールが無効です。上の表のどれかを外しているケースがほとんど。業務でBedrock経由のClaude Codeを使っているなら対象外なので、試すのは個人のPro/Maxアカウント側になります。CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFICを設定した環境でも止まります。

Pro/Maxでは管理画面が関与しない

Pro/Maxのartifactは、共有するまで本人だけのもの。管理者設定は関与しません。Team/Enterpriseで必要になる組織側の有効化や共有制御は、記事の最後で。

発行から更新までの流れ

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

と頼むと、Claudeがページを書き、発行前に許可を求めてきます。

Claude wants to publish "Deploy failures by service" (deploy-failures.html)
to a private page on claude.ai

Yesを選ぶとURLが表示され、ブラウザが自動で開きます。ターミナルから開き直すならCtrl+]。ブラウザの自動オープンが邪魔ならCLAUDE_CODE_ARTIFACT_AUTO_OPEN=0で止まります。

再発行は確認なし、同じURLにバージョンが積まれる

一度承認したartifactの再発行に許可プロンプトは出ません。「サマリーの下に地域別の内訳を足して再発行して」と頼めば、同じURLに新バージョンが発行されます。開いている人の画面には更新がその場で反映されます。どのバージョンを見せるかの選択は、ページヘッダーのShareコントロールから。

別セッションからの更新はURLを渡す

URLなしで新しいセッションに頼むと、既存の更新ではなく別のartifactが新規作成されます。翌日に続きをやるなら、URLごと指示。

Update https://claude.ai/code/artifact/5fbea6f3-... with today's numbers.

これで既存ページに新しいバージョンが積まれます。

デザインはCLAUDE.mdのトークンが優先される

v2.1.182以降は、ビルトインのdesignスキルがページの見た目を担当。指示がなくてもパレットとタイポグラフィが整います。このスキルは自分で選ぶ前にプロジェクト内のデザインシステムを探すので、CLAUDE.mdに色・フォント・スペーシングを書いておけば自社ブランドに寄せられます。優先順位はプロンプト、プロジェクトのデザインシステム、ビルトインの順。

共有はプランで挙動が分かれる

発行直後のartifactは本人しか見られません。共有はターミナルではなく、ブラウザで開いたページヘッダーのShareコントロールから設定します。

Pro/Maxは公開リンクが唯一の共有手段

Pro/Maxで選べるのは公開リンクのみ。リンクを知っていれば誰でも、claude.aiにサインインせず開けます。組織内の相手を指定した共有はTeam/Enterprise限定で、そちらは逆に公開リンクがOwnerの「External sharing」有効化までオフ。ページヘッダーには作者名と、claude.ai/code/artifactsにある自分の全artifact一覧(ギャラリー)へのリンクが常に表示されます。公開リンクを配ると、この作者名とギャラリーも相手から見えます。

閲覧者はviewer、Team/Enterpriseならeditorにできる

共有相手はデフォルトで閲覧専用。Team/Enterpriseでは共有ダイアログからviewerをeditorに切り替えられます。editorといってもページを直接書き換えるのではなく、自分のClaude CodeセッションにURLを渡して再発行する方式。書き込みの経路はセッション経由に統一されています。

MCPコネクタで開くたびに最新データを引く

公式ドキュメントの “Pull live data with MCP connectors” セクションによると、v2.1.209以降のartifactはMCPコネクタを呼べます。ページを開くたびにコネクタからデータを取り直すため、表示されるのは発行時のスナップショットではなく現在の値。

Build a dashboard artifact of our open pull requests that pulls
the live list through my GitHub connector when the page loads.

こう頼むと、開くたびにGitHubコネクタからPR一覧を取り直すダッシュボードが発行されます。取得はページロード時のほか、一定間隔やページ上のリフレッシュ操作でも走り、応答は閲覧者のブラウザにキャッシュされます。

発行時にClaudeが「このページはどのコネクタを呼ぶか」を宣言し、宣言外のコネクタは呼べません。対象になるのはclaude.aiアカウントに接続したコネクタだけ。.mcp.jsonで設定したローカルMCPサーバーはページ構築中のデータ供給には使えますが、発行後のページからは呼べません。コネクタとローカルサーバーの違いはClaude Code MCPの使い方—リソースを@参照、プロンプトを/で実行に書いています。

呼び出しは閲覧者のアカウントで動く

“How connector calls work for viewers” セクションが説明する通り、共有されたページがコネクタを呼ぶとき、使われるのは発行者ではなく閲覧者のアカウントです。同じダッシュボードを開いても、見えるデータは閲覧者ごとのコネクタ接続とアクセス権次第。

初回の呼び出し前に入るのは、claude.aiから閲覧者への許可確認。ページ自体は誰の資格情報にも触れず、ネットワーク呼び出しはclaude.aiが代行する構造です。Issue更新やメッセージ投稿のような副作用のあるアクションをページに置いた場合も、実行されるのは操作した本人のアカウント経由。発行者の権限で閲覧者が操作する事故は構造的に起きません。

ライブ部分が空になったら疑う箇所

共有相手から「グラフが空で見える」と言われたときに公式が挙げる原因は次の通りです。

  • 閲覧者がそのコネクタを未接続。コネクタは閲覧者ごとに必要で、claude.aiのSettings > Connectorsから追加してリロードする
  • 閲覧者が許可を拒否した。拒否はそのページロードの間だけ有効で、リロードすれば確認が再表示される
  • 組織側でEnable artifact connectorsトグルがオフ

共有前提のページなら、ライブ部分ごとに必要なコネクタ名を示すフォールバック表示を頼んでおきます。未接続の閲覧者に見えるのが、空欄ではなく接続先の名前になります。

コネクタつきartifactは公開リンクにできない

コネクタを呼ぶartifactは、どのプランでも公開リンク共有の対象外。Team/Enterpriseは組織内共有で回避できますが、Pro/Maxは共有手段が公開リンクだけなので、コネクタつきartifactは自分専用になります。Pro/Maxでライブダッシュボードを他人に共有する使い方は、現状では組めません。

1ページ完結とCSPの制約

外部リクエストは全部ブロックされる

“Page constraints” によると、発行されたページは厳格なContent Security Policy(CSP)の下で配信されます。外部ホストからのscript / stylesheet / フォント / 画像の読み込みと、fetch / XHR / WebSocketはすべてブロック。CSSとJavaScriptはインライン化され、画像はdata URIとして埋め込まれます。例外は前述のコネクタ呼び出しだけで、これはページでなくclaude.aiがネットワークアクセスを代行します。

レンダリング後のサイズ上限は16 MiB。発行がサイズで失敗するときは、埋め込んだラスタ画像が大きすぎるケースが大半です。相対リンクも解決されません。複数セクションを組むなら、別ファイルでなくページ内アンカー。

トークンコストは通常の応答より重い

artifactの生成もほかの応答と同じく出力トークンを消費します。同じ内容でも、インラインCSS・操作用JavaScript・data URI画像の分だけターミナル出力より重い。公式が挙げる削減策は、図をラスタ画像でなくSVGかHTML+CSSで描く、使わないインタラクションを省く、大きいデータセットは全量でなく要約を載せる、の並びです。

無効化と組織側の管理

自分のセッションだけ止める

方法設定
settingsファイル"disableArtifact": true
環境変数CLAUDE_CODE_DISABLE_ARTIFACT=1
permissionsルールpermissions.denyArtifactを追加

denyルールの評価順序はClaude Code permissions—allow/denyの落とし穴と評価順序で扱っています。

Team/EnterpriseはOwnerが握る

組織全体の制御はclaude.aiのadmin settings側。Artifactsトグルによる有効/無効、公開リンクを許すExternal sharing、保持期間の設定、claude_artifact_*イベントとしてのaudit log記録がOwnerの管轄。発行・共有・削除はすべてaudit logに残ります。

まとめ

  • ArtifactsはPro / Max / Team / Enterpriseで利用可。CLI v2.1.183以降、/loginでのサインインとAnthropic API経由が条件
  • 発行物は.html / .htm / .mdの1ページ。CSPで外部リクエストは全ブロック、レンダリング後16 MiBまで
  • Pro/Maxの共有は公開リンクのみ。組織内の相手指定共有はTeam/Enterprise
  • v2.1.209以降はMCPコネクタでライブデータを表示できる。呼び出しは発行者でなく閲覧者のアカウントで実行される
  • コネクタつきartifactは公開リンク不可。Pro/Maxでは実質自分専用
  • 無効化はdisableArtifact / CLAUDE_CODE_DISABLE_ARTIFACT=1 / permissions.denyArtifact
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次