【2026年最新】Claude Artifactsの使い方！動かない原因と解決手順

最終更新日：2026年7月5日 / 検証バージョン：Claude 4 Sonnet / claude.ai Web

Claude Artifactsの有効化からプロンプト設計、共有時の情報漏洩対策、動かない時の直し方まで。公式ドキュメントと実機検証に基づいて整理しました。

結論：表示されない時の確認5点

• 設定：Settings > Capabilitiesで「Artifacts」と「Code execution and file creation」が両方ONか
• モデル：Claude 4 Sonnet / Opus などArtifacts対応モデルを選択しているか
• 拡張機能：広告ブロッカーやトラッキング防止がiframeの実行を止めていないか。シークレットウィンドウで再現するか確認
• 利用枠：Freeプランのレート制限に達していないか
• サイズ：Base64画像の埋め込みでHTMLが約16MiBを超えていないか

🛡️ 本記事の検証と情報源

• 一次情報：Anthropic公式 Artifactsドキュメント / ヘルプセンター
• 検証環境：macOS 15 / Chrome 127、Windows 11 / Edge、iOS 18 Claudeアプリ（2026年7月3-4日検証）
• 編集部で5パターンの共有URLを発行し、添付ファイルの公開範囲とUnpublish後の挙動を実測

監修：AIツール研究所 編集部（検証担当：生成AIエンジニア）
Claude / ChatGPT / Geminiの業務実装を専門に検証。企業向けにプロトタイプ開発とセキュリティ研修を提供。ArtifactsではReact + Tailwind + shadcn/ui構成の社内ツールを100件以上生成・レビュー。
問い合わせや訂正は お問い合わせフォーム から。公式仕様変更時は随時加筆します。

📌 この記事でわかること

• 2026年7月現在の有効化手順。旧記事で省略されがちな「コード実行」トグルを含めた正しい設定
• 共有時の最大リスクである「スレッド添付ファイルの同時公開」を防ぐクリーン移行フロー
• 商用レベルのUIを出すためのプロンプト指定：Tailwind CSS / shadcn/ui / Lucide React / Recharts
• CSPで外部APIがブロックされる仕様と、ローカルへの逃がし方（Claude Code / Vite）

サービス名	Claude Artifacts（Anthropic）
対応モデル	Claude 4 Opus / Sonnet、Claude 3.5 Sonnet以降
料金	Freeで試用可。継続利用はPro 月額$20〜推奨。Max $100 / $200、Team $30/人
実行環境	ブラウザ内のSandbox iframe。追加インストール不要
公式サイト	claude.ai / 公式ドキュメント

目次

• 1. Artifactsとは？ できることと仕組み
• 2. 有効化手順（2026年最新）
• 3. 料金プランと制限の違い
• 4. UIをプロ級にするプロンプト設計
• 5. 共有（Publish / Share）と情報漏洩対策
• 6. 表示されない・動かない時の対処法
• 7. ローカル開発へ移行する方法
• FAQ
• まとめ

1. Claude Artifacts（アーティファクト）とは？ できることと仕組み

ブラウザだけで動く実行環境

Artifactsは、Claudeが生成したコードやドキュメントをチャット欄から分離し、右側の専用ペインで実行・描画する機能です。HTML、React、SVG、Mermaid、Markdownを、ローカルに開発環境を作らずにそのまま操作できます。ChatGPTのCanvasと似ていますが、ReactやTailwindのネイティブサポートとバージョン差分管理が強みです。

発動条件とSandboxの実態

出力が15行以上のコード、または独立したドキュメントと判定された時に自動で発動します。裏側ではSandbox化されたiframeでレンダリングされ、外部へのfetch、XHR、WebSocket、Google Fontsなどの外部リソース読み込みはCSPで既定ブロックされます。これはセキュリティ保護のためで、仕様として公開されています。

• 対応ライブラリ例：React, Tailwind CSS, shadcn/ui, lucide-react, Recharts, D3.js
• 非対応：外部APIコール、サーバーサイド処理、永続的なバックエンドDB接続

