グラレコ

はじめに 👋

Claude Code には、セッションの成果物を claude.ai 上のインタラクティブなページ として公開できる「Artifacts（アーティファクト）」という機能があります。ターミナルに流れていくテキストではなく、ブラウザで開けるひとつのWebページとして残せるのが特徴です。

この記事では、Claude Code の Artifacts について次のことを整理します。

Artifacts とは何で、ターミナル出力と何が違うのか
どんな場面で役に立つのか（PRレビュー、ダッシュボード、調査タイムラインなど）
作る・更新する・共有するの具体的な流れ
ページの制約（できること／できないこと）と利用条件
組織で使うときのセキュリティと管理

想定読者は、Claude Code を業務で使っている、あるいは Team / Enterprise プランでの導入を検討しているエンジニアやチームリードの方です。なお、Artifacts は執筆時点で ベータ機能 で、Team / Enterprise プランが前提になります。詳しい条件は後半の「利用条件」で説明します。

💡 用語の注意：ここで言う「公開（publish）」は、インターネット全体への公開ではありません。あくまで 自分の組織内 に閉じた claude.ai 上のページを作る、という意味です。混同しやすいので最初に押さえておくと安心です。

Artifacts とは何か 🧩

Artifacts は、Claude Code がセッションから生成して claude.ai 上の限定URL に公開する、ライブで更新されるインタラクティブなWebページです。ブラウザで開いておくと、セッションが進むにつれてそのページが その場で更新 されていきます。

ポイントは「ターミナルのテキストでは伝わりにくい成果物を、見て触れる形にする」ことにあります。たとえば次のようなものは、行単位で読むよりも一覧で眺めたほうがずっと分かりやすいはずです。

プルリクエストの差分に、レビューの意図を注釈として添えたウォークスルー
セッション中に集めたデータから組み立てたダッシュボード
複数の実装案やデザイン案を横並びにした比較ページ
長時間かかるタスクの進捗が埋まっていく調査タイムライン

下の図は、同じ成果物が「ターミナル出力」のままなのか「Artifact ページ」になるのかで、読み手の体験がどう変わるかを示したものです。

この図のポイントは、Artifact が「テキストの代わり」ではなく「テキストでは扱いにくい成果物の受け皿」だという点です。差分・チャート・比較表のように、見たほうが速いものを担当します。

Artifact出力イメージ

Artifact ではないもの

ここはつまずきやすいところなので、はっきりさせておきます。Artifact は 作業のキャプチャ（スナップショット）であって、アプリケーションではありません。

ひとつの自己完結したページであり、バックエンドを持ちません。そのため、

フォームに入力された内容を保存する
ページを見た瞬間にAPIを叩く
複数のルート（URLのパス）を提供する

といったことはできません。バックエンドを伴う社内ツールがほしい場合は、Artifact ではなく自前のインフラにデプロイするのが正解です。Artifact はあくまで「その時点の成果を、見て触れる1枚のページに固めたもの」と捉えてください。

何ができるのか — 具体的なユースケース 🚀

Anthropic の発表記事では、職種ごとに具体的なユースケースが挙げられています。いくつか紹介します。

エンジニア向け

プルリクエストやバグのレビュー（差分と、その判断理由を並べたウォークスルー）
インシデント調査ページ（タイムライン、疑わしいコミット、エラー率のチャートをまとめる）

セキュリティ

検出結果に、該当するコード行へのリンクを付けた一覧

法務 / オープンソース

すべての依存パッケージとそのライセンスを棚卸しし、コピーレフトに該当するものへフラグを立てた監査ページ

プライバシー

個人データがどこで収集・保存・ログ出力されているかを示すデータフローマップ

FinOps

Infrastructure as Code から、クラウドリソースとコスト要因をマッピングした可視化

デザイナー

コンポーネントライブラリから組み立てた、サインアップフォームの5つのUXバリエーション

下の図は、これらのユースケースを「誰が、何を見たいか」で大まかに整理したものです。

