Claude CodeのセッションがそのままWebページになる — Artifactsベータの使い道と、見えてきた制限

Claude Codeは強力だが、成果物がターミナルの中に閉じるという弱点をずっと抱えていた。

どれだけ優れたPRウォークスルーを作っても、システム構成の解説を書かせても、それを見られるのはCLIの画面を開いている本人だけだ。チームメイトに共有しようとすると、テキストをコピペしてSlackに貼るか、スクリーンショットを撮るしかない。

6月18日にベータ公開されたClaude Code Artifactsは、この問題をストレートに解決する。セッションの中で生まれた成果物を、ブラウザで閲覧できるライブなHTMLページとして公開できる。

どう使うのか

仕組みはシンプルだ。Claude Codeでの作業中に「これをArtifactにして」と頼むと、セッションの文脈——コードベース、コネクター、会話の履歴——を使って1枚のHTMLページを生成する。PRの変更点をビジュアルに解説するウォークスルー、システムアーキテクチャの図解、リリースチェックリスト、プロジェクトのダッシュボードなど、用途は幅広い。

生成されたページはclaude.ai上にホストされ、URLで共有できる。CLIとデスクトップアプリの両方から作成可能で、閲覧側は通常のブラウザさえあればいい。

ここが地味に効く。コードレビューの際に「ここの変更意図を説明して」と頼んでArtifact化すれば、レビュアーはターミナルを開かなくても変更の全体像を把握できる。エンジニアでないプロダクトマネージャーやデザイナーにも技術的な文脈を共有しやすくなる。

セキュリティは固い

共有範囲の設計はかなり慎重だ。

Artifactは作成者だけが見える状態がデフォルト。手動で共有しない限り、誰にも公開されない。共有できる相手も同じ組織の認証済みメンバーに限られる。パブリックリンクとして外部に公開する設定は存在しない。

技術的にも厳格で、各ArtifactにはContent Security Policy（CSP）が適用される。外部スクリプト、フォント、スタイルシートの読み込みは一切不可。fetch、XHR、WebSocketも完全にブロックされる。ページは自己完結していなければならない。

正直、これは制限としてはかなりきつい。外部APIからデータを取得するダッシュボードや、CDNのライブラリに依存するインタラクティブなデモは作れない。だが、企業の機密コードを扱うツールとしては妥当な判断だと思う。

対象ユーザーと料金

現時点でArtifactsが使えるのはClaude TeamとEnterpriseプランのユーザーのみ。Pro（月$20）やFree枠は対象外だ。追加料金は発生しないが、Artifact生成にはセッショントークンを消費する。

個人開発者には使えないのが残念だが、Artifactsの本質は「チームでの知識共有」にある。一人で完結するなら、そもそもHTMLページにする必要がない。

16MiBの壁

Artifactのサイズ上限は16MiB。テキストベースのウォークスルーやチェックリストなら十分だが、大量のインラインSVGや画像を埋め込もうとすると制限にかかる可能性がある。

外部リソースを読み込めないCSPとこのサイズ制限を合わせると、Artifactsで作れるものの範囲は「リッチだが自己完結した1枚のドキュメント」に限定される。ライブダッシュボードや動的なアプリとしてではなく、ドキュメンテーションツールとして捉えるのが正しい。

コードレビューの景色が変わるかもしれない

Artifactsが面白いのは、Claude Codeの「考える力」とHTMLの「見せる力」を組み合わせている点だ。

たとえばリファクタリングの大きなPRを出すとき、変更の理由・影響範囲・テスト戦略を1枚のビジュアルページにまとめてPR descriptionにリンクを貼れば、レビュアーの負担は大幅に減る。オンボーディング資料として、新メンバーがコードベースの全体像を掴むための「ガイドツアー」をClaude Codeに作らせることもできる。

ベータ段階なので今後の展開は読めないが、個人プランへの展開と外部共有オプションの追加があれば、OSSプロジェクトのドキュメンテーションにも化ける可能性がある。現時点ではTeam/Enterprise限定という制約があるものの、Claude Codeを業務で使っているチームなら試す価値はある。