文字化けは文字コードの食い違いで起こる
ZIPの中のファイル名は、内部的に「文字コード」という規則にもとづいて記録されています。日本語などの文字をどう表すかの取り決めが、圧縮した環境と解凍する環境で異なると、名前が別の文字として読み取られてしまいます。これが文字化けの正体です。
とくに、画像のファイル名が文字化けすると深刻です。HTMLは元の名前で画像を読み込もうとしますが、ZIP内の名前が崩れていると参照先が見つからず、画像が表示されなくなります。
文字化けを防ぐ一般的な考え方
文字化けへの対処は、大きく分けて二つの方向があります。ひとつは、広く使われている文字コードであるUTF-8でZIPを作成し、環境をまたいでも名前が崩れにくくすること。もうひとつは、そもそもファイル名を英数字にして、文字コードの問題自体を避けることです。
確実さを優先するなら、ファイル名を英数字にする方法が安心です。日本語名を残したい場合は、UTF-8に対応した方法で圧縮することで、多くの環境で正しく読めるようになります。
- UTF-8に対応した方法でZIPを作成する
- ファイル名やフォルダ名を英数字にリネームする
- 画像など参照されるファイルは特に英数字にそろえる
崩れない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・リンクを実際に開く
ファイル名を英数字にそろえる手順
最も確実なのは、ファイル名とフォルダ名を半角の英数字にそろえることです。たとえば「会社案内.html」をcompany.htmlに、「ロゴ.png」をlogo.pngに変えます。スペースの代わりにハイフンやアンダースコアを使うと、より安定します。
リネームしたら、HTMLの中でそのファイルを指定している箇所も新しい名前に直す必要があります。画像やリンクの指定が古い名前のままだと参照先が見つからなくなるため、名前を変えたファイルとセットで指定も更新します。
- 日本語のファイル名・フォルダ名を半角英数字に変更する
- スペースはハイフンやアンダースコアに置き換える
- HTML内の画像やリンクの指定を、新しい名前に合わせて直す
- 手元で表示を確認してから、もう一度ZIPに圧縮する
日本語名を残したいときはUTF-8で圧縮する
どうしても日本語のファイル名を残したい場合は、UTF-8に対応した方法でZIPを作成します。最近のパソコンの標準機能はUTF-8で名前を記録することが多く、環境をまたいでも崩れにくくなっています。
それでも不安が残る場合は、圧縮したZIPを別の環境で解凍してみて、名前が正しく表示されるか確認するのが確実です。崩れていなければ、ギガサイト便でも元のファイル名のまま扱えます。
ギガサイト便で文字化けを避けて公開する手順
文字化けの対処を済ませたZIPを公開する流れを順番に見ていきます。最も確実なのは、参照される画像などを英数字にそろえてから圧縮し、表示を確認しておくことです。
下記の手順は数分で完了します。アップロード前に解凍して名前が崩れていないか確認しておけば、公開後に画像が消えるといったトラブルを防げます。
- 画像など参照されるファイルの名前を英数字にそろえ、HTMLの指定も合わせて直す
- 整えたフォルダの中身をUTF-8に対応した方法でZIPに圧縮する
- 圧縮したZIPを一度解凍し、ファイル名が崩れていないか確認する
- ギガサイト便のトップに、確認済みのZIPをドラッグ&ドロップする
- 認証方式と公開期限を設定し、発行されたURLで画像が表示されるか確認する
よくある質問
なぜ日本語のファイル名だけ文字化けするのですか？
ファイル名を扱う文字コードが、圧縮した環境と開く環境で食い違うことが原因です。日本語は文字コードの違いの影響を受けやすいため、英数字なら問題なくても日本語名だけ崩れることがあります。英数字にそろえるか、UTF-8で圧縮すると防げます。
ファイル名を英数字にすると元に戻せなくなりませんか？
ファイル名は表示や読み込みに使う名前なので、英数字に変えても内容は変わりません。HTML内の指定も合わせて直せば、見た目はそのまま保てます。元のファイルが心配な場合は、リネーム前にフォルダごとコピーを残しておくと安心です。
画像名だけ文字化けして表示されないのですが直せますか？
はい、画像のファイル名を英数字に変え、HTML内の画像指定も同じ名前に直せば表示されるようになります。文字化けした名前のままだとHTMLが参照先を見つけられません。リネーム後に手元で表示を確認してからZIPにまとめてください。
UTF-8で圧縮したか確認する方法はありますか？
確実なのは、作成したZIPを別の環境で解凍してファイル名が崩れていないか確認することです。名前が正しく表示されればUTF-8で問題なく記録されています。心配な場合は、参照される画像だけでも英数字にそろえておくとより安全です。
ZIPを作る前に何を確認すべきですか？
index.htmlの場所、CSS/画像/JSの相対パス、不要な隠しファイル、秘密情報の混入を確認します。圧縮後ではなく、公開用フォルダを作った段階で一度ブラウザ表示してください。