Windowsで作ったZIPの文字コードトラブルを避ける方法

起きる症状

Windowsのエクスプローラーで作ったZIPは、ファイル名のエンコードにShift_JISを使います。このZIPをMacやLinux（UTF-8環境）で展開すると、日本語ファイル名が文字化けします。ホスティングサービス側もUTF-8で処理するため、日本語ファイル名を含むZIPはパスが解決できずに404エラーになります。

もう一つの症状は、ファイル名自体は化けていないがindex.htmlを開くと一部の画像のみ表示されないケースです。これは英数字のファイル名は問題なく、日本語を含む特定のファイルだけパスが解決できていない状態です。開発者ツールのNetworkタブで赤くなっているリクエストのURLを確認すると、文字化けしたパスが表示されていることで診断できます。

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

正しい構成

最も確実な回避策は、HTML・画像・CSS・JSのすべてのファイル名とフォルダ名を英数字とハイフン・アンダースコアのみにすることです。日本語ファイル名を英数字名にリネームし、HTMLの参照も合わせて変更すれば、エンコードの問題は根本的に発生しなくなります。日本語ファイル名は見た目は分かりやすいですが、クロスプラットフォームでのZIP配布では不具合の原因になります。

Windowsで作業するときは、エンコードをUTF-8で指定できるツールを使ってZIPを作成します。PowerShellのCompress-Archiveコマンドはファイル名をUTF-8で格納します。PowerShellで「Compress-Archive -Path .\my-site -DestinationPath site.zip」を実行すれば、エクスプローラーの右クリックを使わずに作成できます。

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

圧縮前チェック

圧縮前にプロジェクトフォルダ内のすべてのファイル名を確認し、日本語・中国語・韓国語などのマルチバイト文字、スペース、括弧などの記号が含まれていないかをチェックします。Windowsのエクスプローラーでフォルダを開き、詳細モードで一覧を確認するか、「dir /b /s」ですべてのファイルパスを出力して目視で確認してください。

HTMLファイル内のsrc属性・href属性・url()参照も合わせて確認します。ファイル名を英数字に変更したあと、HTMLやCSSの参照が更新されていないままだと表示が崩れます。VSCodeの「フォルダ内検索」で日本語のパス文字列を検索すると参照し忘れを発見しやすくなります。

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

アップロード後確認

アップロード後にURLを開き、ブラウザの開発者ツールのNetworkタブで404エラーになっているリソースがないかを確認します。日本語パスの文字化けが原因の404はURLにパーセントエンコードされた文字列が含まれていることで識別できます。見つかったら該当ファイルを英数字名にリネームし、HTMLの参照を修正してZIPを作り直してください。

スマホでも同じURLを開いて画像やCSSが正しく読み込まれているかを確認します。文字化けはOS・ブラウザによらず発生するため、スマホのSafariやChromeで確認しても同じ問題が再現されます。問題が再現する場合はZIPの作り直しが必要なため、PCの開発者ツールで先に根本原因を特定してからスマホ確認に進む順序が効率的です。

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