Claude Code Artifacts完全ガイド｜セッションを共有Webページ化

この記事の結論（3行まとめ）

• 6月18日に Claude Code Artifacts が beta で登場。セッションの作業内容を、Claude が裏で更新し続けるライブ Web ページとして組織内に共有できる
• 中身は単一の静的 HTML ページ。バックエンドなし・外部リクエスト不可・16 MiB 以下の制約があり、社内ツールというより「説明可能な作業の見える化」装置に近い
• Team / Enterprise 限定で API キー経由は使えない。共有範囲も組織内に閉じる。便利だが「ChatGPT Canvas の代わり」ではなく「PR ウォークスルーと社内ダッシュボードの中間」と捉えるのが妥当

---

“It sounds trivial, but it means even our non-technical QA lead can see the exact UI state we’re testing without opening a terminal.”

ベータテスター匿名フィードバック・the-decoder.com 6月18日報道より 引用。Claude Code Artifacts を試した開発者の声だ。「些細に聞こえるが、非技術職の QA リードが端末を開かずに、テスト中の UI 状態をそのまま確認できる」。リリース直後の感想にしては地味だが、これがこの機能の本質を言い当てている。

2026年6月18日、Anthropic は Claude Code に「Artifacts」を追加した。公式アナウンスによれば、セッションの作業を「ライブで更新される共有可能な Web ページ」として書き出せる機能だ。Team / Enterprise プラン向けの beta として開始されている。

本記事は、公式ドキュメントとリリース当日の開発者反応をもとに、Artifacts の仕組み・制約・現場で使う際の判断ポイントを PM の視点で整理する。

Artifacts とは何か

「共有可能な作業の写像」

Claude Code 公式ドキュメントの Artifacts ページはこう書く。

An artifact is a live, interactive web page that Claude Code publishes from your session to a private URL on claude.ai. You open it in a browser, and it updates in place as the session continues.

要約すると「Claude Code のセッションから claude.ai 上のプライベート URL へ公開されるライブな Web ページ」だ。書き出し先は組織内に閉じた URL で、セッションが動き続ける限り、Claude は同じ URL を上書き発行し続ける。

技術的には .html / .htm / .md のいずれか1ファイルを書き出して、Anthropic 側のサンドボックスドメイン（*.claudeusercontent.com）でホストする仕組みになっている。CSS と JavaScript はインライン、画像はデータURIで埋め込まれ、外部リクエストは Content Security Policy でブロックされる。要するに完全自己完結の静的ページだ。

想定ユースケース

公式が挙げているシナリオを並べると、Artifacts の輪郭が見えてくる。

• PR ウォークスルー: 注釈付き diff と判断理由をレビュアーに渡す
• ダッシュボード: セッションが引き込んできたデータを並べる
• 障害調査タイムライン: 長時間タスクの進行と一緒にエントリが積み上がる
• ライセンス監査: 依存パッケージの copyleft フラグを一覧化する
• データフローマップ: 個人情報がどこで収集・保管されているかを可視化
• セキュリティ findings: 該当コード行へのリンク付き
• クラウドコスト分析: インフラとコスト要因をマップに重ねる
• リリースチェックリスト: マージ済みかどうかが自動で埋まる

VentureBeat の Carl Franzen は「データチームには特に効く。ライブデータソースを Claude Code セッションに繋ぎ、非技術ステークホルダーに監視 URL を渡せる。BI ツール一式とエンジニア工数とデプロイパイプラインがなくても済む類の体験だ」と書いている（VentureBeat 報道、概要は要約版でも確認できる）。

Shopify の Kevin Clark（Design Director）は同じ6月の Claude Design アップデートに対して「Figma にはきつい日だな」と X で評している。Artifacts 単体への言及ではないが、AI ネイティブな制作環境が「見える成果物」を直接吐き出す方向に揃ってきた象徴ではある。

使い方

発行する

Claude Code 内で、見せたい成果物を自然言語で頼むだけだ。公式ドキュメントの例を引くと、こう。

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

または。

Build a dashboard artifact of last week's deploy failures by service and keep it updated as you investigate.

Claude は HTML か Markdown を1ファイル書き出し、最初の発行時に「Claude wants to publish ... to a private page on claude.ai」と許可を求める。Yes を選ぶと URL が表示され、ブラウザが自動で開く。同じ Artifact の再発行は再確認なしで行われる。

ターミナル内で直近の Artifact を再度開きたいときは Ctrl+] を押す。ブラウザ自動起動が邪魔なときは環境変数 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 で抑止できる。

更新する

長尺タスクの進行に合わせて、Claude は同じ URL に上書き発行する。各発行はバージョンとして履歴に残り、ページヘッダの Share コントロールから「どのバージョンを共有相手に見せるか」を切り替えられる。

別セッションから既存 Artifact を更新したい場合は URL を直接渡す。

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

