Artifacts は Claude の機能で、チャットの隣のパネルに「動くもの」をその場で生成・編集できる仕組みです。コード、HTML ページ、React アプリ、SVG や Mermaid の図、長文ドキュメントを、会話の流れのまま作って、すぐ動かして、リンクで共有できます。本記事では、何が作れるのか、どう使うのか、そして 2025〜2026 年に加わった「AI が中で動くアプリ」までを、初めての人向けに具体的に整理します。
FIG.1 左で言葉にして指示し、右のパネルにその場で動く成果物が現れる
類似機能に ChatGPT の Canvas、Gemini の Canvas がありますが、本記事は Claude の Artifacts に絞って解説します。Artifacts は 2026 年時点で無料プランを含むすべての Claude プランで使えます。「Pro 以上でないと触れない」というのは過去の話で、まず無料で試せます。
01Artifacts で何が作れるか
「コードしか作れない」と思われがちですが、対象はかなり広いです。2026 年時点で、おおむね次の種類をその場でレンダリング・編集できます。
画面・アプリ
HTML ページ（CSS・JavaScript 込み）や React コンポーネント。ボタンを押す・入力するなど、実際に操作できる。
図とコード
SVG 図、Mermaid のフローチャート、30 以上の言語のコード。図はその場で描画される。
文書
Markdown の長文レポートや企画書。.docx / .pptx / .xlsx / .pdf としてダウンロードできる形でも出力できる。
ポイントは、結果が「文章としての説明」ではなく「動く実物」で返ること。ログイン画面を頼めば、読めるコードではなく、その場でクリックできる画面が出てきます。
02典型的な使いどころ
初学者がまず体験するとよい使い方を、具体例とともに挙げます。どれも「専門知識のない人が言葉で頼む」だけで届く範囲です。
- プロトタイプ作成：「ログイン画面のサンプル HTML を」と頼むと、右ペインに操作できる画面が出る。配色や文言をその場で直せる。
- 図解の自動生成：「この手順をフローチャートにして」と頼むと Mermaid 図が、「組織図を SVG で」と頼むと編集できる図が出る。
- ミニアプリ：「割り勘の計算ツールを」「簡単な家計簿を」と頼むと、実際に動く小さなアプリができる。エンジニアでなくても試せる。
- 長文ドキュメント：レポートや議事録テンプレを Artifact にすると会話と分離して管理でき、「ここだけ書き直して」と部分修正しやすい。
Artifacts の価値は、「説明を読む」から「実物を試す」へ距離を縮めるところにある。
03基本の使い方（4 ステップ）
そのまま頼む
特別なモードは不要。普通のチャットで「〜を作って」と頼めば、Claude が成果物に向く内容だと判断したとき自動で Artifact パネルを開く。無料プランでも使える。
制約を最初に添える
「外部ライブラリは使わない」「1 ファイルで」「スマホ表示も考慮」など、条件を先に伝えると、後からの作り直しが減る。
右ペインで確認・修正
生成物をプレビューしながら「この色を変えて」「この機能を足して」と追記すると、その Artifact が更新される。会話で育てていくイメージ。
公開・共有・書き出し
完成したら公開してリンクで配れる。コード・HTML・SVG はダウンロード、文書は .docx などで書き出せる。
プロンプト例（制約を先に書く書き方）:
HTML で 3 列のランディングページのサンプルを作って。 - 上に大きなヘッダー（画像はプレースホルダ） - 中央に機能カード 3 枚 - 下に CTA ボタン 1 つ 配色は青基調、スマホでも崩れないように。外部ライブラリは使わない。
04公開・共有・リミックス
作った Artifact は自分の画面で動かすだけでなく、外に出せます。プランによって呼び名と範囲が変わるので、ここは正確に押さえておきましょう。
| 公開（Free / Pro / Max） | 共有（Team / Enterprise） |
|---|---|
| 公開リンクを発行し、誰でも閲覧・操作できる | 組織内に限定して共有する |
| 閲覧側に Claude アカウントは不要 | 閲覧には組織アカウントへのログインが必要 |
さらに、Claude にログインしている人は、公開された Artifact をリミックス（自分用の編集コピーを作成）して、自分の文脈に合わせて作り替えられます。Claude のサイドバーには「Inspiration（ひらめき）」ギャラリーがあり、他の人が公開した作例を目的別に眺めて、出発点として複製することもできます。
FIG.2 作成 → 公開（リンク）→ 受け手が閲覧、ログイン済みなら自分用にリミックス
05「AI が中で動くアプリ」という進化
2025 年 6 月以降、Artifacts は大きく進化しました。作ったアプリの中からClaude を呼び出せるようになり、単なる静的なサンプルではなく「AI が内側で動くミニアプリ」を作れます。たとえば、入力した文章を要約するツール、用語を解説するツール、アイデアを膨らませるツールなどを、Artifact 単体で完結させられます。
FIG.3 アプリが Claude を呼ぶと、利用者は自分の Anthropic アカウントでサインインを求められ、その分の費用は利用者側に課金される
仕組み上重要なのは課金の流れです。公開したアプリの中で誰かが AI 機能を実行すると、その人は自分の Anthropic アカウントでサインインを求められ、その実行ぶんの費用は作者ではなく利用者側に課金されます。だから作者は「使われるほど自分の請求が膨らむ」心配なく公開できます。加えて 2025 年後半には、セッションをまたいでデータを保持する永続ストレージや、外部サービスと連携する MCP（Model Context Protocol）への対応、外部サイトへの埋め込みも加わり、ダッシュボードや業務トラッカーのような実用ツールも作れるようになっています。
06うまく作るコツ
一発で完璧を狙うより、小さく回すほうが安定します。次の 3 点を意識すると失敗が減ります。
- 段階的に育てる：「まず骨組み → 内容を埋める → 見た目を整える」と分ける。1 回ごとの修正範囲を狭めると壊れにくい。
- 制約を先に伝える：使う技術・行数・対応端末などを最初に指定する。後出しの「やり直し」が減る。
- 説明と実物を分ける：解説は会話側に、動くものは Artifact 側に置くと、頭の中が整理される。
07つまずきやすい点と限界
便利な反面、向き不向きもあります。あらかじめ知っておくと無駄な試行錯誤を避けられます。
- 外部 API への自由なアクセスは制限される：Artifact はサンドボックス（隔離環境）で動くため、任意の外部サービスを直接叩く処理は通らないことがある。外部連携が要るなら MCP の対応範囲かを確認する。
- 長すぎる成果物は不安定：巨大な 1 ファイルや超長文は、編集を重ねると崩れやすい。機能ごとに分けるか、要所でダウンロードしてバックアップする。
- 本格的な本番運用には別の場が要る：Artifacts は素早い試作と共有が得意。継続運用するなら、出力を後述の外部環境へ移す。
Safety & Limits
公開する前に確認したいこと
Artifact は公開するとリンクを知る誰でも閲覧・操作できます。社外秘の情報やそのまま使える認証情報を含めないこと。AI が中で動くアプリは、利用者がサインインして利用者自身に課金される設計なので、作者が想定外の費用を負う心配は基本ありませんが、逆に「誰がどんな指示を流すか」は作者がコントロールしきれません。重要な判断を任せるアプリでは、AI の出力をうのみにせず一次情報で検証する前提を画面側にも明記しておくと安全です。
08他ツールへつなぐ
Artifacts で作ったものは、外の環境へ持ち出してさらに育てられます。試作はここ、本格運用は外、という分業がきれいです。
- HTML / コードを Vercel や GitHub Pages で本番デプロイ
- CodeSandbox / StackBlitz に移して本格的に編集・拡張
- 生成した図や文書を Notion / Confluence 等に貼り付け
料金やプランの詳細は頻繁に変わるため、最新の対応範囲は公式の料金ページで確認してください。まずは無料プランで小さなツールを 1 つ作り、公開リンクを誰かに渡してみると、Artifacts の手応えが一番つかめます。
