ChatGPTやClaudeで作ったHTMLをURLで共有する方法

**結論：**ChatGPTやClaudeが作ったHTMLを人に見せるには、コードを最初から最後まで丸ごとコピーし、HTMLをURLにしてくれるホスティングに貼り付けて、できたリンクを送るのがいちばん手間がかかりません。チャット画面のプレビューは自分の会話の中でしか見えず、コードや会話の共有リンクを送っても、相手にはページとして表示されません。

チャットのプレビューや共有リンクではだめな理由

• プレビューは自分の会話の中だけ：ChatGPTのキャンバスやClaudeのアーティファクトでページがきれいに表示されても、それはあなたの画面の中での話です。相手のブラウザには届いていません。
• 会話の共有リンクは「会話」を共有する：ChatGPTの共有リンクで送られるのはやり取りそのものです。相手が見るのは、途中のプロンプトやボツ案も含めたチャットで、完成したページではありません。
• コードを貼って送ると、相手に作業を押しつけることになる：受け取った人は .html として保存し、ブラウザで開く必要があります。スマホではまずやってもらえません。
• スクリーンショット：ボタンやフォーム、アニメーションが動かず、スマホでは文字が小さくなります。

手順：コードをコピーして、URLにする

1. コードを丸ごとコピーする。 コードブロックのコピーボタンを使い、<!DOCTYPE html> から </html> まで欠けずに取ります。回答が途中で切れている場合は「続けて」と頼むか、「1ファイルで完結するHTMLを最初から全部出して」と頼み直してください。
2. 貼り付けてプレビューを確認する。 dochostに貼り付けると、HTMLかどうかが自動で判定され、プレビューが表示されます。見出し、日本語、ボタン、表を確認します。
3. 公開範囲を選んで、リンクを作る。 「非公開」は「みつける」に載らず、リンクを知っている人だけが開けます。「リンクを作る」を押すとURLができるので、それを送ります。
4. 修正したくなったら、同じURLのまま更新する。 ログインしていない場合は、公開後に表示される編集用リンクから同じページを更新できます。共有リンクは変わりません。編集用リンクは自分だけで保管してください。

ChatGPTやClaudeの画面から直接公開したい場合は、Chrome拡張機能（チャットの中に「公開」ボタンが出ます）や、MCPサーバー（アシスタントに公開ツールを追加します）もあります。どちらも連携ページにまとめています（英語）。

Claudeの「公開」との違い

Claudeには、アーティファクトを公開してリンクを作る機能があります。手早い反面、知っておきたい点があります。

• 公開したリンクは、Claudeのアカウントを持っていない人も含めて、リンクを知っている誰もが開けます。個人向けプランでは、閲覧者を限定する設定はありません。
• 閲覧した人がClaudeのアカウントを持っていれば、そのアーティファクトをコピーして自分の会話で使えます。

ページをClaudeの外に自分のリンクとして置きたいときや、あとから同じURLのまま差し替えたいとき、パスワードをかけたいときは、HTMLをコピーしてホスティングに置くほうが向いています。逆に、Claudeの中だけで完結する簡単なデモなら、Claudeの「公開」で十分です。

方法の比較

公開前のチェックポイント

• 1ファイルで完結しているか：AIが style.css や script.js を別ファイルとして参照していると、HTMLだけを公開してもスタイルや動きが抜けます。「CSSとJavaScriptをすべてHTMLの中に入れて」と頼んでから公開してください。
• 文字コード：<head> に <meta charset="utf-8"> がないと、日本語が文字化けすることがあります。
• スマホ表示：<meta name="viewport" content="width=device-width, initial-scale=1"> があるか確認します。
• 画像：AIが image1.png のような手元にない画像を参照していることがあります。公開されている画像のURLにするか、画像なしで成り立つデザインにします。
• 秘密の情報：プロンプトに入れた社内データ、実名、APIキーがページに残っていないか確認します。公開したページは、リンクを知っている人なら誰でも見られます。
• フォーム：AIが作った問い合わせフォームは、見た目だけで送信先がないことがよくあります。実際にデータを受け取れるか、送信して確かめてください。

送り先ごとの送り方（LINE、メール、Slackなど）はHTMLファイルを他の人に送る方法にまとめています。

よくある質問

ChatGPTのキャンバスやClaudeのアーティファクトで作ったものでも使えますか？

使えます。どちらも中身はHTML（またはReactなど）のコードなので、コードをコピーして貼り付ければ公開できます。Reactのコンポーネントの場合は、「ブラウザでそのまま開ける1つのHTMLファイルにして」と頼んで書き直してもらうのが確実です。

JavaScriptは動きますか？

1ファイルの中に書かれたスクリプトや、CDNから読み込むライブラリは動きます。アップロードしていない別ファイルの .js を相対パスで読み込んでいる部分は動きません。

無料でどこまで使えますか？

dochostの無料プランは登録不要で、1ページ1 MBまで、同時に10ページまで公開できます。リンクの期間は公開ページが7日間、非公開ページが3日間です。Pro（月額$7、年払いなら$59/年）にすると、リンクが無期限になり、パスワード保護とリンク名の指定が使えます。Proの無料トライアルにはカードの登録が必要です。

公開したページは検索に出ますか？

dochostのページは、初期設定では検索エンジンにインデックスしないよう指定（noindex）されています。検索に載るのは、有料プランの無期限ページで、作者が「公開」を選び、検索への掲載を自分で有効にしたページだけです。ただし、noindexはリンクを知っている人が開くことまでは止めません。人に見られて困る内容は、パスワード保護を使うか、公開しないでください。

複数のファイルに分かれたプロジェクトも公開できますか？

dochostでは公開できません。dochostが扱えるのは1つのHTMLファイルかMarkdownファイルだけです。複数ファイルのプロジェクトはNetlify DropやGitHub Pagesなどを使うか、1ファイルにまとめてもらってから公開してください。