--- title: "崩れないZIPのフォルダ構成と圧縮のやり方" description: "ZIP公開で画像切れやレイアウト崩れを防ぎたい方向け。index.htmlの位置、相対パス、不要ファイル除外、圧縮後の確認手順を実務目線で整理します。" image: "https://giga-site.com/og-image.png" canonical: "https://giga-site.com/articles/zip-folder-structure" markdown: "https://giga-site.com/articles/zip-folder-structure/index.md" category: "ZIP公開" publishedAt: "2026-06-21" updatedAt: "2026-06-27" readingMinutes: 8 --- # 崩れないZIPのフォルダ構成と圧縮のやり方 ZIPでサイト一式を公開したのに、画像が出ない・レイアウトが崩れる。その原因の大半は、ファイルの中身ではなくフォルダ構成と圧縮のやり方にあります。この記事では、展開後も崩れないZIPの組み方を、入口ファイルの位置・階層・パス・不要ファイルの観点から具体的に整理します。 > Source HTML: https://giga-site.com/articles/zip-folder-structure > Article index: https://giga-site.com/articles/index.md ## なぜZIPは「圧縮のやり方」で崩れるのか ZIPで公開する仕組みはシンプルで、アップロードされたZIPを展開し、その中の入口ファイル（多くはindex.html）を起点としてサイトを表示します。つまり、展開したときにどんなフォルダ構成になるかが、表示の成否をそのまま決めます。 ここで見落としやすいのが、「同じファイルを入れても、圧縮のやり方が違うと展開後の階層が変わる」という点です。フォルダごと圧縮するか、中身を選んで圧縮するかで、入口ファイルが浅い位置に来たり、一段深いフォルダの中に潜ってしまったりします。崩れる・崩れないの分かれ目は、たいていこの一手間です。 ## 崩れない基本構成：入口ファイルを最上位に 理想は、ZIPを開いた直後の位置（最上位）にindex.htmlがあり、そこから参照するファイルが同じ階層かサブフォルダに整理されている状態です。入口が深い階層に埋もれていると、トップとして認識されず真っ白なページになることがあります。 画像・CSS・JavaScriptは、用途ごとにフォルダで分けておくと、参照パスが安定して管理もしやすくなります。下のような構成を目安にすると崩れにくくなります。 - index.html（入口。ZIPを開いてすぐの位置に置く） - images / assets（画像・アイコン・SVGなどをまとめる） - css（スタイルシートをまとめる） - js（JavaScriptをまとめる） ## 崩れないZIP構成のOK/NG例 崩れないZIPのフォルダ構成と圧縮のやり方では、ZIPの中身が正しくても、階層が1つずれるだけで画像やCSSが読み込めなくなります。圧縮する前に、公開用フォルダだけを切り出して確認します。 Windows/Macどちらでも、不要な隠しファイルや作業ファイルを入れないことが大切です。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。 - OK: index.html と assets/images/css/js が想定した相対パスで並んでいる - NG: ZIPの中にさらに不要な親フォルダがあり、index.htmlの場所が分かりにくい - NG: __MACOSX、.DS_Store、作業中PSD、秘密情報入りメモを同梱している - 確認: アップロード後のURLで画像・CSS・リンクを実際に開く ## ありがちな失敗：二重フォルダと相対パスのずれ もっとも多い失敗が、フォルダごと圧縮したことで「site.zip を開くと site フォルダがあり、その中にようやくindex.htmlがある」という二重構造です。入口が一段深くなり、表示の起点を見つけにくくなります。中身を直接選んで圧縮すると、この入れ子を避けられます。 次に多いのが参照パスのずれです。「/Users/」から始まる絶対パスや、開発サーバー前提のパスは、公開後に画像やスタイルを読み込めません。「./style.css」「images/logo.png」のように、index.htmlから見た相対パスになっているかを確認しましょう。 - 二重フォルダ（zipの中にもう1階層フォルダがある）を作らない - 絶対パスを使わず、index.html起点の相対パスにする - フォルダ名・ファイル名の大文字小文字を参照と一致させる - 日本語名やスペース入りのファイル名はトラブルの元になりやすい ## ZIPに入れないものを先に削る 静的に公開するために必要なのは、ブラウザが読み込むHTML・CSS・JS・画像などの一式です。それ以外の開発用ファイルやOSが自動生成するファイルは、入れないほうが構成がすっきりし、容量も軽くなります。 とくに秘密情報の混入には注意してください。APIキーや認証情報を含むファイルが残ったまま公開されると、リンクを知る相手に中身が渡ってしまいます。圧縮する前に、不要・危険なものを取り除く習慣をつけると安全です。 - APIキーや認証情報を含む .env などの設定ファイル - node_modules やビルド前ソースなど、公開に不要な開発ファイル - macOSが自動生成する __MACOSX フォルダや .DS_Store - 個人情報やテスト用の実データ ## ギガサイト便で崩れないZIPを公開する手順 構成を整えたら、実際に公開して確認するのが確実です。ギガサイト便は、HTMLやZIP一式をアップロードするだけで認証付きの共有URLを発行でき、サーバー構築やデプロイ設定は要りません。次の順で進めると、崩れに早く気づけます。 1. 公開に不要なファイルと秘密情報を削除する 2. index.htmlが最上位に来るよう、二重フォルダを避けて圧縮する 3. 圧縮後、自分で一度解凍し、開いてすぐindex.htmlがあるか確認する 4. トップページにZIPをドロップして共有URLを発行する 5. アップロード時のセキュリティスキャンの警告（APIキーらしき文字列など）を確認する 6. 発行されたURLを開き、画像・レイアウト・スマホ表示を最終チェックする ## 差し替えと公開範囲は後から調整できる 公開してから崩れに気づいても、同じURLのままファイルを差し替えられるため、リンクを送り直す必要はありません。構成を直したZIPを上げ直すだけで、相手が見るURLはそのまま使えます。 無料アカウントを作ると、サイト一覧から管理でき、公開期限や認証方式も細かく設定できます。リンクを知る人だけに見せる、パスワードをかける、指定したメール宛の本人確認を挟む、会社ドメインを持つ人に限定する、といった形で、見せたい相手に合わせて公開範囲を絞れます。 ## 圧縮後に見るべき2つの確認画面 ZIPを作った直後は、アップロードする前に2つの画面を確認します。1つ目はZIPの中身一覧です。開いてすぐindex.htmlが見えるか、不要な親フォルダや隠しファイルが混ざっていないかを見ます。 2つ目は実際の公開URLです。手元でHTMLを開けても、公開URLでは相対パスや大文字小文字の違いで画像やCSSが切れることがあります。ZIPの中身確認と公開URL確認を分けると、原因の切り分けが速くなります。 - ZIP内確認: 直下にindex.htmlがあり、assets/images/css/jsが想定どおり並ぶ - 不要物確認: __MACOSX、.DS_Store、.env、作業ファイルを入れない - 公開URL確認: 画像、CSS、リンク、スマホ表示を実際に開く - 差し替え判断: 崩れを見つけたら同じURLのまま修正版ZIPへ置き換える ## アップロード前にZIPをほどいて確認する ZIPは、圧縮する前のフォルダではなく、圧縮後のZIPを一度展開して確認するのが確実です。圧縮操作の違いで、index.htmlが一段深いフォルダに入ったり、不要な隠しファイルが混ざったりすることがあります。 展開した直後の最上位にindex.htmlがあり、CSS・JS・画像フォルダが想定どおり並んでいれば、共有先でも崩れにくくなります。手元の元フォルダだけでなく、実際にアップロードするZIPそのものを確認しましょう。 - ZIPを別の一時フォルダへ展開する - 最上位にindex.htmlがあるか確認する - assets、images、css、jsなどの相対関係が変わっていないか見る - 不要な__MACOSX、.DS_Store、作業メモ、元データが混ざっていないか確認する ## よくある質問 ### ZIPはフォルダごと圧縮すればいいですか？それとも中身を選んで圧縮しますか？ 中身を選んで圧縮するほうが安全です。フォルダごと圧縮すると、展開後に余分な一段（二重フォルダ）ができ、入口のindex.htmlが深い位置に潜ってしまうことがあります。圧縮後に自分で解凍し、開いてすぐindex.htmlがあるか確かめてください。 ### index.htmlがサブフォルダの中にあっても公開できますか？ 入口ファイルが深い階層にあると、トップとして表示されないことがあります。可能であれば、ZIPを開いてすぐの最上位にindex.htmlを置くと確実です。 ### 手元では表示できるのに、公開すると画像だけ出ないのはなぜですか？ 多くは参照パスのずれが原因です。index.htmlから見た相対パスになっているか、フォルダ名・ファイル名の大文字小文字が参照と一致しているかを確認してください。日本語名やスペース入りの名前も読み込めない場合があります。 ### 公開後に構成ミスに気づいたら作り直しですか？ 作り直す必要はありません。構成を直したZIPをアップロードし直せば、同じURLのまま内容を差し替えられます。共有済みのリンクをそのまま使えるので、送り直しも不要です。 ### ZIPを作る前に何を確認すべきですか？ index.htmlの場所、CSS/画像/JSの相対パス、不要な隠しファイル、秘密情報の混入を確認します。圧縮後ではなく、公開用フォルダを作った段階で一度ブラウザ表示してください。 ### ZIPをアップロードする前にローカルで開ければ十分ですか？ ローカル確認だけでは不十分です。手元では絶対パスやキャッシュで表示できても、公開URLでは画像やCSSが切れることがあります。ZIPの中身を確認したうえで、アップロード後のURLでも画像・CSS・スマホ表示を確認してください。 ### 圧縮前ではなく圧縮後のZIPを確認する理由は？ 圧縮の仕方によって、入口のindex.htmlが一段深いフォルダに入ったり、不要な隠しファイルが混ざったりするためです。実際にアップロードするZIPを展開して確認すると、公開後の表示崩れを防ぎやすくなります。 ## 関連記事 - [ZIPサイトをそのまま公開する方法](https://giga-site.com/articles/zip-site-publish/index.md) - [ZIPの最上位フォルダが原因でindex.htmlが見つからないときの直し方](https://giga-site.com/articles/zip-top-folder-howto/index.md) - [distフォルダだけをZIPにしてHTMLを共有する方法](https://giga-site.com/articles/zip-dist-folder-howto/index.md) - [ZIP公開で同梱を避けるべきファイルと除外のやり方](https://giga-site.com/articles/exclude-files-from-zip/index.md) - [複数のHTMLファイルをZIPでまとめて公開する方法](https://giga-site.com/articles/zip-multiple-html/index.md) - [画像フォルダ込みのサイトをZIPで公開する方法](https://giga-site.com/articles/zip-with-images/index.md) ```json { "@context": "https://schema.org", "@type": "Article", "headline": "崩れないZIPのフォルダ構成と圧縮のやり方", "description": "ZIP公開で画像切れやレイアウト崩れを防ぎたい方向け。index.htmlの位置、相対パス、不要ファイル除外、圧縮後の確認手順を実務目線で整理します。", "datePublished": "2026-06-21", "dateModified": "2026-06-27", "mainEntityOfPage": "https://giga-site.com/articles/zip-folder-structure", "url": "https://giga-site.com/articles/zip-folder-structure", "inLanguage": "ja", "image": "https://giga-site.com/og-image.png", "articleSection": "ZIP公開", "author": { "@type": "Organization", "name": "ギガサイト便" }, "publisher": { "@type": "Organization", "name": "ギガサイト便" }, "mainEntity": [ { "@type": "Question", "name": "ZIPはフォルダごと圧縮すればいいですか？それとも中身を選んで圧縮しますか？", "acceptedAnswer": { "@type": "Answer", "text": "中身を選んで圧縮するほうが安全です。フォルダごと圧縮すると、展開後に余分な一段（二重フォルダ）ができ、入口のindex.htmlが深い位置に潜ってしまうことがあります。圧縮後に自分で解凍し、開いてすぐindex.htmlがあるか確かめてください。" } }, { "@type": "Question", "name": "index.htmlがサブフォルダの中にあっても公開できますか？", "acceptedAnswer": { "@type": "Answer", "text": "入口ファイルが深い階層にあると、トップとして表示されないことがあります。可能であれば、ZIPを開いてすぐの最上位にindex.htmlを置くと確実です。" } }, { "@type": "Question", "name": "手元では表示できるのに、公開すると画像だけ出ないのはなぜですか？", "acceptedAnswer": { "@type": "Answer", "text": "多くは参照パスのずれが原因です。index.htmlから見た相対パスになっているか、フォルダ名・ファイル名の大文字小文字が参照と一致しているかを確認してください。日本語名やスペース入りの名前も読み込めない場合があります。" } }, { "@type": "Question", "name": "公開後に構成ミスに気づいたら作り直しですか？", "acceptedAnswer": { "@type": "Answer", "text": "作り直す必要はありません。構成を直したZIPをアップロードし直せば、同じURLのまま内容を差し替えられます。共有済みのリンクをそのまま使えるので、送り直しも不要です。" } }, { "@type": "Question", "name": "ZIPを作る前に何を確認すべきですか？", "acceptedAnswer": { "@type": "Answer", "text": "index.htmlの場所、CSS/画像/JSの相対パス、不要な隠しファイル、秘密情報の混入を確認します。圧縮後ではなく、公開用フォルダを作った段階で一度ブラウザ表示してください。" } }, { "@type": "Question", "name": "ZIPをアップロードする前にローカルで開ければ十分ですか？", "acceptedAnswer": { "@type": "Answer", "text": "ローカル確認だけでは不十分です。手元では絶対パスやキャッシュで表示できても、公開URLでは画像やCSSが切れることがあります。ZIPの中身を確認したうえで、アップロード後のURLでも画像・CSS・スマホ表示を確認してください。" } }, { "@type": "Question", "name": "圧縮前ではなく圧縮後のZIPを確認する理由は？", "acceptedAnswer": { "@type": "Answer", "text": "圧縮の仕方によって、入口のindex.htmlが一段深いフォルダに入ったり、不要な隠しファイルが混ざったりするためです。実際にアップロードするZIPを展開して確認すると、公開後の表示崩れを防ぎやすくなります。" } } ] } ```