69 · E. Claude Code関連
Artifacts
Artifacts
生成物をその場でプレビュー
<button
onClick={"..."}
>
Click me
</button>
Artifactsってそもそも何？
Claudeが生成したコードやドキュメントを、リアルタイムでプレビュー表示する機能です。 HTML、React、グラフ、Mermaidダイアグラム… チャット画面の横で即座に動いている状態を確認できる。 「コピペして実行して確認…」を繰り返していた工程が丸ごと消えて、 AIとの修正の往復が圧倒的に少なくなります。
身近な例えで理解する
例① キッチンの試食コーナー
料理のレシピを聞くだけでなく、 作ったその場で味見できるのがArtifacts。 「ちょっと甘すぎるから調整して」と、その場でフィードバックが返せる。
例② 設計図と模型を同時に見る
建築士が設計図だけで話すより、模型があった方が話が早い。 ArtifactsはAI生成物の「模型」を、 会話と同じ画面に置いてくれる機能です。
まとめ
Artifactsは、AIの生成物を即プレビューする機能。 「作って→見て→直す」のループが高速化するので、特にUI・コード系の作業で効きます。