URL を渡さないと、新しいセッションは常に新しい Artifact を作る点に注意。

共有する

新規 Artifact は発行者だけが見える状態で始まる。Share コントロールから個別メンバー指定または「組織全体」を選べる。組織外には共有できない。社外の関係者に渡したいときは、Claude に元の HTML ファイルを書き出させて、そのファイルを別チャネル（メール、Slack、ストレージ）で送る運用になる。

制約と「これは何ではないか」

静的ページの限界

Artifacts は「単一の静的 HTML ページ」だ。これを誤解すると痛い目を見るので、制約は最初に押さえておきたい。

制約	影響
外部リクエスト不可	CSP（Content Security Policy: ブラウザがページの外部通信を制限する仕組み）が scripts・stylesheets・fonts・images の外部 host を全部ブロック。fetch / XHR / WebSocket も同様
バックエンドなし	フォーム送信の永続化・閲覧時の API 呼び出し・閲覧者ごとの認証は実装不可
シングルページ	相対リンクは解決されない。複数セクションはアンカーで作る
ファイル形式	.html / .htm / .md のみ
サイズ	レンダ後 16 MiB 以下

公式ドキュメントは「An artifact is a capture of work, not an application」と明言している。社内ツールのホスティング先として使うとすぐに行き詰まる。

認証経路の制約

Artifacts を発行するには /login で claude.ai にサインインしている必要がある。API キー、LLM ゲートウェイトークン、Amazon Bedrock / Google Cloud Vertex AI / Microsoft Foundry 経由のクラウドプロバイダ資格情報では発行できない。社内ポリシー上、Claude を Bedrock 経由で使っている組織は今のところ Artifacts を使えない。

また CMEK（Customer Managed Encryption Key: 顧客側で鍵を持つ暗号化）、HIPAA、Zero Data Retention（ZDR: 入出力を Anthropic 側で保持しない契約）を有効化している組織も、この beta の対象外だ。規制業種では「使いたいのに使えない」状態がしばらく続く可能性がある。

Notion / Confluence / Canvas との関係

Claude Artifacts は、ChatGPT Canvas に近い「AI 作業の可視化」装置だ。だが instapods.com の比較記事は釘を刺している。

Neither Canvas nor Artifacts is designed as a primary team collaboration tool… For team-wide collaboration, Canvas and Artifacts outputs should be exported to Notion or your primary documentation platform.

要するにチーム横断のドキュメント基盤としては設計されていない。レビュアーが直接編集できないし、社外には出せない。Notion や Confluence の置き換えではなく、それらに貼り付ける前の「AI による下書き表示」として捉えるのが妥当だ。

料金とプラン要件

Team プランは Standard シート 20米ドル/seat/月（税抜・為替別）、Premium シート 100米ドル/seat/月（税抜・為替別）という構成だとされる（SSD Nodes の解説記事による二次ソース）。Claude Code 自体が Premium シートに紐付くため、Artifacts を業務で使うチームは実質的に Premium シート相当の固定費を負う前提になる。最低5シート、Standard と Premium を混ぜられる。Free / Pro プランからは利用不可で、個人開発者・1人法人は対象外と理解しておくのが安全だ。

Enterprise プランは 20米ドル/seat の基本料金に API レートでの従量課金が乗る形で、500K コンテキスト・HIPAA レディ・コンプライアンスツールが付く。Tygart Media のレポートによれば、実利用ではユーザーあたり月 60〜250米ドル前後に膨らむ事例が報告されている。実際の費用は契約条件で大きく変わる。

ちなみに2026年6月時点では、7月2日までに有効化された Enterprise シート1つあたり1,000米ドル相当の Claude Code / Claude Cowork クレジットがもらえる促進策が走っているとされる（キャンペーンは予告なく終了し得る。料金体系も同様に変わるため、本稼働前に公式料金ページで必ず確認してほしい）。

現場で使うときの落とし穴

「便利すぎて社外秘が混じる」リスク

Artifacts は組織内には公開しやすい。だからこそ気をつけたいのが、発行内容のスコープ管理だ。

セキュリティ findings のページに該当ソース行へのリンクが入り、組織内全員に共有されたとして、本来はその情報を見るべきでない部署のメンバーまでアクセスできてしまうことがあり得る。Enterprise プランでは role-based access control で Artifacts の発行・閲覧権限を絞れる（Settings > Roles）。組織で本格運用するなら、初期設定でロール別の発行可否を必ず仕込んでおくべきだ。

監査ログは claude_artifact_* というイベントタイプで記録される。Compliance API（/v1/compliance/code/artifacts 系エンドポイント）で組織横断の一覧取得・削除もできる。退職者の Artifacts を残置しない運用を組むなら、この API を回すジョブを用意する。

「ライブで更新される」ことの副作用

Artifacts の売りは「セッションが動いている間ずっと更新され続ける」点だ。だが見方を変えると、共有相手が見ているページが、自分の意図しないタイミングで書き換わるということでもある。

