「Webサイトを見ていたら、突然文字が『□□□』や『謎の英数字』になってしまった…」「自分のサイトが文字化けしていると指摘されたけど、何をどう直せばいいの？」そんな困った経験はありませんか？
この記事では、文字化けの原因と修正方法を初心者にも分かりやすく解説します。ブラウザ側・サーバー側・HTMLファイル側の3つのパターン別に、具体的な解決手順をご紹介します。
目次
文字化けが起こる主な原因
Webサイトの文字化けは「文字コード」の設定が合わないときに発生します。 これは「日本語を表示するための設定がバラバラになっている」状態と考えてください。
文字化けが起こる主なパターンは次の2つです
-
1.ブラウザ側の問題
見ている人のブラウザ設定が原因 -
2.HTMLファイル側の問題
ホームページのファイル自体の設定が原因
パターン別：文字化け修正方法
ブラウザ側の問題を確認・修正する
まずは簡単チェック！ブラウザをリフレッシュ
最も効果的な対処法として、まず以下を試してください。
ステップ1：ハードリフレッシュ**(推奨)
- Windows: Ctrl+Shift+R
- Mac: Command+Shift+R
- ブラウザのキャッシュを完全にクリアして再読み込み
ステップ2：通常のページ再読み込み
- F5キーまたはCtrl+Rで再読み込み
ステップ3：ブラウザを一度閉じて再起動
- 完全にブラウザを終了してから再起動
ステップ4：別のブラウザで同じページを開く
- Chrome、Firefox、Safari等で比較確認
ハードリフレッシュは特に重要で、ブラウザが古い文字コード情報をキャッシュしている場合に効果的です。これで直る場合は、ブラウザの一時的な不具合だった可能性が高いです。
現代のブラウザについて： 最新のWebブラウザは自動的に文字コードを判別する機能が向上していますが、設定によっては文字化けが発生する場合があります。問題が継続する場合は、サーバー側やHTMLファイル側の設定を確認することをおすすめします。
ブラウザの文字コード設定を確認
Google Chromeの場合：
文字エンコード設定の方法が変更されており、複数のアプローチがあります。
方法1：拡張機能を使用する(推奨)
手順1：Chrome ウェブストアにアクセス
- ブラウザでchrome.google.com/webstoreを開く
- 検索窓に「Set Character Encoding」「文字エンコード」と入力
手順2：拡張機能をインストール
- 「Set Character Encoding」や「Charset」等の拡張機能を選択
- 「Chromeに追加」ボタンをクリックしてインストール
手順3：文字コードを切り替え
- 文字化けしているページで拡張機能アイコンをクリック
- 「UTF-8」「Shift_JIS」「EUC-JP」から適切なものを選択
- ページが自動的にリロードされ、文字化けが解消されることを確認
方法2：デベロッパーツールで確認・診断
手順1：デベロッパーツールを開く
- F12キー、または右クリック→「検証」をクリック
- 画面下部または右側にツールパネルが表示される
手順2：ネットワーク情報を確認
- 「Network」タブをクリック
- ページをリロード(F5)して通信履歴を表示
- HTMLファイル(通常一番上)をクリック
手順3：文字エンコード情報をチェック
- 「Response Headers」セクションで「Content-Type」を確認
- 「charset=UTF-8」等の記載があるか確認
- 記載がない、または異なる文字コードの場合は設定に問題がある可能性
Firefoxの場合：
Firefoxは文字エンコーディング機能が比較的充実しています。
方法1：自動修復機能を使用
手順1：メニューバーの表示確認
- メニューバーが表示されていない場合：右クリック→「メニューバーを表示」をチェック
- または、Alt キーを押してメニューバーを一時表示
手順2：自動修復を実行
- メニューバー「表示」→「文字エンコーディングの修復」をクリック
- Firefoxが自動的に適切な文字コードを判別・適用
- ページが自動的にリロードされ、正しい文字で表示される
方法2：手動で文字エンコーディングを選択
手順1：エンコーディングメニューを開く
- メニューバー「表示」→「文字エンコーディング」をクリック
- サブメニューが表示される
手順2：適切な文字コードを選択
- Unicode (UTF-8)：最も一般的、まず試すべき設定
- 日本語 (Shift_JIS)：古い日本語サイトで使用
- 日本語 (EUC-JP)：Unix系サーバーで使用されることがある
手順3：結果を確認
- ページが自動的にリロードされる
- 文字化けが解消されているか確認
(注意) 現代のWebページでは、これらのオプションがグレーアウト(選択不可)になることがあります。これは、ページ側で文字コードが正しく指定されている場合です。
Safari(Mac)の場合：
詳細な操作手順
手順1：メニューバーから文字エンコーディングを変更
- Safari上部メニューバー「表示」をクリック
- 「文字エンコーディング」にカーソルを合わせる
- サブメニューから「Unicode (UTF-8)」を選択
手順2：自動検出を有効にする
- 「表示」→「文字エンコーディング」→「自動検出」をチェック
- Safariが自動的に適切な文字コードを判別するようになる
Microsoft Edge の場合：
Edgeは基本的にChromeと同じChromiumベースのため、設定方法は類似しています。
拡張機能による対処
手順1：Microsoft Edge Add-onsストアにアクセス
- Edge画面右上の「…」メニュー→「拡張機能」をクリック
- 「Microsoft Edge Add-onsストアを開く」をクリック
手順2：文字エンコード拡張機能を検索・インストール
- 検索窓に「character encoding」「charset」と入力
- 適切な拡張機能を選択してインストール
手順3：拡張機能を使用
- 文字化けしているページで拡張機能を実行
- 適切な文字コードを選択
HTMLファイル側の問題を修正する
HTMLファイル自体の文字コード設定に問題がある場合の詳細な対処法です。
HTMLファイルの文字コード宣言を追加・確認
基本的な文字コード宣言
HTMLファイルの<head>部分のできるだけ上部に以下を記述：
<meta charset="UTF-8" />正しい記述例と位置
<!DOCTYPE html><html lang="ja"> <head> <!-- 文字コード宣言は必ず最初に記述 --> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ページタイトル</title> <!-- その他のmetaタグやCSSリンクはこの後に記述 --> </head> <body> <!-- ページ内容 --> </body></html>古いHTML記述から新しい記述への変更
古い記述(HTML4時代)：
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />新しい記述(HTML5)：
<meta charset="UTF-8" />(重要) 古い記述と新しい記述を併用すると、予期しない動作が発生する場合があります。必ずどちらか一方のみを使用してください。
ファイル保存時の文字コード設定
HTMLファイルを作成・編集する際の注意点です。
Windows標準のメモ帳を使用する場合
ステップ1：ファイルを開く・編集
- メモ帳でHTMLファイルを開く
- 内容を編集
ステップ2：保存時の設定
- 「ファイル」→「名前を付けて保存」をクリック
- 「エンコード」欄で「UTF-8」を選択
- 「UTF-8 BOM付き」ではなく「UTF-8」を選択
ステップ3：ファイル拡張子の確認
- ファイル名を「index.html」等に設定
- 「ファイルの種類」を「すべてのファイル」に設定
Visual Studio Code を使用する場合
ステップ1：文字コードの確認
- 画面右下のステータスバーに文字コードが表示
- 「UTF-8」または「UTF-8 with BOM」と表示される
ステップ2：文字コードの変更
- ステータスバーの文字コード表示をクリック
- 「UTF-8」を選択(BOM付きは避ける)
ステップ3：自動保存設定
- 「ファイル」→「自動保存」を有効化
- 文字コード設定が維持される
よくある文字化けパターンと対処法
パターン1：「?????」「□□□」が表示される場合
原因： 日本語フォントが読み込めていない、または文字コードが対応していない
対処法
- HTMLでフォント指定を追加(
font-family: "游ゴシック", YuGothic, sans-serif;) - WebフォントサービスのGoogle Fontsを利用
- 1文字が1つの?や□で表示される場合は文字コード宣言を確認
パターン2：「譁ｰ蟄ヲ」のような意味不明な文字になる場合
原因： 文字コードの解釈が間違っている(UTF-8とShift_JISの混在など)
対処法
- 上記の「文字コード設定確認」を実行
- UTF-8とShift_JIS、EUC-JPを順番に切り替えて確認
- HTMLファイルの
<meta charset>宣言を確認
パターン3：一部だけ文字化けする場合
原因： 特殊文字や記号の扱い、データベースの文字コード設定
対処法
- HTMLエンティティ(「<」「>」「&」等)で記述
- 全角文字と半角文字の統一
- データベースの文字コード設定確認(MySQL等を使用している場合)
パターン4：Webフォント使用時の常用外漢字が表示されない
原因： 軽量化されたWebフォントのサブセット化により、一部の漢字が削除されている
対処法
- フルセット版のWebフォントを使用
- システムフォントとWebフォントの併用設定
font-display: swap;を使用してフォールバック設定を改善
文字化けを予防する方法
制作時から気をつけるポイント
- HTMLファイルは必ずUTF-8で保存
<meta charset="UTF-8">を必ず記述- 複数のブラウザでテスト表示
- 制作会社に依頼する場合は文字コード対応を事前確認
WordPressやCMS使用時の注意点
WordPressなどのCMSを使用している場合、データベースの文字コード設定も影響することがあります。このような場合は制作会社やサポートに相談することをおすすめします。
制作会社に依頼する場合の確認事項
- 文字コード設定(UTF-8)の対応について事前確認
- 複数のブラウザでの表示確認を依頼
- 文字化け発生時の対応方法を確認
- アフターサポートの範囲を確認
実際のトラブルシューティング事例
文字化け問題を効率的に解決するための具体的な事例をご紹介します。
事例1：「譁ｰ縺励＞繝壹・繧ｸ」と表示される場合
症状: 「新しいページ」が「譁ｰ縺励＞繝壹・繧ｸ」のように表示される
原因分析の手順
- ステップ1：ハードリフレッシュを実行 → 変化なし
- ステップ2：Firefoxで同じページを開く → 正常に表示
- ステップ3：結論 → Chrome固有の問題
解決方法
- 手順1：Chrome拡張機能「Set Character Encoding」をインストール
- 手順2：文字化けページで拡張機能を実行
- 手順3：「UTF-8」を選択して修正
事例2：一部の漢字だけが「?」になる場合
症状: 「東京都□□区」のように、一部の漢字が□や?で表示
原因分析の手順
ステップ1：デベロッパーツールでフォント確認
- F12 → Elements → Computed → font-family を確認
- Webフォントが読み込まれているかチェック
ステップ2：文字コード設定確認
- Response Headersで「charset=UTF-8」を確認
解決方法
- 対処1：常用外漢字の問題の場合
font-family: '游ゴシック', YuGothic, 'Hiragino Sans', 'メイリオ', Meiryo, sans-serif;- 対処2：フルセット版Webフォントに変更
- 対処3：システムフォントをフォールバックに設定
効果的な対処フロー
文字化け問題を体系的に解決するための手順です。
フェーズ1：即座に試せる対処(5分以内)
確認1：ハードリフレッシュ (Ctrl+Shift+R / Command+Shift+R)
確認2：別のブラウザで確認 (Chrome → Firefox → Safari)
確認3：スマホ・タブレットで確認 (デバイス依存の問題を除外)
判定: この段階で解決した場合 → ブラウザキャッシュまたは一時的な問題
フェーズ2：ブラウザ設定の調整(10分程度)
手順1：文字エンコード拡張機能をインストール
手順2：UTF-8、Shift_JIS、EUC-JPを順番に試す
手順3：デベロッパーツールで詳細確認
判定: この段階で解決した場合 → ブラウザ固有の問題
フェーズ3：HTMLファイル設定の確認(30分程度)
手順1：HTMLファイルの文字コード宣言確認
<meta charset="UTF-8" />手順2：ファイル保存時の文字コード確認
- テキストエディタでUTF-8 (BOMなし)で保存されているか確認
手順3：WordPressなどのCMS使用時
- テーマファイルの文字コード設定を確認
- プラグインの影響を調査
判定: この段階で解決した場合 → ファイル設定の問題
よくある質問と回答
Q1: 文字化けを完全に予防する方法はありますか？
A1: 以下の設定を統一することで、ほぼ100%予防できます
- HTMLファイル: UTF-8 (BOMなし)で保存
- HTMLコード:
<meta charset="UTF-8" />を記述 - 制作時から文字コードを意識した設定
Q2: 古いサイトをUTF-8に変更する際の注意点は？
A2: 以下の手順で安全に移行できます
- 手順1：バックアップの取得 (必須)
- 手順2：HTMLファイルの文字コード宣言を追加・修正
- 手順3：ファイルをUTF-8で保存し直す
- 手順4：複数のブラウザで動作確認
(注意) WordPressなどのCMS使用時は、専門家に相談することをおすすめします。
Q3: スマホとPCで文字化けの見え方が違うのはなぜ？
A3: 以下の要因が考えられます
- フォントの違い: デバイス固有のフォント表示
- ブラウザの違い: Safari、Chrome等の文字コード判別機能の差
- 文字コード設定: 一部のモバイルブラウザの設定による差
Q4: 文字化けが直ったり戻ったりする場合は？
A4: 不安定な症状の場合
- 対処1：ブラウザのキャッシュクリアを定期的に実行
- 対処2：HTMLファイルの文字コード宣言を再確認
- 対処3：使用しているCMSやプラグインの更新状況を確認
まとめ
文字化けの修正は「文字コードの設定を統一する」ことが基本です。 この記事でご紹介した段階的なアプローチにより、ほとんどの文字化け問題は解決できます。
重要なポイント
- まずはハードリフレッシュから始める
- 段階的に原因を特定する(ブラウザ → ファイル )
- UTF-8で統一することが基本
- 分からない場合は専門家に相談する
文字化けは技術的な問題ですが、適切な手順で対処できます。 焦らず順番に対処していきましょう！
緊急時の対処: どうしても解決しない場合は、制作会社やホスティングサービスのサポートに「この記事の手順を試しましたが解決しません」と伝えることで、スムーズなサポートを受けられます。
