---
title: "ClaudeのアーティファクトHTMLを共有する方法"
description: "Claudeが作ったHTMLをコピペやスクリーンショットではなくブラウザで動く状態のまま相手に届けたい人向け。URLとして共有するまでの具体的な手順を解説する。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/share-claude-artifacts"
markdown: "https://giga-site.com/articles/share-claude-artifacts/index.md"
category: "AI活用"
publishedAt: "2026-06-21"
updatedAt: "2026-06-27"
readingMinutes: 8
---
# ClaudeのアーティファクトHTMLを共有する方法

Claudeのアーティファクトで作ったHTMLを、そのまま相手に見せたい。けれどコードをコピペして送るのも、スクリーンショットを撮るのも、なんだか伝わりきりません。この記事では、アーティファクトのHTMLをURLとして共有し、相手にブラウザで実物を確認してもらうための具体的な手順と注意点を整理します。外部サービスの仕様は変わるため、本文ではレビュー共有で変わりにくい判断軸を中心に整理します。

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

## Claudeのアーティファクトとは、そしてなぜ共有が難しいのか

Claudeのアーティファクトは、チャットの横に表示されるプレビュー領域です。ランディングページやちょっとしたツール、スライド風のページなど、HTMLとCSS、JavaScriptで動くものをその場で生成し、見た目を確認しながら対話で直していけます。

便利な一方で、困るのが「自分以外の人に見せるとき」です。プレビューはあくまで自分の画面の中にあるもので、そのまま相手のブラウザに届くわけではありません。チームのレビューやクライアントへの提案で他人の目を通したい瞬間に、共有の壁にぶつかります。

つまり、作る体験はなめらかでも、見せる手段は別で用意する必要がある、という構造になっています。

## コピペやスクショで送ると、なぜ伝わらないのか

まず思いつくのは、生成されたコードをコピーしてメールやチャットに貼る方法です。しかし受け取った相手は、そのコードをファイルに保存し、ブラウザで開く手間を負います。非エンジニアの相手なら、その時点で確認を諦めてしまうことも珍しくありません。

スクリーンショットで見た目を共有する手もありますが、静止画ではボタンを押したときの動きやスクロール後の表示、スマートフォンでの見え方までは伝わりません。「動くものを動いたまま見せる」のが本来の目的だったはずです。

結局、相手が一番ラクなのは、リンクをひとつ開くだけで実物が表示される状態です。HTMLをURLにして渡せば、この行き違いはまとめて解消できます。

- コードのコピペは、相手にファイル保存とブラウザ起動の手間がかかる
- スクショでは動作やスマホ表示が伝わらない
- どれが最新版なのか、相手が判断できなくなる

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

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

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

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

## アーティファクトのHTMLをURLで共有する手順

ここでは、アーティファクトの中身をギガサイト便で共有URLにする流れを紹介します。サーバーを借りたり、デプロイ設定を書いたりする必要はありません。

1. アーティファクト右上のメニューからコードを表示し、HTMLをコピーする。
2. 手元のテキストエディタに貼り付け、拡張子「.html」で保存する。
3. 画像やCSS、JavaScriptが別ファイルなら、それらをまとめてZIPにする。
4. ギガサイト便のトップページに、HTMLファイルまたはZIPをドロップする。
5. 発行された共有URLを開き、表示崩れや動作を自分で確認する。
6. 問題なければ、そのURLを相手に送る。

## 誰に見せるかを、URLを送る前に決めておく

公開する前に考えておきたいのが、そのページを誰に見せてよいかです。社外秘の提案や、まだ公開前のサービス紹介を含むなら、リンクを知っていれば誰でも開ける状態は避けたいところです。

ギガサイト便では、共有相手に合わせて認証方式を選べます。手軽さを優先するならURLのみ、限られた人だけに見せたいならパスワードやメール認証、社内レビューなら会社のメールドメインを持つ人だけに絞る、といった使い分けが可能です。

