なぜ「フォルダごと圧縮」が危ないのか
WebページをZIPで配布するときに起きやすいのが、作業フォルダをそのまま圧縮してしまうケースです。手元のフォルダには、ブラウザで表示するために必要なファイル(HTML・CSS・JS・画像)だけでなく、開発の過程で生まれた副産物や設定ファイルが一緒に入っています。これらは表示には関係しないのに、容量を膨らませたり、思わぬ情報を外部に渡してしまったりします。
問題は大きく分けて二つです。一つは「公開に不要なゴミファイルが混ざる」こと、もう一つは「外に出してはいけない秘密情報が混ざる」ことです。前者は見た目には影響しませんが、ZIPが重くなり、受け取った相手を戸惑わせます。後者はAPIキーや個人情報の漏えいにつながり、被害が大きくなりがちです。
静的なページの公開では、サーバー側のプログラム(PHPなどの処理)は動きません。つまり配布したいのはあくまで「ブラウザがそのまま読むファイル」だけです。この前提を意識すると、何を残し何を消すべきかが整理しやすくなります。
ZIPに入れないべきファイルの一覧
まずは、表示に関係なく削除して問題ないファイルから見ていきます。OSやエディタが自動で作る隠しファイルは、その代表例です。WindowsとMacでフォルダをやり取りすると、相手の環境でゴミとして見えてしまうこともあります。
次に注意したいのが、容量が大きく、かつ静的公開には不要な開発用のディレクトリです。Node.jsのプロジェクトでよく見かける「node_modules」はその典型で、数万ファイル・数百MBに達することも珍しくありません。これを丸ごと入れると、ZIPが極端に重くなります。
- macが作る「.DS_Store」やWindowsの「Thumbs.db」など、OSの隠しファイル
- 「node_modules」など、ビルド前提の依存パッケージ一式
- 「.git」フォルダや「.env」など、履歴や環境変数を含む開発用ファイル
- 「.psd」「.ai」「.fig」などの編集用デザイン元データ
- ソースマップ(.map)やビルド前のTypeScript・Sassなどの元ファイル
- パスワードやAPIキー、社内情報を書いたメモ・README
崩れない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・リンクを実際に開く
特に危険な「秘密情報入り」ファイル
ゴミファイルは見た目が悪い程度で済みますが、秘密情報の混入は被害が大きくなります。よくあるのが、JavaScriptのコードにAPIキーを直接書いたまま公開してしまうパターンです。ブラウザで動くコードは誰でも中身を読めるため、キーがそのまま第三者に渡ってしまいます。
「.env」ファイルや設定ファイルには、データベースの接続情報や外部サービスのトークンが書かれていることがあります。これらは公開フォルダに置くべきものではありません。共有前に、フォルダ内を一度検索して、こうしたファイルが残っていないか確認する習慣をつけておくと安心です。
判断に迷うときは「この1ファイルを赤の他人に手渡しても困らないか」を基準にすると整理しやすくなります。少しでも引っかかるものは、ZIPに含める前に取り除いておきましょう。
不要ファイルを除外する手順
除外のやり方はいくつかありますが、確実なのは「公開用フォルダを別に用意する」方法です。元の作業フォルダはそのままにして、本当に必要なファイルだけをコピーした新しいフォルダを作り、それを圧縮します。元データを壊さずに済むので、初めての方にもおすすめです。
- 「公開用」という名前の空フォルダを新しく作る
- index.htmlと、表示に使うCSS・JS・画像だけをコピーする
- コピー先を開き、ページが正しく表示されるかブラウザで確認する
- 「.DS_Store」「node_modules」「.env」などが紛れていないか目視チェックする
- 問題なければ、この公開用フォルダだけをZIPに圧縮する
ギガサイト便で安全に公開する手順
手元で不要ファイルを取り除けたら、あとは共有するだけです。ギガサイト便は、HTMLやZIP(HTML・CSS・JS・画像一式)を認証付きの共有URLとして公開できるサービスで、サーバー構築やデプロイ設定は要りません。アップロード時にはセキュリティスキャンが走り、APIキーらしき文字列や外部スクリプトへの依存、静的公開に不要なファイルなどの兆候を検出して警告します。除外し忘れに気づける、最後の安全網として使えます。
公開後も同じURLのままファイルを差し替えられるので、不要ファイルを後から取り除いて入れ直す、といった修正も気軽に行えます。閲覧できる相手は、リンクを知る人だけ、パスワードを知る人だけ、指定したメールや会社ドメインの人だけ、といった形で選べます。
- 除外済みの公開用フォルダをZIPに圧縮しておく
- ギガサイト便のトップにそのZIPをドロップする
- スキャン結果を確認し、不要ファイルや秘密情報の警告がないか見る
- 警告が出たら一度公開を止め、該当ファイルを除外して入れ直す
- 認証方式と公開期限を選び、発行された共有URLを相手に送る
除外リストは圧縮前に固定する
ZIPを作ったあとに中身を見て不要ファイルを探すより、圧縮前に「入れないものリスト」を決めておくほうが安全です。AIツールや開発環境は自動で多くの補助ファイルを作るため、毎回同じ基準で除外できるようにします。
迷ったら、公開用フォルダを新しく作り、必要なファイルだけをコピーしてから圧縮します。元フォルダを直接ZIP化しないだけでも、.env、.git、node_modules、未使用画像、作業メモの混入を大きく減らせます。
- 公開用フォルダを別に作る
- 表示に必要なHTML・CSS・JS・画像だけをコピーする
- .env、.git、node_modules、作業メモ、生成プロンプトは入れない
- ZIP化後にもう一度中身を開いて確認する
よくある質問
.DS_StoreはZIPに入れても大丈夫ですか
表示には影響しないため、入っていてもページは正常に動きます。ただしMacが自動で作る隠しファイルで、受け取った相手の環境ではゴミとして見えることがあります。見た目や容量の面で不要なので、公開前に取り除いておくのがおすすめです。
node_modulesはなぜZIPに入れてはいけないのですか
node_modulesはビルドのための依存パッケージ一式で、ブラウザでページを表示するのには不要です。数万ファイル・数百MBになることもあり、ZIPが極端に重くなります。公開用フォルダには含めず、HTMLやCSS、画像など表示に必要なものだけを入れましょう。
JavaScript内に書いたAPIキーは隠せますか
ブラウザで動くJavaScriptは誰でも中身を読めるため、コードに直接書いたキーは隠せません。公開前に該当箇所を削除するのが基本です。ギガサイト便ではアップロード時のスキャンでAPIキーらしき文字列を検出して警告するため、除外し忘れに気づく助けになります。
間違って不要ファイルを含めて公開してしまったらどうすればいいですか
まず該当ファイルを取り除いた公開用フォルダを作り直します。ギガサイト便なら同じURLのままファイルを差し替えられるので、リンクを送り直す必要はありません。秘密情報が含まれていた場合は、差し替えに加えてキーの再発行など元の対策も忘れずに行ってください。
ZIPを作る前に何を確認すべきですか？
index.htmlの場所、CSS/画像/JSの相対パス、不要な隠しファイル、秘密情報の混入を確認します。圧縮後ではなく、公開用フォルダを作った段階で一度ブラウザ表示してください。
公開用ZIPは元フォルダを直接圧縮するのと、別フォルダにコピーして作るのとどちらが安全ですか？
別フォルダに必要なファイルだけをコピーして作るほうが安全です。元フォルダには開発用ファイルや秘密情報、未使用素材が混ざりやすいため、公開に必要なものだけを集めたフォルダを圧縮すると、不要ファイルの混入を防ぎやすくなります。