---
title: "ネストしたindex.htmlを公開前に直す方法"
description: "ZIPを展開したらindex.htmlが深い階層に埋もれて公開に失敗した経験のあるWeb制作者向け。ネストが起きる仕組みから正しいZIPの作り方・確認方法まで解説し、再発を防ぐ手順が理解できる記事。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/zip-nested-index-howto"
markdown: "https://giga-site.com/articles/zip-nested-index-howto/index.md"
category: "ZIP公開"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# ネストしたindex.htmlを公開前に直す方法

フォルダをそのままZIP圧縮すると「project/dist/index.html」のように階層が深くなり、公開URLを開いたときに404エラーやディレクトリ一覧が表示されてしまう。この記事ではネストの発生原因を理解し、ZIP作成コマンドひとつで正しいパス構成に直す手順を説明する。

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

## 起きる症状

macOSでフォルダを右クリック→「圧縮」で作ったZIPは、ZIP内に同名フォルダが一層生まれる。たとえば`site`フォルダを圧縮すると`site.zip/site/index.html`という構造になり、ギガサイト便がindex.htmlを探してもZIP直下に見つからずエラーになる。この症状は公開ボタンを押した直後の404で気づくことが多い。

ビルドツールによっては出力先が`dist/`や`out/`になっており、そのフォルダごとZIPにするとさらに深いネストになる。`unzip -l yourfile.zip | head -20`でZIP内の構造を事前確認すると、index.htmlが何階層目にあるかを圧縮前に把握できる。

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

## 正しい構成

ZIP直下にindex.htmlが来るのが正しい構成だ。ターミナルで`cd dist && zip -r ../site.zip .`と打つと、distフォルダの中身だけがZIPに収まりindex.htmlがルートに配置される。`cd`でフォルダに入ってから圧縮するのがポイントで、フォルダを外から圧縮するのとは結果が異なる。

Windowsの場合は7-Zipを使い、展開先フォルダの中身を選択してから「追加」で圧縮する。フォルダ自体を右クリックして圧縮すると余分な階層が生まれるため注意。作成後は`7z l site.zip`でリストを確認し、先頭にindex.htmlが表示されることを必ず確かめる。

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

## 圧縮前チェック

圧縮前にビルド出力フォルダ内で`ls -la`を実行し、index.htmlが存在することを確認する。存在しない場合はビルドコマンドが未実行か、出力先の設定が誤っている。Viteなら`vite build`、Create React Appなら`npm run build`を実行してdist/buildフォルダが生成されてからZIPを作る。

隠しファイル（`.env`や`.git`など）がビルド出力に混入していないか確認する。`.env`がZIPに入ると認証キーが漏れるリスクがある。`zip -r site.zip . -x '*.env' -x '.git/*'`のように除外パターンを指定して圧縮するのが安全だ。

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

## アップロード後確認

ギガサイト便にアップロードした後、プレビューURLのトップページ（`/`）が正しく表示されるかをシークレットウィンドウで確認する。404やディレクトリ一覧が出る場合は、ZIP内のindex.htmlのパスがルートにない証拠だ。その場合はZIPを作り直して再アップロードする。

サブページへのリンクが機能しているかも確認する。`about.html`へのリンクが`../about.html`になっていると、ZIPの構造変更後にパスが解決できなくなる。HTMLの相対パスはすべてZIPルートからの相対で書かれているかをgrepで確認（`grep -r '\.\./about' .`）してからZIPを作成する。

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

## よくある質問

### ViteやNext.jsのビルド出力をそのままZIPにする正しい方法は？

Viteは`dist/`、Next.jsの静的出力は`out/`が出力先です。それぞれのフォルダ内に移動してから`zip -r ../output.zip .`を実行することで、index.htmlがZIPルートに配置される正しい構成になります。

### GitHub ActionsでZIPを自動生成する場合もネストに注意が必要ですか？

必要です。`actions/upload-artifact`でフォルダを指定するとアーティファクトZIPに余分な階層が生まれることがあります。ワークフロー内で`cd dist && zip -r ../site.zip .`を実行してからアーティファクトとして保存すると安全です。

### index.htmlが2つある場合（ルートと子フォルダ）どちらが優先されますか？

ZIPルート直下のindex.htmlがエントリポイントとして使われます。子フォルダのindex.htmlはそのサブパスとして機能します。意図しない競合を避けるため、ルートのindex.htmlが唯一のエントリポイントになっているか事前に確認してください。

## 関連記事

- [クライアントレビュー前に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)
- [ZIPの最上位フォルダが原因でindex.htmlが見つからないときの直し方](https://giga-site.com/articles/zip-top-folder-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": "ネストしたindex.htmlを公開前に直す方法",
  "description": "ZIPを展開したらindex.htmlが深い階層に埋もれて公開に失敗した経験のあるWeb制作者向け。ネストが起きる仕組みから正しいZIPの作り方・確認方法まで解説し、再発を防ぐ手順が理解できる記事。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/zip-nested-index-howto",
  "url": "https://giga-site.com/articles/zip-nested-index-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": "ViteやNext.jsのビルド出力をそのままZIPにする正しい方法は？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Viteは`dist/`、Next.jsの静的出力は`out/`が出力先です。それぞれのフォルダ内に移動してから`zip -r ../output.zip .`を実行することで、index.htmlがZIPルートに配置される正しい構成になります。"
      }
    },
    {
      "@type": "Question",
      "name": "GitHub ActionsでZIPを自動生成する場合もネストに注意が必要ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "必要です。`actions/upload-artifact`でフォルダを指定するとアーティファクトZIPに余分な階層が生まれることがあります。ワークフロー内で`cd dist && zip -r ../site.zip .`を実行してからアーティファクトとして保存すると安全です。"
      }
    },
    {
      "@type": "Question",
      "name": "index.htmlが2つある場合（ルートと子フォルダ）どちらが優先されますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ZIPルート直下のindex.htmlがエントリポイントとして使われます。子フォルダのindex.htmlはそのサブパスとして機能します。意図しない競合を避けるため、ルートのindex.htmlが唯一のエントリポイントになっているか事前に確認してください。"
      }
    }
  ]
}
```