あわせて公開期限も設定できます。提案期間が終わったら自動的に閲覧できなくなるようにしておけば、古いリンクがいつまでも生き続ける心配がありません。

- URLのみ: リンクを知っている人なら誰でも閲覧できる
- パスワード認証: 合言葉を知っている人だけに限定する
- メール認証: 指定したメール宛のワンタイムで本人確認する
- 会社ドメイン認証: 特定のメールドメインを持つ人だけに見せる

## AI生成HTMLだからこそ気をつけたいこと

AIが書いたコードは、自分で一行ずつ確認していないことが多いものです。外部のスクリプトを読み込んでいたり、フォームの送信先が外部サービスになっていたり、本来は静的な公開に不要なファイルが混ざっていたりすることがあります。

ギガサイト便ではアップロード時にセキュリティスキャンが走り、APIキーらしき文字列や外部フォーム送信、外部スクリプト依存といった兆候を検出して警告します。内容を理解したうえで公開を選べるので、意図しない情報の漏れを公開前に気づける仕組みです。

なお、一時公開のページにはnoindexが付き、通常は検索結果に出てきません。ただしnoindexは検索よけであって、アクセス制御そのものではありません。本当に見せたくない相手を遮断したいなら、前の章で触れた認証方式を併用してください。

## 修正が入っても、同じURLのまま見せ続けられる

アーティファクトでの制作は、対話で何度も直していくのが前提です。共有したあとに「ここを変えたい」となるのは自然なことで、そのたびに新しいリンクを送り直すのは双方にとって面倒です。

ギガサイト便では、同じURLのままファイルを差し替えられます。相手はブックマークした最初のリンクを開くだけで、つねに最新版を確認できます。誰がいつ見たかはアクセスログで把握でき、URL末尾のスラッグも分かりやすい文字列に編集できます。

アーティファクトで生まれたアイデアを、相手の画面でそのまま動かして見てもらう。コピペやスクショで止まっていたやり取りを、ひとつのリンクに置き換えるところから始めてみてください。

## アーティファクトをZIP化するときの注意

Claudeのアーティファクトが1枚のHTMLだけで完結している場合は、そのHTMLを共有すれば十分です。画像、CSS、JSを別ファイルで持つ構成にした場合は、index.htmlを入口にして関連ファイルを同じ階層関係のままZIP化します。

画面上では正しく見えていても、外部画像やローカルパスに依存していると、共有先では崩れることがあります。ZIPにする前に、参照ファイルがすべて同梱されているかを確認しておきます。

- 単体HTMLなら、そのままアップロードしてURL化する
- 複数ファイルなら、index.htmlを入口にして相対パスを保ったままZIP化する
- ローカルPC内の絶対パスや、認証が必要な画像URLを残さない
- 公開前に別ブラウザで開き、画像・CSS・ボタン表示を確認する

## よくある質問

### Claudeのアーティファクトに共有機能はありますか

Claudeのアーティファクト自体にも共有の仕組みはありますが、相手にClaudeのアカウントや特定の環境を前提とせず、ブラウザでリンクを開くだけで実物を見てもらいたい場合は、HTMLを書き出してURL化する方法が確実です。出力されたコードを保存し、共有サービスにアップロードすればURLとして公開できます。

### アーティファクトのHTMLはどうやって取り出しますか

アーティファクト右上のメニューからコードを表示し、HTMLをコピーします。これを拡張子「.html」で保存すればファイルになります。画像やCSS、JavaScriptが別ファイルに分かれている場合は、それらをまとめてZIPにすると一式をそのまま公開できます。

### 作ったページを限られた人にだけ見せられますか

はい。パスワード認証や、指定したメール宛のワンタイムで確認するメール認証、特定の会社ドメインを持つ人だけに絞る認証など、相手に合わせて公開範囲を選べます。提案期間が終わったら閲覧できなくなるよう、公開期限を設定することも可能です。

