Artifacts で実用的な成果物を作る
要約 — このレッスンの要点
- Artifacts は Claude が生成したコード・ドキュメント・グラフィックを、会話ウィンドウとは別のサイドパネルに表示・保持する機能だ。
- 生成された Artifact は会話中にその場でプレビュー・編集・コピーでき、作業ループが短縮される。
- 対応するコンテンツタイプはコード・SVG・HTML・Markdown・React コンポーネントなど複数ある。
- Artifact は会話をまたいで再利用でき、Projects 内では同じプロジェクトのすべての会話から参照できる。
- Claude.ai Web / デスクトップアプリで利用可能。共有リンクを発行してチームと共有することもできる。
Artifacts とは
通常の会話では、Claude が生成したコードや長文ドキュメントはチャット本文の中に流れてしまいます。 Artifacts はその成果物を会話右側のパネルに固定表示し、 会話を続けながら並行して確認・修正できる機能です。
例えば「この仕様書を元にログイン画面の HTML を作って」と依頼すると、 生成された HTML コードがサイドパネルに表示され、 ブラウザでのプレビューとソースコードをタブで切り替えながら 「ボタンを青にして」「エラーメッセージを追加して」と反復的に修正できます。
対応するコンテンツタイプ
Artifacts が対応する主なコンテンツタイプは以下のとおりです 出典。
- コード(Python・JavaScript・TypeScript・Ruby 等) — シンタックスハイライト付きで表示
- HTML — プレビュータブでそのまま確認できる
- SVG — グラフィックをサイドパネルで視覚確認
- Markdown — フォーマット済みドキュメントをプレビュー
- React コンポーネント — インタラクティブな UI をその場で動かせる
使い方の流れ
- Claude.ai にログインし、通常の会話を開始する。
- 「〇〇のコードを書いて」「〇〇の仕様書を作って」など成果物を求めるプロンプトを入力する。
- Claude が Artifact として適切と判断すると、右側パネルに自動的に表示される。
- パネル上の「コピー」「ダウンロード」「編集」から操作する。
- 会話で追加指示を出すと、Artifact がその場で更新される。
- 「共有」ボタンで閲覧専用リンクを発行し、チームに共有できる。
Projects との連携
Level 2-5「Projects」で解説したとおり、Projects 内で生成した Artifacts は 同じプロジェクトの会話をまたいで参照・利用できます。 例えばスタイルガイドを Artifact として保存しておき、 新しい会話で「さっきのスタイルガイドに合わせて」と指示することが可能です。
できること・できないこと
Artifacts は Claude が生成したコンテンツを見やすく整理し、再利用性を高める機能です。 コードを直接実行してシステムを変更する操作は Artifacts の範囲外であり、 それは Computer Use(次レッスン)や Claude Code が担います。 Artifacts はあくまで「生成・確認・共有」の効率化が目的です。
参考: 詳細記事
Artifacts を含む Claude の全機能の概要は 「Claude とは? 完全ガイド」 でも解説しています。
