Claude 101：アーティファクト

アーティファクトって何?

アーティファクトとは、会話の隣にある専用のウィンドウで、Claudeが作ってくれる独立した成果物です。そのまま操作できる、対話的な成果物として現れます。

長いコードや文章がチャットの流れの中に埋もれてしまうことはありません。代わりに

そのまま使える形に整えられた成果物が目の前に現れます——動くウェブサイト、操作できるグラフ、すぐにダウンロードできる文書として。

Claudeがアーティファクトを作る基準

Claudeは、内容が次の条件を満たすときに、自動的にアーティファクトを作ります。

1. 📦 まとまっていて、それ単体で意味を持つ——だいたい15行以上の内容
2. ✏️ あとで編集したり、磨き上げたり、再利用したりしたいものである
3. 🎯 その内容だけで成立する——周りの会話がなくても理解できる
4. 📌 あとから参照したり、使ったりしたいものである

アーティファクトの種類

Claudeは、用途に応じてさまざまな種類のアーティファクトを作れます。

1. 📄 文書

マークダウン、プレーンテキスト、Word文書、PDF、PowerPoint、Excel——文字主体のあらゆる形式に対応します。

書き出して使ったり、編集を続けたりする前提のコンテンツに最適です:

• 議事録
• レポート
• プロジェクト計画書
• ブログ記事
• その他の文章コンテンツ

1. 💻 コードスニペット

動作するコードを、どんなプログラミング言語でも生成できます——**Python

JavaScript、C++**などなど。

コードを画面上で確認する、コピーする、ダウンロードして自分のプロジェクトで使う——どの形でもOKです。

1. 🌐 HTMLページ

HTML、CSS、JavaScriptを1つのファイルにまとめた、完成度の高いウェブページを作れます。

向いている用途:

• ランディングページ
• 入力フォーム
• 操作できるデモ
• 素早いプロトタイプ

1. 🎨 SVG画像

ロゴ、アイコン、イラスト、その他の視覚要素を、拡大しても綺麗なベクター画像として生成します。アーティファクトのウィンドウ内で直接表示されるので、作りたいものが本当にできているか、その場で確認できます。

1. 📊 Mermaid図

フローチャート、シーケンス図、ガントチャート、組織図など、さまざまな図を作れます。「どんな関係性を可視化したいか」を伝えれば、Claudeがそのとおりに図を作ってくれて、後から磨き上げることもできます。

1. ⚛️ Reactコンポーネント

実際の機能を持った、操作できるUI要素を作れます——電卓、ダッシュボード、ゲーム、データの視覚化など。

💡 これらはただのモックアップではありません——本物のロジックを内蔵していて、ユーザーの入力にもちゃんと反応します。

最初のアーティファクトを作ってみる

アーティファクトを作るのは、会話するのと同じくらい簡単です。何が欲しいかを伝えるだけ——Claudeが**「これはアーティファクトとして出すべきかな?」**と判断してくれます。

たとえば、こんなふうに頼めます

• 「自社のカスタマーオンボーディングのプロセスを、フローチャートにして」

💡 ちなみに：Claudeは現在、フローチャートのようなビジュアルな図を、Imagine機能を使ってHTML形式で生成することもあります（従来のコードベースのアーティファクトに加えて）。

• 「月の支出を入力すると内訳が見られる、操作できるダッシュボードを作って」
• 「生産性アプリのランディングページを設計して。ヒーローセクションと機能リスト付きで」
• 「新しい施策のたびに使い回せる、プロジェクト概要書のテンプレートを書いて」

アーティファクトが自動で出てこないとき

「アーティファクトで出てくると思っていたのに、出てこなかった」——そんなときは、Claudeに直接お願いしてみてください:

• 「これをアーティファクトとして作って」
• 「アーティファクトで見せて」

アーティファクトのウィンドウでできること

Claudeがアーティファクトを生成すると、会話の右側にある専用ウィンドウに表示されます。ここから、こんな操作ができます。

1. 👁️ 表示形式を切り替える ：プレビュー（見た目）と元のコードを行き来できる
2. 📋 内容をコピーする ：コピーアイコンをクリックして、他の場所で使う
3. 💾 ファイルとしてダウンロード ：アーティファクトをファイルとしてコンピュータに保存
4. 🔍 コードを確認する ：Claudeが裏側で何を生成したか、その全貌を見られる