この図から読み取ってほしいのは、共通しているのが「文章で説明すると長くなるものを、1枚で見せたい」という動機だということです。職種は違っても、求めているのは同じ体験です。

作る・更新する・共有する 🛠️

ここからは実際の流れを見ていきます。Artifacts の操作は大きく「作成 → 更新 → 共有」の3ステップに分かれます。

下の図が全体の流れです。

順番に見ていきましょう。

作成する（Create）

Artifact は、Claude が「これはページにしたほうがいいな」と判断して自動的に公開することもありますし、こちらから明示的に頼むこともできます。頼むときは、使いたい機能名を出すか、ほしいビジュアルを普通の言葉で説明します。

このPRをインラインで差分注釈つきにウォークスルーするArtifactを作って

先週のデプロイ失敗をサービス別にまとめたダッシュボードのArtifactを作って、調査が進んだら更新しておいて

依頼を受けると、Claude はプロジェクト内に HTML または Markdown のファイルを書き、それを公開します。新しい Artifact を初めて公開する前には、次のような確認が入ります。

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

ここで Yes を選ぶと公開され、URLが表示されてブラウザがそのページを開きます。一度承認した Artifact を再公開するときは、もう確認は出ません。

いくつか覚えておくと便利なポイントがあります。

ターミナルで Ctrl+] を押すと、直近の Artifact をいつでも開き直せます
タイトルとブラウザタブ用の絵文字は Claude が選びます（指定したい場合は「このタイトルで」「このアイコンで」と頼めば反映されます）
ブラウザが自動で開くのを止めたいときは、環境変数 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=0 を設定します

💡 もし Claude が「公開できません」と答えたり、リンクなしでローカルにHTMLファイルだけ書いた場合は、その環境で Artifacts が有効になっていないサインです。後述の「利用条件」を確認してみてください。

更新する（Update）

更新は、改訂を頼むか、長時間タスクが進捗に合わせて勝手に再公開するかのどちらかです。どちらの場合も、Claude は元になったファイルを編集して 同じURLに再公開 します。

サマリーチャートの下にリージョン別の内訳を足して、再公開して

ページを開いている人には、更新がその場で反映されます。そして、ひとつひとつの公開が「バージョン」として記録されます。ページヘッダーの Share から、閲覧者にどのバージョンを見せるかを選べます。

別のセッションから既存の Artifact を更新したいときは、その Artifact のURLを渡して頼みます。URLを渡さないと、新しいセッションは既存のものを更新せず、毎回新規作成してしまうので注意してください。

https://claude.ai/code/artifact/5fbea6f3-... を今日の数字で更新して

共有する（Share）

作ったばかりの Artifact は、最初は 自分にしか見えません。共有するには、ブラウザでページを開き、ヘッダーの Share から組織内の特定の人、あるいは組織全員にアクセス権を渡します。

ヘッダーには作者名が表示されるので、共有された側は「誰が公開したページか」が分かります。また、自分が作ったすべての Artifact は claude.ai/code/artifacts のギャラリーから一覧できます。

共有範囲については、はっきりした境界があります。

この図のポイントは、共有は組織の中で止まる という点です。閲覧するには、公開した組織と同じ組織のメンバーとして claude.ai にサインインしている必要があり、組織の外に公開するオプションはありません。

どうしても外部の人に中身を渡したいときは、Claude にHTMLファイルそのものをもらって、そのファイルを直接共有します。

もうひとつ大事なのは、Artifact は 閲覧専用 だということです。共有された人は公開された各バージョンを見られますが、ページを書き換えることはできません。書き手は作者ひとりだけ、という整理になっています。

プロンプトで作れるものの型 📐

Artifact は1枚のHTMLページなので、HTML・CSS・インラインJavaScript で表現できるものはひととおり作れます。公式ドキュメントでは、よく出てくる型がいくつか紹介されています。

変更のウォークスルー

