Claude Artifactsの使い方——対話内でコード・HTML・SVGを即プレビューする

Claude.aiのArtifacts（アーティファクト）は、生成したコード・HTMLページ・React コンポーネント・SVG図・マークダウン文書をチャット画面内でプレビューできる機能だ。「書いて→確認して→修正して」のサイクルをチャット上で完結させられるため、試作や学習の効率が大幅に上がる。

Artifactsとは

Artifactsは、Claudeが生成したコンテンツを専用の表示エリアに分けて提示する機能だ。従来はコードブロックとしてテキストで表示されるだけだったが、Artifactsを使うことで実際の動作や見た目をその場で確認できる。

対応しているコンテンツタイプは以下の通りだ。

基本的な使い方

Artifactsを有効にする

Claude.aiの設定から「Features」を開き、「Artifacts」をオンにする。有効にすると、コードやHTMLを含む応答が自動的にArtifactsエリアに表示されるようになる。

HTMLページのプレビュー

「シンプルなタスク管理アプリのHTMLを作ってください。
追加・削除・完了チェックができるもので、CSSもインラインで含めてください。」

このプロンプトでClaudeがHTMLを生成すると、Artifactsエリアに実際のUIとして表示される。ボタンのクリックやテキスト入力も試せる。

修正の反復

プレビューを見ながら「ボタンの色を青にしてください」「フォントをもっと大きくしてください」と指示するだけで、コードを更新して再プレビューしてくれる。コードの内容を理解していなくても、見た目を確認しながら改善できる点が強みだ。

Reactコンポーネントの活用

ReactコンポーネントはArtifacts内でリアルタイムに動作する。インタラクティブなUIの試作に特に有用だ。

「以下の仕様のReactコンポーネントを作ってください:
- 数値カウンター（+/-ボタン）
- 最小値0・最大値100の制限
- 現在値をプログレスバーで表示
- ダークモード対応（ボタンで切り替え）」

生成されたコンポーネントをArtifacts内で操作し、動作確認しながら仕様を詰めることができる。満足いくコンポーネントができたら、コードをコピーして実プロジェクトに組み込む。

SVGでダイアグラムを生成する

フローチャートや構造図をSVGで生成させることで、専用ツールなしにダイアグラムを作れる。

「ユーザー登録フローを示すSVGフローチャートを作成してください。
ステップ: メールアドレス入力→認証メール送信→メール確認→パスワード設定→登録完了
エラーパターン（重複メール・リンク期限切れ）も含めてください。」

生成されたSVGは画像としてダウンロードでき、ドキュメントやプレゼンテーションにそのまま使える。

Mermaidによるシーケンス図

「システム構成を示すMermaidのシーケンス図を作ってください。
登場人物: ユーザー・フロントエンド・APIサーバー・データベース
シナリオ: ユーザーがログインしてデータを取得するまでのフロー」

MermaidはArtifacts内でレンダリングされるため、記法を知らなくても「こんな図を作って」と自然言語で依頼してプレビュー確認できる。

データビジュアライゼーションの活用

CSVデータや数値データを渡して、グラフや可視化HTMLを生成することができる。

「以下のデータをHTML+Chart.jsで可視化してください。
月別の売上データを折れ線グラフで表示し、前年比の増減を色で示してください。

データ:
1月: 120万円, 2月: 135万円, 3月: 158万円...」

効果的な活用パターン

プロトタイプの素早い作成: アイデアを素早くUIに落とし込んで確認したい場合に最適。完璧を目指さず、まず動くものを作って改善するアプローチに向いている。

技術的な概念の可視化: 抽象的なアーキテクチャや処理フローをダイアグラムで可視化することで、理解とコミュニケーションが容易になる。

学習・実験: HTMLやReactの学習過程で、コードの変化とUIの変化を対応させながら学ぶと理解が深まる。「このCSSを変えると見た目はどう変わる?」と確認しながら実験できる。

Artifacts使用時の注意点

外部APIへのアクセスは不可: ArtifactsのサンドボックスからAPIを呼び出すことはできない。外部サービスとの連携が必要なアプリは、コードをコピーしてローカル環境で実行する必要がある。

状態は会話内のみ: Artifactsのプレビューは会話セッションの間だけ維持される。コードを保存したい場合は、必ずコードをコピーしてファイルに保存しておく。

まとめ

Claude ArtifactsはHTML・React・SVG・Mermaid・Markdownのリアルタイムプレビューをチャット内で実現する機能だ。「生成→プレビュー→自然言語で修正指示→再プレビュー」のサイクルを繰り返すことで、コードの知識がなくてもUIやダイアグラムを素早く作れる。プロトタイプ作成・技術概念の可視化・学習実験といった場面で特に有効だ。まずは「シンプルなHTMLページを作って」という依頼からArtifactsを使い始めてみよう。