Claude Code Artifacts で、セッションの成果を「1枚の共有Webページ」にしてみた📖

Claude Code で作業した内容を、そのまま共有できる Web ページとして書き出せる機能「Claude Code Artifacts」を紹介します。インシデント調査の可視化や、プルリクエストの差分注釈など、実際に自分で触って作ってみたデモを交えながら、何ができて・どう使うのかを見ていきます。

Claude Code Artifacts とは

Claude Code Artifacts は、Claude Code のセッション内容を1枚の Web ページ（Artifact）として書き出し、共有・更新できる機能です。2026年6月18日にベータ公開されました。

チャットのログを追いかけたり、状況をテキストにまとめ直して報告したりする代わりに、「常に最新の1枚のページを見ればいい」状態を作れるのが特徴です。

Artifacts の3つの特徴

Claude Code での作業を、1枚の Web ページ（Artifact）として書き出せる
同じ成果物を更新しても URL が変わらない
Team・Enterprise プランなら、組織内メンバーに共有できる（社外公開はできません）

この3点を押さえたうえで、実際の使いどころを見ていきます。

使いどころ①：インシデント調査を1枚のページに

公式ブログでも紹介されていて、いちばん分かりやすいのがインシデント調査の例です。

障害対応で Claude Code を使って調査すること自体はよくありますが、その進捗を Slack で逐一報告するのは手間ですし、文章だけだと状況が伝わりにくいこともあります。従来であれば、CloudWatch のログを調べて「どの時間帯からエラーが増え始めたのか」を確認したり、怪しいコミットを探したりして原因を追い、その結果を自分でまとめてテキストで報告する流れでした。

Artifacts を使うと、こうした調査結果を次のように可視化できます。

エラー率チャート: 何時頃からエラーが増え始めたのかをグラフで表示
疑わしいコミット: ピックアップして一覧表示
対応タイムライン: 障害発生から解決までの流れを時系列で表示

散らばりがちな障害情報が1枚のページにまとまるので、開発者にとっても運用メンバーにとっても状況を把握しやすくなります。

しかも、このページは同じ URL のまま更新されていくので、チームメンバーは同じ URL を開いておくだけで最新状況を確認できます。障害対応の状況を知りたい PM や PO は多いものですが、このページを共有しておけば、そのたびに手を止めて報告する必要がなくなり、状況を聞かれる回数自体も減らせます。報告する側・される側の双方にメリットがある仕組みです。

上記は実際の障害対応で作ったものではなく、架空の障害を想定して自作したデモページをもとに紹介しています。

疑似的なリアルタイム更新には `/loop`

ひとつ注意点があります。Artifacts は常時リアルタイムで同期されているわけではなく、「更新して」とお願いしたタイミングでページが更新される仕組みです。

リアルタイムに近い状態にしたい場合は、/loop スキルで「5分ごとに Artifact を更新して」と指示することで、一定間隔で自動更新をかけ、擬似的な自動更新に近づけられそうです（こちらは筆者もまだ試せていないアイデアです）。

使いどころ②：PR の差分に注釈をつける

もうひとつ試してみたのが、プルリクエストの差分に注釈をつけて説明する Artifact です。プロンプトはこれだけです。

Code

この PR の差分に注釈をつけて説明するアーティファクトを作って

出来上がったページには、変更したファイルごとに「何をしているのか」「なぜそのような実装にしたのか」が、差分と一緒に注釈として記載されます。PR の差分をそのまま読むよりも、言葉での説明が添えられている分、理解しやすくレビュースピードも上がる印象でした。

使い方①：作る

作り方はとてもシンプルで、Claude Code のセッション中に、欲しい成果物を言葉で頼むだけです。難しい操作は必要ありません。

Code

決済 API のインシデント調査結果を、タイムラインとエラー率チャート付きの
アーティファクトにまとめて

/artifact-design というコマンドもありますが、普通に「アーティファクトを作成して」と伝えるだけでも生成されます。生成された Artifact は Claude 側（claude.ai/code/artifacts）に溜まっていきます。

使い方②：共有する・更新する

