ChatGPTのHTMLを「コードのまま」渡すと起きること
ChatGPTに「1枚もののLPを作って」と頼むと、HTMLとCSS、場合によってはJavaScriptを含むコードが返ってきます。この出力をそのままチャットやメールに貼り付けて送る人は多いのですが、受け取った側はコードを保存して自分でブラウザで開く手間が発生します。非エンジニアの相手なら、ここで止まってしまうことも珍しくありません。
また、コードを貼り付けただけでは「実際にどう表示されるか」が伝わりません。レイアウトの確認やフィードバックをもらいたい場面では、相手が手元で再現できないと議論が進まなくなります。見せたいのは完成形の画面であって、ソースコードそのものではないはずです。
そこで有効なのが、生成したHTMLを閲覧可能なURLに変えて渡す方法です。URLをクリックするだけで相手のブラウザに表示されるため、受け手の操作はほぼゼロになります。
HTMLをURLにして共有する選択肢
生成したHTMLを公開URLにする手段はいくつかあります。代表的なのは、静的サイトのホスティングサービスにファイルを置く方法です。表示の自由度は高い一方、初めての人にはアカウント作成やデプロイ設定の学習が必要で、ちょっと見せたいだけの用途には重く感じられます。
クラウドストレージの共有リンクで渡すという発想もありますが、HTMLファイルがそのまま画面として開かれず、ダウンロードやプレビュー表示になってしまうケースがあります。とくに複数ファイル構成だと、画像やCSSへのリンクが切れて崩れた状態で見えることがあります。
「とにかく完成形の画面をURLで見せたい」という目的に絞るなら、HTMLやファイル一式をアップロードするだけで共有URLが発行されるサービスを使うのが手軽です。サーバーの準備やデプロイ設定が要らないため、思い立ってから共有までの距離が短く済みます。
AI生成HTMLを共有する前の安全チェック
ChatGPTで作ったHTMLを共有では、AIツールの画面上で完成して見えても、共有用HTMLとして安全とは限りません。外部script、form送信先、APIキーらしき文字列、画像パス、ダミーデータではない個人情報を分けて確認します。
ツールの書き出し形式や共有機能は時期・プラン・作り方で変わります。この記事では特定機能の有無を断定せず、静的HTMLやZIPとして取り出せた成果物を安全に見せる前提で進めます。安全チェックが終わったら、HTMLまたはZIPをアップロードし、必要に応じて認証と期限を付けたURLとして共有します。
- 外部送信: form action、fetch、script src、iframeの向き先を確認する
- 秘密情報: APIキー、トークン、社内URL、顧客名が残っていないか検索する
- 表示再現: 画像・CSS・フォントが公開URLでも読み込めるか見る
- 共有設定: 相手、期限、認証方式、差し替え時の連絡方法を決める
画像やCSSが崩れないようにファイルをまとめる
ChatGPTの出力を共有するとき、最もよくあるトラブルが「画像が表示されない」「デザインが当たっていない」です。原因の多くは、HTMLが参照している画像やCSS、JSのファイルが一緒にアップロードされていないことにあります。
HTMLが外部ファイルを読み込む構成になっている場合は、関連ファイルをすべて含めてZIP（HTML/CSS/JS/画像一式）にまとめると、相対パスを保ったまま公開できます。画像をHTML内に埋め込まず別ファイルにしているなら、フォルダ構成ごと固めるのが安全です。
- 画像はHTMLが参照するパスのまま同じ階層に置く
- CSSやJSを外部ファイル化しているなら一緒にまとめる
- フォルダ構成を崩さずZIPにする
- 公開後に画像とレイアウトが出ているか自分で開いて確認する
ギガサイト便でChatGPTのHTMLを共有する手順
ここでは、アップロードだけで共有URLを発行できる「ギガサイト便」を例に、実際の流れを紹介します。ChatGPTで生成した単体のHTMLでも、画像を含むZIP一式でも同じように扱えます。
急ぎで一度だけ見せたい場合は、トップページにファイルをドロップすれば登録なしでもその場で共有URLが発行されます。この匿名公開は検索に出ないようnoindexが付き、公開期限は7日間、アクセス回数にも制限があります。継続的に管理したいなら無料アカウントを作るのがおすすめです。
- ChatGPTの出力をHTMLファイルとして保存する
- 画像やCSSがある場合はフォルダごとZIPにまとめる
- ギガサイト便のトップにファイルをドロップする
- 発行された共有URLをブラウザで開いて表示を確認する
- アカウント作成後は誰に見せるかの認証方式を選ぶ
- 必要に応じて公開期限を設定し、相手にURLを送る
誰に見せるかと、いつまで見せるかを決める
共有URLは便利な一方、リンクが意図せず広まるリスクもあります。社外秘のLPや個人情報を含むモックを扱うなら、見せる相手を絞る仕組みがあると安心です。ギガサイト便では、リンクを知る人なら誰でも見られる方式に加えて、パスワード認証、指定アドレス宛のワンタイムで本人確認するメール認証、特定の会社ドメインを持つ人だけに限定する方式から選べます。
公開期限を設定しておくと、期限切れで自動的に閲覧できなくなるため、レビューが終わったあとに古いリンクが生き続ける事態を防げます。なお、検索除けのnoindexはあくまで検索結果に出にくくするための設定であり、アクセスを制御するものではありません。本当に見せたい相手を限定するなら、認証方式を併用してください。
ChatGPTの出力には、サンプルとして書かれたAPIキーらしき文字列や、外部スクリプトへの依存が紛れ込むことがあります。アップロード時のセキュリティスキャンがこうした兆候を警告してくれるので、内容を確認したうえで公開できる点も、生成AIのコードを扱ううえで実務的です。
差し替えと運用をラクにする
レビューを重ねると、ChatGPTに修正を頼んでHTMLを作り直す場面が出てきます。このとき同じURLのままファイルを差し替えられると、相手にリンクを送り直す必要がなく、いつものURLを開けば最新版が見えるようになります。やり取りの往復が減り、確認のテンポが上がります。
公開URLの末尾のスラッグは編集でき、案件名や用途がわかる文字列にしておくと管理が楽になります。アクセスログを見れば、相手が開いたかどうかの目安にもなります。
ChatGPTで作ったHTMLは、コードのまま渡すと相手の手間が増えますが、URL化して見せる相手と期限を整えるだけで、伝わり方が大きく変わります。まずは手元の出力を保存して、画像ごとまとめて公開し、表示を一度自分の目で確かめるところから始めてみてください。
レビュー結果をChatGPTに戻しやすくするメモ
ChatGPTで作ったHTMLは、共有して終わりではなく、相手の指摘を次の生成・修正に戻すところまで設計すると作業が速くなります。URLを送るときに、どの画面のどこを見てほしいか、指摘はどの形式で返してほしいかを決めておくと、後からプロンプトに戻しやすくなります。
修正依頼をAIに渡すときは、抽象的な感想だけでなく、表示幅、対象セクション、期待する文言や動きをセットにします。レビューURLを固定しておけば、差し替え後も同じリンクで確認を続けられます。
- 指摘は「対象箇所・問題・希望する修正」の3点で集める
- スマホ表示とPC表示のどちらの指摘かを分ける
- 画像切れやリンク切れはスクリーンショットも添えてもらう
- 修正後は同じURLへ差し替え、確認依頼を短く送る
修正依頼にそのまま使える短いテンプレート
レビューで出た指摘をChatGPTに戻すときは、長い議事録をそのまま貼るより、対象・問題・期待する修正を短く分けるほうが安定します。共有URLを見た相手のコメントを、次のような型に整えてから渡すと、余計な作り直しを減らせます。
重要なのは、見た目の好みだけでなく、どの幅で、どのセクションで、何が起きているかを明示することです。修正後は同じURLに差し替え、相手には変更点だけを添えて再確認を依頼します。
- 対象: ファーストビュー、料金表、スマホ表示など
- 問題: 文字が小さい、画像が切れる、ボタンの意図が分からないなど
- 修正方針: 文言を短くする、余白を増やす、CTAを1つに絞るなど
- 確認方法: 同じ共有URLへ差し替え、変更点を箇条書きで送る
レビュー指摘をChatGPTへ戻すときの整理
共有URLでレビューを受けたあとは、指摘をそのままChatGPTに戻せる形に整理しておくと修正が速くなります。URLだけを渡すのではなく、どの画面のどの文言・余白・ボタンを直したいのかを箇条書きにすると、意図しない全面改変を防ぎやすくなります。
差し替え前提で共有している場合は、修正後のHTMLを同じURLへ上書きし、レビュー相手には「同じリンクで更新済み」と伝えます。リンクを何度も送り直さないだけで、確認履歴が散らばりにくくなります。
- 指摘箇所: ファーストビュー、料金表、CTA、スマホ表示などを明記する
- 期待する修正: 文言を短くする、余白を詰める、色を弱めるなど動詞で書く
- 変えたくない部分: レイアウト、ブランド色、既存の見出しなどを先に固定する
- 修正後は同じURLで差し替え、レビュー相手に更新済みと伝える
よくある質問
ChatGPTで作ったHTMLを相手に見せる一番簡単な方法は？
生成したHTMLをファイルとして保存し、共有URLを発行できるサービスにアップロードする方法が手軽です。相手はURLをクリックするだけで完成形の画面を確認でき、コードを保存して開く手間がかかりません。画像がある場合はまとめてアップロードするとレイアウトが崩れにくくなります。
共有したHTMLで画像が表示されないのはなぜ？
HTMLが参照している画像やCSSが一緒にアップロードされていないことが主な原因です。フォルダ構成を保ったままZIPにまとめて公開すると、相対パスが維持されて画像やデザインが正しく表示されます。公開後は自分で一度URLを開いて確認すると安心です。
ChatGPTのHTMLを特定の人にだけ見せることはできる？
はい、認証方式を選べるサービスを使えば閲覧者を絞れます。パスワード認証や、指定アドレス宛のワンタイムによるメール認証、特定の会社ドメインを持つ人だけに限定する方式などがあります。社外秘の内容を扱うときは、検索除けだけに頼らず認証を併用してください。
公開したHTMLを後から修正したいときはどうする？
同じURLのままファイルを差し替えられるサービスなら、修正版をアップロードするだけで最新の内容に切り替わります。リンクを送り直す必要がないため、ChatGPTに修正を頼みながらレビューを重ねる用途と相性が良いです。
AIツールで作ったHTMLはそのまま共有しても安全ですか？
そのまま共有せず、外部送信先、フォーム、APIキー、社内URL、画像パスを確認してからURL化します。ツールの共有機能や書き出し仕様は変わるため、最新画面も確認してください。
レビュー指摘をChatGPTに戻すときは、何を渡せばよいですか？
指摘文だけでなく、対象のHTML、どのセクションを直すか、希望する見た目や文言、スマホ/PCどちらの問題かを一緒に渡すと修正精度が上がります。共有URLを固定しておくと、修正版の確認も同じ流れで進められます。
ChatGPTにレビュー指摘を戻すとき、共有URLだけ送れば足りますか？
URLだけではAIが実際の差分や相手の意図を正確に拾えないことがあります。元のHTML、対象箇所、問題、希望する修正、スマホかPCかを短く添えると、修正後の出力をそのまま差し替えやすくなります。
レビュー指摘はどの形式でまとめると修正しやすいですか？
画面名、該当箇所、問題、希望する修正、変えたくない部分を箇条書きにすると扱いやすくなります。必要ならHTMLの該当部分も添えると、ChatGPTに戻したときの修正精度が上がります。