AIで作ったHTMLを共有する方法【ChatGPT・Claude・Gemini・Cursor】

AIで作ったHTMLを人に見せたいなら、AIの画面からHTMLを取り出し、共有URLを発行してくれるサービスに貼る(またはファイルをドロップする) のが、どのAIでも通用するやり方です。この記事では、ChatGPT・Claude・Gemini・Cursorそれぞれの取り出し方と、Publee(当ブログの運営元です)で共有URLにする手順を紹介します。

結論

• 取り出し方はAIごとに違う — ChatGPTは回答のコードブロックからコピーし、Claude Designは「エクスポート」から「スタンドアロンHTMLとしてエクスポート」を選び、GeminiはCanvasの「コード」を開いてコピーします。Cursorなら、プロジェクトのフォルダにできたファイルをそのまま使えます
• AIの共有リンクで見られる人の条件は、サービスごとに違う — たとえばClaudeのヘルプセンターでは、Artifactを「共有」で渡すと、開く人全員にClaudeアカウントが要ります。アカウントなしで開けるのは、チャットから公開したレガシーArtifactだけです。ただし、Claude Codeから公開したArtifactについては、公開リンクならサインインなしで開けるとClaude Codeのドキュメントに書かれていて、公式の説明は分かれています
• Publeeに貼れば、見る人は登録なしでURLを開ける — 公開する側も登録は要りません。公開時のデフォルトはパスワード保護で、URLとパスワードを知っている人だけが閲覧できます。登録なしで公開したページは7日で削除されますが、無料アカウントなら期限なしで残せます

他のサービスとの比較

2026年11月2日に各社の公式ページで確認できたことだけを載せています。確認できなかった項目は「公式ページで確認できず」とし、推測では埋めていません。

出典(2026年11月2日確認):

• Claude: Share artifacts、Share session output as artifacts(Claude Code)
• Gemini: Canvas でドキュメントやアプリなどを作成する
• ChatGPT Sites: Creating and using ChatGPT Sites
• Netlify Drop: クイックスタート、パスワード保護
• Cloudflare Drop: 公開ページ、更新情報
• Tiiny Host: 料金
• GitHub Pages: About GitHub Pages
• htmldrop: プラン
• Dropli: トップ、他サービスとの比較
• Publee: はじめに、公開範囲とアクセス制限

sharehtml.org・Stacktree・miinideck なども含めた比較は、HTMLファイルをURL化して共有する方法 の表にまとめています。

ChatGPTで作ったHTMLを取り出す

OpenAIのヘルプ「Working with writing blocks and code blocks in ChatGPT」によると、ChatGPTの回答に含まれるコードは、本文とは別の「コードブロック」に表示され、コピーや編集ができます。HTMLページなど一部のコードは、その場でプレビューもできます。使える操作はプランや端末、モデルによって異なる、とも書かれています。

1. ChatGPTに 「CSSとJavaScriptを埋め込んだ1つのHTMLファイルとして書いて」 と頼む
2. 回答のコードブロックに出たHTMLを、最初から最後までコピーする
3. publee.app/publish に貼り付けて「公開してURLを取得」を押す

コピーしたコードが <!doctype html> や <html> で始まり </html> で終わっていれば、そのまま貼れます。

ChatGPTには、作ったサイトをそのまま公開できる「ChatGPT Sites」もあります。ヘルプによると、使えるのは Plus・Pro と Business・Enterprise で、Free と Go は対象外です。一般公開したSiteは、ChatGPTにサインインしなくても開けます。保持期間とパスワードについては、公式ページでは確認できませんでした。

Claudeで作ったHTMLを取り出す

Claudeは、Artifactの種類によって取り出し方が違います。以下は2026年11月2日に確認したヘルプセンターの内容です。

• Claude Design — デザインを開き、右上の「エクスポート」から「スタンドアロンHTMLとしてエクスポート」を選びます。保存したHTMLファイルを、Publeeの「ファイル / フォルダ / zip」タブにドロップします
• レガシーArtifact(2026年9月16日より前にチャットで作ったもの) — パネル上部のコントロールで、コードの表示、内容のコピー、ダウンロードができます。コピーしてPubleeに貼ります

ヘルプセンターの「Share artifacts」によると、Artifactを「共有」で渡した場合、開く人は全員Claudeアカウントが必要です。例外は、チャットから公開したレガシーArtifactだけで、このリンクならアカウントなしで見られます。とはいえ、レガシーArtifactはもう新しく作れません。

一方、Claude Codeのドキュメントには、Claude Codeから公開したArtifactの公開リンクは、claude.aiにサインインしなくても誰でも開けると書かれています。アカウントが要るかどうかについて、ヘルプセンターとClaude Codeのドキュメントで説明が分かれているわけです。Claudeを使っていない人に見せるときは、HTMLとして取り出してURLにすれば、この違いを気にせずに済みます。

