Claude Artifacts（アーティファクト）の使い方｜チャットの中でアプリが動く

---
description: "Claude Artifacts（アーティファクト）の使い方｜チャットの中でアプリが動く"
---

# Claude Artifacts（アーティファクト）の使い方｜チャットの中でアプリが動く

この指示書は https://akahara-vlab.com/claude-artifacts-guide/ の内容をClaude Codeコマンドとして実行するためのものです。

## 概要

Claude Artifactsの使い方を解説。コード、Webアプリ、図表、ドキュメントをチャット内で生成・プレビューできる機能。実践的な活用例と使いこなしのコツ。

## 使い方

1. このテキストを `.claude/commands/claude-artifacts-guide.md` に保存
2. Claude Codeで `/claude-artifacts-guide` と入力して実行

## 指示

上記の記事の知識をもとに、ユーザーの質問に回答してください。
記事URL: https://akahara-vlab.com/claude-artifacts-guide/

わさびです。

Claudeに「ToDoアプリを作って」と頼んだら、チャットの横にアプリが出てきて、そのまま動かせた。コードをコピーしてエディタに貼り付けて、ブラウザで開いて、という手順は一切なし。

これがArtifacts（アーティファクト）という機能。チャットの中で独立したコンテンツを生成して、その場でプレビューできる仕組みだ。

Artifactsとは何か

Artifactsは、Claudeが会話とは別のパネルに生成する独立したコンテンツのこと。

通常のチャット応答はテキストとして流れていくが、Artifactsはチャット画面の右側に専用パネルとして表示される。コードならシンタックスハイライト付きで見られるし、HTMLならそのままブラウザプレビューとして動く。

Claudeの始め方が分かっていれば、Artifactsはすぐに使い始められる。Pro/Freeどちらのプランでも利用可能。

生成できるコンテンツの種類

Artifactsで作れるものは大きく分けて5種類ある。

Webアプリ系のArtifactsはReactベースで動作する。Tailwind CSSやRechartsなど、いくつかのライブラリが標準で使える環境になっている。

Claudeが自動で作る場合と、頼む場合

自動生成されるケース

Claudeは以下のような場面で、頼まなくてもArtifactを生成する。

• 「〜アプリを作って」「〜ツールを作って」と依頼した場合
• ある程度の長さのコードを書く場合
• 図やダイアグラムを描くよう求めた場合
• 長い構造化ドキュメントを作成する場合

一定の複雑さ・長さを超えると、Claude側が「これはArtifactにした方が見やすい」と判断して自動的にパネルを開く。

明示的に頼んだ方がいいケース

短いコードスニペットはチャット本文に直接書かれることが多い。Artifactとして独立させたい場合は明示的に伝える。

• 「Artifactとして作って」
• 「プレビューできる形で出力して」
• 「動くHTMLで書いて」

逆に、Artifactではなく普通のテキストで欲しい場合は「コードブロックで返して」「テキストで説明して」と伝えればいい。

実践的な活用例

Webアプリを作る

「ポモドーロタイマーをReactで作って」と伝えるだけで、25分/5分の切り替え付きタイマーがArtifactパネルに生成される。スタート、ストップ、リセットのボタンもついて、その場で動作確認ができる。

修正も会話の中で進められる。「色を青系に変えて」「残り時間を大きく表示して」と追加指示を出すと、Artifactが更新される。バージョン管理のように、過去の状態にも戻せる。

ダイアグラムを作る

「REST APIの認証フローをシーケンス図で描いて」と頼むと、Mermaid記法でシーケンス図が生成される。クライアント、サーバー、認証基盤の間のやり取りが矢印で表現される。

フローチャート、ガントチャート、ER図、クラス図なども同じ要領で作れる。設計レビューやドキュメント用の素材としてそのまま使える品質のものが出てくる。

ドキュメントを整形する

打ち合わせのメモや箇条書きを渡して「これを報告書形式にまとめて」と頼むと、Markdownドキュメントとして整形される。見出し、表、箇条書きが適切に構造化されたものが得られる。

Projects機能と組み合わせて、プロジェクトのナレッジにフォーマットを登録しておけば、毎回同じ書式で出力させることもできる。

データの可視化

CSVデータを貼り付けて「これをグラフにして」と頼むと、Rechartsを使ったインタラクティブなグラフがArtifactとして生成される。棒グラフ、折れ線グラフ、円グラフなど、データの性質に合った形式を選んでくれる。

マウスオーバーで値が表示されたり、凡例のクリックで表示切り替えができたりと、静止画では実現できないインタラクティブ性がある。

共有とエクスポート

公開リンク

生成したArtifactは公開リンクとして共有できる。Artifact右上の共有ボタンから「Publish」を選ぶと、URLが発行される。このリンクを知っている人なら、Claudeのアカウントがなくてもブラウザで閲覧できる。

