Claude Code Artifactsとは｜3つの役割と違い

Claude Codeと2種類のArtifactsの違いを30秒で確認

Claude Code、ClaudeのArtifacts、Claude Code Artifactsは、扱う対象が「開発環境」「会話内の成果物」「公開ページ」に分かれます。

最初に確認するのは、何を作るかよりも「どこへ変更を加え、結果をどこへ残すか」です。コードベースへ変更を加えるClaude Codeと、会話から成果物を切り出す一般Artifactsは、同じ階層の機能ではありません。

Code Artifactsは両者の中間ではなく、Claude Codeの作業結果を共有可能なページへ変える付加機能です。公式の役割と筆者の選択基準を、同じ表で分離して確認します。

3つの名称はどの関係にある？

Anthropicの公式情報では、Claude Codeは開発作業、一般Artifactsは会話内出力、Code Artifactsは開発結果の公開を担います。

3つを横並びの製品として覚えると、検索時に混同しやすくなります。提供元、開発エージェント、会話内機能、公開機能という階層に分けると関係が明確です。

提供元はAnthropic、3つは同じ階層ではない

Claude、Claude Code、Artifactsの提供元はAnthropicです。Anthropicは米国カリフォルニア州サンフランシスコに本社を置くPublic Benefit Corporationと公式に説明しています。Anthropicの企業情報

Claude Codeは開発ツール、ArtifactsはClaude内の機能、Code ArtifactsはClaude Code内の公開機能です。「Claude Artifacts」という言葉は検索上使われますが、独立したClaudeモデルを指す名称ではありません。

Claude Codeは開発エージェント

Claude Codeは、コードベースを読み、ファイルを編集し、コマンドを実行する開発エージェントです。AIエージェントとは、回答文を返すだけでなく、与えられた権限とツールを使って複数の作業を進める仕組みです。Claude Code公式概要

公式ドキュメントは、ターミナル、Visual Studio Code、JetBrains、デスクトップ、ブラウザをClaude Codeの利用面として案内しています（2026年7月確認）。導入や環境ごとの違いは、Claude Codeの始め方と対応環境を詳しく確認する記事へ分けます。

一般Artifactsは会話内の成果物機能

一般Artifactsは、Claudeが生成した一定規模の自己完結型コンテンツを、会話とは別の専用ウィンドウへ表示する機能です。文書、コード、単一ページHTML、SVG、図表、Reactコンポーネントなどが公式例として挙げられています。Artifacts公式ヘルプ

一般Artifactsの中心は成果物の表示・編集・公開です。ローカルのリポジトリを読み、複数ファイルを変更し、開発コマンドを実行するClaude Codeとは担当範囲が異なります。

Code Artifactsは開発結果の公開機能

Code Artifactsは、Claude Codeがプロジェクト内へHTMLまたはMarkdownを作成し、内容をclaude.ai上の対話型ページとして公開する機能です。公開後に更新すると、同じURLの内容が更新されます（2026年7月30日確認）。Claude Code Artifacts公式ドキュメント

公式ドキュメントはCode Artifactを「作業結果のキャプチャ」であり、アプリケーションそのものではないと説明しています。Claude Code本体の代わりではなく、作業を見せるための出口と考えると位置づけを誤りにくくなります。

無料で使えるのはどこまで？プラン・API・モデルを分離

Claudeの一般ArtifactsはFreeから利用できますが、Claude CodeとCode Artifactsは2026年7月時点で有料プランが対象です。

料金を確認するときは、機能の対象プランと課金経路を分けます。Claudeの月額プランとAnthropic APIは別請求であり、APIキー認証のClaude CodeセッションにはCode Artifactsを公開できないという条件があります。

一般Artifacts・Claude Code・Code Artifactsの対象プラン

無料で一般Artifactsを使うことはできますが、Claude Codeでリポジトリを扱う場合は有料プランまたはAPI課金が必要です。Code Artifactsの現在の対象はPro、Max、Team、Enterpriseです（2026年7月確認）。