画面つきの手順と、Claude公式の共有との違いは ClaudeのArtifact(アーティファクト)をURLで共有する方法 で詳しく説明しています。

Geminiで作ったHTMLを取り出す

Geminiでは、Canvasでページやアプリを作ります。Geminiヘルプの「Canvas でドキュメントやアプリなどを作成する」によると、Canvasを使うにはGeminiアプリへのログインが必要です。

1. gemini.google.com を開き、テキストボックスの下にある「ファイルを追加」アイコンから「Canvas」を選んで、作りたいページを頼む
2. Canvasパネルの右上にある「コード」を押して、コードを開く
3. コードを全部選択してコピーし、publee.app/publish に貼り付けて「公開してURLを取得」を押す

ヘルプには、アプリのコードをコピーする専用のボタンや、HTMLファイルとしてダウンロードする手順は載っていません(2026年11月2日確認)。「コード」の画面ではコードを直接編集できるので、そこで全体を選択してコピーします。

Gemini自身にも共有の機能があり、Canvasパネル右上の「共有とエクスポート」から「共有」を選ぶと、公開リンク(g.co/gemini/share)を作れます。ヘルプによると、公開リンクを知っている人は、アプリに関連するデータも閲覧・編集できます。また、共有されたCanvasはGeminiのモバイルアプリでは開けません。見る人にGoogleアカウントが要るか、パスワードを付けられるかは、ヘルプからは確認できませんでした。

Cursorで作ったHTMLを取り出す

Cursorでは、開いているプロジェクトのフォルダの中で、Agentがファイルを作ったり編集したりします。以下は、Cursorのヘルプ「Your first project」と「Cursor Agent」に沿った手順です。

1. Cursorで「File」>「Open Folder」から、ページを作るフォルダを開く
2. Agentに「index.htmlに〇〇のページを作って」と頼む。Agentはコードベースを調べてファイルを編集し、変更内容を示します。編集は作業の進行に合わせて反映され、diff(差分)の画面で確認できます
3. できたフォルダを、Publeeの「ファイル / フォルダ / zip」タブにドロップする(HTMLが1つだけなら、そのファイルだけでも公開できます)

CSSや画像が別ファイルになっていても、フォルダごとドロップすれば構成を保ったまま公開されます。React などビルドが必要な構成なら、ビルドの出力フォルダ(dist など)をドロップしてください(公開方法)。

CursorからPubleeに直接公開したい場合は、MCP連携を使います。設定方法は MCP連携のドキュメント にあります。

Publeeで共有URLにする

どのAIで作った場合も、最後の手順は同じです。

1. publee.app/publish を開く(登録は不要です)
2. HTMLを貼り付ける。ファイル・フォルダ・zipなら「ファイル / フォルダ / zip」タブにドロップする
3. 「公開してURLを取得」を押す

https://〇〇.publee.site というURLと、自動生成されたパスワードが発行されます。公開時のデフォルトはパスワード保護で、正しいパスワードが入力されるまでページの中身は配信されません。誰でも見られるようにしたい場合は、公開範囲で「一般公開」を選びます。パスワードの仕組みは HTMLにパスワードをかけて共有する方法 で説明しています。

登録せずに公開したページは、7日後に自動で削除されます。無料アカウントを作ってメールアドレスを確認すれば、3サイトまで期限なしで残せます。

よくある質問

AIの共有リンクをそのまま送るのではだめですか?

送る相手がそのAIのアカウントを持っていれば使えます。ただ、見られる人の条件はサービスごとに違います。Claudeの場合、ヘルプセンターでは「共有」したArtifactを開くのにClaudeアカウントが要り、例外はチャットから公開したレガシーArtifactだけです(Claude Codeのドキュメントは、Claude Codeから共有した公開リンクならサインイン不要としていて、説明が分かれています)。相手がそのAIのアカウントを持っていない場合や、パスワードを付けて渡したい場合は、HTMLを取り出してPubleeに貼る方法が向いています。

見る人にアカウントは必要ですか?

Publeeで公開したページなら、見る人の登録もログインも要りません。パスワード保護にした場合は、URLとパスワードの両方を相手に伝えてください。

React形式のコードが出てきました。そのまま公開できますか?

そのままでは動きません。コードが import React で始まっている場合は、AIに「CSSとJavaScriptを埋め込んだ1つのHTMLファイルとして書いて」と頼み直すか、ビルドした出力フォルダを公開してください。

無料ですか?

無料です。登録なしで公開したページは7日間、メールアドレスを確認した無料アカウントなら期限なしで残ります(3サイトまで)。

---

手元のHTMLで試せます(登録不要)→ HTMLを公開してみる