---
title: "ZIPの最上位フォルダが原因でindex.htmlが見つからないときの直し方"
description: "ZIPに最上位フォルダが挟まってindex.htmlが見つからないエラーに困っている方向けに、正しいZIP構成・圧縮前チェック・アップロード後確認の手順を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/zip-top-folder-howto"
markdown: "https://giga-site.com/articles/zip-top-folder-howto/index.md"
category: "ZIP公開"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# ZIPの最上位フォルダが原因でindex.htmlが見つからないときの直し方

ZIPを展開したとき最上位にフォルダが1つあり、その中にindex.htmlが入っている構成はよくあります。しかしギガサイト便を含む多くのHTMLホスティングサービスはZIPの直下にindex.htmlを期待するため、余分なフォルダが1段挟まるだけでページが表示されない404エラーになります。

> Source HTML: https://giga-site.com/articles/zip-top-folder-howto
> Article index: https://giga-site.com/articles/index.md

## 起きる症状

アップロード直後に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と認証を混同せず、必要なら両方設定する

## よくある質問

### VSCodeの拡張でフォルダをZIPに圧縮した場合も最上位フォルダ問題が起きますか？

拡張によって異なりますが、フォルダを右クリックして圧縮する操作はフォルダごと包む形になることが多いです。圧縮後に unzip -l で構成を確認することを推奨します。

### index.htmlをZIP直下に置いたのに404になる場合、他に原因はありますか？

ファイル名の大文字・小文字が原因になることがあります。Index.htmlやINDEX.HTMLはLinuxサーバーではindex.htmlと別ファイルとして扱われます。ファイル名を小文字のindex.htmlに統一してください。

### ZIPの中に複数のHTMLファイルがある場合、どれが最初に表示されますか？

ほとんどのホスティングサービスはZIP直下のindex.htmlをデフォルトページとして表示します。index.htmlが存在しない場合はエラーになるか、ファイル一覧が表示されます。

## 関連記事

- [distフォルダだけをZIPにしてHTMLを共有する方法](https://giga-site.com/articles/zip-dist-folder-howto/index.md)
- [クライアントレビュー前にZIPを点検するチェックリスト](https://giga-site.com/articles/zip-before-client-review-howto/index.md)
- [AI生成HTMLの出力フォルダを公開用ZIPに整える方法](https://giga-site.com/articles/zip-ai-output-cleanup-howto/index.md)
- [Macで作ったZIPに隠しファイルが混ざるときの確認方法](https://giga-site.com/articles/zip-macos-hidden-files-howto/index.md)
- [Windowsで作ったZIPの文字コードトラブルを避ける方法](https://giga-site.com/articles/zip-windows-encoding-howto/index.md)
- [node_modulesを含めずに公開用ZIPを作る方法](https://giga-site.com/articles/zip-node-modules-howto/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ZIPの最上位フォルダが原因でindex.htmlが見つからないときの直し方",
  "description": "ZIPに最上位フォルダが挟まってindex.htmlが見つからないエラーに困っている方向けに、正しいZIP構成・圧縮前チェック・アップロード後確認の手順を解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/zip-top-folder-howto",
  "url": "https://giga-site.com/articles/zip-top-folder-howto",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ZIP公開",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "VSCodeの拡張でフォルダをZIPに圧縮した場合も最上位フォルダ問題が起きますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "拡張によって異なりますが、フォルダを右クリックして圧縮する操作はフォルダごと包む形になることが多いです。圧縮後に unzip -l で構成を確認することを推奨します。"
      }
    },
    {
      "@type": "Question",
      "name": "index.htmlをZIP直下に置いたのに404になる場合、他に原因はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ファイル名の大文字・小文字が原因になることがあります。Index.htmlやINDEX.HTMLはLinuxサーバーではindex.htmlと別ファイルとして扱われます。ファイル名を小文字のindex.htmlに統一してください。"
      }
    },
    {
      "@type": "Question",
      "name": "ZIPの中に複数のHTMLファイルがある場合、どれが最初に表示されますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ほとんどのホスティングサービスはZIP直下のindex.htmlをデフォルトページとして表示します。index.htmlが存在しない場合はエラーになるか、ファイル一覧が表示されます。"
      }
    }
  ]
}
```