ZIPに入れるべきファイル
基本は、index.htmlと、それが参照しているファイルを、同じフォルダ構成のままZIPにまとめるだけです。階層を変えずに圧縮するのがコツです。
- index.html（サイトの入口。必須）
- assets / images などの画像フォルダ
- CSS・JavaScriptファイル
- フォントやSVGなどの静的ファイル
相対パスでつながっているかを確認する
ZIP公開で崩れる原因の多くは、ファイルの参照パスです。「/Users/」から始まる絶対パスや、開発サーバーを前提にしたパスになっていると、公開後に画像やスタイルが読み込まれません。
「./style.css」や「images/logo.png」のように、index.htmlから見た相対パスで参照されているかを確認しましょう。手元でindex.htmlをダブルクリックして開き、正しく表示されれば、相対パスはおおむね問題ありません。
崩れない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・リンクを実際に開く
ZIPに入れてはいけないもの
圧縮するフォルダには、公開に不要なファイルや、外に出してはいけない情報を含めないようにします。とくに、秘密情報の混入には注意が必要です。
- APIキーや認証情報を含む .env などの設定ファイル
- node_modules やビルド前のソースなど、公開に不要な開発ファイル
- macOSが自動生成する __MACOSX フォルダや .DS_Store
- 個人情報や、テスト用の実データ
崩れないZIPの作り方
フォルダごと圧縮するか、中身を選んで圧縮するかで、展開後の階層が変わります。次の手順だと崩れにくくなります。
- index.htmlが最上位（ZIPを開いてすぐの位置）に来るようにする
- 不要ファイルを削除してからZIP化する
- 圧縮後、一度自分で解凍してindex.htmlがすぐ見つかるか確認する
- アップロードして、公開URLで表示を確認する
公開後に必ず確認すること
公開できたら、発行されたURLを実際に開いて最終確認します。手元では見えていた画像が、公開環境では出ないことがあるためです。
- 画像・アイコンがすべて表示されるか
- ページ内リンクが、相対パスで正しく動くか
- スマートフォン表示でレイアウトが崩れていないか
- 日本語名・スペース入りのファイル名が正しく読み込まれているか
差し替え前に確認するZIP更新チェック
ZIPサイトは一度公開できても、修正版の差し替え時に崩れることがあります。初回と同じ構成を保ったつもりでも、フォルダ名が一段増えたり、画像の置き場所だけ変わったりすると、公開後に一部だけ表示されない状態になります。
差し替え前は、完成物を新しいZIPとして作り直す前に、ルート直下のindex.html、CSS/画像の相対パス、不要な下書きファイルの3点だけでも確認しておくと安全です。
- ZIPを開いた直下にindex.htmlがあるかを見る
- 画像・CSS・JSの参照先が新しいフォルダ構成と一致しているか確認する
- 旧版のファイル、下書き、不要なPDFや秘密情報が混ざっていないか確認する
- 差し替え後はスマホ幅とPC幅の両方でトップページを開く
ZIP化した後に別フォルダで開いて確認する
ZIPサイトで多い失敗は、作業フォルダでは表示できるのに、アップロード後に画像やCSSが切れることです。これは、手元の絶対パスや外部フォルダを参照していることに気づかないままZIP化したときに起こります。
ZIPを作ったら、一度別の場所に展開して、そこに含まれるファイルだけでindex.htmlが開けるか確認します。これだけで、公開後の真っ白表示や画像切れをかなり減らせます。
- ZIPをデスクトップなど別の場所にコピーして展開する
- 展開したフォルダ内のindex.htmlを開く
- 画像・CSS・JSがすべて表示されるか確認する
- 元の作業フォルダを参照していないか、パスを書き直す
よくある質問
index.htmlがサブフォルダの中にあっても公開できますか？
入口ファイルが深い階層にあると、トップに表示されないことがあります。可能であれば、index.htmlをZIPを開いてすぐの位置に置くと確実です。
ZIPの容量が大きいと公開できませんか？
極端に大きなファイルや、圧縮で異常に膨らむファイル（zip爆弾）は、安全のため制限されます。不要な画像や開発ファイルを削れば、たいていは問題なく公開できます。
画像だけ表示されないのはなぜですか？
多くは参照パスのずれが原因です。index.htmlから見た相対パスになっているか、フォルダ名の大文字・小文字が一致しているかを確認してください。
ZIPを作る前に何を確認すべきですか？
index.htmlの場所、CSS/画像/JSの相対パス、不要な隠しファイル、秘密情報の混入を確認します。圧縮後ではなく、公開用フォルダを作った段階で一度ブラウザ表示してください。
ZIPを差し替えるとき、ファイル名やフォルダ名を変えても大丈夫ですか？
変えても構いませんが、HTML内の相対パスも一緒に変わっているかを確認してください。画像フォルダ名だけ変わってHTML側の参照が古いままだと、公開後に画像だけ表示されない原因になります。
ZIPに入れたのに画像が切れる場合、どこを見ればよいですか？
画像ファイルがZIP内に入っているか、HTMLからの相対パスが合っているかを確認します。ZIPを別フォルダに展開して表示できなければ、アップロード後も同じように崩れる可能性が高いです。