「障害調査の途中経過を共有したら、調査者が別の仮説を試した瞬間にタイムラインがガラッと書き換わって、レビュアーが混乱した」というケースは想像に難くない。バージョン履歴があるとはいえ、デフォルトで「Always share latest version」が有効になっている場合、相手が見るのは常に最新版になる。

公式ドキュメントの図には Share メニュー内に Version picker が明示されている。重要な共有ポイントでは「Sharing version 2」のように特定バージョンに固定しておく運用が安全だ。

設計品質を上げる仕掛け

Claude は Artifact を作るとき、内部の「Design Skill」を呼び出して配色・タイポグラフィ・レイアウトを整える。さらにプロジェクトに CLAUDE.md などで Design system が書かれていれば、Claude は自分のデフォルトより優先してそれを使う。

## Design system

- Colors: primary #1a4d8f, accent #f59e0b, surface #f8fafc
- Typography: Inter for body, JetBrains Mono for code
- Spacing: 8px scale, 6px border radius

社内ブランドガイドラインがある組織は、Claude Code を使うリポジトリ群の CLAUDE.md に5〜10行入れておくだけで、Artifacts の見た目が一気に「うちの製品っぽく」なる。地味だが効く工夫だ。

PM としてこう運用する

私が今この機能を業務で使うなら、こう設計する。

1段階目（個人）: PR レビュー時の「読み手向け解説ページ」を作る用途に絞る。Make an artifact that walks through this PR with the diff annotated inline. を雛形にして、レビュアーに URL を投げる。テキスト diff だけだと伝わらない判断の流れが、明示的に書ける。

2段階目（チーム）: 週次のリリースチェックリストを Artifacts で運用する。「マージ済み」「テスト済み」「ステージング検証済み」のステータスを Claude にセッション内で更新させて、同じ URL を全員が見続ける構成にする。Notion のテンプレートと違って、AI が背景作業しながら勝手に埋めていく点が違いだ。

3段階目（組織）: Compliance API を使って Artifacts の作成・削除を監査ログに流す。Splunk / Datadog に取り込んで、社内の「AI が書き出した中身」を可視化する。Enterprise で本気で使うなら、ガバナンス側の運用設計が先に必要になる。

私はエンジニアではないが、PM の立場では「成果物の見える化」と「意思決定の説明可能性」の差を強く感じる。Artifacts は後者を助ける。だが、これを「BI ツールの代わり」「社内ポータルの代わり」と紹介するのは違う。手元のセッションが何をやっているかを、他人に見せて議論する装置だ。

まとめ：「Claude Code を見えるようにする」一手

Artifacts が解決すること:

• セッションの作業内容を、非技術職にも届く形で可視化する
• 長尺タスクの進行を、レビュアーが「ずっと見ていなくても」追える
• PR ウォークスルー・ダッシュボード・チェックリストの一発生成

Artifacts が解決しないこと:

• 社外共有（パブリックリンクなし）
• 同時編集（書き手は1人）
• 永続的な社内ツール（バックエンドなし）
• 非 Anthropic 直 API ルート（Bedrock / Vertex / Foundry 不可）

「便利かどうか」ではなく「自分のチームのプランと認証経路で発行できるか」を最初に確認すべきだ。Team プランの Premium シートを持っていて、/login 経由で Claude Code を使っているなら、明日から PR ウォークスルー1本だけでも試してみる価値はある。Enterprise でガバナンスを敷くなら、Compliance API とロール権限の設計を先に決めておく。

私は2026年6月時点での Claude Code を「説明責任を支える AI」と位置付けている。Artifacts はその役割をひとつ前に進めた機能だ。銀の弾丸ではないが、コストに見合う使い道は十分にある。

関連記事:

• Claude Code Plugins 完全ガイド — Artifacts と組み合わせて使う Plugins の解説
• Claude Managed Agents 解説 — Enterprise の認可設計を理解する前提として
• Claude Code Marketplace 動向 — 同じ Team / Enterprise シートで使えるエコシステム

---

免責事項

本記事は2026年6月20日時点の公開情報をもとに執筆した。Claude Code Artifacts は beta 機能であり、料金・対応プラン・技術制約・認証経路は予告なく変更される可能性がある。最新情報は Claude Code 公式ドキュメント と公式アナウンスを確認してほしい。料金はAnthropic 料金ページに依存する。記載した引用は出典記事の内容を要約・編集したものであり、原文の細部とは異なる場合がある。本記事の内容に基づく運用上の損害について筆者は責任を負わない。

「Claude」「Claude Code」「Anthropic」「Cowork」は Anthropic, PBC. の商標である。「ChatGPT」「Canvas」「Figma」「Notion」「Confluence」「Bedrock」「Vertex AI」「Foundry」「Splunk」「Datadog」その他本記事中の製品名・サービス名は、各社の商標または登録商標である。