Claude Artifactsの使い方 -- 生成物を編集・公開する

この記事は「Claude入門ガイド2026年版」の関連記事です。

ClaudeにHTMLやPythonのコードを書かせると、チャット欄にそのままテキストが流れてくる——という経験をしたことがある人は多いはずだ。そのコードを別のエディタに貼り付けて、実行して、修正して、また戻して……という往復作業は、想定以上に手間がかかる。

Claude Artifactsはこの問題を解消する機能だ。コードや文書、図、Webデザインといった成果物を、チャット画面の横に開く専用ウィンドウで生成・編集・共有できる。2026年6月時点で、Free・Pro・Max・Team・Enterpriseの全プランで利用可能であり、追加費用なしで使い始められる。

この記事では、Artifactsの基本的な仕組みから、MCP（Model Context Protocol）を使った対話型アプリの作成、共有・公開の方法まで、初めて触る人が実際に手を動かしながら理解できる形で整理する。読み終えた時点で「Artifactsをどのシーンで使うか」の判断材料が揃った状態になることを目指した。

ArtifactsとはClaude専用の「生成物ウィンドウ」である

Claudeとの会話でコードや文書を生成すると、通常はチャットのテキストとして流れてくる。Artifactsが有効な状態では、その成果物がチャット欄と並んだ右側の専用ウィンドウに表示される。会話の流れを妨げることなく、生成物だけを取り出して確認・編集できるという設計だ。

たとえるなら、料理中のまな板のようなものだ。食材（会話）と調理スペース（成果物）が別に確保されているため、作業が混線しない。チャット上に「コードのかたまり」が流れてしまって画面が見づらくなる、という状況も起きない。

Artifactsは、Anthropicが2024年に導入し、その後段階的に機能を拡張してきた（公式ブログ: Introducing Artifacts）。現在は単なる「コード表示領域」にとどまらず、編集、バージョン管理、共有、MCP連携によるアプリ化まで対応している。

Artifactsで扱える成果物の種類

ここで一度、問いを置きたい。「Artifactsで何が作れるのか」を先に把握しておくと、使うべきシーンのイメージがぐっと鮮明になる。

Artifactsが対応する成果物の種類は以下のとおりだ（公式サポート: Intro to Artifacts）。

コードスニペット

PythonやJavaScript、Bashなどのコードを専用ウィンドウで生成する。シンタックスハイライトが適用されるため視認性が高く、コピーボタンからワンクリックでクリップボードに取得できる。デバッグの指示を続けても、Artifactsウィンドウが更新されるだけでチャット欄が汚れない。

文書

Markdown形式で構造化された文書を生成する。技術ドキュメントや要件定義書、報告書のひな型など、繰り返し修正が必要なものに向いている。

グラフィック・図

Mermaid記法によるフローチャートやシーケンス図、SVGによるグラフィックを生成する。組織図、システム構成図、ER図などをテキスト指示だけで描画できる。

Webデザイン・HTML

HTMLとCSSで構成されたWebページを生成し、Artifactsウィンドウ内でプレビューできる。デザインの確認とコード修正を同一画面内で完結させられる。

簡単なアプリ（インタラクティブウィジェット）

ReactコンポーネントなどJavaScriptを用いた動的なUIを生成する。ボタンを押すと何かが動く、入力値に応じて表示が変わる、といったインタラクティブな動作をArtifacts内で直接確認できる点が大きい。後述するMCP連携と組み合わせると、外部サービスに接続した本格的なアプリにまで発展させられる。

成果物の種類が分かったところで、次は基本の操作フローを確認しよう。

Artifactsの基本操作——生成・編集・バージョン管理

生成：指示を出すだけで自動的に開く

特別な設定は不要だ。「PythonでCSVを読み込んで集計するコードを書いて」「要件定義書のテンプレートを作って」のように、成果物として切り出せる内容を依頼すると、Claudeが自動的にArtifactsウィンドウを開いて出力する。

どんな指示がArtifactsを起動するかについては、コード・文書・図・HTMLなど「単独のファイルとして保存できる形式」と考えるとわかりやすい。逆に、質問への回答や解説文はチャット欄に表示される。

編集：チャットで指示を続けるだけ

Artifactsが生成された後も、会話は継続している。「この関数をエラーハンドリング付きに修正して」「図のノードをあと2つ増やして」と指示すれば、Artifactsウィンドウの内容が更新される。チャット履歴は残ったまま成果物だけが更新されるため、「最終的に何が完成したか」と「そこに至るまでの経緯」を同時に把握できる。

バージョン管理：履歴を行き来できる

Artifactsウィンドウ下部の矢印ボタンで、過去のバージョンに遡ることができる。「前の版の方が良かった」と気づいたとき、チャット履歴を遡ってコードを探し直す必要はない。

コピーとダウンロード

Artifactsウィンドウ右上のメニューから、以下の操作が行える。

コピー：コンテンツ全体をクリップボードにコピー
ダウンロード：ファイルとしてローカルに保存（コードは.pyや.js、HTMLは.htmlとして出力）

基本操作はシンプルだ。編集の繰り返しを経て成果物が完成したら、次は「それをどこまで広げられるか」を考えるフェーズになる。

MCP連携で対話型アプリを作る

Artifactsの応用として、MCP（Model Context Protocol）との連携がある。MCPは、Claudeが外部サービスに接続するための標準仕様だ（MCPとは）。

この連携を使うと、Artifacts上で動くアプリが外部サービスを読み書きできるようになる。公式情報によれば、AsanaやGoogleカレンダー、Slackといったサービスへの接続が実例として挙げられている（公式サポート: Intro to Artifacts）。

具体例として、次のようなアプリが作れる。

