Claudeのアプリ機能（Artifactsアプリ）で作ったHTMLを共有する方法

ArtifactsアプリのHTMLはClaudeの中で動いている

ClaudeのArtifacts（アプリ）機能では、会話の流れの中でHTMLや小さなインタラクティブアプリを生成し、その場でプレビューできます。コードを書きながら結果を確認できるため、試作のサイクルが速いのが魅力です。

一方で、その成果物はClaudeの画面内で表示・実行されているものです。共有相手がClaudeを使っていなかったり、会話そのものを見せたくなかったりすると、そのまま渡すのは難しい場面が出てきます。

見せたいのは多くの場合、会話の全文ではなく完成したHTMLの動きや見た目です。成果物だけを切り出して独立したページとして渡せれば、相手は前提知識なしに内容を確認できます。

成果物のHTMLを取り出して独立させる

ArtifactsアプリのHTMLは、コードとして取り出して1つのファイルにまとめられます。外部リソースに依存していなければ、単一のHTMLとしてそのまま開ける状態にできます。

スタイルやスクリプトが別ファイルや外部読み込みになっている場合は、それらも合わせて1つのフォルダにまとめ、相対パスで参照される状態にしておくと表示が崩れません。これで会話を切り離した独立した成果物になります。

独立させたHTMLは、ホスティングを準備しなくても一時URLにできます。Claudeでの試作と、外部への共有を切り分けると運用がすっきりします。

AI生成HTMLを共有する前の安全チェック

Claudeのアプリ機能（Artifactsアプリ）で作ったHTMLを共有では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。

ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。

• 外部送信: form action、fetch、script src、iframeの向き先を確認する
• 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
• 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
• 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める

Artifactsアプリの出力を一時URLにする手順

取り出したHTMLを、表示が崩れない形でアップロードして共有します。次の手順で進めます。

1. ClaudeのArtifactsアプリからHTMLコードを取り出し、ファイルとして保存する
2. 外部CSS/JS/画像を使っている場合は同じフォルダに集め、相対パスで参照されるようにする
3. 単一ファイルならHTML、複数ファイルならZIPにまとめてギガサイト便のトップにドロップする
4. 見せる相手に応じて認証方式（URLのみ／パスワード／メール認証／会社ドメイン認証）を選ぶ
5. 公開期限を設定し、発行された共有URLを相手に送る

会話の文脈を見せずに成果物だけ渡す

Claudeとのやり取りには、検討の過程や別件のメモが混ざっていることがあります。完成したHTMLだけを独立したページとして共有すれば、会話そのものを相手に見せずに済みます。

受け取る側は、Claudeのアカウントや会話履歴にアクセスする必要がなく、送られたURLを開くだけで成果物を確認できます。前提を共有していない相手にもフラットに見せられるのが利点です。

差し替えにも対応しているため、Claudeでさらに改良したHTMLを取り出して上書きすれば、同じURLのまま最新版を見てもらえます。試作と共有のテンポを揃えられます。

限定公開とログで配布範囲を管理する

Artifactsアプリで作ったデモやプロトタイプは、社外秘の検討に関わることもあります。一時公開ページにはnoindexが付き検索結果には出ませんが、noindexはアクセス制御ではないので過信は禁物です。

関係者以外に見せたくない場合は、パスワードやメール認証、会社ドメイン認証を併用しましょう。リンクが転送されても、認証を通らなければ中身は見えません。

アクセスログで誰がいつ閲覧したかを確認でき、公開期限を過ぎれば自動的に閉じます。デモを見せて反応を得たら閉じる、という短期の使い方にちょうど合います。