Claude Artifacts がついに公開共有+複数人リアルタイム編集に対応

·Toolin 編集部

Anthropic が Artifacts に公開リンク共有と複数人による同時編集(multiplayer)を追加。この機能の正体、使い方、そして Claude Code Artifacts との違いを解説します。

Claude Artifacts がついに公開共有+複数人リアルタイム編集に対応

Claude の Artifacts(アーティファクト)を使ったことがあるなら、「AI がサイドバーに直接、プレビュー可能な React コンポーネントや SVG、HTML の小ツールを生成してくれる」あの体験はご存じのはずです。しかし長らく Artifacts には明白な弱点がありました:生成したものを Claude の外に持ち出して人に見せるのが難しく、ましてや一緒に編集するなどもってのほかだったのです。Anthropic は最近この部分を埋めました——Artifacts が公開リンクでの共有に対応し、さらに複数人で同じ Artifact を同時編集できるようになったのです(公式とメディアはこれを「multiplayer」と呼んでいます)。

本記事は Anthropic 公式のサポートドキュメントと複数メディアの報道に基づき、この機能の使い方と、混同されがちな Claude Code Artifacts との違いを解き明かします。

この機能の正体

Anthropic 公式サポートドキュメント(support.claude.com/en/articles/9487310)は Artifacts を「アイデアを共有可能な app、ツール、コンテンツに変えるもの」と説明しています。新たに追加された能力は、独立した2つの要素に分解できます:

  1. 公開共有(Publish & Share):Artifact パネル下部の publish ボタンを押すと公開リンクが生成され、誰でも Claude にログインせずに閲覧できる。外部の Web ページへの埋め込みにも対応
  2. 複数人リアルタイム共同編集(Multiplayer):複数人が同時に同じ Artifact を編集できる。Figma や Google Docs のようなリアルタイム共同作業の体験です

メディア(AlphaSignal、VentureBeat など)の報道見出しは、ここの変化をひとことでArtifacts are now multiplayer. とまとめています。その意味するところは、Claude が生成した成果物が「自分だけが一度見るもの」から「チームコラボレーションの出発点」へと昇格したことです。

使い方:生成から共有まで

ステップ1:Claude で Artifact を生成

いつもどおり、Artifact の形に適したコンテンツを Claude に生成させます。Artifact ができあがりやすいタイプ:

  • React / Next.js コンポーネント(最も一般的)
  • HTML + CSS + JS の小さなページ・小ツール
  • SVG グラフィックや Mermaid のフローチャート
  • Markdown ドキュメント

たとえばこう頼みます:「React コンポーネントを書いて。日付を入力すると、その日までのカウントダウンカードを表示する、見た目の良いものを。」Claude はコードをレンダリングし、インタラクティブなプレビューとして右側の Artifacts パネルに表示します。

ステップ2:Publish を押して公開リンクを生成

Artifact パネルの下部にある Publish(公開)ボタンを見つけて押すと、公開アクセス可能なリンクが生成されます。このリンクを同僚やクライアントに送れば、相手はブラウザで開くだけで完全に動作するプレビューを見られます。Claude アカウントもソースコードも不要です。

自分のブログ、Notion、Confluence に埋め込みたい場合は、埋め込み用コードを取得することもできます。

ステップ3:他の人を編集に招待

multiplayer モードを有効にすると、コラボレーターは見るだけでなく、同じ Artifact 上で直接編集できるようになります——文案の修正、スタイル調整、インタラクションの追加など。全員の変更はリアルタイムに同期し、相手の操作を見ることもできます。

💡 ヒント:multiplayer が向いているのは「AI が初版を出す+チームが手で微調整する」というワークフローです。Claude にまず構造とスタイルを固めさせ、デザイナーが配色を調え、プロダクトマネージャーが文案を直す——という流れは、毎回 AI にゼロから再生成させるより速く済みます。

ステップ4:ダウンロードまたは派生(Remix)

オンラインでの共有と協力に加えて、Artifacts はコンテンツのローカルへのダウンロード(HTML ファイル、コードのソースファイル)や、他人の Artifact からの Remix による自分バージョンの派生にも対応しています。「AI が生成したデモをプロジェクトのコードとして蓄えたい」開発者にとって、この経路は実用的です。

Claude Code Artifacts と混同しない

Anthropic には名前がよく似た別製品 Claude Code Artifacts があり、2026-06-18 にベータ入りしました。両者は別物です:

軸Claude(Web)ArtifactsClaude Code Artifacts
製品claude.ai の Web/AppClaude Code(ターミナル/IDE)
形態会話の中でプレビュー可能な React/HTML/SVG を生成1回のコーディングセッションを共有可能なライブ HTML ページとしてパッケージ
対象Team / Enterprise 顧客が優先チーム/企業の開発コラボレーション
共同作業multiplayer による公開共有+リアルタイム編集coding session をライブで共有できる Web ページとして公開

ひとことで言えば、Web の Artifacts は「AI が生成した1つの成果物」を共有し、Code Artifacts は「AI がコードを書く過程」を共有するものです。本記事で扱っているのは、前者の multiplayer と公開共有です。

活用シーン

  • インタラクティブなデモ:プロダクトマネージャーが Claude にインタラクティブなプロトタイプを生成させ、publish したリンクをデザイン/上司/クライアントのレビューにそのまま送る
  • 教育/チュートリアル:教師が動作するコード例を Artifact にすれば、学生はリンクを開くだけで操作し、パラメータを変えて結果を確認できる
  • データダッシュボード:Claude にデータを React のチャートコンポーネントとして描画させ、チームに共有してリアルタイムに閲覧・微調整する
  • 組み込み型の小ツール:Artifact を社内 wiki に埋め込めば、チームメンバーがいつでも使え、各自で書き直す必要がない
  • 職種横断のコラボレーション:デザイナーが multiplayer で UI を直し、開発者が同時にロジックを直し、AI が双方の変更をコードとして統合する

現時点での注意点

  • 提供範囲:multiplayer と公開共有はまず Team および Enterprise プランで展開されます。個人プランのユーザーへの提供時期は公式アナウンスを確認してください
  • サイズ/リソース制限:Code Artifacts では単一ページに CSP と約16 MiB のサイズ上限があります(Digital Applied などのサードパーティの詳説を参照)。Web Artifacts にも同様のセキュリティサンドボックス制限があり、複雑な依存関係は動かないことがあります
  • 「legacy Artifacts」の廃止:Anthropic は2026年5月中旬、Team/Enterprise 管理者に向けて、旧 Artifacts やカスタム Styles などの機能が段階的に調整されると通知しました。自分が使っている機能が影響を受けるか、公式 changelog の確認をおすすめします
  • 共有前に必ずマスキング:publish するとリンクは公開アクセス可能になります。Artifact に実業務データ、API Key、顧客情報が入っている場合は、共有前に必ず削除してください

まとめ

multiplayer+公開共有により、Claude Artifacts は「個人の玩具」から「チームコラボレーションの出発点」へと昇格しました。いちばん直接的な恩恵は、Claude が生成した React コンポーネントのスクリーンショットを Slack に貼り、コードを GitHub に貼り付ける、という二度手間が不要になることです——リンクひとつで、動くものを見せ、一緒に直せるようになります。チームですでに Claude Team/Enterprise を使っているなら、今日この機能を一通り触ってみてください。体感の差は歴然です。