---
title: "Claudeのアプリ機能（Artifactsアプリ）で作ったHTMLを共有する方法"
description: "ClaudeのArtifacts機能で作ったHTMLをアカウントなしの外部関係者に届けたい人向け。Claudeの画面外で動く形に取り出し、一時URLで共有するための具体的な方法が分かります。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/share-claude-app-canvas-html"
markdown: "https://giga-site.com/articles/share-claude-app-canvas-html/index.md"
category: "AI活用"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Claudeのアプリ機能（Artifactsアプリ）で作ったHTMLを共有する方法

ClaudeのArtifactsアプリ機能を使えば、会話の中でHTMLやインタラクティブな小さなアプリを作れます。ただClaudeの画面内で動くものを、アカウントを持たない相手に見せるには工夫が要ります。出力を一時URLにして共有する方法を整理します。外部サービスの仕様は変わるため、本文ではレビュー共有で変わりにくい判断軸を中心に整理します。

> Source HTML: https://giga-site.com/articles/share-claude-app-canvas-html
> Article index: https://giga-site.com/articles/index.md

## 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はアクセス制御ではないので過信は禁物です。

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

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

## よくある質問

### ArtifactsアプリのHTMLは1つのファイルとして共有できますか。

外部リソースに依存していなければ、取り出したHTMLを単一ファイルとしてそのまま共有できます。外部CSS/JS/画像を使う場合は、それらをまとめてZIP化すると表示が崩れません。

### 相手にClaudeのアカウントは必要ですか。

成果物を独立したページとして一時URLで共有すれば、相手はClaudeのアカウントを持っていなくてもブラウザで開けます。会話履歴を見せる必要もありません。

### デモを社外秘で限定共有したいです。

パスワードやメール認証（ワンタイムコード）、会社ドメイン認証を選べます。リンクを知っているだけでは開けない状態にできるため、社外秘のデモも範囲を絞って見せられます。

### Claudeで改良したら共有URLにも反映できますか。

同じURLのままファイルを差し替えられるので、改良後のHTMLを取り出して上書きすれば、相手は同じリンクから最新版を確認できます。

### AIツールで作ったHTMLはそのまま共有しても安全ですか？

そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。

## 関連記事

- [Roo Code（旧Roo Cline）で作ったHTMLを共有する方法](https://giga-site.com/articles/share-roo-code-html/index.md)
- [Kilo Codeで生成したHTMLを共有する方法](https://giga-site.com/articles/share-kilo-code-html/index.md)
- [Bind AI IDEで生成したHTMLを共有する方法](https://giga-site.com/articles/share-bind-ai-html/index.md)
- [Windsurf（Codeium）のCascadeで作ったHTMLを共有する方法](https://giga-site.com/articles/share-codeium-windsurf-wave-html/index.md)
- [Blackbox AIで作ったHTMLを共有URLにする方法](https://giga-site.com/articles/share-blackbox-ai-html/index.md)
- [Firebase Studioで作ったアプリのプレビューを共有する方法](https://giga-site.com/articles/share-firebase-studio-app/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Claudeのアプリ機能（Artifactsアプリ）で作ったHTMLを共有する方法",
  "description": "ClaudeのArtifacts機能で作ったHTMLをアカウントなしの外部関係者に届けたい人向け。Claudeの画面外で動く形に取り出し、一時URLで共有するための具体的な方法が分かります。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/share-claude-app-canvas-html",
  "url": "https://giga-site.com/articles/share-claude-app-canvas-html",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "AI活用",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "ArtifactsアプリのHTMLは1つのファイルとして共有できますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "外部リソースに依存していなければ、取り出したHTMLを単一ファイルとしてそのまま共有できます。外部CSS/JS/画像を使う場合は、それらをまとめてZIP化すると表示が崩れません。"
      }
    },
    {
      "@type": "Question",
      "name": "相手にClaudeのアカウントは必要ですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "成果物を独立したページとして一時URLで共有すれば、相手はClaudeのアカウントを持っていなくてもブラウザで開けます。会話履歴を見せる必要もありません。"
      }
    },
    {
      "@type": "Question",
      "name": "デモを社外秘で限定共有したいです。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "パスワードやメール認証（ワンタイムコード）、会社ドメイン認証を選べます。リンクを知っているだけでは開けない状態にできるため、社外秘のデモも範囲を絞って見せられます。"
      }
    },
    {
      "@type": "Question",
      "name": "Claudeで改良したら共有URLにも反映できますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "同じURLのままファイルを差し替えられるので、改良後のHTMLを取り出して上書きすれば、相手は同じリンクから最新版を確認できます。"
      }
    },
    {
      "@type": "Question",
      "name": "AIツールで作ったHTMLはそのまま共有しても安全ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。"
      }
    }
  ]
}
```