アーティファクトを共有・公開する

役に立つものができたら、いくつかの方法で他の人と分かち合えます。

1. 📋 コピーまたはダウンロード

個人で使う、または他のチャネル経由で共有する場合は、アーティファクトのウィンドウ右下にある「コピー」「ダウンロード」ボタンを使います。

1. 🏢 組織内で共有する（Claude for Work向け）

TeamプランおよびEnterpriseプランのユーザーは、アーティファクトを社内の同僚と共有できます。

💡 共有されたアーティファクトは組織の中にとどまり、アクセスするにはチームメンバーとしてのサインインが必要です。

1. 🌍 一般に公開する

Free、Pro、Maxプランのユーザーは、リンクを知っている人なら誰でも見られる形でアーティファクトを公開できます。

公開すると、こうなります:

1. 🔒 公開されるのは、選んだバージョンだけ——あなたのチャットはプライベートのまま
2. 👀 誰でも閲覧・操作できる——Claudeのアカウントがなくても大丈夫
3. 🔄 「リミックス」もできる——他の人があなたのアーティファクトを自分のClaude会話で開いて、修正したり、土台にして発展させたりできる

公開のしかた

アーティファクトの右上にある「共有」または「公開」ボタンをクリックします。

公開を解除したくなったら、いつでも同じアーティファクトに戻って、公開アクセスをオフにできます。

⚠️ 公開時の注意：アーティファクトを公開すると、リンクを持っている人なら誰でも——Claudeのアカウントがなくても——アクセスできます。

ただし、公開アーティファクトは検索エンジンにインデックスされません。だから

Google検索の結果には出てきません。

アーティファクトを最大限に活かすコツ

アーティファクト機能の力を引き出すための、4つのコツを紹介します。

1. 🎯 欲しいものを、具体的に伝える

**「家計簿を作って」**でも悪くありません。でも——

「月次の家計簿を作って。支出をカテゴリごとに入力できて、円グラフで内訳が見られて、予算オーバーしたら警告が出るやつ」

——のほうが、ぐっと欲しいものに近づきます。

1. 👥 「誰が使うのか」を伝える

アーティファクトを使う人を、Claudeに伝えてみてください。適切なデザインの判断ができるようになります。

たとえば:

• 「このフローチャートは、新入社員向け」
• 「このフローチャートは、エンジニアチーム向け」

——この一言の違いで、できあがるものが変わってきます。

1. 🔄 少しずつ磨き上げていく

Claudeに一度に一つの機能や修正を頼みましょう。

こうすることで:

• ✅ 何がうまくいっているかを見極めやすくなる
• 🔍 問題があれば、早めに気づける

1. 💡 必要なら「アーティファクトで作って」と頼む

大きめのものをお願いしたのに、Claudeがアーティファクトではなくチャット上で返してきたら、こう伝えてください:

「それ、アーティファクトとして作って」

これだけでOKです。

レッスンの振り返り

次に進む前に、3つの問いを自分に向けてみてください。書き出さなくてOK、頭の中で考えるだけでも大丈夫です。

1. 🔁 問い1：繰り返し使える「対話的なアーティファクト」を考える

あなたの繰り返しの仕事の中で、操作できるアーティファクトを作って何度も再利用できたら助かりそうなものはありますか?

「毎回ゼロから作っている」業務があるなら、それこそアーティファクトの活躍どころです。

1. 📊 問い2：「図にした方が伝わるもの」を考える

あなたの仕事の中に、フローチャートや図にすれば、もっと伝わりやすくなるプロセスはありませんか?

言葉で説明するより、見せた方が早い——そんな場面が、アーティファクトの出番です。

1. 🧪 問い3：素早く試したい「アイデアの試作品」を考える

アイデアを素早く試すために、プロトタイプやツールがあると助かる場面はありますか?

「これ、形にしてみないとわからない」——その一歩目を、Claudeと一緒に踏み出せます。

次のレッスンでやること

次のレッスンでは、スキル機能について学びます。

スキルとは——Claudeに専門的な仕事の流れを覚え込ませる、再利用可能な指示のセットのことです。

フィードバック

このコースを進めながら、あなたが学んだことを実際の仕事でどう活かしているか、気づいたこと・感じたことを、ぜひ聞かせてください。

フィードバックはこちらのフォームからお寄せください。

Acknowledgments and license

Copyright 2025 Anthropic. All rights reserved.