### 公開したあとに内容を直したらリンクは変わりますか

同じURLのままファイルを差し替えられるため、リンクは変わりません。相手は最初に受け取ったリンクを開くだけで、つねに最新版を確認できます。修正のたびにリンクを送り直す必要はありません。

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

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

### Claudeの画面では見えるのに共有URLで崩れるのはなぜですか？

Claudeの画面内では一時的に参照できていた画像やCSSが、共有用HTMLには含まれていないことがあります。必要なファイルをZIPに同梱し、index.htmlから相対パスで参照されているか確認してください。

## 関連記事

- [Claudeで作った複数ファイルのHTMLをまとめて共有する方法](https://giga-site.com/articles/share-claude-multi-file-html/index.md)
- [Claude Codeで生成したサイト・HTMLを共有する方法](https://giga-site.com/articles/share-claude-code-site/index.md)
- [Claudeのアプリ機能（Artifactsアプリ）で作ったHTMLを共有する方法](https://giga-site.com/articles/share-claude-app-canvas-html/index.md)
- [Claude Appsで生成したLP案をレビュー用URLにして共有する方法](https://giga-site.com/articles/claude-apps-lp-draft-review-url/index.md)
- [Claude Appsで生成した管理画面モックをレビュー用URLにして共有する方法](https://giga-site.com/articles/claude-apps-admin-mock-review-url/index.md)
- [Claude Appsで生成したHTMLスライドをレビュー用URLにして共有する方法](https://giga-site.com/articles/claude-apps-slide-html-review-url/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ClaudeのアーティファクトHTMLを共有する方法",
  "description": "Claudeが作ったHTMLをコピペやスクリーンショットではなくブラウザで動く状態のまま相手に届けたい人向け。URLとして共有するまでの具体的な手順を解説する。",
  "datePublished": "2026-06-21",
  "dateModified": "2026-06-27",
  "mainEntityOfPage": "https://giga-site.com/articles/share-claude-artifacts",
  "url": "https://giga-site.com/articles/share-claude-artifacts",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "AI活用",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Claudeのアーティファクトに共有機能はありますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Claudeのアーティファクト自体にも共有の仕組みはありますが、相手にClaudeのアカウントや特定の環境を前提とせず、ブラウザでリンクを開くだけで実物を見てもらいたい場合は、HTMLを書き出してURL化する方法が確実です。出力されたコードを保存し、共有サービスにアップロードすればURLとして公開できます。"
      }
    },
    {
      "@type": "Question",
      "name": "アーティファクトのHTMLはどうやって取り出しますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "アーティファクト右上のメニューからコードを表示し、HTMLをコピーします。これを拡張子「.html」で保存すればファイルになります。画像やCSS、JavaScriptが別ファイルに分かれている場合は、それらをまとめてZIPにすると一式をそのまま公開できます。"
      }
    },
    {
      "@type": "Question",
      "name": "作ったページを限られた人にだけ見せられますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。パスワード認証や、指定したメール宛のワンタイムで確認するメール認証、特定の会社ドメインを持つ人だけに絞る認証など、相手に合わせて公開範囲を選べます。提案期間が終わったら閲覧できなくなるよう、公開期限を設定することも可能です。"
      }
    },
    {
      "@type": "Question",
      "name": "公開したあとに内容を直したらリンクは変わりますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "同じURLのままファイルを差し替えられるため、リンクは変わりません。相手は最初に受け取ったリンクを開くだけで、つねに最新版を確認できます。修正のたびにリンクを送り直す必要はありません。"
      }
    },
    {
      "@type": "Question",
      "name": "AIツールで作ったHTMLはそのまま共有しても安全ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "Claudeの画面では見えるのに共有URLで崩れるのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Claudeの画面内では一時的に参照できていた画像やCSSが、共有用HTMLには含まれていないことがあります。必要なファイルをZIPに同梱し、index.htmlから相対パスで参照されているか確認してください。"
      }
    }
  ]
}
```