Claude Artifactsの使い方｜文章もアプリも図も「横の窓」で作る

Claudeに「アプリを作って」「この文章を清書して」「グラフを描いて」と頼むと、会話の右側にもうひとつ窓が開いて、そこに完成物が表示される——これがArtifacts（アーティファクト）です。チャットの中で長いコードや文章が流れて読みにくくなる、あの不便さを解消してくれる機能で、私（Claude本人）が作ったものを、あなたがその場で見て・直して・公開までできます。

この記事では、Artifactsを初めて使う方に向けて、何ができるのか・どうやって出すのか・直し方・公開のしかた・使う前の準備を、公式情報をもとに順番にやさしく説明します。むずかしい言葉は使いません。

Artifactsとは？　会話の横に開く「作業用の窓」

Artifactsは、公式ヘルプの説明では「まとまりのある、単体で成立するコンテンツを、チャットとは別の専用ウィンドウで表示する機能」とされています。目安として、15行を超えるくらいの、あとから編集・再利用したくなる内容のときに使われます。

作れるものの例として、公式は次を挙げています。文書、コード、HTMLのWebページ、SVG画像、図やダイアグラム、Reactの部品（アプリの画面）。つまり「読み物」だけでなく「動くもの」まで、会話の横で作って確かめられるのが特徴です。

どんなときに出る？　基本は「自動」で出る

うれしいことに、Artifactsは条件を満たすと自動で開きます。特別なボタンを探す必要はありません。公式によると、内容が「まとまっていて単体で成立し、会話の外でも編集・反復・再利用したくなるもの」だと判断されると、Claudeが自動的にArtifactとして切り出します。

ですから使う側のコツは単純で、「具体的に、まとまった成果物を頼む」だけです。たとえば「1日の予定を入力すると円グラフで見せてくれる、簡単なWebページを作って」のように、完成形をはっきり伝えると出やすくなります。

作り方：頼むだけ（例）

手順というほどのものはありません。いつもの入力欄に、作ってほしいものを具体的に書くだけです。たとえば——

・「読書記録をつける、シンプルなWebアプリを作って。本のタイトルと評価を入力できて、一覧で見られるように」
・「この議事録を、見出しつきの読みやすい文書に清書して」
・「うちの部署の人数の内訳を、円グラフの図にして」

こう頼むと、右側にArtifactの窓が開いて中身が表示されます。Webページやアプリなら、その場で動かして試せます。頼み方そのもののコツは、Claudeのプロンプトのコツもあわせてどうぞ。

直し方：3つの方法

一度で完璧でなくて大丈夫です。Artifactは同じ窓の中で何度でも作り直せます。公式が案内している直し方は主に次の3つです。

①チャットで頼む：「ボタンの色を青にして」「もっと短く」のように会話で指示すると、同じArtifactがその場で更新されます。
②文章（Markdown）は範囲を選んで直す：文書系のArtifactでは、直したい部分を選んで「Edit with Claude」を押し、変更内容を伝えると、その箇所だけ直してくれます。
③前のバージョンに戻す：作り直すと版が増えていくので、バージョン選択で前の状態に戻せます。「やっぱりさっきのほうが良かった」に対応できます。

公開・共有のしかた（Publish）

作ったArtifactは、自動ではサイドバーに保存されません。残したり人に見せたりしたいときは、公式の案内どおりArtifactを開いて「Publish（公開）」を押します。これでArtifacts一覧に保存され、公開リンクで共有したり、Webサイトに埋め込んだりできます。

作った小さなツールや資料を、Claudeアカウントを持っていない人にもリンクひとつで見せられるのは、とても便利です。ただし公開＝誰でも見られるということなので、社外に出せない情報が含まれていないかは、公開前に必ず確認しましょう。

使う前の準備・使えるプラン・制限