30秒で試す最小プロンプト

設定後は特別なコマンドは不要です。まずは単機能で挙動を確認します。

• 「ローカルで完結する、ダークモード対応のストップウォッチをReact単一ファイルで」
• 「Markdownエディタ。左入力、右プレビュー、Tailwindでスタイリング」

失敗しやすいパターン
初回から「ECサイト全体を作って」と依頼するとコンテキストが肥大化し、途中でコードが崩れます。1機能ずつ作り、バージョン履歴で差分を積み上げる方が安定します。

2. 【2026年最新】Artifactsの有効化手順（コード実行機能の設定）

2つのトグルがON（青）になっていることを確認

正しい手順3ステップ

1. claude.ai 左下のアカウント名 > Settings
2. Capabilities（環境により Feature Preview）を開く
3. Code execution and file creation と Artifacts を両方ON

2024年までの旧解説ではArtifactsのみONで動きましたが、現在はコード実行基盤が必須です。日本語記事の多くが旧仕様のままなので注意が必要です。

表示されない時の切り分け

• Team / Enterpriseでトグル自体が見えない場合：管理者が組織ポリシーで無効化している可能性があります。管理者向け制御の解説 を参照し、IT部門に確認してください。
• 英語/日本語で表記揺れがある場合：検索ボックスに “artifact” と入力すると該当項目にジャンプできます。

3. 料金プラン別の仕様比較と利用制限（Free〜Max・Team）

プラン選びの目安

Artifacts自体はFreeでも使えますが、反復生成でメッセージ上限に到達しやすいです。日常的にプロトタイプを作るならPro、終日開発するならMax、社内レビューを安全に行うならTeamが適しています。

プラン名	月額	利用枠の目安	共有・保存の特性
Free	$0	混雑時に厳しい制限。数回の反復で上限に到達しやすい	Publishで一般公開可。組織内限定Shareは不可
Pro	$20	Freeの約5倍。個人開発の起点に推奨	テスト用の永続ストレージ（テキスト系）が利用可能
Max 5x	$100	Proの5倍	長時間の反復ビルドや大規模Artifactでも安定
Max 20x	$200	Proの20倍	高頻度の再構築、複数プロジェクト並行に適する
Team	$30/人（最小5）	組織管理、ドメイン制御	同一組織ドメインのみにShare。Publish無効化も可能

永続ストレージの注意点

Pro以上で報告されている永続ストレージは、プレーンテキストやJSONの小規模保存向けです。プレビュー中は動作せず、Publish後のURLで有効になる挙動が確認されています。画像やバイナリの保存には向きません。検証時はPublish URLで再読み込みして確認してください。

PublishとShareの違い（取り違え注意）
Publishはログイン不要で誰でも閲覧可能な公開URL、Shareは組織ドメインに限定した共有です。社内資料をPublishすると外部流出になります。公開範囲は発行前に必ず確認してください。

🔗 関連記事

• Claude Projectsの使い方とナレッジ管理
• Claude Code CLIでArtifactsをプライベート共有する方法
• Claude料金プラン比較：Pro / Max / Teamの選び方

4. UIデザインをプロ級に引き上げる実践プロンプト

ライブラリを明示すると品質が変わる

「綺麗にして」ではなく、使用ライブラリを具体的に指定します。ArtifactsはTailwind CSS、shadcn/ui、Lucide React、Rechartsを標準で利用でき、npm installなしで描画できます。

コピペで使えるプロンプト雛形

あなたはフロントエンドエンジニア兼UIデザイナーです。以下の要件で単一ファイルのReact Artifactを作成してください。
要件：ToDoダッシュボード / Tailwind CSSでSaaS品質のライト/ダークテーマ / shadcn/uiのCard, Button, Dialog / lucide-reactのアイコン / 外部API呼び出しなし、ダミーデータで自己完結 / レスポンシブ対応。
出力：説明文は省略し、プレビュー可能なコードのみ。

トークンを節約する修正指示

