Claude Code全体の使い方は Claude Code完全ガイド2026：インストールから本番運用まで をご覧ください。
2026年6月18日（日本時間6月19日未明）、Anthropicの公式アカウント @claudeai が短いデモ動画とともにClaude CodeのArtifactsを発表した。ターミナルでの作業を、リンク1本で社内に共有できる「生きたWebページ」に変える機能だ。本記事は公式ポスト・公式ブログ・公式ドキュメントの一次ソースだけを使い、何が公開され、どう動き、誰が使えるのかを整理する。
・何が出たか：Claude Codeのセッション出力を、claude.aiの社内限定URLにある「更新され続けるWebページ」として公開できる
・使いどころ：PRのウォークスルー、セッションのデータから作るダッシュボード、進行中タスクのチェックリスト
・更新の仕組み：作業が進むと同じURLのページがその場で更新され、バージョン履歴も残る
・提供形態：betaでTeam/Enterpriseプラン。/loginでclaude.aiにサインインしたセッションが必須
・注意：単一ページの「作業のキャプチャ」であってアプリではない。社外公開やバックエンドは不可
何が発表されたか：公式ポストの逐語と日本語訳
@claudeai の発表本文は次のとおり。
“New in Claude Code: Artifacts. Interactive pages built from your session, like a PR walkthrough or a living project dashboard, shared with your team at a private link. Available in beta on Team and Enterprise plans.”
日本語にするとこうなる。「Claude Codeの新機能：Artifacts。セッションから生成されるインタラクティブなページで、PRのウォークスルーや生きたプロジェクトダッシュボードのようなものを、プライベートなリンクでチームに共有できる。TeamおよびEnterpriseプランでbeta提供。」
開発者向けアカウント @ClaudeDevs は、操作の流れを補足する形でこう投稿している。
“Artifacts are now live in Claude Code. Ask Claude to turn what it’s working on into a page and send the link to your team. The page updates as the session keeps working. Available today on Team and Enterprise plans.”
訳すと「ArtifactsがいまClaude Codeで使える。Claudeに、作業中の内容をページにするよう頼んで、そのリンクをチームに送る。ページはセッションが動き続ける間に更新される。本日からTeamとEnterpriseプランで利用可能」となる。要点は、ページ生成をClaudeに頼むこと、共有がリンク1本で済むこと、そして作業の進行に合わせてページが更新されることの3点に集約される。
公式ドキュメントの定義はさらに端的だ。
“An artifact is a live, interactive web page that Claude Code publishes from your session to a private URL on claude.ai.”
「artifactとは、Claude Codeがセッションからclaude.aiの非公開URLに公開する、ライブで動くインタラクティブなWebページである」。ターミナルのテキストでは扱いづらい出力（注釈付きのdiff、チャート、並べて比較したい複数案など）を、見て触れるページに置き換えるのが狙いだ。
デモ動画で確認できる動き
公式デモ動画は約60秒で、Claude Codeのセッションがそのままページになる過程を映している。
ターミナルでは Live: claude.ai/code/artifact/0d2447a6-... のようにURLが表示され、acme-funnel-fix という名前のページが立ち上がる。動画内のプロンプトは「Propose a UX solution to fix the user dropoff during the export process.（エクスポート工程でのユーザー離脱を直すUX案を出して）」というもので、Claudeがその検討結果をページにまとめている。
ブラウザ側のビューアには、ページ右上に「Share」ボタンと作成者のアバターが置かれている。本文にはエクスポート完了率や課金導線のメトリクスカード、ファネルチャート、モバイル画面のモックアップが並ぶ。テキストの羅列ではなく、フィルタや並べ替えのできる「見て触れる」資料として出力されているのが分かる。
動画後半では、修正前後のエクスポート画面を左右に並べた比較ビューや、変化を示す折れ線チャートが映る。公式ドキュメントが挙げる「Compare alternatives（複数案を1ページに並べて評価する）」というパターンが、そのままデモになっている。
既存のArtifactsとの違い
「Artifacts」という名前自体は新しくない。claude.aiのチャットには以前からArtifacts（会話のサイドに表示される成果物パネル）があった。今回の発表は、その仕組みをClaude Code（CLI・デスクトップアプリ）のセッションに広げたものだ。両者の関係を整理する。
| 観点 | claude.ai チャットのArtifacts | Claude Code のArtifacts（今回） |
|---|---|---|
| 起点 | チャットの会話 | Claude Codeのコーディングセッション |
| 入力に使える文脈 | 会話の内容 | セッションのコードベース・接続したツール・会話 |
| 表示先 | チャットのサイドパネル | claude.aiの社内限定URL（claude.ai/code/artifact/…） |
| 共有 | 会話単位 | リンク1本で組織のメンバーへ |
| 更新 | 会話で再生成 | 作業の進行に合わせ同じURLで更新、バージョン履歴あり |
| 監査ログ | claude_artifact_* | 同じ claude_artifact_* 系列を共有 |
公式ブログは、Claude CodeのArtifactsが「the full context of your session, including your codebase, your connectors, and the conversation itself（コードベース、接続したツール、会話そのものを含むセッションの全文脈）」を使うと述べている。チャットのArtifactsが会話の文脈に限られるのに対し、コーディングセッションが触れられるものすべてを材料にできる点が中心的な違いだ。インフラ準備が要らないことも強調されている。
“With artifacts, you don’t need to wire up data sources or stand up infrastructure.”
下図は、Claude Codeがこれまで2026年に積み上げてきた機能群のなかでArtifactsがどこに位置するかを示したものだ。並列セッションを束ねる agent view や、クラウドで動くManaged Agentsが「エージェントを大量に走らせる足場」だったのに対し、Artifactsはその成果物を人に届ける「出口」にあたる。
並列セッション管理] S --> MA[Managed Agents
クラウド実行] S --> AR[Artifacts
成果物の社内公開] AR --> URL[claude.ai 社内限定URL] URL --> TEAM[組織メンバーが閲覧]
利用条件：対応プラン・認証・プラットフォーム
公式ドキュメントは、Artifactsが動く条件をすべて満たす必要があると明記している。ひとつでも欠けると、Claudeはローカルにhtmlファイルを書き出すか「公開できない」と返す。
| 要件 | 条件 |
|---|---|
| プラン | Team または Enterprise。Teamは既定で有効、Enterpriseは管理者が有効化 |
| 認証 | /login でclaude.aiにサインイン。APIキー・gatewayトークン・クラウド認証は不可 |
| モデルプロバイダ | Anthropic APIのみ。Bedrock・Vertex AI・Microsoft Foundryは対象外 |
| 組織ポリシー | CMEK・HIPAA・Zero Data Retentionを有効化した組織は不可 |
| 利用面 | Claude Code CLI、またはデスクトップアプリ v1.13576.0 以降 |
Agent SDK・GitHub Action・MCPサーバの文脈では既定でオフ、CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC 設定時も無効になる。対応モデルについて公式は「Anthropic API」という条件を示すのみで、特定のモデル名（Opus・Sonnet・Haikuの世代）への限定は明記していない。本記事では確認できた条件のみを記載し、それ以外は未確認とする。
・Free/Proでは使えず、Team/Enterpriseのbeta限定
・claude.aiへのサインインが前提で、APIキー運用のセッションでは公開できない
・規制対応（HIPAA・ZDR等）を入れた組織はそもそも対象外
使い方：最小手順
公式ドキュメントが示す流れはシンプルだ。Claudeが出力に応じて自分から公開することもあれば、こちらから頼むこともできる。
・頼む：作りたいページを平易な言葉で指示する。例「Make an artifact that walks through this PR with the diff annotated inline.（このPRをdiffにインライン注釈を付けて解説するartifactを作って）」
・許可する：新規公開の前にClaude Codeが許可を求める（既に承認済みのartifactの再公開では再確認しない）。「Yes」を選ぶとURLが表示され、ブラウザが開く
・更新する：ページの修正を頼むか、長時間タスクが進捗に応じて再公開する。Claudeは元ファイルを編集し、同じURLに再公開する
・別セッションから更新する：artifactのURLを渡して修正を頼む。URLがないと新規作成になる
・共有する：ページ右上のShareで、特定メンバーや組織全体に閲覧を許可する
ターミナルからは Ctrl+] で直近のartifactを開き直せる。公開時にブラウザを自動で開きたくない場合は CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 を設定する。生成ページの実体は .html / .htm / .md のいずれかで、Markdownは整形済みHTMLとしてレンダリングされる。
Claudeはページ生成時に組み込みのデザインスキルを適用するが、プロジェクトに既存のデザインシステムがあればそちらを優先する。CLAUDE.mdやテーマファイルに配色・フォント・余白を書いておくと、自社プロダクトの見た目に寄せられる。
コードベース・接続ツール・会話] --> B{ページ化を指示
またはClaudeが提案} B --> C[公開の許可
Yes/No] C --> D[claude.aiの
非公開URLに公開] D --> E[Shareで
組織メンバーに共有] D --> F[作業進行で
同じURLを更新] F --> G[バージョン履歴
として蓄積]
想定されるユースケース
公式が挙げる用途は、いずれも「テキストで読むより見たほうが速い出力」だ。
・変更のウォークスルー：PRのdiffを重大度で色分けし、該当行の横に判断理由を注釈する
・複数案の比較：設定パネルの4レイアウトをグリッドで並べ、各案の下にトレードオフを一行添える
・インタラクティブな調整：イージング・継続時間・遅延のスライダーを置き、動きを見ながら値を試す
・結果をセッションに戻す：トリアージ用のカンバンを作り、「Copy as prompt」ボタンで並び順をターミナルに貼り戻す
・進行中タスクの追跡：移行計画をチェックリスト化し、完了するたびに項目が埋まっていく
最後のパターンは「レビュアーにSlackへ出力を貼る代わりにリンクを送る」運用に直結する。チャットに長いログを流す代わりに、URL1本で常に最新の状態を見せられる点が日常の差になる。
実務に引き寄せると、次のような場面が現実的だ。コードレビューでは、PRの差分に「なぜこの変更が必要か」を行単位で注釈したページを共有し、レビュアーは説明をコードの横で読める。インシデント対応では、調査が進むたびにエラー率のチャートやタイムラインが埋まっていくページをチームで開いておけば、進捗確認のための口頭共有を減らせる。設計フェーズでは、実装方針を3案並べて各案の制約を一行で添えたページを出し、意思決定の材料にできる。いずれも、ターミナルのログを読み合わせる手間を、ブラウザで開く1枚のページに置き換えるという点で共通している。
公式が示す「Bring the result back to your session（結果をセッションに戻す）」のパターンも実用的だ。たとえばトリアージ用のカンバンをページにして、課題カードをNow/Next/Later/Cutの列にドラッグで並べ替え、「Copy as prompt」ボタンで最終的な並び順をテキストとして書き出す。それをターミナルに貼り戻せば、ページ上での操作結果がそのままセッションの入力になる。ページが一方通行の出力ではなく、判断を一度ページ側で済ませてからエージェントに返す「軽い編集面」として機能する設計だ。
他社のキャンバス系機能との対比
「AIが生成物を専用のページ・キャンバスに出す」流れは各社が手がけているが、出力の起点と共有モデルが異なる。各社の仕様は時点で変わるため、ここでは公開情報に基づく大枠の整理にとどめる。
| 機能 | 起点 | 主な性格 |
|---|---|---|
| Claude Code Artifacts | Claude Codeのコーディングセッション | 社内限定URLに公開、作業進行で同URL更新、バージョン履歴、インフラ不要 |
| OpenAI ChatGPT Canvas | ChatGPTの会話 | 文章・コードを横並びで共同編集する作業面 |
| Google Gemini Canvas | Geminiの会話 | 生成したWebアプリ等をその場でプレビュー・編集 |
Claude CodeのArtifactsの特徴は、コーディングエージェントのセッションが起点である点と、組織スコープの共有・閲覧モデルを最初から備える点にある。生成物は共同編集ではなく「公開された各バージョンを閲覧する」形式で、書き手は作成者に固定される。チャット起点のキャンバスが個人の編集体験に寄るのに対し、チーム内で「同じURLを見続ける」運用に軸足を置いている。
制限事項・既知の制約
公式は、Artifactsが「作業のキャプチャであってアプリではない」ことを繰り返し強調している。
“An artifact is a capture of work, not an application.”
各artifactは単一の自己完結ページで、Claude CodeがHTMLの外殻で包み、厳格なCSP（Content Security Policy）下で配信する。主な制約は次のとおり。
・外部リクエスト不可：外部ホストのスクリプト・スタイル・フォント・画像、fetch・XHR・WebSocketはCSPでブロック。CSSやJSはインライン化、画像はdata URIで埋め込む
・バックエンドなし：静的ページのため、フォーム入力の保存・閲覧者の認証・閲覧時のAPI呼び出しはできない
・単一ページ：相対リンクは解決されず、複数セクションはページ内アンカーで表現する
・ファイル種別：公開できるのは .html / .htm / .md のみ
・レンダリング上限：描画後のページは16 MiB以下。公開失敗の典型原因は大きな埋め込み画像
加えて、装飾されたページはターミナルの同内容より出力トークンを多く消費する。インラインCSS・JS、とりわけdata URIで埋め込む画像が主因で、公式は「ラスター画像よりSVGやHTML/CSSで図を描く」「不要なインタラクティブ要素を省く」「大きなデータはページ側で要約する」といった節約策を挙げている。
社外公開ができない点も運用上の前提だ。閲覧は同一組織のサインインが必要で、社外に渡すにはClaudeにHTMLファイルを出力させて直接共有する。組織側では管理者がオン/オフ、ロール単位のスコープ、保持期間を設定でき、公開・共有・削除は監査ログ（claude_artifact_*）に残り、Compliance APIで一覧・取得・削除ができる。出力先のビューアは *.claudeusercontent.com のサンドボックスオリジンから読み込まれるため、送信先制限のある組織はこのドメインの許可リスト追加が必要になる。
まとめ
Claude CodeのArtifactsは、ターミナルの中で完結していたエージェントの作業を、社内で共有できる「生きたページ」として外に出す機能だ。コードベースや接続ツールを含むセッションの全文脈を材料にでき、作業の進行に合わせて同じURLが更新され、バージョン履歴も残る。提供はbetaでTeam/Enterpriseに限られ、claude.aiへのサインインとAnthropic APIが前提になる。アプリではなく単一の静的ページという割り切りがあるぶん、インフラ準備なしで「URL1本で最新を見せる」運用に素早く乗せられる。Claude Codeが2026年に進めてきた agent view やManaged Agentsといった「エージェントを並列で大量に走らせる足場」づくりの延長に、その成果物を人へ届ける出口が加わった格好だ。
参照ソース
・@claudeai 公式ポスト（2026-06-18）
・@ClaudeDevs 公式ポスト
・Anthropic 公式ブログ：Claude Code now supports artifacts
・Claude Code 公式ドキュメント：Share session output as artifacts
