assetsフォルダのパス崩れを防ぐZIP構成

起きる症状

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と認証を混同せず、必要なら両方設定する