ギガサイト便
HTMLをURL化
ZIP公開

AI生成HTMLの出力フォルダを公開用ZIPに整える方法

ChatGPTやClaudeにHTMLを生成させると、出力フォルダにデバッグ用スクリプト・不要なnode_modulesの断片・APIキーが書かれた設定ファイルが混在していることがある。公開用ZIPに整える前に除外すべきファイルと最低限の構成チェックを知っておくと、情報漏洩やプレビューの崩れを事前に防げる。

6分で読める

起きる症状

AI生成プロジェクトをそのままZIPにすると`node_modules/`が含まれてZIPが数百MBになることがある。`du -sh node_modules/`で確認し、存在する場合は`zip -r output.zip . -x 'node_modules/*'`で除外する。静的HTMLのプレビューにnode_modulesは不要なので、必ずビルド後の出力フォルダ（distやout）だけをZIPにする。

AIが生成したコードには`console.log('DEBUG:', apiKey)`や`fetch('http://localhost:3000/api/...')`のようなローカル開発専用のコードが残りがちだ。これらはプレビューURL公開後にブラウザのコンソールに露出する。`grep -r 'console.log\|localhost\|127.0.0.1' . --include='*.js'`で洗い出し、公開前に削除またはコメントアウトする。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

正しい構成

AI出力フォルダの理想的な公開構成は「index.html + assets/フォルダ（CSS/JS/画像）」のシンプルな2層だ。AIがReactやViteプロジェクトを生成した場合は`npm run build`を実行してdist/フォルダを作り、そのdist/の中身だけをZIPにする。ビルド前のソースファイル（src/フォルダ）は公開ZIPに含める必要はない。

生成されたHTMLのhead要素に`<base href="/">`が書かれていると、ZIPプレビューでは全リソースが絶対パスで解決されて読み込み失敗になる。`<base>`タグを削除して相対パスに統一する。また`<link rel="stylesheet" href="/styles.css">`のようなルート絶対パスも`href="./styles.css"`に書き換える。

  • ZIP直下または指定階層にindex.htmlがあるか確認する
  • 相対パスの画像・CSS・JSが同梱されているか見る
  • 不要な隠しファイルや作業ファイルを除く
  • 圧縮前のフォルダ名に日本語や空白を入れすぎない

公開用ZIPに入れるもの・入れないもの

AIツールの出力フォルダには、ブラウザ表示に必要なファイルと、作業途中のファイルが同じ階層に混ざることがあります。公開用ZIPに入れるのは、相手のブラウザで表示するために必要なHTML、CSS、JavaScript、画像、フォントなどに絞ります。

迷ったら、ZIPに入れる候補だけを別フォルダへコピーし、そのフォルダ内のindex.htmlを開いて表示を確認します。そこで崩れる場合は、圧縮前にパスや不足ファイルを直してから共有します。

  • 入れる: index.html、参照しているCSS・JS・画像・フォント
  • 入れる: サブページがある場合は、リンク先のHTMLと同じ相対パスの素材
  • 入れない: node_modules、.git、.env、APIキーを含む設定ファイル
  • 入れない: 生成プロンプト、作業メモ、未使用のスクリーンショットや大きな元画像

圧縮前チェック

AIが生成したファイルに`.env`や`config.json`が含まれていないか確認する。OpenAI APIキーやSupabaseのシークレットがそのまま書かれていることがあり、ZIPに含めて共有すると鍵が漏洩する。`find . -name '.env' -o -name 'config.json' | xargs grep -l 'API_KEY\|SECRET'`で検索し、該当ファイルはZIPから除外する。

AIが生成したHTMLにはiframeやexternalスクリプトが埋め込まれていることがある。Googleタグマネージャー相当のコードが残っているとプレビューURLからトラッキングが発動する。`grep -r '<iframe\|<script src="http' . --include='*.html'`で確認し、クライアントへの共有前に削除するか、プレビュー専用の無害なURLに差し替える。

  1. HTML内の外部script・form action・iframeを確認する
  2. APIキーやトークンらしき文字列がないか検索する
  3. 画像・CSS・JSのパスが公開後も解決できるか見る
  4. noindexと認証を混同せず、必要なら両方設定する

アップロード後確認

ギガサイト便にアップロード後、ブラウザの開発者ツール→コンソールタブを開いてエラーが出ていないか確認する。`Failed to load resource: net::ERR_FILE_NOT_FOUND`が出ている場合はJSやCSSのパスがずれている。エラーメッセージのURLを見てZIP内のパスと照合し、相対パスを修正して再アップロードする。

AIが生成したフォームが動作しないことをクライアントに事前に伝えておく。ローカルAPIや仮のエンドポイントに向いている送信処理はプレビュー環境では動かない。プレビュー用に送信ボタンをクリック時にアラートで「デモ版のため送信は無効です」と表示するだけのJSに書き換えておくと、クライアントの誤解を防げる。

  1. HTML内の外部script・form action・iframeを確認する
  2. APIキーやトークンらしき文字列がないか検索する
  3. 画像・CSS・JSのパスが公開後も解決できるか見る
  4. noindexと認証を混同せず、必要なら両方設定する

よくある質問

AIが生成したReactアプリをビルドせずにZIPで共有できますか？

ビルドなしではJSXやES Modulesがブラウザで直接実行できないため、正常に表示されません。`npm run build`でdist/フォルダを生成してから、そのdist/内をZIPにして共有してください。

AIが出力したHTMLにAPIキーが埋め込まれていた場合、ZIPを公開する前に何をすべきですか？

まずAPIキーをサービス側で即座に無効化・再発行してください。ZIPからキーを削除しても、一度でも公開すると検索エンジンのキャッシュに残る可能性があります。削除後はgrepで同じキーが他ファイルに残っていないか確認してから再公開してください。

AIが生成したCSSにカスタムフォント（Google Fonts）の外部読み込みがあります。ZIPに同梱すべきですか？

クライアントレビュー用途であれば外部読み込みのままでも支障は少ないですが、オフライン確認や速度重視の場合はwoff2ファイルをダウンロードしてassets/fonts/フォルダに配置し、CSSのfont-faceで相対パス参照に切り替えると確実です。

AIツールの出力フォルダを丸ごとZIPにしてもよいですか？

まず中身を確認してからにしてください。node_modules、.env、作業メモ、生成プロンプト、不要な元画像などが混ざると、容量が増えるだけでなく情報漏えいの原因になります。公開に必要なHTML・CSS・JS・画像だけを別フォルダへ整理してからZIP化するのが安全です。

関連記事

ZIP公開

クライアントレビュー前にZIPを点検するチェックリスト

クライアントへのZIPプレビュー共有前に確認すべき事項をまとめたチェックリスト。表示・情報漏洩・認証設定の3観点から実務で起きがちなミスを網羅し、「これで送っていいか」を自己判断できるようになる記事。

6分で読める
ZIP公開

node_modulesを含めずに公開用ZIPを作る方法

node_modulesを含まずに公開用ZIPを作る方法に困っているフロントエンド開発者向けに、ビルド後のdist以下をZIPにする手順・構成確認・よくある落とし穴を解説します。

5分で読める
ZIP公開

distフォルダだけをZIPにしてHTMLを共有する方法

ビルドツールを使うフロントエンド開発者向けに、distフォルダだけをZIPにしてHTMLを安全に共有する手順・構成確認・アップロード後のチェック方法を解説します。

5分で読める
「ZIP公開」の記事をもっと見る →