なぜ公開すると日本語が文字化けするのか
文字化けの主な原因は、ブラウザがファイルの文字コードを正しく判定できていないことです。日本語の文字データは、保存時のエンコーディング（UTF-8、Shift_JIS など）によって中身のバイト並びが変わります。ブラウザがそれと違う方式で読み込もうとすると、本来「あ」と表示されるべき箇所が別の記号に化けてしまいます。
手元のエディタやブラウザでは正しく見えていたのに公開後だけ崩れる、というのもよくあるケースです。これは、ローカルでは環境が自動で文字コードを補正していたのに対し、公開環境では meta タグなどの明示的な指定が優先されるためです。つまり「自分の画面で見えている＝どの環境でも見える」とは限りません。
結論はシンプルで、ファイルを UTF-8 で保存し、HTML に文字コードの宣言を入れておけば、ほとんどの文字化けは防げます。次の章から具体的に直していきます。
原因の見分け方（症状から当たりをつける)
まずは化け方のパターンから原因を絞り込みましょう。症状ごとに疑うべきポイントが異なるため、闇雲に直すより早く解決できます。
代表的なパターンは次のとおりです。当てはまるものがあれば、その横の対処にすすんでください。
- 「縺・繧・繝」のようなカタカナ混じりの記号化：Shift_JIS のファイルを UTF-8 として読んでいる可能性が高いです。
- 「�」（黒い菱形のはてな）が点在：一部の文字だけ変換に失敗している、保存時のエンコーディング不一致が疑われます。
- 「©」などがそのまま表示：文字コードではなくHTMLの記述（実体参照）の問題で、文字化けとは別件です。
- ファイル名やリンクだけ崩れる：本文ではなくファイル名のエンコーディングが原因のことがあります。
症状別チェック表
公開後に日本語が文字化けするは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
UTF-8で保存し直して直す手順
最も確実な直し方は、HTMLファイルを「UTF-8」で保存し直し、文字コードの宣言を入れることです。テキストエディタがあれば数分で完了します。
- 使っているエディタでHTMLファイルを開きます。
- 「名前を付けて保存」または「エンコーディングを指定して保存」を選びます。
- 文字コードの一覧から「UTF-8（BOMなし）」を選んで上書き保存します。
- ファイル先頭付近の head 内に「<meta charset="UTF-8">」を追記します。
- head の中でも、できるだけ先頭側（titleタグより前）に置きます。
- 保存したファイルをブラウザで開き直し、日本語が正しく表示されるか確認します。
- CSSやJSにも日本語コメントがある場合は、それらも同じくUTF-8で保存し直します。
ZIPでまとめて公開するときの注意点
HTML・CSS・JS・画像を ZIP でまとめて公開する場合、文字化けは本文だけでなく「ファイル名」でも起きることがあります。日本語を含むファイル名は、ZIP を作った環境によって文字コードが変わり、解凍後にリンク切れや画像の非表示につながることがあります。
対策はシンプルで、ファイル名は半角英数字（例「main.css」「hero-image.png」）にそろえることです。フォルダ名も同様にしておくと、環境差による崩れを避けやすくなります。
また、ZIP の中の各HTMLファイルにそれぞれ meta charset の指定が入っているかも確認しましょう。トップページだけ直して下層ページを直し忘れる、というのはよくある見落としです。一括検索で「charset」を確認しておくと安心です。
直したファイルをそのまま共有・差し替えするには
文字コードを直したら、修正版を相手にどう届けるかが次の課題になります。新しいURLを発行して送り直すと、相手が古いリンクを開いて「まだ化けている」と勘違いする原因にもなります。
共有URLとしてHTMLやZIPをそのまま公開できる「ギガサイト便」では、同じURLのままファイルを差し替えられます。修正版をアップロードし直せば、リンクを送り直さなくても最新の表示に更新されるため、文字化け修正のような細かい手直しと相性が良い仕組みです。
アップロード時にはセキュリティスキャンが走り、静的公開に不要なファイルなどの兆候を警告してくれます。文字化けの直接の検査ではありませんが、ZIP に意図しないファイルが混ざっていないかを見直すきっかけになります。表示確認を済ませてから本番のリンクを案内する、という流れにすると安心です。
よくある質問
公開したHTMLの日本語が文字化けします。一番先に試すべきことは？
まずHTMLファイルを「UTF-8（BOMなし）」で保存し直し、head の先頭付近に「<meta charset="UTF-8">」を入れてください。原因の多くは文字コードの不一致なので、この2点でほとんど解決します。直したらブラウザで開き直して確認しましょう。
meta charset を入れたのに、まだ化けるのはなぜですか？
meta の指定は正しくても、ファイル自体が Shift_JIS などで保存されたままだと食い違いが残ります。エディタの保存エンコーディングが本当に UTF-8 になっているかを確認してください。複数ページがある場合は、化けているページ個別の保存状態もチェックします。
画像やリンクだけ表示されない・崩れる場合も文字化けですか？
本文ではなくファイル名のエンコーディングが原因のことがあります。日本語ファイル名を半角英数字に変更し、HTML内のパスもそれに合わせて書き換えてください。文字コードとは別に、パスの記述ミスでも同じ症状が出る点には注意が必要です。
修正版を相手に渡すとき、URLは作り直す必要がありますか？
同じURLのままファイルを差し替えられる共有サービスを使えば、URLの作り直しは不要です。修正したファイルをアップロードし直すだけで最新の表示に切り替わるため、相手が古いリンクで化けた状態を見続ける事故も防げます。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。