ChatGPTの通常の共有機能は、プロトタイプやプレゼンテーションを相手に見せるだけなら十分です。しかし、提案書、投資家向けプレゼンテーション、クライアント向けプロトタイプ、レポートでは、それだけでは足りないことがあります。閲覧アクティビティを想定した受信者に紐付けたい、閲覧前にメールアドレスを取得したい、承認済みの外部メールアドレスだけにアクセスを限定したい、リンクに有効期限を設定したい、どのページやセクションが注目されたか確認したい、といった要件があるためです。
そこで役立つのが、HTMLをトラッキングリンクとして共有できるサービスです。ChatGPTにダウンロード可能なHTMLファイルを1つ生成してもらい、そのファイルをサービスにアップロードして、受信者ごとにトラッキングリンクを送ります。
HummingDeckは私たちのプロダクトです。このガイドでは、ChatGPTがダウンロード可能なHTMLファイルを生成した後の共有レイヤーとしてHummingDeckを使います。
トラッキング可能なHTMLリンクで追加できること
| 必要なこと | 共有レイヤーに必要な機能 |
|---|---|
| エンゲージメントを想定した受信者に紐付ける | 受信者ごとに分けたパーソナルリンク |
| 閲覧前にメールアドレスを取得する | Email Captureによる閲覧前のメール入力 |
| 承認済みの外部メールアドレスだけにアクセスを限定する | 認証済みメールアドレスの許可リスト |
| 自動または手動でアクセスを終了する | リンクの有効期限と手動での無効化 |
| 新しいリンクを送らずにページを更新する | 既存の共有リンクを維持したままHTMLを再アップロード |
| 何が注目されたか把握する | ページまたはセクション別の閲覧時間、完了率、閲覧フロー |
HummingDeckは、アップロードしたHTMLファイルにこれらの機能を追加します。パーソナルリンク、基本的な閲覧トラッキング、ファイルの差し替え、手動での無効化はFreeで利用できます。ページまたはセクション別の閲覧時間とリンクの有効期限はStarterから、Email CaptureとRestricted AccessはProから利用できます。HummingDeckのプランを比較してください。
公開URLだけが必要なら、単一HTMLファイルをホストして共有する方法で8つの選択肢を比較しています。受信者単位の管理が必要なら、このまま読み進めてください。
この方法は静的ページ向けです。公開中のChatGPT Sitesがサインイン、保存データ、決済、サーバーコードに依存している場合、そのバージョンはホストしたままにし、HTMLはレビュー用コピーとして使ってください。
ChatGPTのページを1つのHTMLファイルにする
ChatGPTは、生成結果をChatGPT Sites、CanvasやHTML Preview、または生成ファイルとして表示することがあります。HummingDeckに必要なのはファイルです。ChatGPT SitesのURLやCanvasの共有リンクはインポートできません。ページを作成したチャットに戻り、次のように静的コピーを依頼します。
最新バージョンを、ダウンロード可能な単一の自己完結型 index.html ファイルとして返してください。
サーバーがなくても、レイアウトとブラウザ上の操作が機能するようにしてください。
外部の画像、フォント、アイコン、スクリプト、その他のアセットを埋め込むか置き換え、オフラインでもファイルが動作するようにしてください。
APIキー、データベース、サインイン、バックエンドを必要とする要素は削除するか置き換えてください。
コードブロックだけではなく、ダウンロード可能なファイルとして index.html を返してください。
ダウンロード操作付きの生成済み.htmlファイルが表示されたら、ダウンロードし、拡張子.htmlを維持します（ファイル生成のドキュメント）。HTML Previewだけが表示された場合は、ダウンロード可能な.htmlファイルか、完全なHTMLソースを返すように依頼してください。以下の手動保存は、完全なソースが表示されている場合にだけ使います。
ChatGPTが完全なHTMLをコードブロックでしか返さない場合は、次の手順で保存します。
<!doctype html>または<html>から、末尾の</html>タグまで、ドキュメント全体をコピーします。- プレーンテキストエディターに貼り付けます。
- UTF-8エンコーディングで
index.htmlとして保存します。 - エディターがファイル名の末尾に
.txtを追加していないことを確認します。
2026年8月7日の検証では、ChatGPT SitesにHTMLのエクスポート機能は表示されませんでした。そのため、元のチャットで生成済みのindex.htmlを依頼しました。このファイルはオフラインでも、HummingDeckにアップロードした後でも動作しました。
ChatGPTがpackage.jsonを含むReactまたはViteプロジェクトを返した場合、それはビルドとデプロイが必要なソースコードです。稼働中のバックエンドを必要としないレビュー用コピーで十分な場合にだけ、静的なindex.htmlを1つ生成するよう依頼してください。
アップロード前にHTMLをテストする
ダウンロードしたファイルをブラウザで開き、受信者と同じ操作をして確認します。
- ページ全体を開いて確認します。 生のコードが表示される場合、ファイル名が
index.html.txtになっているか、マークアップが不完全であることがほとんどです。すべてのスライド、セクション、結果画面を確認してください。 - 操作とアセットをオフラインでテストします。 インターネット接続を切り、ナビゲーション、タブ、計算ツール、フォーム、ボタン、画像、アイコン、フォントを確認します。
- ソースに機密情報がないか確認します。 HTMLを受け取った人は誰でもソースを確認できます。APIキー、パスワード、非公開トークンは絶対にファイルへ入れないでください。
オフラインでページが壊れる場合は、ChatGPTに戻り、不足している依存要素を埋め込むか置き換えるよう依頼します。
HummingDeckでトラッキングとアクセス制御を追加する
ファイル単体で正しく動作することを確認したら、そのファイルをHummingDeckにアップロードします。
- HummingDeckのHTML共有ページを開き、
.htmlファイルをアップロードします。 - アップロード後のバージョンをもう一度テストします。
- 受信者ごとにパーソナルリンクを1つ作成します。
- 必要なアクセス設定と有効期限を選び、リンクを送ります。
ChatGPTで改訂版を作成したら、ドキュメントの差し替えを使って新しい.htmlファイルをアップロードします。作成済みのリンクは新しいバージョンを開くため、再送する必要はありません。
トラッキングはアクティビティの紐付けであり、本人確認ではありません
Email Captureは、閲覧者が入力したメールアドレスを記録します。パーソナルリンクはアクティビティを想定した受信者に紐付けますが、リンクは転送できます。Restricted Accessが確認するのは許可リストに登録された受信トレイを利用できることまでで、法的な本人確認ではありません。ボットフィルタリングはスキャナーによるノイズを減らしますが、すべての自動アクセスを検知できるわけではありません。
HTML分析の比較記事では、サイト全体の集計分析と受信者単位のリンクの違いを詳しく説明しています。
よくあるエクスポートの問題を解決する
- ChatGPTがファイルではなくコードを返した: そのコードをダウンロード可能な
index.htmlとして返すよう依頼します。それでもコードブロックしか返らない場合は、上記の手動保存手順を使い、Markdownのコードフェンスは含めないでください。 - ファイルがテキストとして開く:
index.html.txtをindex.htmlに変更し、ブラウザでもう一度開きます。 - 画像やスタイルが表示されない: すべての外部アセットを埋め込むか置き換えるようChatGPTに依頼し、オフラインテストをやり直します。
- ボタンが動作しない: 動作しないコントロールを具体的に伝え、フレームワークやサーバーに依存しないブラウザ側のJavaScriptで書き直すよう依頼します。
- ページにサインイン、保存データ、決済、サーバーコードが必要: 稼働中のバージョンはChatGPT Sitesでホストしたままにします。静的HTMLはレビュー用モックとして明記して使えますが、稼働中のアプリを置き換えることはできません。
よくある質問
ChatGPTで作ったWebサイトをHTMLとしてエクスポートするには?
最新のページをダウンロード可能なindex.htmlファイルとして返すようChatGPTに依頼します。HTML Previewしか表示されない場合は、ダウンロード可能なファイルか、完全なHTMLソースを求めてください。コード全体が表示されていれば、プレーンテキストエディターにコピーし、index.htmlとして保存できます。
ChatGPT Sites、Canvas、生成されたHTMLページでも使えますか?
ChatGPTが完全な.htmlファイルを生成できれば、この手順を使えます。HummingDeckはChatGPT SitesのURLやCanvasの共有リンクをインポートできません。静的コピーにはブラウザ上のコンテンツや操作を残せますが、サインイン、保存データ、決済、データベース、サーバーコードなどのホスト機能は含められません。稼働中のアプリはChatGPT Sitesに残し、HTMLはレビュー用コピーとして共有してください。
新しいリンクを送らずにページを更新できますか?
改訂したページを別の.htmlファイルとしてエクスポートし、HummingDeckで差し替えを実行します。既存の共有リンクから新しいバージョンが開くため、リンクを作り直したり再送したりする必要はありません。
受信者にChatGPTまたはHummingDeckのアカウントは必要ですか?
通常のHummingDeckリンクなら、HummingDeckやChatGPTのアカウントは必要ありません。Restricted Accessでは、許可リストに登録された受信トレイを利用できることを確認しますが、受信者がHummingDeckアカウントを作成する必要はありません。
パーソナルリンクで誰が閲覧したか証明できますか?
パーソナルリンクでは、アクティビティを想定した受信者に紐付けられます。Restricted Accessを使うと、閲覧者がアクセス時に使った受信トレイを利用できることは確認できますが、法的な本人確認や、実際に誰が端末を操作したかの証明にはなりません。
ChatGPTのページを管理可能な共有リンクにする
体験を作るのはChatGPTです。HTMLとしてエクスポートすれば、通常の共有機能にはない配信管理を追加できます。
関連記事:
- 単一HTMLファイルをホストする: 8つのツールを比較: 公開ホスティングとトラッキング可能な共有サービスを比較できます。
- HTMLページに分析機能を追加する方法: 埋め込み型の分析と受信者ごとのリンクを比較できます。
- Anthropic組織外でClaude Designを共有する方法: Claude Designを単一HTMLとして書き出す専用の手順です。
- Claudeプロジェクトを共有する方法: ワークスペース、チャット、アーティファクト、エクスポートファイルから共有方法を選べます。
- PowerPointをオンラインで共有し閲覧を追跡する方法: リンク、添付ファイル、プレゼンテーションホスティングを比較できます。