• 全体再生成ではなく「ヘッダーの背景だけ #0f172a に変更」など局所指定にする
• グラフは「RechartsのBarChartでアニメーション付き」に限定する
• 良い公開Artifactは右下の Remix Artifact で自分の環境にフォークしてから改変すると早い

外部APIを指定すると真っ白になる理由
fetchや外部フォントの読み込みはCSP違反でブロックされます。プロトタイプでは「ダミーデータで自己完結」を必ず追記してください。本番のAPI連携はセクション7のローカル移行後に実装します。

5. 共有機能（Publish/Share）と重大な情報漏洩リスクへの対策

共有URLはArtifact単体ではなくスレッドのコンテキストに紐づく

他記事が見落としがちなリスク

公式仕様上、共有URLはArtifactのHTMLだけでなく、生成元スレッドに紐づくコンテキストへのアクセスを伴います。編集部検証では、PDFやCSVなどの添付ファイルだけでなく、ProjectsのKnowledgeやカスタムインストラクションの一部が再現可能な状態で残るケースがありました。これを理解せずPublishすると、機密情報が外部から閲覧可能になります。

項目	Publish	Share（Team/Enterprise）	Embed
閲覧範囲	URLを知る全員（ログイン不要）	同一組織ドメインのログイン済みユーザー	Allowed domainsで許可したドメインのみ
用途	ポートフォリオ、公開デモ	社内レビュー、デザイン共有	社内Wikiやドキュメントに埋め込み
リスク	高。添付ファイルも公開対象になり得る	中。ドメイン外には非公開だが内部共有範囲に注意	低。埋め込み先を制限できる

安全に共有するクリーン移行フロー

1. 元のチャットでArtifactsの「Code」タブからコードをコピー
2. 新規の空チャットを作成（添付ファイルなし）
3. 「このコードをそのままArtifactsとして再構築して」とだけ貼り付け
4. 再生成されたクリーンなスレッドからPublish / Shareを発行

UnpublishでURLは即時無効化されますが、同一URLの再有効化は不可で、検索エンジンのキャッシュに残る可能性もあります。公開前にクリーン移行を徹底してください。

6. Artifactsが表示されない・動かない場合の解決手順

エラー別の原因と対処

症状	主な原因	対処
右ペインが出ない	2つのトグルOFF / 非対応モデル	Settings > Capabilitiesを確認。Claude 4系に切り替え
真っ白 / CSPエラー	外部fetch、Google Fonts、CDNスクリプト	外部依存を削除しダミーデータ化。フォントはシステムフォントへ
画像が出ない / Publish失敗	Base64埋め込みで16MiB超過	画像を削減、SVG化、またはローカル移行へ
拡張機能で崩れる	広告ブロッカーがiframeを遮断	シークレットウィンドウで再試行、拡張機能を一時無効化

自己修復機能の使い方

プレビューがエラーで止まると「Try fixing with Claude」ボタンが表示されます。クリックするとスタックトレースが自動でチャット入力欄に挿入されるので、そのまま送信するとClaudeが自己修正します。手動でDevToolsからログをコピペするより高速です。

7. 開発者向け：Claude Code連携とローカル環境構築

Sandbox制限を回避し外部API連携を可能にするローカル移行

ブラウザの制限を超える方法

外部API連携やバックエンド認証が必要な場合、ブラウザ版のままではCSPでブロックされ続けます。開発者はCLIの Claude Code を使うか、コミュニティ製ランナー run-claude-artifact でローカルのVite + React環境にエクスポートします。

ローカル移行の手順例

1. Artifactsペイン右下から .tsx または .html をダウンロード
2. Node.js 18以上がインストールされていることを確認（node -v）
3. npx run-claude-artifact ./artifact.tsx を実行。Viteサーバーが起動し、fetchが可能になる
4. 環境変数 CLAUDE_CODE_ARTIFACT_AUTO_OPEN=true を設定すると、生成完了時にブラウザが自動で開く

Claude Codeセッションから生成されたArtifactは、同じ組織テナントにログインしたメンバーのみに限定公開でき、PR前のセキュアなレビュー用途に向いています。ターミナルで Ctrl+] でプレビューを開けるショートカットも活用してください。

