Claude Codeでの調査や修正が終わったあと、その成果はターミナルのログとして流れて消えていく。レビュアーに渡すときはスクショを貼り、経緯を長文で書き起こし、数日後にはほぼ同じ説明をまた一から打ち直す。Artifactsは、このセッションの出力を、claude.aiの非公開URLに公開される生きたWebページへ変える機能だ。PRの解説も障害対応の時系列も、その場のセッションから作って相手にリンクで渡せる。
Artifactsとは何か
Artifactは、Claude Codeがセッションから公開する、操作できるWebページだ。ブラウザで開いた状態のまま、セッションが進むと同じページが更新される。公式ドキュメントはこれを「その場で更新される生きたページ」と表現している。静的なスクショと違い、作業の進展がそのままページに残る。
ページの中身は、セッションが到達できる素材から組み立てられる。手元のコードベースはもちろん、接続済みのツール（MCPコネクタ）を通じて引いたデータも含められる。例えば、注釈つきの差分でPRをレビュアーに説明するページ、セッションが集めた数値から作るダッシュボード、長い調査タスクの進行に合わせて埋まっていく時系列など、文章で書くより見たほうが速い出力に向く。
Artifactはアプリではない。バックエンドを持たない1枚の自己完結ページで、フォーム入力を保存したり複数ページを配信したりはできない。作業の「見せられる状態でのキャプチャ」と考えるのが実態に近い。
共有の仕組みとプラン
公開した直後のArtifactは、作った本人だけに見える非公開URLになる。誰かに見せるにはページ上部のShareから範囲を広げる。ページヘッダには公開者の名前が出るので、受け取った相手は誰が作ったページかを確認できる。
共有できる相手はプランで変わる。ここは既存の「チーム限定ベータ」という理解から更新しておきたい部分だ。現行ドキュメントでは、公開自体はPro / Max / Team / Enterpriseで使える。
| プラン | 公開 | 共有できる範囲 |
|---|---|---|
| Pro / Max | 可（既定は本人のみ） | 公開リンクのみ。サインイン不要で誰でも閲覧できる形になる |
| Team / Enterprise | 可 | 組織内の特定メンバーや全員に限定共有。編集者ロールの付与も可。公開リンクはオーナーが有効化したときだけ |
公開のたびにバージョンが1つ増える。Shareの操作から、閲覧者に見せるバージョンを選べる。過去の版に戻すことも、常に最新版を見せる設定にすることもできる。
別のセッションから同じページを更新したいときは、そのArtifactのURLをClaudeに渡して修正を頼む。URLを渡さなければ、新しいセッションは既存ページを更新せず別のArtifactを作る。ここは取り違えやすい。
自己完結HTMLという制約
Artifactは1枚の自己完結ページだ。公開したファイルはHTMLの外枠でラップされ、厳しいContent Security Policy（CSP）のもとで配信される。この制約が、ページにできることの輪郭を決めている。
| 制約 | 内容 |
|---|---|
| 外部リクエスト禁止 | 他ホストのスクリプト・CSS・フォント・画像の読み込みに加え、fetch / XHR / WebSocketもCSPが遮断する。CSSとJSはインライン化、画像はデータURIで埋め込まれる |
| バックエンドなし | 静的ページなので、フォーム送信の保存や閲覧者の認証はできない |
| 単一ページ | 相対リンクは解決しない。複数セクションはページ内アンカーで表現する |
| ファイル種別 | 公開できるのは .html / .htm / .md のみ。Markdownは整形済みHTMLとして描画される |
| サイズ上限 | 描画後のページは16MiB以下。公開失敗の典型原因は大きな埋め込み画像 |
外部通信を断つ設計の例外がMCPコネクタだ。ページはコネクタ呼び出しをclaude.aiに渡し、通信はclaude.ai側が代行する。これにより、閲覧するたびに現在のデータを引く「生きたダッシュボード」も作れる。呼び出しは閲覧者自身のアカウントのコネクタを使うので、同じページでも見る人によって表示が変わる。コネクタを呼ぶArtifactは、どのプランでも公開リンクにはできない。
どんな時に使うと便利か
Artifactが効くのは、ターミナルのテキストでは伝わりにくい出力を渡すときだ。代表的な使い所を挙げる。
- PRウォークスルー：差分の脇に注釈を置き、判断の理由をコードの隣で読ませる。レビュアーが説明文から差分を再構成する手間が減る。
- 調査の時系列ページ：長い障害対応や再現調査で、進行に合わせて事実が埋まっていくページを1本用意する。リンクを共有すれば、周囲はターミナルを覗かずに状況を追える。
- 選択肢の比較：設定画面のレイアウト案やAPIの形を1ページに並べ、トレードオフを一行ずつ添える。口頭やテキストの往復より判断が速い。
個人開発でも使える。Pro / Maxでは公開リンクとして渡せるので、作った機能の説明ページをそのままポートフォリオやブログの素材に回せる。手元のバグ修正を1枚のページにまとめる練習から始めると、次の使い所が見えてくる。
手を動かす前の段取りに不安があるなら、バイブコーディングの進め方を読んでおくと、Artifactを「見せる工程」として自然に組み込みやすい。
最初の1枚を作る流れ
身構える必要はない。Claudeが出力に合わせて自分から公開することもあるし、こちらから頼んでもいい。頼むときは、作ってほしい見た目を素直な言葉で伝える。
このPRをウォークスルーするArtifactを作って。差分に注釈を付けて、深刻度で色分けして。Claudeはプロジェクト内にHTMLかMarkdownのファイルを書き、それを公開する。新規公開の前には「claude.aiの非公開ページに公開してよいか」という許可プロンプトが出る。承認済みのArtifactを再公開するときは、同じURLへ上書きされ、プロンプトは出ない。
公開されるとURLが表示され、ブラウザが開く。ターミナルからは次のキーで直近のArtifactを開き直せる。
Ctrl+]ブラウザの自動起動を止めたいなら、環境変数で切り替える。
export CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0使う前に押さえる注意点
まず公開範囲だ。共有ページに社内情報や鍵・トークンが写り込んでいないか、渡す前に一度確認する習慣をつけたい。Pro / Maxの公開リンクはサインイン不要で誰でも開けるため、ここは特に慎重に扱う。
次に前提条件がある。Artifactの公開には、Claude Code CLI 2.1.183以降（またはデスクトップアプリの対応版）、AnthropicのAPIバックエンド、`/login`によるclaude.aiアカウントでのサインインが必要だ。APIキーやゲートウェイトークンで動かすセッション、Amazon Bedrock / Google Vertex AI / Microsoft Foundry経由のセッションは公開できない。組織側でCMEK・HIPAA・ゼロデータ保持が有効な場合も対象外になる。条件を満たさないときは、公開せずローカルのHTMLファイルを書き出す挙動になる。
自分のセッションだけArtifactを無効化したいときは、設定ファイルの`disableArtifact`、環境変数`CLAUDE_CODE_DISABLE_ARTIFACT=1`、または権限ルールでの拒否のいずれかを使う。
FAQ
Q. Proプランでも公開できる？
公開できる。ただしPro / Maxで他人に見せる手段は公開リンクのみで、組織内限定の共有や編集者ロールはTeam / Enterprise向けだ。
Q. 外部のライブラリやAPIをページから読み込める？
読み込めない。CSPが外部ホストへの通信を遮断するため、CSSもJSもインライン、画像はデータURIで埋め込む必要がある。閲覧時に外のデータを引く手段はMCPコネクタ経由に限られる。
Q. 一度公開したページを後から直せる？
直せる。同じセッションなら追記を頼めば同じURLへ再公開される。別セッションから直す場合は、対象のArtifactのURLをClaudeに渡す必要がある。渡さないと新しいページが作られる。
Artifactは、Claude Codeの出力を「ターミナルの中で消える作業」から「人に渡せる成果物」へ格上げする機能だ。まずは直近のPRや修正を1つ、説明ページにしてみるのがいい。
まとめ
Artifactsは、セッションの成果をclaude.aiの生きたWebページとして公開・共有する仕組みだ。自己完結の1枚ページで、CSPにより外部通信は遮断され、既定では本人のみ閲覧できる。共有範囲はプランで分かれ、Pro / Maxは公開リンク、Team / Enterpriseは組織内限定や編集者ロールまで扱える。作業を資産に変える習慣は、個人開発者ほど効いてくる。
