ZIPの最上位フォルダが原因でindex.htmlが見つからないときの直し方

起きる症状

アップロード直後にURLを開くと「404 Not Found」または「index.htmlが見つかりません」というエラーが表示されます。ZIPを展開してみると my-site/index.html のようにフォルダが1段挟まっており、サービスが期待するindex.html（ZIPの直下）が存在しないのが原因です。Macの「フォルダをアーカイブ」機能はフォルダごと圧縮するためこの構成になりやすく、特に注意が必要です。

症状として現れるもう一つのパターンは、トップページは表示されるが画像やCSSが読み込まれないというケースです。これはZIP直下にindex.htmlがあるものの、相対パスで参照しているassetsフォルダがサブディレクトリに存在しない状態です。一見、最上位フォルダ問題とは異なりますが、ZIP構成の不備が原因である点は共通しています。

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

正しい構成

ZIP内の正しい構成は「ZIPを展開したとき最初に見えるファイルがindex.htmlであること」です。ツールで確認するには「unzip -l your-site.zip | head -20」を実行し、最初の行に index.html が表示されていればOKです。フォルダ名が先頭に来る場合は、そのフォルダの中身を選択してZIPに圧縮し直してください。

相対パスの画像・CSS・JSファイルも同じZIPに同梱する必要があります。img src でimages/hero.pngと書いてあれば、ZIPの中にimages/hero.pngが存在しなければなりません。HTMLファイルだけをZIPに入れてアセットを外部CDNに置く構成は問題ありませんが、その場合はパスをすべて絶対URLに変更してください。

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

圧縮前チェック

圧縮前にフォルダの中身を確認し、不要な隠しファイル（.DS_Store、.gitフォルダなど）を除外します。Macでは除外オプションを付けて圧縮するか、事前に削除コマンドで除去してから圧縮します。隠しファイルが入っていても表示上の問題はほぼありませんが、ファイルサイズが無駄に増えます。

圧縮前のフォルダ名に日本語・スペース・記号が含まれている場合、一部のZIPツールで展開時にパスが文字化けするリスクがあります。フォルダ名は英数字とハイフンのみ（例: my-site）にしてから圧縮することを推奨します。特にWindowsで圧縮してMacまたはLinux環境で展開するケースは文字コードの不一致が起きやすいため、英数字への変更が効果的です。

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

アップロード後確認

アップロード後はシークレットウィンドウでURLを開き、index.htmlが正しく表示されるかを確認します。表示された後、ブラウザの開発者ツールのNetworkタブで404エラーになっているリソース（画像・CSS・JS）がないかを確認してください。赤くなっているリクエストがあれば、そのファイルのパスをHTMLと照合して修正します。

スマホでもURLを開いて同様に確認します。スマホブラウザには開発者ツールがないため、PCで確認してから「同じURLをスマホで開いて表示崩れがないか」を目視で確認する形になります。主要なビューポート（375px幅のiPhone SE相当・390px幅のiPhone 14相当）でレイアウトが崩れていないかをチェックしてください。

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