個人がCode Artifactsを使うための最も低い公式Web月額はProの20米ドルです。年払いは200米ドルで、月額換算17米ドルと表示されています（2026年7月確認）。税、地域、モバイルアプリ経由の価格差は別に確認してください。Claude公式料金ページ

サブスクリプションとAPI従量課金は別

ClaudeのPro・MaxでClaude Codeを使う場合、Claude本体とClaude Codeは利用枠を共有します。Claude Codeを使った分が、月額プランとは別に自動でAPI請求されるわけではありません（2026年7月30日確認）。Pro・MaxでClaude Codeを使う公式案内

一方、Claude CodeをAPIキーで認証した場合はAPI利用として課金されます。環境変数ANTHROPIC_API_KEYを使う構成では、月額プランの枠とAPI請求を混同しないようにします。APIキー、ゲートウェイ、クラウドプロバイダー認証のセッションからCode Artifactは公開できません（2026年7月確認）。

メッセージ数にも一律の固定値はありません。公式ヘルプは、会話の長さ、利用モデル、機能、処理内容などにより使用量が変わると説明しています。Claudeの利用量と長さの上限

Claude Codeのモデル選択は機能の違いと別

Claude Codeはモデル名ではなく、複数のClaudeモデルを利用できる開発ツールです。/modelで表示される候補やエイリアスの実体は、アカウント、プロバイダー、管理者設定、バージョンにより変わります。Claude Codeのモデル設定

公式モデル概要にはFable 5、Opus 5、Sonnet 5、Haiku 4.5が掲載され、料金ページではOpus 4.8などがLegacy modelsとして区分されています（2026年7月確認）。モデルの新旧や性能比較は、本記事の3機能を選ぶ判断とは分けます。Claude公式モデル概要

どこから始める？目的別の入口と確認手順

Claude Codeは開発環境から、一般ArtifactsはClaudeの会話から、Code Artifactsは認証済みのClaude Codeセッションから始めます。

同じClaudeアカウントを使っていても、入口は共通ではありません。探している機能が表示されないときは、プラン変更より先に、開いている利用面と認証方式を確認します。

Claude Codeは対応環境から起動する

Claude Codeを使う場合は、ターミナル、IDE、Claude Desktop、ブラウザなど、Claude Codeに対応する利用面から始めます。一般のClaudeチャットでArtifactsを開くことは、Claude Codeでリポジトリを開くことと同じではありません。Claude Code公式セットアップ

対応OSやインストール、CLI・IDE・Webの違いまで必要な場合は、Claude Codeの始め方と対応環境を詳しく確認する記事へ進んでください。

一般ArtifactsはCapabilitiesを有効にする

一般ArtifactsはClaudeの会話から作成し、個人アカウントではSettings > CapabilitiesにあるCode execution and file creationを有効にします。組織ではOrganization settings > Capabilitiesを確認します（2026年7月確認）。Artifactsの有効化に関する公式ヘルプ

Artifactsが作成されると、会話とは別の専用領域で内容、コード、バージョンなどを確認できます。具体的な操作や活用例は、一般Artifactsの作り方と活用例を確認する記事へ分けます。

Code Artifactsはログイン・バージョン・管理設定を確認する

Code Artifactsを公開する前に、claude.aiアカウントで/loginしていること、対象プランであること、Artifactsが許可されていることを確認します。管理画面の現在の案内はSettings > Claude Code > Capabilities内のArtifactsです（2026年7月確認）。

公式ドキュメントは、公開元としてClaude Code CLI 2.1.183以降またはClaude Desktop 1.13576.0以降を案内しています。コネクタを使うArtifactにはClaude Code 2.1.209以降が必要です（2026年7月確認）。Code Artifactsの利用条件

