ZIPの作り方を間違えると入口が見つからない
公開用のZIPでよくある失敗が、解凍すると一枚余計なフォルダが挟まり、その中にファイルが入ってしまうパターンです。この状態だと、入口になるはずのindex.htmlが一階層深い場所に置かれ、最初に表示されるべきページとして認識されないことがあります。
原因は、ファイルそのものではなく「ファイルの入ったフォルダ」を圧縮してしまうことにあります。ZIPの一番外側にindex.htmlがそろっている状態を目指すと、入口が正しく認識されやすくなります。
Windowsでの圧縮手順
Windowsでは、エクスプローラーの右クリックメニューから簡単にZIPを作成できます。大切なのは、フォルダごとではなく「フォルダの中身」を選んで圧縮することです。こうすると余計な親フォルダができにくくなります。
具体的には、サイトのフォルダを開き、中にあるindex.htmlやimagesフォルダなどをすべて選択してから圧縮します。これでZIPの一番外側にindex.htmlが並ぶ状態を作れます。
- サイトのフォルダを開き、中に入っているファイルとフォルダをすべて選択する
- 選択した状態で右クリックし、「送る」から「圧縮（ZIP形式）フォルダー」を選ぶ
- 作成されたZIPを解凍し、一番外側にindex.htmlがあることを確認する
崩れないZIP構成のOK/NG例
公開用ZIPの作り方｜WindowsとMacそれぞれの手順では、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・リンクを実際に開く
Macでの圧縮手順
Macでも、Finderの右クリックメニューからZIPを作成できます。Windowsと同じく、フォルダごと圧縮すると親フォルダが一枚挟まるため、中身を選んで圧縮するのがポイントです。
なお、Macで圧縮するとMACOSXという隠しフォルダや、ドットで始まる小さなファイルが一緒に入ることがあります。これらは公開上は無視されることが多いですが、気になる場合は不要ファイルを取り除いてから圧縮すると、すっきりしたZIPになります。
- サイトのフォルダを開き、中に入っているファイルとフォルダをすべて選択する
- 選択した状態で右クリックし、「(項目数)項目を圧縮」を選ぶ
- 作成されたArchive.zipを解凍し、一番外側にindex.htmlがあることを確認する
圧縮後に必ず確認したいこと
ZIPを作ったら、公開する前に一度自分で解凍して中身を確認しましょう。一番外側にindex.htmlがあり、imagesフォルダなどが元の構成のまま並んでいれば、入口は正しく認識されます。
もし解凍したときに余計なフォルダが一枚挟まっていたら、そのフォルダの中身を選び直して圧縮し直します。この確認をひと手間かけるだけで、公開後に入口が見つからないトラブルを大きく減らせます。
圧縮後にZIPの中身だけを見るチェック
ZIPを作ったら、アップロード前に一度だけ中身を開いて確認します。ここで見るべきなのは、解凍後のフォルダではなく「ZIPを開いた直後に何が見えるか」です。入口のindex.htmlが一段深いフォルダに入っていると、公開時に入口が見つからない原因になります。
Macで作ったZIPには隠しファイルが入ることがありますが、重要なのは公開に必要なindex.html、CSS、画像、JSが期待どおりの位置にあることです。不要な作業ファイルは共有前に外しておくと、相手にも構成が伝わりやすくなります。
- ZIPを開いた直後にindex.htmlが見えるか確認する
- css、js、imagesなどのフォルダがHTMLから見た相対位置にあるか見る
- 親フォルダだけが見えるZIPになっていないか確認する
- 不要な下書きファイルや巨大な元画像を含めていないか見る
ギガサイト便で公開用ZIPを使う手順
正しく作ったZIPは、そのままギガサイト便にアップロードして公開できます。登録なしでもすぐに公開できますが、共有相手を限定したい場合は認証と公開期限を設定します。
下記の手順は数分で完了します。圧縮の段階で入口を整えておけば、アップロード後はドラッグ&ドロップして設定するだけで、元の構成のまま表示されます。
- 前の手順で作成したZIPを、一度解凍して一番外側にindex.htmlがあることを確認する
- ギガサイト便のトップに、確認済みのZIPをドラッグ&ドロップする
- 認証方式を選び、共有範囲に合わせて設定する
- 公開期限を設定し、共有が不要になったら自動で失効させる
- 発行されたURLを開き、入口のページが正しく表示されるか確認する
よくある質問
なぜフォルダごと圧縮してはいけないのですか？
フォルダごと圧縮すると、解凍時にそのフォルダが一枚挟まり、index.htmlが一階層深い場所に入ってしまうことがあります。すると入口として認識されにくくなります。フォルダの中身を選んで圧縮し、ZIPの一番外側にindex.htmlがそろう状態にするのが確実です。
Macで作ったZIPに余計なファイルが入りますが大丈夫ですか？
MACOSXフォルダやドットで始まる小さなファイルは、Macの圧縮で自動的に追加されるもので、公開上は無視されることが多いです。気になる場合は圧縮前に取り除けます。入口のindex.htmlが一番外側にあれば、通常は問題なく表示されます。
圧縮ソフトを別にインストールする必要はありますか？
いいえ、WindowsもMacも標準の機能でZIPを作成できます。Windowsは右クリックの「圧縮」、MacはFinderの右クリックで圧縮が可能です。特別なソフトを入れなくても、公開用のZIPを用意できます。
ZIPが正しくできているか公開前に確認する方法はありますか？
作成したZIPを一度自分で解凍し、一番外側にindex.htmlがあるか確認するのが最も確実です。余計な親フォルダが挟まっていなければ入口は正しく認識されます。確認後にギガサイト便へアップロードすれば、公開後のトラブルを防げます。
ZIPを作る前に何を確認すべきですか？
index.htmlの場所、CSS/画像/JSの相対パス、不要な隠しファイル、秘密情報の混入を確認します。圧縮後ではなく、公開用フォルダを作った段階で一度ブラウザ表示してください。
ZIPをアップロードする前に最低限どこを確認すべきですか？
ZIPを開いた直後にindex.htmlが見えるか、CSS・JS・画像フォルダがHTMLから参照される位置にあるかを確認します。親フォルダの中に一式が入っているだけのZIPだと、公開時に入口が見つからないことがあります。