Googleカレンダーの予定を読み込み、今週のスケジュールを視覚化するウィジェット
Asanaのタスク一覧を取得して、ステータス別に並べ替えて表示するダッシュボード
Slackに入力したメッセージを指定チャンネルに送信するフォーム

「自分でプログラムを書けなくても、Claude経由でアプリを組み立てられる」という点がポイントだ。MCP接続の設定はClaude Desktopアプリで行い、その後Artifactsに「このデータを使って画面を作って」と指示する流れになる。

MCP自体の設定方法については、MCPとはで詳しく解説している。まずはArtifactsの基本操作に慣れてから取り組むのが現実的だ。

アプリを作ったら、次に気になるのは「それを他の人に使ってもらえるか」という点だろう。

共有・公開——他の人がAPIキーなしで使える

共有リンクを発行する

Artifactsウィンドウ右上の共有ボタンから、成果物の共有リンクを発行できる。このリンクを受け取った相手は、Claudeのアカウントを持っていなくても、APIキーも不要で、そのままArtifactsを利用できる。

これは、業務で作成した集計ツールや可視化ウィジェットを、非エンジニアの同僚に渡す際に実用的だ。「Claudeを契約していない相手にも配れる」という点が他のAIツールとの大きな違いになる。

公開の範囲設定

共有設定では、リンクを知っている全員がアクセスできる「リンク共有」と、特定の組織やチームのみに制限する設定が選べる（Team・Enterpriseプランではより細かな権限制御が可能）。

では、そのArtifacts機能はどのプランで使えるのか。永続的に保存できるかどうかも含めて確認しておこう。

対応プランと永続ストレージ

2026年6月時点で、ArtifactsはFree・Pro・Max・Team・Enterpriseの全プランで利用できる（Claude料金ページ）。

ただし、永続ストレージ（セッションをまたいで保存される機能）の扱いに違いがある。

プラン	Artifacts利用	永続ストレージ
Free	○	×
Pro	○	○（Web・デスクトップ）
Max	○	○（Web・デスクトップ）
Team	○	○（Web・デスクトップ）
Enterprise	○	○（Web・デスクトップ）

Freeプランでも当該セッション内であればArtifactsは動作する。ただし、セッションをまたいで成果物を保存・再呼び出しするには、Pro以上のプランが必要だ。作業の継続性が求められる業務用途であれば、この点を考慮してプランを選ぶ必要がある。プランの詳細な違いについてはClaudeの無料版とProとMaxの違いで整理している。

ここまで機能の概要を掴んできた。最後に、実際のシーンに落とし込んだ使い方の例を見てみよう。

活用例——初心者向け具体的シナリオ

シナリオ1: 業務メールのひな型を作る

「新規取引先への挨拶メールのひな型をMarkdownで作って。件名・書き出し・自社紹介・要件・締めの5ブロック構成で」と指示すると、Artifactsに構造化されたひな型が生成される。「締めをもう少し丁寧なトーンに変えて」と続ければ、ひな型だけが更新される。完成したらダウンロードして社内で使い回せる。

シナリオ2: データ集計スクリプトを繰り返し修正する

CSVデータを読み込んで月次売上を集計するPythonスクリプトを依頼し、Artifactsに出力させる。実際に動かして気になる点が出たら「カラム名をsales_amountに合わせて変えて」「ゼロ除算のエラーハンドリングを追加して」と会話を続ける。チャット欄には修正の経緯が残り、Artifactsには常に最新版が表示される。

シナリオ3: 組織図やシステム構成図を手早く描く

「この役職構成をMermaid図にして」とテキストを渡せば、Artifactsに図が生成される。ノードの追加や関係線の変更も会話で指示できるため、Figmaやドロー系ツールが手元にない状況でも素早く図を起こせる。

シナリオ4: チームに配布する集計ツールを作る

Reactで動くシンプルな集計フォームをArtifacts上に作り、共有リンクを発行してチームのSlackに貼る。Claudeのアカウントを持っていないメンバーも、リンクを開けばすぐに使える。MCP連携を加えれば、入力値をそのままスプレッドシートに書き込む仕組みにまで発展させられる。

FAQ

Q. 日本語でも使えるか？
使える。指示も日本語で出せるし、日本語の文書をArtifactsで生成することも問題ない。

Q. Artifactsに上限はあるか？
Artifactsの1件あたりのサイズや同時に開ける数に実用上の上限はあるが、一般的な用途では意識しなくてよい範囲だ。大規模なコードベース全体を1つのArtifactsにまとめるといった用途には向いていない。

Q. モバイルアプリでも使えるか？
2026年6月時点で、Artifacts機能はWebブラウザとデスクトップアプリが主な対応環境だ。モバイルブラウザからの利用可否は端末・OS依存の部分があるため、公式情報を都度確認してほしい。

Q. ClaudeのモデルによってArtifactsの動作は変わるか？
利用するモデル（Opus 4.8 / Sonnet 4.6 / Haiku 4.5）によってコードの品質やUX生成の精度に差が出ることはあるが、Artifacts機能そのものは全モデルで使える。モデル選択の指針も参考になる。

本記事では、Claude Artifactsについて、会話の横に開く専用ウィンドウという基本構造から、対応する成果物の種類、バージョン管理、MCP連携によるアプリ化、共有・公開、プランの違いまでを整理した。

要点を一文で言えば、Artifactsは「生成して終わり」ではなく、編集・共有・アプリ化まで一本のワークフローで完結させるための仕組みだ。

冒頭で触れた「チャット欄にコードが流れてきて扱いに困る」という問題は、Artifactsを使えば根本から変わる。まずは簡単な文書かコードを1つ生成してみて、ウィンドウの動作を確認するところから始めるのが最も早い。

Claudeの機能全体像については、「Claude入門ガイド2026年版」に戻って確認できる。