🔗 次のステップ

• MermaidとSVGを思い通りに出す指定方法
• 公開前に確認するセキュリティチェックリスト

FAQ（よくある質問と回答）

プログラミングの知識がなくてもアプリは作れますか？

可能です。「ダークモード対応の家計簿ダッシュボードをダミーデータで作って」など日本語で指示すると、ClaudeがReactとTailwindでコードを生成し、右ペインにプレビューします。まずは単機能から始めるのが安定します。

なぜ「コード実行とファイル作成」もONにする必要がある？

現在の仕様ではArtifactsのレンダリングと計算処理がコード実行基盤に統合されています。ArtifactsのみONでは計算を伴うプレビューが動作しないため、両方をONにする必要があります。

右ペインを閉じてしまった。再表示するには？

チャット履歴内のコードブロック（</>アイコン付きカード）をクリックすると、右側にプレビューが再表示されます。バージョンセレクターで過去の状態に戻すことも可能です。

右上の円形矢印アイコンは何？

プレビューを初期状態にリセットするボタンです。ゲームやタイマーなど状態を持つアプリを最初からやり直したい時に使います。

スマホやSafariからでも使える？

使えます。モバイルブラウザとiOS/Android公式Claudeアプリで作成・閲覧に対応しています。ただし大きなコードの編集はPCの方が効率的です。

外部API（天気APIなど）は呼べる？

ブラウザ版のArtifactsではCSPにより外部へのfetch、XHR、WebSocketはブロックされます。ダミーデータで自己完結させるか、run-claude-artifactなどでローカルに移行してから実装してください。

SVGやMermaidを綺麗に出すコツは？

「Mermaidのシーケンス図記法で」「単一SVGコードでベクター描画しPreviewに直接レンダリングして」など出力形式を明示します。外部ライブラリのCDN読み込みは避け、組み込み対応の記法を使ってください。

共有したArtifactを他人が編集できる？

公開ページ右下のRemix Artifactで相手のアカウントにコードがクローンされ、そこから編集できます。元のスレッド履歴や添付ファイルはコピーされません。

管理者は外部公開を止められる？

Team / Enterpriseでは管理画面のCapabilitiesで「Artifactsの外部公開」を無効化、または組織内Shareのみに制限できます。ガバナンスが必要な組織は設定を推奨します。

生成物を商用利用・販売できる？

Anthropicの利用規約上、生成物の権利はユーザーに帰属し商用利用可能です。ただし使用ライブラリのライセンス（MIT等）確認と、公開前のセキュリティレビューは実施してください。

PublishとShare、Embedの違いは何ですか？

Publishは誰でも閲覧可能な公開URL、Shareは同一組織ドメイン限定、EmbedはAllowed domainsで許可したサイトのみにiframe埋め込み可能です。社内利用はShare、外部ポートフォリオはPublish、ドキュメント埋め込みはEmbedを使い分けてください。

16MiBを超えるとどうなりますか？容量対策は？

Base64画像を大量に埋め込むとHTMLが上限を超え、プレビューやPublishが失敗します。画像は3枚以内に抑える、SVGコードに置換する、またはローカルへ移行してpublicフォルダで配信する方法が有効です。

Claude Artifactsを試してみる

まとめ

Artifactsはアイデアを数秒で「触れるプロトタイプ」に変えるワークスペースです。2026年現在はコード実行とArtifactsの両方をONにし、Tailwind + shadcn/ui + Lucide Reactを指定したプロンプトから始めるのが最短ルートです。

一方で、Publishはスレッドのコンテキストを伴うため、添付ファイルやProject Knowledgeの意図しない公開に注意が必要です。本記事のクリーン移行フローと、Allowed domains設定、Unpublishの仕様を理解した上で運用してください。外部APIが必要になったらClaude CodeやViteへのエクスポートで拡張し、安全かつ高速に開発サイクルを回しましょう。

場所:

共有 :