Claude アーティファクト — 完全ガイド

Umbrabits · 2026年5月3日 · 1 分で読める

claudeartifactsguide

Anthropic の Claude には、他の多くの AI チャットボットにはない機能があります。それが アーティファクト です。自己完結型のコード、HTML、React コンポーネント、Mermaid 図、SVG をチャット内にインラインでレンダリングし、独立したユニットとして扱います。

上手く使えば、Claude はワンショットのプロトタイピングツールに変わります。下手に使うと、単なるコードブロックの強化版に過ぎません。以下が完全ガイドです。

アーティファクトの正体

Anthropic のドキュメントでは、アーティファクトを「ユーザーが会話の外部で修正、反復、持ち出しそうな、実質的で自己完結したコンテンツ」と定義しています。実際には次の6種類があります。

コード — Python、TypeScript、Rust、Go など。シンタックスハイライト付きでレンダリングされます。
Markdown 文書 — 長文の散文、レポート、下書き。
HTML ページ — 単一ファイルのランディングページ、ダッシュボード、プロトタイプ。
React コンポーネント — 完全なリアクティビティを持つライブレンダリングコンポーネント。
Mermaid 図 — フローチャート、ER 図、シーケンス図。インラインで SVG にレンダリングされます。
SVG 画像 — プロンプトから生成されたベクターグラフィック。

Claude は、コンテンツの長さと自己完結性に基づいて、何をアーティファクトにするかを決定します。「これをアーティファクトにして」や「自己完結型コンポーネントとして」と言うことで、決定を促せます。

エクスポートにおいてアーティファクトが重要な理由

アーティファクトには独自のライフサイクルがあります。

会話の散文とは別にレンダリングされます。
その場で編集できます（「アーティファクトを反復して」と依頼）。
編集を通じて安定した識別子があります。

このため、エクスポートは厄介です。 エクスポートツールが単に会話を Markdown としてダンプすると、アーティファクトは (a) レンダリング可能な形式を失ったインラインコードブロックになるか、(b) 完全に欠落します。

優れたエクスポートツールは、アーティファクトを第一級のオブジェクトとして扱います。

ChatExport AI がアーティファクトを処理する方法

エクスポートごとに選択できる3つのモードがあります。

モード 1: インライン (PDF、Word のデフォルト)

アーティファクトの内容は、出現した位置の会話トランスクリプトにインライン化されます。コードはシンタックスハイライトが保持されます。Mermaid 図は埋め込み SVG としてレンダリングされます。HTML ページはレンダリングされたページのスクリーンショットとしてレンダリングされます。

最適な用途: 会話を単に読みたい人にエクスポートを渡す場合。

モード 2: 別ファイル (ZIP、Markdown のデフォルト)

アーティファクトはスタンドアロンファイルとして保存されます。

コード → chat/<artifact-name>.py (または .ts、.rs など)
HTML → chat/<artifact-name>.html
React → chat/<artifact-name>.jsx
Mermaid → chat/<artifact-name>.mmd と chat/<artifact-name>.svg
SVG → chat/<artifact-name>.svg

トランスクリプトは各アーティファクトを相対リンクで参照します。

最適な用途: コードを実行・修正したい開発者にアーティファクトを渡す場合。

モード 3: 両方

ZIP モードでは両方を含みます。トランスクリプトは読み取り用にインライン化され、アーティファクトは実行用に別ファイルとして保存されます。

最適な用途: アーカイブ。6ヶ月後には両方のビューがあることに感謝するでしょう。

アーティファクトの注意点

複数のリビジョン

アーティファクトを反復すると（「ボタンをもっと大きくして」）、Claude はその場でアーティファクトを更新します。古いリビジョンは会話ビューから消えますが、アーティファクトの履歴パネルから取得可能です。

ChatExport AI はエクスポート時に各アーティファクトの現在のバージョンをキャプチャします。すべてのリビジョンが必要な場合は、エクスポート前に Claude に「アーティファクトの v1、v2、v3 を見せて」と依頼してください。するとリビジョン履歴が別々のコードブロックとしてエクスポートされます。

未完成のアーティファクト

エクスポートを押したときに Claude が生成途中だった場合、中途半端なアーティファクトがそのまま含まれます。エクスポートする前にストリーミングインジケーターが終了するのを待ってください。

React アーティファクトの依存関係

React アーティファクトは、小さなホワイトリスト（React、Tailwind（クラス名経由）、lucide-react アイコン）から import できます。エクスポートは JSX ソースをキャプチャします。ローカルで実行するには、同じ依存関係をセットアップする必要があります。

ChatExport AI のエクスポートには、React アーティファクト用に ZIP 内に README.md が含まれ、必要な依存関係と、アーティファクトを実行する Vite + React プロジェクトをスキャフォールディングするスニペットが記載されています。

Mermaid 図のオフラインレンダリング

Mermaid 図の SVG エクスポートは完全に自己完結しています — どのブラウザでも開け、インターネット不要です。.mmd ソースエクスポートを使用すると、後で編集して再レンダリングできます。

ワークフロー: Claude プロトタイプから出荷コードへ

私にとって最も効果的だった流れは次のとおりです。

Claude にプロンプト を送り、プロトタイプを React アーティファクトとして構築させます。その場で2〜3回反復します。
会話を ZIP としてエクスポート します。トランスクリプトには設計上の決定が説明されており、アーティファクトファイルは実行可能です。
アーティファクトを実際の Vite プロジェクトにドロップ します。リストされた依存関係を追加します。コンポーネントはそのままプロジェクトで動作します。
プロンプト風の散文コメントを 実際の JSDoc に置き換えます。テストを追加します。出荷します。

プロンプトからローカルで実行するまでの合計時間: 約5分。これを高速にするのがエクスポートです —「Claude が作ったもの」と「これが自分のリポジトリにある」の間の橋渡し役です。

試してみる

Claude を開きます。「ユーザーサインアップフローの Mermaid 図を含む、自己完結型の HTML ページを作って」と依頼します。アーティファクトがレンダリングされたら、ChatExport AI で会話を ZIP としてエクスポートします。ZIP にはトランスクリプト、スタンドアロンの .html、.mmd ソース、レンダリングされた .svg が含まれます。

これが Claude アーティファクトの完全なワークフローです。