差分やデザイン変更を、該当する行のそばに注釈つきで描くページです。レビュアーが説明文から差分を再構成しなくても、コードの隣で意図を読めます。

このPRをウォークスルーするArtifactを作って。差分はマージン注釈つきで描いて、指摘は重大度で色分けして

代替案を比較する

複数のバリエーションを1ページに並べて、互いに見比べられるようにします。レイアウト、コピー、APIの形、実装プランなど、選択肢があるものすべてに使えます。

設定パネルのレイアウトを、はっきり違う4案でArtifactにして。情報密度とグルーピングを変えて、グリッドに並べて、それぞれの下にトレードオフを1行ずつ書いて

インタラクティブなコントロールで調整する

スライダーやトグル、入力欄を、調整したい対象に紐づけて作ります。値を言葉で説明する代わりに、その場で動かして試せます。

このトランジションを試したいので、イージングカーブ・duration・delay のスライダーつきArtifactを作って。動かしたらアニメーションがその場で見えるようにして

結果をセッションに戻す

ここは面白い使い方です。Artifact を「軽量なエディタ」として使い、そこで下した判断を Claude に戻せます。ページで操作した結果をターミナルに貼り戻せるテキストとして書き出させるわけです。

オープンなIssueをカードにして、Now / Next / Later / Cut の列にドラッグで動かせるトリアージボードのArtifactを作って。最終的な並びをここに貼り戻せる「Copy as prompt」ボタンも付けて

この「ページで操作 → 結果をセッションに戻す」ループは、図にすると分かりやすいです。

この図のポイントは、Artifact が一方通行の「出力」ではなく、判断を返す 双方向のインターフェース にもなり得るところです。

進行中の作業を追跡する

長時間タスクが走っている間、Artifact を最新に保ち続けてもらう使い方です。リンクを持っている人は、ターミナルを覗かなくても進捗を追えます。

このマイグレーション計画をチェックリストのArtifactにして。完了したら項目にチェックを入れて、スキップしたものにはメモを残して

デザインシステムを合わせる 🎨

Artifact を作るとき、Claude は組み込みの「デザインスキル」を適用します。そのおかげで、特別なプロンプトを書かなくても、パレットやタイポグラフィ、レイアウトがある程度整った状態で出てきます。

さらにこのスキルは、自前のパレットを選ぶ前に プロジェクト内の既存デザインシステムを探します。自社プロダクトのブランドに合わせたいなら、デザイントークンを Claude が見つけられる場所に書いておくとよいです。たとえばプロジェクトの CLAUDE.md や、リポジトリ内のテーマファイルが候補になります。

# Design system

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

優先順位ははっきりしています。

この図のポイントは、その場のプロンプト > プロジェクトのデザインシステム > Claude の既定 の順で優先されるという点です。普段はデザインシステムに任せ、特定のページだけ見た目を変えたいときはプロンプトで上書きできます。なお、見出しや書き方の例はあくまで一例で、色・フォント・余白が分かるリストになっていれば形式は問われません。

ページの制約を理解する ⚠️

便利な反面、Artifact には「1枚の静的ページ」であることに由来する制約があります。Claude Code は公開するファイルをHTMLのドキュメントシェルで包み、厳格な Content Security Policy（CSP） のもとで配信します。これが何ができるかを形づくっています。

主な制約を表にまとめます。

制約	内容
外部リクエスト不可	CSPが、他ホストから読み込む script・stylesheet・font・image をブロックします。`fetch`・XHR・WebSocket も同様です。CSSとJavaScriptはインライン化され、画像は data URI として埋め込まれるため、外部リクエストなしで描画されます
バックエンドなし	静的ページなので、フォーム送信内容の保存、閲覧者の認証、閲覧時のAPI呼び出しはできません
単一ページ	相対リンクは解決しません（ページと一緒に何もデプロイされないため）。複数セクションはページ内アンカーで表現します
ファイル種別	公開できるのは `.html` / `.htm` / `.md` です。Markdown はスタイル付きHTMLとして描画されます
レンダリングサイズ	描画後のページは 16 MiB 以下である必要があります。サイズ超過で公開に失敗するときは、たいてい大きな埋め込み画像が原因です