共有する

ページ右上の Share ボタンを開く
公開範囲を選ぶ
- Only you（自分のみ・初期値）
- 招待した人のみ
- 組織全員
Copy link で URL をコピーして配る

更新する

同じセッションで「artifact を直して」と頼むだけで、同じ URL に再公開されます
別セッションから直したい場合は、対象の URL を伝えて更新を依頼します
前述のとおりリアルタイム同期ではなく、Claude が再公開ツールを呼んだ瞬間にだけ更新されます

バージョン管理

公開のたびにバージョンが記録されるので、過去の状態にも戻せます。共有メニューの「Shared version」で Latest を選んでおけば見る側は常に最新版を確認でき、特定のバージョンを指定して共有することもできます。更新していくと、ここにバージョンが積み重なっていきます。

なお、共有相手は「閲覧のみ」で、編集できるのは作成者だけです。

始める前に知っておきたいこと

導入前に押さえておきたいのが「使えるユーザー」と「アクセス制御」の2点です。

使えるユーザー（プラン）

用途	対応プラン
作成する／自分だけで見る（非公開利用）	Pro / Max / Team / Enterprise すべて
他メンバーへ共有する	Team / Enterprise 限定

他メンバーへの共有は、Team はデフォルトで有効、Enterprise は管理者が有効化する形です。

アクセス制御

公開時のデフォルトは作成者本人のみ非公開
公開範囲は組織内まで（社外向けの公開 URL は発行できません）
見られるのは認証済みの組織メンバーのみ

「社外に漏れる」ものではなく、「社内で最新状況を共有する」ための機能、という位置づけです。社外の人に見せたい場合は、Claude に HTML ファイルとして出力してもらい、直接送る形になります。

制約

この Artifact、実はただの Web ページです。サーバー側の処理は一切持ちません。

🚫 バックエンドなし — フォームの入力を保存したり、閲覧時に API を呼んだりはできません
📏 サイズ上限は 16MiB — 大きな画像を埋め込みすぎてサイズが超過すると、公開に失敗することがあります

また、Artifact の作成はターミナル上でテキストを返すだけの場合よりも、Web ページを1枚作る分だけ多くのトークンを消費します。不要になった Artifact は、画面上の「Delete Artifact」メニューから削除できます。

なお、生成した HTML を GitHub リポジトリへ直接同期する機能は、現時点では確認できていません。スマートフォンからの閲覧には対応しています。

その他の活用アイデア

インシデント調査や PR の注釈以外にも、次のような使い方が考えられます。

セキュリティ監査レポート: 依存関係のライセンスチェックなどの結果を、インタラクティブな UI でまとめる
UX デザインの複数案検討: 複数案を並べて比較・検討する
スプリントの要約: エンジニアリングマネージャー向けに、「先週の PR はこう回った」「ここまで対応した」といった1スプリントの概要をインタラクティブに提示する

いずれも、静的な Web ページという制約（前述の 16MiB 上限やバックエンドなし）の範囲で、凝りすぎない構成にしておくのがコツです。

まとめ

実際にインシデント調査のデモを自作してみて、思った以上に視覚的に分かりやすいものが作れたので、実際のインシデント対応でも十分使えそうだと感じました。PR の差分注釈も、注釈が付いているだけで理解のしやすさがかなり変わる感覚がありました。

ポイント	内容
何ができる	Claude Code のセッションを1枚の共有 Web ページに書き出せる
得意な使い方	インシデント調査の可視化、PR 差分の注釈、監査レポート、スプリント要約
共有	URL 不変で更新でき、バージョン管理も可能
注意点	社外公開不可、バックエンドなし、16MiB 上限、トークン消費は多め

始め方は簡単で、Claude Code に Artifact の作成をお願いするだけです。まずは1つ、自分で作ってみるのがおすすめです。みなさんもぜひ試してみてください！

参考リンク

公式ブログ: https://claude.com/blog/artifacts-in-claude-code
公式ドキュメント: https://code.claude.com/docs/en/artifacts
自分の Artifact 一覧: https://claude.ai/code/artifacts