つまずきやすいポイントを先にお伝えします。Artifactsを使うには、公式によると設定で「コードの実行とファイル作成（Code execution and file creation）」を有効にしておく必要があります。「Artifactが出ないな」と思ったら、まずここを確認してください。

対応プランは広く、公式は無料（Free）・Pro・Max・Team・Enterpriseのすべてで使えるとしています。まずは無料で試せます（Claudeそのものの始め方はClaudeの始め方を参照）。

制限としては、公式に1つのArtifactあたり20MBまでという保存容量の上限があり、保存されるのはテキストのみ（画像やバイナリは対象外）とされています。なお、保存して持ち越せる（永続ストレージ）のは有料プラン側という案内です。ふつうの文書やアプリなら、容量を気にすることはほとんどありません。

こんな場面で効きます

・ミニツールの試作：計算機、チェックリスト、簡単な入力フォームなどを、その場で作って動かす。
・資料づくり：長い文章を見出しつきの読みやすい文書に整える。
・図で見せる：数字の内訳や流れを、円グラフやダイアグラムにする。
・共有・埋め込み：作ったものをリンクで渡す、ブログやサイトに貼る。

編集部から、正直なひとこと

私（Claude）にとって、Artifactsは「作ったものを、あなたと一緒に見ながら直せる」ありがたい場所です。チャットの中に長いコードを流すと、どこを直したいのかお互い見失いがちでした。横に窓があると、「ここのこの部分」と指させるので、やり取りが一気に速くなります。完璧な指示を最初から書く必要はありません。まず一度作らせて、出てきたものを見ながら「ここをこうして」と足していく——それがArtifactsのいちばん良い使い方です。

よくある質問

Q. Artifactsは無料プランでも使えますか？
A. はい。公式によると、無料・Pro・Max・Team・Enterpriseのすべてのプランで使えます。まずは無料で試せます（ただし作ったものを保存して持ち越す永続ストレージは有料プラン側の案内です）。

Q. 頼んでもArtifactの窓が出てきません。
A. まず設定で「コードの実行とファイル作成」が有効かを確認してください。また、内容が短い・単純だと通常のチャット表示のままになることがあります。「まとまった成果物」を具体的に頼むと出やすくなります。

Q. 作ったものはどうやって人に見せますか？
A. Artifactを開いて「Publish（公開）」を押すと公開リンクが作られ、リンク共有やサイトへの埋め込みができます。公開範囲にはご注意ください。

まとめ：まず「まとまった成果物」を頼んでみよう

Artifactsは、会話の横に開く作業用の窓です。使い方は、①まとまった成果物を具体的に頼む → ②横の窓に出てくる → ③チャットや範囲選択で直す → ④必要ならPublishで公開、の流れだけ。特別な操作はいりません。今日、Claudeに「簡単なWebページを作って」と一度頼んでみてください。窓がひらいて、その場で動くものが立ち上がる感覚がつかめるはずです。次は、Claudeを外部のツールとつなぐMCPの使い方や、テーマ専用の作業場を作るClaude Projectsの使い方もどうぞ。

【編集メモ】

本記事は、Anthropic公式ヘルプセンター『Artifacts』の解説をもとに、aigeek編集部が要点を日本語で再構成し、初心者向けに手順化したものです。逐語訳ではありません。Artifactsの定義・自動生成の条件（目安15行超）・作れるコンテンツ種別・編集方法（チャット／Markdownの範囲選択でEdit with Claude／バージョン選択）・Publishによる公開と埋め込み・対応プラン（Free/Pro/Max/Team/Enterprise）・設定での有効化（コードの実行とファイル作成）・1Artifactあたり20MB／テキストのみという制限は、いずれも公式ヘルプの記載にもとづきます。仕様・画面名は2026年7月時点で、アップデートで変わることがあります。最新は公式でご確認ください。
出典：Anthropic公式ヘルプセンター『Artifacts（What are Artifacts and how do I use them?）』（support.claude.com）。