Webアプリ型のArtifactは、公開リンクを開いた人もそのまま操作できる。計算ツールやクイズなど、インタラクティブなコンテンツの配布に使える。

コードのコピー

Artifact右上のコピーボタンで、生成されたコード全体をクリップボードにコピーできる。ローカルのエディタに持っていって拡張したい場合に便利。

HTMLのArtifactはそのまま.htmlファイルとして保存すれば動作する（React系は別途ビルド環境が必要な場合がある）。

通常の応答との使い分け

全てをArtifactにすればいいわけではない。場面によって使い分けが必要。

判断基準は「その場で動かしたいか」「あとで使い回したいか」「人に見せたいか」の3つ。どれかに当てはまるならArtifactが向いている。

より良いArtifactを得るコツ

具体的に要件を伝える

「Webアプリを作って」よりも「入力フォームと結果表示の2画面構成で、データはローカルストレージに保存する家計簿アプリを作って」の方が、一発で使えるものが出てくる。

特に以下を明確にすると精度が上がる:

• UIの構成（何画面あるか、どんなボタンがあるか）
• データの扱い（入力、保存、表示の流れ）
• 見た目の方向性（シンプル、ダーク系、ビジネス向けなど）

段階的に育てる

最初から完成形を求めず、まず基本機能を作ってから追加指示で拡張していく方がうまくいく。

1. 「基本的なToDoアプリを作って」
2. 「カテゴリ分類を追加して」
3. 「ダークモード切り替えを付けて」
4. 「ドラッグ&ドロップで並べ替えできるようにして」

各ステップでプレビューを確認しながら進められるのがArtifactの利点。

参考情報を添える

既存のデザインやレイアウトの参考があるなら、テキストで説明する。「Notion風のUIで」「Googleカレンダーのような月表示で」といったイメージの共有が有効。

Claude vs ChatGPTの記事でも触れているが、Claudeのコード生成はReactベースの単一ファイルに強みがある。この特性を理解して依頼すると、より実用的なものが得られる。

制限事項

Artifactsには以下の制限がある。知っておくと「なぜ動かないのか」で悩む時間を減らせる。

サーバーサイドのコードは動かない

Artifactsはブラウザ上のサンドボックスで実行される。Node.jsのサーバー、データベース接続、ファイルシステム操作といったサーバーサイド処理は動作しない。あくまでフロントエンドの範囲。

APIを叩くコードは書けるが、CORSの制約でほとんどの外部APIには接続できない。

使えるライブラリは限定的

React、Tailwind CSS、Recharts、Lucide Reactなど、いくつかのライブラリはプリインストールされている。それ以外のnpmパッケージを自由にインストールすることはできない。

Three.jsやD3.jsなど、CDN経由で読み込めるライブラリは使える場合もあるが、動作は保証されない。

サンドボックス環境

Artifactはiframe内のサンドボックスで動く。ローカルファイルへのアクセス、Cookie/LocalStorageの永続化（セッション間）、外部ページへのリダイレクトなどは制限されている。

ページをリロードするとArtifact内のデータはリセットされる。永続的なデータ保存が必要なら、コードをローカルに持ってきて動かす方がいい。

コード量の上限

1つのArtifactに含められるコード量には実質的な上限がある。非常に大規模なアプリケーションは1つのArtifactに収めるのが難しい。機能を分割して複数のArtifactに分けるか、Claude Codeでローカル開発に移行する方が現実的。

まとめ

Artifactsは「作ってすぐ触れる」体験を実現する機能。コード、Webアプリ、図表、ドキュメントをチャットの流れの中で生成し、その場でプレビュー、編集、共有ができる。

特にWebアプリのプロトタイピングとダイアグラム生成は、従来の作業フローを大きく変える可能性がある。アイデアを言葉にするだけで動くものが出てくるのは、開発者でなくても価値がある。

制限はあるが、フロントエンド完結の用途なら十分に実用的。まずは「ポモドーロタイマーを作って」あたりから試してみてほしい。

見てもらえるだけで応援になります

このブログはアフィリエイトリンクで運営されています。以下のリンクから気になるサービスをチェックしてもらえると、僕たちの活動の支えになります。

• Value AI Writer byGMO — AIブログ記事作成ツール
• ConoHa — ブログ・開発環境に必要な機能が揃ったVPS

この記事を書いたのは わさび（ニホンイシガメ / 3歳 / VTuberあかはら。の家族）です。

あかはらVラボ — Claude特化の情報を発信中。

あわせて読みたい

• claude-intermediate-guide
• claude-mcp-guide
• claude-extended-thinking
• claude-prompt-engineering