---
title: "ZIPで共有するときのフォルダ構成とindex.htmlの置き方"
description: "ZIPをアップロードしたのに画像が出ない、CSSが効かないという問題の大半はフォルダ構成に原因があります。ルート直下へのindex.html配置と相対パスの保ち方を中心に、表示崩れを防ぐ構成を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/zip-folder-structure-for-upload"
markdown: "https://giga-site.com/articles/zip-folder-structure-for-upload/index.md"
category: "ハウツー"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# ZIPで共有するときのフォルダ構成とindex.htmlの置き方

ZIPをアップロードしたのに画像が出ない、CSSが効かないという悩みは、多くがフォルダ構成と入口ファイルの置き場所に原因があります。この記事では、ルート直下にindex.htmlを置く考え方と相対パスの保ち方を中心に、ギガサイト便で表示が崩れないZIPの作り方を整理します。

> Source HTML: https://giga-site.com/articles/zip-folder-structure-for-upload
> Article index: https://giga-site.com/articles/index.md

## 入口になるのはindex.html

ZIPを展開して公開したとき、URLを開いて最初に表示されるのはindex.htmlです。サイトの入口になるページは、必ずこの名前にしておきましょう。

index.htmlが見当たらないと、どのページを表示すればよいか分からず、思った画面が出ないことがあります。複数のHTMLがある場合でも、トップに見せたい一枚をindex.htmlにすると迷いません。

ファイル名は大文字小文字の違いにも注意してください。Index.htmlのように表記が異なると、環境によっては入口として扱われないことがあります。

## index.htmlはルート直下に置く

よくある失敗は、ZIPを作るときにフォルダごと圧縮してしまい、index.htmlがひとつ深い階層に入ってしまうことです。展開するとフォルダの中にさらにファイルがある状態になり、入口が見つかりにくくなります。

理想は、ZIPを展開した直後の一番上の階層、つまりルート直下にindex.htmlがある状態です。中身のファイルを選択してから圧縮すると、余計な親フォルダが付かずに済みます。

画像やCSSはサブフォルダにまとめても問題ありませんが、その場合はindex.htmlからの参照が正しく届くように相対パスを整えておく必要があります。

## 最短手順：まずこの3ステップで完了

ZIPで共有するときのフォルダ構成とindex.htmlの置き方は、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。

手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
- 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
- 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る

## 崩れないZIPを作る手順

フォルダ構成を意識しながらZIPを作る流れをまとめます。手順どおりに作れば、展開後に入口とファイル参照が崩れにくくなります。

1. 入口ページのファイル名をindex.htmlにする
2. index.htmlを一番上の階層に置く
3. 画像やCSSはサブフォルダに整理する
4. index.html内のリンクを相対パスで書く
5. 親フォルダごとではなく中身を選んで圧縮する
6. 展開して入口と画像・CSSが揃うかを確認する

## 相対パスで参照を保つ

画像やCSSへのリンクは、自分のパソコン内だけで通用する絶対パスではなく、相対パスで書くのが基本です。相対パスならファイル同士の位置関係さえ保てば、公開先が変わっても参照が崩れません。

例えば画像をimgフォルダにまとめたなら、index.htmlからはそのフォルダ名を起点にした相対的な書き方で指定します。階層を移動したらパスもそれに合わせて調整しましょう。

作業中はパソコンのローカルで開いて表示を確認しておくと、ZIPにする前に参照ミスを見つけられます。ローカルで崩れていれば公開しても崩れるため、事前チェックが効きます。

## 公開後の確認と差し替え

ZIPをドロップして共有URLが発行されたら、まずブラウザで開いて画像やCSSが正しく出ているかを確かめます。CDNのエッジ配信で表示は速いので、崩れがあればすぐ気づけます。

もし一部が崩れていても、フォルダ構成を直したZIPを作り直して、同じURLのまま差し替えられます。リンクを送り直さずに修正版へ更新できるため、構成の試行錯誤も気軽に行えます。

## よくある質問

### index.htmlはどこに置けばよいですか？

ZIPを展開した直後の一番上の階層、つまりルート直下に置くのが基本です。親フォルダの中に入ってしまうと入口として認識されにくくなるため、中身を選んで圧縮しましょう。

### 画像が表示されないのはなぜですか？

多くは絶対パスで書かれているか、フォルダの位置関係が崩れていることが原因です。相対パスに直し、画像フォルダとindex.htmlの位置関係を保つと表示されやすくなります。

### ファイル名は大文字でも問題ありませんか？

入口ファイルは小文字のindex.htmlにするのが無難です。表記が異なると環境によっては入口として扱われないことがあるため、大文字小文字を揃えておきましょう。

### 構成を間違えて公開してしまったら作り直しですか？

URLごと作り直す必要はありません。構成を直したZIPを用意すれば、同じURLのまま差し替えられます。リンクを送り直さずに修正版へ更新できます。

### 最短で進める場合でも省略しないほうがよい確認は何ですか？

不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。

## 関連記事

- [ZIPでまとめたサイトをアップロードして共有URLを発行する方法](https://giga-site.com/articles/publish-zip-uploaded-site/index.md)
- [AIにZIP構成を整理させる方法](https://giga-site.com/articles/how-to-ai-zip-structure-method/index.md)
- [AIにZIP構成を整理させるときの手順と注意点](https://giga-site.com/articles/how-to-ai-zip-structure-steps-note/index.md)
- [AIにZIP構成を整理させるためのチェックリスト](https://giga-site.com/articles/how-to-ai-zip-structure-checklist/index.md)
- [公開URLをX（Twitter）でシェアして見栄えよく見せる方法](https://giga-site.com/articles/share-on-x-twitter/index.md)
- [公開URLをFacebookでシェアする方法](https://giga-site.com/articles/share-on-facebook/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "ZIPで共有するときのフォルダ構成とindex.htmlの置き方",
  "description": "ZIPをアップロードしたのに画像が出ない、CSSが効かないという問題の大半はフォルダ構成に原因があります。ルート直下へのindex.html配置と相対パスの保ち方を中心に、表示崩れを防ぐ構成を解説します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/zip-folder-structure-for-upload",
  "url": "https://giga-site.com/articles/zip-folder-structure-for-upload",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ハウツー",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "index.htmlはどこに置けばよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ZIPを展開した直後の一番上の階層、つまりルート直下に置くのが基本です。親フォルダの中に入ってしまうと入口として認識されにくくなるため、中身を選んで圧縮しましょう。"
      }
    },
    {
      "@type": "Question",
      "name": "画像が表示されないのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "多くは絶対パスで書かれているか、フォルダの位置関係が崩れていることが原因です。相対パスに直し、画像フォルダとindex.htmlの位置関係を保つと表示されやすくなります。"
      }
    },
    {
      "@type": "Question",
      "name": "ファイル名は大文字でも問題ありませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "入口ファイルは小文字のindex.htmlにするのが無難です。表記が異なると環境によっては入口として扱われないことがあるため、大文字小文字を揃えておきましょう。"
      }
    },
    {
      "@type": "Question",
      "name": "構成を間違えて公開してしまったら作り直しですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "URLごと作り直す必要はありません。構成を直したZIPを用意すれば、同じURLのまま差し替えられます。リンクを送り直さずに修正版へ更新できます。"
      }
    },
    {
      "@type": "Question",
      "name": "最短で進める場合でも省略しないほうがよい確認は何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。"
      }
    }
  ]
}
```