はじめに
Claude Code Artifactsは、作ったHTMLやMarkdownをURLで見られるページにして、そのまま共有できる機能です。
これからClaude Codeで、調査結果やチェックリスト、ダッシュボードなどを「自分以外も見られる形」にしたい人向けに、実際の画面を見ながら使い方を紹介します。
自分は最初、Claude CodeがHTMLを書いてくれる機能だと思っていました。それだけではありませんでした。
作って、リンクにして、同じURLのまま更新できる。
そこまでがArtifactsです。
この記事では、Claude Code 2.1.267をClaude Maxで使い、2026年9月10日に実際に動かして確認しました。
Claude Code Artifactsとは
普段Claude Codeに資料を作ってもらうと、ローカルへHTMLやMarkdownが保存されます。
Artifactsを使うと、その成果物をClaudeのホスティング環境へ公開し、ブラウザで開けるURLにできます。
ざっくり言うと、こうです。
Claude Codeで作る
↓
Artifactとして公開する
↓
ブラウザで見る
↓
同じURLのまま更新する
「HTMLを作って終わり」ではなく、見る場所までClaude Codeが用意してくれるのがポイントです。
| ローカルのHTML | Artifact | |
|---|---|---|
| 見る場所 | 自分のPC | ブラウザのURL |
| 人に見せる方法 | ファイルを渡す、別途ホスティングする | 共有設定したリンクを渡す |
| 更新 | ファイルを作り直す | 同じURLへ新しい版を反映できる |
| 過去の版 | 自分で管理する | バージョン履歴から確認できる |
実際にArtifactを作ってみる
今回はQiita記事用のデモとして、「技術記事の公開前チェックリスト」を作ってもらいました。
Claude Codeへ渡したプロンプトはこちらです。
Qiita記事用の安全なデモとして、一般的な内容だけを使った
「技術記事の公開前チェックリスト」のArtifactを作ってください。
個人名、会社名、リポジトリ名、ローカルファイル、環境情報は
一切含めないでください。
チェック項目は「タイトル」「本文」「コード」「画像」「公開前確認」の
5分類で、ブラウザで見やすい1ページにしてください。
Artifactとして公開してリンクを開いてください。
Claude Codeはページを作ったあと、外部へ公開する前に確認を出しました。
ここで許可すると、作った内容がAnthropicのサーバーへアップロードされます。仕事のコードや社内情報をArtifactにするときは、勢いで許可せず中身を確認したほうがよさそうです。
これは更新後の実画面です。見出しの下に「更新テスト済み」が入り、右上には共有ボタンが表示されています。
公開後はブラウザが開き、次のような1ページのチェックリストが表示されました。
- 全34項目の進捗が上部に表示される
- 「タイトル」「本文」「コード」「画像」「公開前確認」の5分類に分かれる
- チェックを付けると進捗バーが動く
- 右上に共有ボタンと公開範囲が表示される
普通の説明資料だけでなく、チェックを付けたり、タブを切り替えたりするページも作れます。
Markdownをきれいに見せるだけだと思っていたので、思ったよりアプリでした。
同じArtifactを更新してみる
次に、作ったArtifactへ小さな表示を追加してみました。
更新の動作確認をします。
今公開した同じArtifactに、見出しの近くへ小さく
「更新テスト済み」と追加し、同じURLへ再公開してください。
Claude Codeから返ってきたURLは、最初に公開したものと同じでした。ブラウザを開くと「更新テスト済み」が追加され、バージョンも新しくなっていました。
初版: URL A
↓ 修正して再公開
更新版: URL Aのまま
レビューでもらった修正を反映するたびに、新しいURLを送り直さなくていい。これは地味に助かります。
Artifactを共有する
作ったArtifactは、ブラウザ右上の共有ボタンから共有範囲を変更できます。
公式ドキュメントによると、共有方法は契約プランや組織の設定で変わります。Team・Enterpriseでは、組織外への共有が初期状態で無効になっており、オーナーが有効にできます。Pro・Maxでは公開リンクで共有できます。
今回は、自分だけが見られる初期状態での作成と更新まで確認しました。共有範囲の変更は未検証です。
まず非公開で作る。中身を確認する。それから必要な相手だけに見せる。この順が安心です。
Artifactで作れそうなもの
公式ドキュメントでは、次のような使い方が紹介されています。
- PRの変更点を順番に見せるウォークスルー
- 実装案やデザイン案を並べる比較ページ
- メトリクスを見せるダッシュボード
- 障害調査のタイムライン
- 進捗や確認項目を操作できるチェックリスト
自分が今回作ったのは最後のチェックリストです。
文章を読ませるだけならMarkdownで十分です。一方で「比較する」「順番に追う」「触って確認する」なら、Artifactにする意味が出てきます。
作る前に知っておくこと
2026年9月10日時点の公式ドキュメントでは、主な条件は次のとおりです。
| 項目 | 内容 |
|---|---|
| 対象プラン | Pro、Max、Team、Enterprise |
| Claude Code | CLI 2.1.183以降、またはデスクトップ 1.13576以降 |
| ログイン | Claude.aiアカウントで/loginする |
| 対応ファイル | HTML、HTM、Markdown |
| サイズ | 1つのArtifactにつき16MiBまで |
| ページ構成 | 1つの自己完結したページ |
| 実行環境 | 静的ページ。バックエンド処理は置けない |
Claude CodeをAPIキー、Amazon Bedrock、Google Vertex AI、Microsoft Foundry経由で使っている場合は、Artifactsを公開できません。
また、読み込める外部リソースにはセキュリティ上の制限があります。画像やライブラリを外部から持ってくるページを作る場合は、公式ドキュメントのContent Security Policyも確認したほうがよさそうです。
機能の対象プランや共有範囲は変わりやすいです。実際、公開当初の案内と現在の公式ドキュメントでは対象範囲が違いました。使う直前に公式ドキュメントを見るのが確実です。
まとめ
Claude Code Artifactsは、セッションで作った成果物をブラウザで見られるページにする機能です。
- HTMLやMarkdownをURLで見られる
- チェックリストのような操作できるページも作れる
- 修正しても同じURLを使い続けられる
- 共有範囲を設定して人に見せられる
- 公開前に、アップロードする内容の確認が必要
まずは公開しても問題ないMarkdownを1つ選んで、こう頼むと試せます。
このMarkdownを、ブラウザで読みやすいArtifactにしてください。
個人情報や環境情報が含まれていないことを確認してから公開してください。
Artifactsが「成果物を見られる場所」なら、見やすいデザインを考えるのがClaude Code組み込みのartifact-design Skillです。
次は、artifact-designが配色・文字・レイアウトをどう考えているのかを書きます。名前が似てる。先にArtifactsを知っておいて正解でした。
参考
- Create and share interactive artifacts from Claude Code - Claude Code Docs … 対象プラン、作成・更新・共有方法、技術的な条件を確認した公式ドキュメント
- Build, host, and share AI-powered apps with Claude Code - Claude Blog … Claude CodeからArtifactsを作る機能の発表記事
- What are Artifacts and how do I use them? - Claude Help Center … ClaudeのArtifacts全般に関するヘルプ
- Claude Code の Artifacts とは？ … Artifactsの作成・更新・共有を詳しく試したQiita記事
関連記事
- artifact-design Skillとは？ Claude Codeのデザイン担当 … 次の記事。Artifactの見た目をClaude Codeがどう考えているのかを掘ります
- 読みにくいmdはClaudeに投げてHTML/CSSにするだけでよかった … Markdownを、人が読みやすいHTML資料へ変えてみた話
- Claude Code新出力スタイル「Concise」で、Claudeが結果ファーストの有能な相棒になった … Claude Codeに組み込まれた仕組みを、実際に使ってみた別の記事
告知
最後にお知らせとなりますが、イーディーエーでは一緒に働くエンジニアを
募集しております。詳しくは採用情報ページをご確認ください。
みなさまからのご応募をお待ちしております。