起動、ログイン、認証、HTTPエラーで止まった場合は、比較記事内で対処を広げず、Claude Codeが起動・認証できない原因を切り分ける記事へ進みます。

用途別にどれを選ぶ？開発・作成・共有の判断基準

Claude Codeはリポジトリを変更する作業、一般Artifactsは会話内の成果物作成、Code Artifactsは開発結果の共有に対応します。

選択基準は機能数ではなく、最後に残したい結果です。以下のフローは、公式の役割と制限を基にした筆者の判断基準であり、Anthropicによる用途別の推奨順位ではありません。

Claude Codeはコードベースの変更向け

リポジトリ内の複数ファイルを読み、コードを変更し、必要なコマンドを実行するならClaude Codeを選びます。一般Artifactsはコードを表示できますが、表示されたコードがそのままローカルプロジェクトへ反映されるわけではありません。

判断の理由は、成果物の見た目ではなく変更先です。プロジェクトへ差分を残す必要がある仕事は、開発環境を扱えるClaude Codeの範囲です。

一般Artifactsは会話内で完結する成果物向け

文書、コード、単一ページHTML、SVG、ReactコンポーネントなどをClaudeとの会話内で作成・編集するなら、一般Artifactsが直接的です。リポジトリや開発コマンドが不要な段階で、Claude Codeを前提にする必要はありません。Artifactsで扱える内容の公式説明

無料で一般Artifactsを使える場合は、会話内の成果物で不足するかを先に確認するのが筆者の判断基準です。コードベースを変更する必要が生まれた時点で、Claude Codeへ進みます。

Code Artifactsは1ページ共有向け

Claude Code内で作った結果を、claude.ai上の単一ページとして見せたい場合はCode Artifactsを併用します。Code Artifactsは開発工程を担当するのではなく、作業内容を共有可能な形へ変える出口です。

一方、バックエンド、複数ページ、入力データの永続保存が必要な場合は、Code Artifactだけで公開を完結させない方が適切です。構造上の非対応条件は次章で分けます。

Claude CodeからCode Artifactを公開する順序

併用する場合は、Claude Codeで開発作業を進め、そのセッションの結果からCode Artifactを作成します。

Claude Code Artifactsが向かない用途と利用条件

Claude Code Artifactsは、独自バックエンド、複数ルート、フォーム入力の永続保存が必要なWebアプリの公開先には向きません。

Code Artifactsは作業結果を早く共有するための単一ページです。一般的なWebホスティングやアプリ基盤と同じものではなく、公開できるファイル、外部通信、認証環境にも条件があります。

バックエンドや永続保存が必要なら別の公開先を使う

Code Artifactは独自バックエンドを持たず、フォーム入力を保存できません。公式ドキュメントも「作業結果のキャプチャ」であり、実際のアプリケーションではないと区別しています。Code Artifactsの制限事項

ログイン、データベース、決済、継続的なデータ保存が必要なら、Claude Codeで開発した後、自分で管理するインフラへデプロイする方が要件に合います。これは公式の構造上の制限から導く筆者の判断です。

複数ページと外部通信を前提にしない

Code Artifactは1つの自己完結型ページを対象とし、複数ルートには対応しません。Content Security Policyにより、外部スクリプト、スタイル、フォント、画像、fetch、XHR、WebSocketなどの外部リクエストが制限されます。公式対応のコネクタは例外です（2026年7月30日確認）。Code Artifactsの外部通信に関する公式説明

公開対象は.html、.htm、.mdで、レンダリング後のサイズは16 MiB以下です（2026年7月確認）。外部CDNや外部APIが不可欠な構成は、Code Artifactsの前提と合いません。

認証・プロバイダー・組織要件による利用制限

APIキー、ゲートウェイ、クラウドプロバイダーの認証を使うClaude Codeセッションからは、Code Artifactを公開できません。現行ドキュメントはAnthropic APIを対象とし、Amazon Bedrock、Google Cloud Agent Platform、Microsoft Foundryを対象外としています（2026年7月確認）。