CSPが何を遮断しているかを図にすると、こうなります。

この図の赤い線は、すべて遮断される経路です。ページは外と通信せず、必要なものをすべて自分の中に抱える形になります。

トークンコストにも注意

Artifact の生成は、ほかの応答と同じように 出力トークンを消費 します。そしてスタイル付きのページは、同じ内容をターミナルテキストで出すよりトークンを多く使います。インラインのCSSやJavaScript、とくに data URI で埋め込む画像が、その主な要因です。

トークンコストを抑えたいときは、次のような工夫が効きます。

ラスター画像を埋め込むより、図は SVG や HTML/CSS で描く
必要のないインタラクティブ機能は省く
巨大なデータセットは全部を埋め込まず、ページ側で要約する

💡 「とりあえず全部リッチに」ではなく、「見て触れる価値があるところだけ Artifact にする」と考えると、コストと体験のバランスが取りやすくなります。

利用条件 🔑

ここが導入前にいちばん確認しておきたいところです。Artifacts を使うには、以下の条件を すべて 満たす必要があります。ひとつでも欠けると、Claude はローカルにHTMLファイルを書くか、「公開できません」と答えます。

要件	利用できる条件
プラン	Team または Enterprise。Team プランでは既定でオン。Enterprise プランでは管理者が claude.ai の管理設定で有効化します
認証	`/login` で claude.ai にサインインしていること。APIキー・ゲートウェイトークン・クラウドプロバイダーの認証情報を使うセッションでは公開できません
モデルプロバイダー	Anthropic API。Amazon Bedrock・Google Cloud Vertex AI・Microsoft Foundry では利用できません
組織ポリシー	顧客管理の暗号鍵（CMEK）・HIPAA・Zero Data Retention が有効な組織では利用できません
サーフェス	Claude Code CLI、または Claude デスクトップアプリ v1.13576.0 以降。Agent SDK・GitHub Action・MCPサーバーのコンテキストでは既定でオフ。`CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC` が設定されている場合も不可

文章だと条件が多くて混乱しがちなので、判定フローにしてみます。

この図のポイントは、条件が AND（すべて満たす） で結ばれていることです。どこか1つでも分岐を外れると公開できません。うまく公開できないときは、この順にチェックしていくと原因を切り分けやすいはずです。

自分のセッションだけ無効化したいとき

組織の設定とは別に、自分のセッションで Artifacts をオフにする方法も用意されています。

方法	設定
設定ファイル	`"disableArtifact": true`
環境変数	`CLAUDE_CODE_DISABLE_ARTIFACT=1`
パーミッションルール	`permissions.deny` に `Artifact` を追加

組織での管理とセキュリティ 🏢

チームや組織で使うなら、管理とセキュリティの仕組みも押さえておきたいところです。Artifact のコンテンツは Anthropic 運用のインフラに保存され、公開した組織の認証済みメンバーだけ が閲覧できます。

管理は、Team / Enterprise いずれのプランでも、管理者が claude.ai の管理設定（Settings > Claude Code）から行います。全体像を図にすると次のとおりです。

それぞれを補足します。

有効 / 無効の切り替え：Settings > Claude Code > Capabilities の Artifacts トグルで、組織全体のオン・オフを切り替えます。Enterprise プランでロールベースのアクセス制御を使っている場合は、Settings > Roles からロール単位でスコープを絞ることもできます。
保持ポリシー：Settings > Data & privacy controls から、Artifact が自動削除されるまでの保持期間を設定できます。作者だけに見える private のものと、共有済みのもので、別々に期間を決められます。
監査ログ：公開・共有・削除はそれぞれ組織の監査ログに claude_artifact_* というイベントタイプで記録されます。これは claude.ai の会話で作られる Artifact と同じイベント系列です。
ビューアドメインの許可リスト：ビューアは *.claudeusercontent.com というサンドボックス化されたオリジンから各 Artifact を読み込みます。組織が外向きの通信を制限している場合は、このドメインを claude.ai と並べて許可リストに加えます。
Compliance API：組織の Artifact を一覧する、特定バージョンの内容を取得する、削除する、という操作がAPIから行えます。

