Claude Artifacts でWebアプリ作成 — 使い方と6タイプを解説
Claude のチャット画面でコードや Web ページを依頼すると、右側に専用パネルが開いてリアルタイムでプレビューできます。それが Artifacts です。チャット本文を圧迫せず、生成した成果物を独立したワークスペースに表示・共有できる仕組みで、すべてのプランで基本機能を利用できます。有効化の手順から 6 種類のタイプ・共有・MCP 連携まで、Anthropic 公式情報をもとに解説します。
Claude Artifacts は「15 行以上・自己完結したコンテンツ」をチャット横の専用パネルで表示する機能です。コードスニペット・HTML ページ・SVG 画像・Mermaid 図・ドキュメント・インタラクティブ React コンポーネントの 6 タイプをリアルタイムプレビューで確認でき、共有リンクを発行すれば Claude アカウントなしでも閲覧できます。
Pro 以上では 20MB の永続ストレージと Live Artifacts(セッションをまたぐ自動更新)が利用でき、MCP 経由で Google Calendar・Slack・Asana などの外部サービスと直接連携できます。Free プランでも基本機能は使えるため、まず Settings から有効化して試してみましょう。
目次 (12)
Claude Artifacts とは — チャット横に開く専用ワークスペース
Anthropic の公式サポートによると、Artifacts は「15 行以上で、編集や再利用の可能性がある独立したコンテンツを別ウィンドウで表示する機能」です(参照)。
通常のチャット応答では長いコードや HTML がそのまま本文に埋め込まれてしまいます。Artifacts を有効にすると画面が 2 分割され、左のチャット欄で指示を出しながら右のパネルで成果物をリアルタイム確認できます。プレビューは即座に更新されるため、「もう少し大きくして」「色を変えて」と依頼するたびにパネルの変化を見ながら調整を進められます。
Artifacts は Claude Free / Pro / Max / Team / Enterprise のすべてのプランで基本機能を利用できます。
Artifacts を有効化する手順
デフォルトではオフになっている場合があります。次の手順で確認・有効化してください。
- claude.ai にログインする
- 画面左下のイニシャルアイコンをクリックする
- Settings → Capabilities を開く
- Artifacts のトグルをオンにする
有効化するとチャット画面に専用パネルが表示されるようになります。Artifacts を無効化しても、既存の成果物へのリンクは引き続きアクセス可能です(参照)。
6 種類のコンテンツタイプ
Artifacts で生成できるコンテンツは以下の 6 タイプに分類されます。
| タイプ | 概要 |
|---|---|
| コード / スクリプト | Python・JavaScript 等のコードをリアルタイムプレビューで確認しながら生成 |
| HTML ウェブサイト | 単一ファイルの Web ページを即座にプレビュー |
| SVG 画像 | ベクター画像を外部ツールなしで直接生成・編集 |
| Mermaid ダイアグラム | フローチャート・マインドマップをその場でレンダリング |
| インタラクティブ React コンポーネント | クリック・入力が動作する UI を試せる |
| ドキュメント | Markdown・Word・PowerPoint・PDF 形式に対応 |
出典: Anthropic 公式サポート / Albato ガイド
HTML と React の 2 タイプは特に強力です。「ランディングページの骨格を作って」「To-Do アプリの UI を作って」といった指示だけで、実際に動作するページをパネル内でそのまま試せます。
基本操作 — 生成・編集・エクスポート
生成する
チャットで「〇〇を実装して」「このデータをグラフで可視化して」と依頼するだけで、自動的に Artifacts パネルとして生成されます。15 行未満の短いコードはインライン表示になります。
編集・バージョン管理
Claude にチャットで修正を依頼すると、パネルに即座に反映されます。パネル上部のバージョン選択機能でどのバージョンにも戻れるため、試行錯誤しながら品質を上げていけます(参照)。
エクスポートする
パネル右下のコントロールから次の操作が可能です。
- コードを表示する(ソース確認)
- クリップボードにコピーする
- ファイルとしてダウンロードする
共有リンクとリミックス
生成した Artifacts は共有リンクで公開できます。受け取った側は Claude アカウントなしでも閲覧可能です。
共有リンク経由で「自分のコピーを作る(リミックス)」場合は Claude アカウントが必要で、使用量はリミックスしたユーザーの契約に計上されます(参照)。プロトタイプや作成したツールを社内・クライアントに共有する用途に向いています。
永続ストレージと Live Artifacts（Pro 以上）
Pro / Max / Team / Enterprise では、1 アーティファクトあたり最大 20MB の永続ストレージが利用できます。
Live Artifacts はこのストレージを活用した機能で、セッションをまたいでデータを保持し、Artifacts を再度開くと最新データで自動更新されます(参照)。例えば「毎週更新する売上ダッシュボード」を Artifacts として作成し、データを追記するたびに自動反映させる運用が可能です。
MCP 連携 — 外部サービスと直接つなぐ
Pro 以上では MCP(Model Context Protocol) を経由して外部サービスに接続した Artifacts を作成できます。対応サービスの例は次のとおりです。
- Google Calendar
- Gmail
- Slack
- Asana
(参照)
「Slack のメッセージを集計して Mermaid グラフで可視化する」「Google Calendar のイベントを一覧表示するダッシュボードを作る」といった外部データとの連携が、専門的なコード知識なしで実現できます。
実践的な活用シーン 5 選
以下はすべて Artifacts で実現できる代表例です(参照)。
- ランディングページ制作: スクリーンショットやモックアップ画像を渡すだけで、動作する HTML ページを生成する
- プロトタイプ開発: インタラクティブな React UI を試作し、デザイナーやクライアントに即座に共有する
- データ可視化: CSV や画面キャプチャのデータをグラフ・ダッシュボード形式に変換する
- 教育コンテンツ: クイズや対話型学習ゲームをブラウザ完結で作成する
- ドキュメント自動生成: 議事録・分析レポート・プレゼン資料を Markdown や PowerPoint 形式で出力する
コードの知識がなくても Web ページやインタラクティブなツールを試作できるため、非エンジニアにとっても実用価値の高い機能です。
プランごとの機能差
| 機能 | Free | Pro / Max | Team / Enterprise |
|---|---|---|---|
| 基本的な Artifacts 生成 | ✓ | ✓ | ✓ |
| 永続ストレージ(最大 20MB) | — | ✓ | ✓ |
| Live Artifacts | — | ✓ | ✓ |
| MCP 連携 | — | ✓ | ✓ |
| 共有リンク | ✓ | ✓ | ✓ |
まずは Free プランで HTML や Mermaid ダイアグラムを試し、永続ストレージや MCP 連携が必要になったタイミングで Pro へ移行するのがスムーズな流れです。Artifacts の有効化は Settings から数秒で完了するため、次回の Claude セッションで試してみてください。
