---
title: "assetsフォルダのパス崩れを防ぐZIP構成"
description: "ZIPをアップロードしたときにassetsのパスが崩れて困っているWeb担当者向けに、正しいZIP構成の考え方・圧縮前の確認手順・アップロード後のデバッグ方法を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/zip-assets-path-howto"
markdown: "https://giga-site.com/articles/zip-assets-path-howto/index.md"
category: "ZIP公開"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# assetsフォルダのパス崩れを防ぐZIP構成

HTMLとassetsフォルダをまとめてZIPにしたはずなのに、画像が表示されなかったりCSSが当たらなかったりするのはパスの設定ミスが原因です。正しいZIP構成を作るための具体的な確認手順と、よくある失敗パターンを整理します。

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

## 起きる症状

ZIPをアップロードしてURLを開いたとき、ページ自体は表示されるが画像が壊れたアイコンになっていたり、CSSが全く当たらず素のHTMLが表示されたりすることがあります。ブラウザの開発者ツールのNetworkタブを開くと、assets/style.cssやassets/images/hero.pngへの404エラーが並んでいます。これはHTMLからの相対パスが正しいのに、ZIPの中に該当ファイルが存在しないか、階層が合っていない状態です。

もう一つよくある症状は、ローカルで開いたときは正常なのにアップロード後だけ崩れるケースです。ローカルのfile://プロトコルでは絶対パスが解決できていても、HTTPSで公開されると解決できなくなります。この場合はHTMLに絶対パスやローカルパスが混在しており、相対パスへの統一が必要です。

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

## 正しい構成

ZIP直下にindex.htmlとassetsフォルダが並んでいる構成が基本です。HTMLの中でassets/style.cssと書いてあれば、ZIPの中にassets/style.cssが存在している必要があります。unzip -l site.zipで確認したとき、index.htmlとassets/style.cssが同じ階層に見えればOKです。

パスは必ず相対パスで記述します。./assets/style.cssまたはassets/style.cssは正しい相対パスですが、/assets/style.css（ルート相対パス）はドメインのルートを指すため、サブパスに配置されたときにパスが合わなくなります。ビルドツールを使っている場合はbase設定を確認し、使っていない場合はHTMLを手動で検索して/assets/という文字列がないか確認してください。

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

## 圧縮前チェック

圧縮前にHTMLを開き、srcやhrefの全属性値を確認します。エディタの検索で「src="/」や「href="/」を検索すると、ルート相対パスを使っている箇所を一覧できます。見つかった箇所はすべて「./」始まりの相対パスに変更してください。URLが完全なhttps://始まりの絶対URLであればそのままで問題ありません。

画像ファイルのファイル名が大文字・小文字まで正しいかを確認します。HTMLでHero.pngと書いてあり、実際のファイル名がhero.png（小文字）だとLinuxサーバーでは404になります。Macのローカル環境はファイルシステムがデフォルトで大文字・小文字を区別しないため、ローカルでは動いてもアップロード後だけ壊れるという典型的なパターンです。

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

## アップロード後確認

アップロード後にURLを開いたら開発者ツールのNetworkタブをリロードで記録し、ステータスコードが200以外のリクエストをフィルタリングします。404になっているリソースのURLをコピーし、ZIPの構成（unzip -l site.zipで確認）と照合することで、どのファイルが欠けているか、パスが何段ずれているかを特定できます。

アセットが正しく読み込まれていることを確認したら、スマホでも同じURLを開いてレイアウトを確認します。特にRetina対応の2x画像や、スマホ専用のCSSブレークポイントが正しく機能しているかは実機でのみ確認できる項目です。PCでの確認後、スマホの実機でも最終確認を行ってください。

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

## よくある質問

### ビルドツールを使わず手書きのHTMLで、assetsフォルダの名前を変更しても問題ありませんか？

HTML内の参照パスと実際のフォルダ名が一致していれば、フォルダ名は何でも構いません。変更後はHTMLの全参照を新しいフォルダ名に合わせて更新し、ローカルで表示を確認してからZIPを作成してください。

### Google FontsのCSSを外部URLで読み込んでいる場合もZIPに含める必要がありますか？

外部CDNや外部URLから読み込むリソースはZIPに含める必要はありません。ただしオフライン環境やCORSの制限でフォントが表示されないことがあるため、必要に応じてフォントファイルをZIPに同梱してローカル参照に切り替えてください。

### SassでコンパイルしたあとのCSSファイルが大量にある場合、すべてZIPに含める必要がありますか？

HTMLから直接参照しているCSSファイルのみZIPに含めれば十分です。Sassのソースファイル（.scss）やソースマップ（.css.map）はブラウザの表示には不要なため、公開用ZIPからは除外してください。

## 関連記事

- [クライアントレビュー前に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": "assetsフォルダのパス崩れを防ぐZIP構成",
  "description": "ZIPをアップロードしたときにassetsのパスが崩れて困っているWeb担当者向けに、正しいZIP構成の考え方・圧縮前の確認手順・アップロード後のデバッグ方法を解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/zip-assets-path-howto",
  "url": "https://giga-site.com/articles/zip-assets-path-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": "ビルドツールを使わず手書きのHTMLで、assetsフォルダの名前を変更しても問題ありませんか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTML内の参照パスと実際のフォルダ名が一致していれば、フォルダ名は何でも構いません。変更後はHTMLの全参照を新しいフォルダ名に合わせて更新し、ローカルで表示を確認してからZIPを作成してください。"
      }
    },
    {
      "@type": "Question",
      "name": "Google FontsのCSSを外部URLで読み込んでいる場合もZIPに含める必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "外部CDNや外部URLから読み込むリソースはZIPに含める必要はありません。ただしオフライン環境やCORSの制限でフォントが表示されないことがあるため、必要に応じてフォントファイルをZIPに同梱してローカル参照に切り替えてください。"
      }
    },
    {
      "@type": "Question",
      "name": "SassでコンパイルしたあとのCSSファイルが大量にある場合、すべてZIPに含める必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTMLから直接参照しているCSSファイルのみZIPに含めれば十分です。Sassのソースファイル（.scss）やソースマップ（.css.map）はブラウザの表示には不要なため、公開用ZIPからは除外してください。"
      }
    }
  ]
}
```