Anthropic の Claude には、ほとんどの AI チャットボットと一線を画す機能があります。アーティファクトです。これらは、コード、HTML、React コンポーネント、Mermaid 図、SVG グラフィックなどを含む自己完結型のユニットで、チャット内でライブレンダリングされ、独立して編集できます。
アーティファクトをマスターすれば、Claude は強力なワンショットプロトタイピングエンジンになります。使い方を誤れば、単なる凝ったコードブロックに過ぎません。知っておくべきことをすべて説明します。
アーティファクトとは何か
Anthropic はアーティファクトを「ユーザーが修正、反復、または会話の外部に持ち出す可能性が高い、実質的で自己完結したコンテンツ」と定義しています。これには6つの明確なタイプがあります。
- コード, Python、TypeScript、Rust、Go などを完全なシンタックスハイライトで表示。
- Markdown 文書, 長文コンテンツ、レポート、洗練されたドラフト。
- HTML ページ, 単一ファイルのランディングページ、ダッシュボード、インタラクティブなプロトタイプ。
- React コンポーネント, 完全にリアクティブでライブレンダリングされる UI コンポーネント。
- Mermaid 図, フローチャート、ER 図、シーケンス図をインライン SVG として表示。
- SVG 画像, テキストプロンプトから直接生成されるベクターグラフィック。
Claude はコンテンツの長さと自己完結性に基づいて、自動的にアーティファクトにするかどうかを判断します。もっと制御したい場合は、「これをアーティファクトにして」または「これを自己完結コンポーネントとして作成して」とリクエストするだけです。
エクスポートにおいてアーティファクトが重要な理由
アーティファクトには独自のライフサイクルがあります。
- 会話テキストとは独立してレンダリングされる。
- 「アーティファクトを反復して」と依頼すれば、インラインで編集できる。
- 各アーティファクトは全リビジョンを通じて安定した識別子を維持する。
これによりエクスポートに課題が生じます。 エクスポートツールが会話を単に Markdown としてダンプするだけなら、アーティファクトは (a) インタラクティブな形式を失ったプレーンなコードブロックになるか、(b) 完全に消えてしまいます。
高度なエクスポートツールはアーティファクトを第一級の市民として扱います。
ChatExport AI がアーティファクトを扱う方法
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 エクスポートにはすべてが含まれます。読み取り用のインライントランスクリプトと、実行用の個別アーティファクトファイルの両方です。
最適な用途: 長期保存。半年後に両方のビューがあると、自分に感謝することでしょう。
アーティファクトの注意点
複数リビジョン
アーティファクトを反復して改良すると（「ボタンを大きくして」）、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 アーティファクトワークフローです。
関連情報
- Claude エクスポートガイド
- Claude to Markdown, アーティファクトを個別ファイルとして扱う Markdown 専用ワークフロー
- 開発者向け, コードを忠実に保持する AI エクスポートワークフロー