メソッド	エンドポイント
`GET`	`/v1/compliance/code/artifacts`
`GET`	`/v1/compliance/code/artifacts/{artifact_id}/versions/{version_id}`
`DELETE`	`/v1/compliance/code/artifacts/{artifact_id}`

💡 セキュリティ観点でのいちばんの安心材料は、「外部公開できない」という設計そのものです。共有は組織内で止まり、閲覧には同一組織でのサインインが要る。ここが claude.ai 上のページでありながら、社内用途で使いやすい理由になっています。

claude.ai の Artifacts との違い 🔀

「Artifacts」という言葉は、claude.ai のチャットでもおなじみです。Claude Code の Artifacts とは何が違うのか、整理しておきます。

claude.ai のチャットで作られる Artifact は、会話から生成される独立したコンテンツ（おおむね15行以上のまとまったもの）を指します。ドキュメント、コードスニペット、単一ページのHTML、SVG画像、ダイアグラム、React のインタラクティブコンポーネントなどが作れて、Free から Enterprise まで幅広いプランで利用できます。「Edit with Claude」によるその場の編集や、MCP連携、永続ストレージといった機能も持っています。

一方の Claude Code の Artifacts は、ターミナルセッションの成果 を claude.ai 上の限定URLに公開するもので、Team / Enterprise のベータ機能です。閲覧専用で、共有は組織内に閉じ、バージョン管理が効きます。

両者の関係を表にすると、こうなります。

観点	claude.ai の Artifacts	Claude Code の Artifacts
生成元	チャットの会話	CLI / デスクトップのセッション
対応プラン	Free 〜 Enterprise	Team / Enterprise（ベータ）
編集	Edit with Claude でその場編集	閲覧専用（作者がCLIから更新）
共有範囲	設定で共有可能	組織内のみ（外部公開不可）
主な狙い	会話からの成果物作り	セッション成果のチーム共有

考え方の根っこは共通していて、どちらも「独立した成果物を、その場で見て反復する」という発想に立っています。違いは、生成元（会話か、CLIセッションか）と、共有・編集のスコープにあります。

まとめ 🎁

Claude Code の Artifacts は、ターミナルに流れて消えていくはずだった成果を、チームで「見て、触れて、リンクで渡せる」ページに変える機能です。差分のウォークスルー、ダッシュボード、調査タイムライン、比較ページ — どれも文章で説明するより1枚で見せたほうが速いものばかりで、そういう成果物の受け皿として素直に効きます。

導入を考えるときに押さえておきたいのは、次の3点です。

作業のキャプチャであって、アプリではないこと。バックエンドなし・1ページ完結・外部通信なしという制約は、裏を返せば「閉じていて安全」という性質でもあります。
共有は組織内で止まること。外部公開はできず、閲覧には同一組織でのサインインが必要です。社内ドキュメント用途と相性がよい設計です。
利用条件が AND で効くこと。Team / Enterprise プラン、/login 認証、Anthropic API、組織ポリシー、対応サーフェス — このどれかを外すと公開できません。

まずは小さく、手元のPRレビューや調査メモを1つ Artifact にしてみるところから始めるのがおすすめです。Ctrl+] で開き直せること、同じURLに再公開されてバージョンが積み上がること — このあたりは触ってみると体感が早いはずです。

繰り返し使うプロンプトが固まってきたら、それをスキルにしてコマンドとして呼べるようにする、MCPサーバーを繋いでライブデータをページに引き込む、といった発展もできます。「ターミナルのテキストでは惜しいな」と感じた成果物があったら、その時が Artifact の出番です。

参考 📚