Artifacts
Claude Code の作業の結果は、ふつうは会話の中の文章や表で返ってきます。しかし、グラフや、いくつかの案の見比べ、進み具合の一覧のように、文章で読むより、見て操作するほうが分かりやすいものもあります。Artifacts は、そうした結果を、Claude Code から Web ページとして作り、ブラウザーで開けるようにする機能です。このページでは、Artifacts の仕組みを整理し、このサイトの Claude Code のテーマの進み具合を示すページを、実際に作って更新します。
この記事で分かること
- Artifacts とは何か。どこに作られ、誰が見られるのか
- 作り方、更新のしかた、共有のしかた
- ページにできることと、できないこと
- 使える条件と、止め方
- デスクトップアプリで、進み具合のページを作って更新した結果
用語の整理
| 用語 | 意味 |
|---|---|
| アーティファクト（artifact） | Claude Code が作業の結果から作る、claude.ai 上の Web ページ。このページでは「Artifact」と書く |
| 公開（publish） | Artifact を作る、または更新して、claude.ai に送ること。公開しても、最初は自分だけが見られる |
| 共有（share） | 作った Artifact を、ほかの人も見られるようにすること |
| 版（version） | Artifact を公開し直すたびに残る、その時点のページ |
| 型（template） | スライド、文書など、決まった形の Artifact を作るための元。claude.ai のアカウントで用意されている |
Artifacts とは
claude.ai に作られる、1 枚の Web ページ
Artifact は、Claude Code が会話の中で作り、claude.ai の上に置く Web ページです。グラフやボタンなど、操作できる部品も置けます。
公式ドキュメントは、たとえば次のような使い方を挙げています。
- プルリクエストの変更を、注釈付きで読ませる
- 会話の中で集めたデータから、ダッシュボード（数字やグラフをまとめて見せるページ）を作る
- いくつかの設計の案を、横に並べて見比べる
- 長い作業の途中経過を、時系列で書き足していく
作ったページは、自分だけが見られる
作ったばかりの Artifact は、自分だけが見られます。ほかの人に見せたいときは、ページの上部にある「Share」から共有します。
| 共有の相手 | 使えるプラン |
|---|---|
| 組織の中の、決めた人や全員 | Team、Enterprise |
| リンクを知っていれば、誰でも（claude.ai へのサインインは不要） | Pro、Max。Team と Enterprise では、組織の管理者が許可したとき |
ページの中身は、Anthropic のサーバーに保存されます。
文章で答えるより、利用量が多い
Artifact を作ると、見た目を整えるための部分の分だけ、文章だけで答えるより出力が多くなり、利用量を多く使います。公式ドキュメントは、図は画像ではなく SVG や HTML で描く、使わない操作の部品は入れない、大きなデータは要約して載せる、といった減らし方を挙げています。
作り方と、更新のしかた
作る
会話の中で、「Artifact を作って」と頼むか、作りたいものを言葉で伝えます。Claude が、ページに向いた結果だと判断して、自分から作ることもあります。
自分が入力した依頼で新しく作る場合は、確認の画面は出ません。次のような場合は、確認が出ます（auto モードでは、分類器が審査します）。
| 場面 | 確認が出るとき |
|---|---|
| Plan のモードで作業している | Artifact ごとに、最初の公開の前 |
| ページが、コネクター（07）を呼び出したり、ファイルを保存させたりする | その公開の前 |
| すでに誰でも見られる形で共有している | その会話で、最初に変える前 |
作ると、ターミナル版では、ブラウザーが開いて、新しいページが表示されます。
更新する
「この部分を足して」などと頼むと、Claude はページを直して、同じ URL のまま公開し直します。開いている人のページも、その場で更新されます。公開し直すたびに版が残り、「Share」から、見る人にどの版を見せるかを選べます。
別の会話から更新するときは、Artifact の URL を Claude に渡します。渡さないと、新しい Artifact が別に作られます。
あとから探す
ターミナル版では、/artifacts で、自分の Artifact の一覧を出せます。claude.ai の claude.ai/code/artifacts にも、作ったものがすべて並びます。
型から作る
白紙から作るほかに、claude.ai のアカウントで用意されている型から作ることもできます。公式ドキュメントが挙げているのは、次の 3 つです（ベータ版）。
| 型 | 作るもの | 呼び出し方 |
|---|---|---|
| Claude Slides | スライド | /slides に、何についてのスライドかを添える |
| Claude Design | 画面のデザインの案 | /design に、何を描くかを添える |
| Claude Docs | ほかの人と読んで直す文書 | コネクターとしてつなぐ |
ページにできることと、できないこと
| 項目 | 内容 |
|---|---|
| ページの数 | 1 枚だけ。複数のページに分けるときは、ページの中の見出しへのリンクで分ける |
| サーバーでの処理 | 持てない。見る人の認証もできない |
| 外部の読み込み | 書体は Google Fonts から、スクリプトは決まった 5 つの配信元からだけ読み込める。外部の画像は読み込めないので、ページの中に埋め込む |
| ファイルの保存 | ページが勝手に保存させることはできない。保存のボタンを置くには、そのための機能をページに持たせる |
| 大きさ | 16 MiB まで |
| 最新のデータ | claude.ai のアカウントのコネクターを、ページを開くたびに呼び出せる。そのときは、見る人自身のつなぎ先を使う。Claude Code の手元の MCP サーバー（08 で作ったものなど）は、作るときにデータを集めるのには使えるが、公開したページからは呼び出せない |
使える条件と、止め方
使うには、次のすべてが必要です。
| 条件 | 内容 |
|---|---|
| プラン | Pro、Max、Team、Enterprise |
| サインイン | claude.ai のアカウントでサインインしている。API キーで使っている場合は使えない |
| 使う場所 | ターミナル版、または新しい版のデスクトップアプリ |
自分の会話で Artifacts を使わないようにするには、設定ファイルに "enableArtifact": false と書きます。プロジェクトの設定ファイル（.claude/settings.json や .claude/settings.local.json）に書くと、そのプロジェクトだけで止まります。権限のルール（03）の deny に Artifact と書いても止まります。
実際にやってみる：進み具合のページを作って、更新する
このサイトの Claude Code のテーマの進み具合を示すページを、デスクトップアプリで作りました。中身はすでにこのサイトで公開している情報なので、困ることのない題材です。
1. 作ったもの
| 項目 | 内容 |
|---|---|
| 題名 | Claude Code 学習の進み具合 |
| 見せるもの | 公開したページの数（20 ページ中いくつか）、部ごとの進み具合の棒、20 ページの一覧。一覧のタイトルから、公開済みのページを開ける |
| 元のデータ | テーマのトップページの一覧から作った、20 行の表（番号、部、タイトル、状態、公開日、URL）。Artifact の中にファイルとして置いた |
| 型 | Dashboard（データを見せるページの型）。データを見せるページなので、Claude がこの型を選んだ |
このアカウントでは、上の 3 つの型のほかに、Dashboard と Design System の型も一覧に出ていました。
Dashboard の型では、ページに出す数字は、すべてデータから計算して出す決まりになっています。今回は、元の表の「状態」が「公開済み」の行を数えて、公開したページの数を出しています。ページの中に、数字を直接書いてはいません。
Dashboard の型には、書いたページを自動で点検する仕組みもありました。最初に書いたページでは、計算の結果を「表」ではない形で返していたため、数字の出し方が決まりに合わないと指摘されました。計算の結果を 1 行の表の形で返すように直すと、指摘はなくなりました。
2. 作ったときに、何が起きたか
| 確かめたこと | 期待したこと（根拠） | 結果 |
|---|---|---|
| 作った直後の表示 | 公式ドキュメントには、ターミナル版ではブラウザーが開く、とだけある。デスクトップアプリでどうなるかは書かれていない | ブラウザーのタブが、ひとりでに開いた |
| 表示 | — | 題名、公開したページの数（10 / 20）、部ごとの棒、20 行の一覧が、崩れずに表示された |
| 共有の状態 | 最初は自分だけが見られる（公式ドキュメント） | 自分だけが見られる設定になっていた |
| 確認の画面 | 自分が入力した依頼で新しく作るので、出ない（公式ドキュメント） | 出なかった（auto モード） |
3. 更新したときに、何が起きたか
一覧の「11. Artifacts」の状態を、「準備中」から「執筆中」に変えました。この記事を書いている最中だったので、実際の状態に合わせた変更です。
Dashboard の型では、ページそのものを公開し直すのではなく、ページが読むデータのファイルを差し替える形で更新します。
| 確かめたこと | 期待したこと（根拠） | 結果 |
|---|---|---|
| 開いていたページの表示 | 「執筆中」に変わる | 変わった。公開したページの数は 10 のまま |
| 「Share」の画面の版の表示 | 増えないかもしれない（公式ドキュメントの「版が残る」は、ページを公開し直すときの説明で、データの差し替えについては書かれていない） | 版の表示そのものがなかった |
公式ドキュメントの画面の例では、「Share」の画面に、版を選ぶ欄があります。今回、その欄がなかった理由は分かっていません。考えられるのは、型から作った Artifact では欄が出ないこと、または、ページを一度も公開し直していないので版が 1 つしかないことですが、どちらも確かめていません。
4. 共有はしなかった
このページは、誰でも見られる形には共有していません。そのため、このサイトにもリンクを載せていません。
誰でも見られる形にすると、そのページに、作った人のアカウントの情報がどう表示されるかを確かめる必要があります。公式ドキュメントには、組織で使う場合の表示しか書かれていません。この記事で伝えたいのは、作り方、更新のしかた、共有の仕組みで、実物がなくても説明できると考えて、共有しないことにしました。
分かったこと
- デスクトップアプリでも、ターミナル版と同じように、作るとブラウザーで開いた。
- 型から作ると、型の決まり（数字はデータから出す、など）と、自動の点検が付いてくる。白紙から作るより、決まりに沿ったページになる。
- 型によって、更新のしかたが違う。Dashboard の型では、データの差し替えで更新し、そのときは版の表示が出なかった。
- 共有の範囲は、利用者がページを開いて「Share」から選ぶ。Claude が Artifact を作るときの道具の説明にも、Claude の側からは共有の設定を変えられない、と書かれていた。
まとめ
- Artifact は、Claude Code が作業の結果から作る、claude.ai 上の 1 枚の Web ページ。最初は自分だけが見られ、「Share」から共有する。
- 頼めば同じ URL のまま更新される。公開し直すたびに版が残る。
- サーバーでの処理は持てず、外部の読み込みにも制限がある。最新のデータは、claude.ai のアカウントのコネクターから取れる。
- 文章で答えるより、利用量を多く使う。
- このサイトでは、進み具合のページを Dashboard の型で作り、データを差し替えて更新した。共有はしていない。
確認の記録
| 項目 | 内容 |
|---|---|
| 最終確認日 | 2026 年 10 月 26 日 |
| Claude Code のバージョン | 2.1.308（macOS のデスクトップアプリ） |
| 検証の状況 | 「実際にやってみる」は、この Mac のデスクトップアプリで確かめた結果。それ以外の節は、公式ドキュメントの内容をもとに書いている |
| 確かめていない内容 | ターミナル版での作り方と /artifacts。白紙から作る Artifact と、その版の扱い。「Share」の画面に版の欄がなかった理由。誰でも見られる形での共有と、そのときの表示。コネクターを呼び出すページ。Slides、Design、Docs の型 |