CMEK、HIPAA、Zero Data Retentionが有効な環境でもCode Artifactsは利用対象外です（2026年7月確認）。企業で導入する場合は、機能をオンにする前に組織のデータ要件と公開範囲を確認します。

Artifactsを共有する前に確認する公開範囲とデータ

Claude Code Artifactsの共有範囲はプランと組織設定で異なり、Pro・MaxとTeam・Enterpriseでは公開方法が異なります（2026年7月確認）。

一般ArtifactsとCode Artifactsでは、同じ「公開」「共有」という言葉でも条件が一致しません。リンクを作る前に、誰が閲覧できるか、管理者設定が必要か、内容がどこへ保存されるかを分けます。

一般Artifactsは公開と組織内共有を分ける

一般Artifactsでは、Free・Pro・Maxの「Publish」はArtifactを公開し、リンクを知る人がアクセスできる状態にします。Team・Enterpriseの「Share」は、現在の公式ヘルプでは組織内共有として案内されています（2026年7月確認）。一般Artifactsの公開・共有公式ヘルプ

Free・Pro・Maxで公開した基本機能はClaude未登録者も閲覧できます。公開後は埋め込みコードを取得でき、公開を解除するとアクセスは失われます。同じArtifactを再公開できない条件や、保存データが削除される条件も公開前に確認します（2026年7月30日確認）。一般Artifactsの公開後の扱い

Code Artifactsはプランと管理設定で共有範囲が変わる

Pro・MaxのCode Artifactsでは、公開リンクが共有方法です。公開URLはサインインなしで閲覧できます。Team・Enterpriseでは組織内共有を利用でき、組織オーナーが許可した場合に外部公開を有効にできます。ただし、コネクタを呼び出すArtifactは、どのプランでも公開リンクへ共有できません（2026年7月30日確認）。Code Artifactsの共有条件

Team・Enterpriseでは編集者ロールも設定できます。閲覧者がコネクタを使うArtifactでは、閲覧者自身のコネクタ、アカウント、権限が使われるため、作成者の権限がそのまま渡るわけではありません（2026年7月30日確認）。Code Artifactsの編集権限とコネクタ条件

保存・削除・モデル改善は契約区分で確認する

一般Artifactsの永続ストレージは、Pro・Max・Team・EnterpriseのWeb版とデスクトップ版で案内され、公開済みArtifactでのみ利用できます。1 Artifact当たり20 MB、テキストのみという条件があります（2026年7月30日確認）。Code Artifactの内容はAnthropicが運用するインフラへ保存されますが、入力を永続保存する独自バックエンドではありません。Artifactsのストレージ条件

Free・Pro・Maxなどの一般向けアカウントでは、ユーザーがモデル改善を許可した場合、安全性レビューの対象になった場合、明示的にフィードバックした場合などに、会話やClaude Codeセッションが利用されることがあります（2026年7月確認）。一般向けサービスのデータ利用条件

Team・Enterprise・APIなどの商用サービスは、顧客コンテンツを原則として学習に使用せず、明示的なオプトインやフィードバックなどが例外です（2026年7月確認）。商用サービスのデータ利用条件

組織ではCode Artifactの非公開・共有状態に応じた保持期間を設定できる場合がありますが、全プラン共通の標準保持日数は公式に明記されていません。Code Artifactsの保存・保持条件

よくある質問｜変換・モバイル・検索表示

Claude Code Artifactsについて公式に明記されていない直接変換、検索表示、モバイル公開は、可能と推測せず未公表として扱います。

以下は混同クエリと、操作・契約の途中で生じやすい疑問を基にしたFAQです。確認できない機能は、できるともできないとも断定しません。

まとめ｜選んだ入口から次の行動へ進む

Claude Code、一般Artifacts、Code Artifactsは、開発・会話内作成・公開共有のどこから始めるかを決めれば選べます。