はじめに
Unityでゲームを作って、いざWebGLでビルド！
……と思ったら、画面に表示された日本語が「□」や「？」ばかり！？
「え？さっきまでエディターではちゃんと表示されてたのに…」とびっくりした方も多いのではないでしょうか。
実はこれ、WebGL特有の“日本語フォントの文字化け”問題なんです。
UnityのエディターやPC向けビルドでは問題なく表示できるのに、WebGLになると日本語だけが表示されなくなってしまう、という現象がよくあります。
でも安心してください！
これはUnityやフォントの設定を少し見直すだけで、ちゃんと日本語を表示できるようになります。
この記事では、なぜWebGLで日本語が文字化けしてしまうのか、そしてどうすれば正しく表示できるようになるのかを、初心者の方にもわかりやすく解説していきます。
「とにかく簡単に直したい！」という方も、「仕組みからしっかり理解したい！」という方も、この記事を読めばバッチリ解決できますよ！
1. 日本語フォントが文字化けする原因とは？
WebGLで日本語が文字化けしてしまう原因は、主に次の3つがあります。
ひとつずつ見ていきましょう！
原因① デフォルトフォントが日本語に対応していない
Unityでは、標準で用意されているフォント（Arialなど）は英語圏向けに作られているため、日本語の文字がそもそも含まれていません。
そのため、WebGLで表示しようとすると「知らない文字＝表示できない！」となって、代わりに「□（四角）」などの**豆腐文字（Tofu）**が表示されてしまいます。
原因② TextMeshProでフォントアセットが正しく設定されていない
TextMeshProは高品質な文字表示ができる便利なツールですが、自分で使いたいフォントを登録しておかないと日本語を表示できません。
特にWebGLでは、使う文字だけを含んだフォントアセットを事前に作っておく必要があります。これを忘れると、やはり日本語が文字化けしてしまいます。
原因③ WebGLビルド時にフォントデータが省略されている
WebGLでは、ビルドサイズをできるだけ軽くするために、使われていないデータが自動的に削除される仕組みがあります。
このとき、使いたいフォントが「使われていない」と判断されて削除されてしまうと、文字が正しく表示されなくなるんです。
とくにResourcesフォルダやアドレッサブル（Addressables）を使っていないと、フォントがビルドに含まれないこともあるので注意が必要です。
これらの原因を知っておくだけでも、「なぜ文字化けするのか」がスッキリわかってくると思います。
次は、**実際にどうやって解決するのか？**という具体的な方法を紹介していきますね！
2. 解決策① TextMeshProで日本語フォントを使う方法
文字化けの一番の対策は、TextMeshProで日本語に対応したフォントをしっかり設定してあげることです。
この方法でTextMeshProを設定すれば、日本語文字化け問題の大半は解決できます！
次のセクションでは、フォントがビルドに正しく含まれているか確認する方法を解説していきますね。
3. 解決策② 使用しているフォントがビルドに含まれているか確認
せっかくTextMeshProで日本語フォントを設定しても、ビルドにそのフォントが含まれていなければ意味がありません！
WebGLでは使っていないと判断されたアセットが、自動で省略されることがあるんです。
ここでは、ちゃんとフォントがビルドに含まれるようにするためのチェックポイントを紹介します！
✅ポイント① フォントを使っているシーンに配置されているか？
Unityは「使われていないアセットは削除する」という考え方でビルドします。
なので、たとえプロジェクトにフォントが入っていても、実際にシーンで使われていなければビルドに含まれません。
🔧対処法：
フォントアセットを設定したTextMeshProのテキストを実際にシーンに配置しましょう。プレハブにしておいてもOK！
✅ポイント② Resourcesフォルダを使って強制的に含める
「将来的に使う予定だけど、今はシーンに置いていない」
そんなフォントアセットは、Resourcesフォルダに入れておくのがおすすめです。
📁やり方：
Assetsフォルダ内にResourcesという名前のフォルダを作成します- その中にフォントアセットをドラッグ＆ドロップで移動します
Resourcesに入れたアセットは、Unityが「これは絶対必要なんだな」と判断してくれるので、ビルドにちゃんと含まれます！
✅ポイント③ Addressablesを使う方法（中級者向け）
もしAddressables（アドレッサブル）を使ってプロジェクト管理している場合は、Addressableとしてマークしておくことが重要です。
そうすることで、フォントアセットも動的にロードされるようになり、ビルドに含まれなくなる心配が減ります。
ただし、初心者の方には少しハードルが高めなので、まずは「シーンに使う」「Resourcesに入れる」方法で大丈夫です！
以上の方法で、「作ったフォントアセットがちゃんとビルドされる状態になっているか？」を確認できます。
4. 解決策③ ビルド設定での注意点
TextMeshProで日本語フォントを設定して、ビルドにも含めたのに、
**「まだ文字化けする…！」**というときは、ビルド設定そのものに原因があるかもしれません。
WebGLはちょっとクセのあるプラットフォームなので、特に圧縮まわりや出力形式の設定に注意が必要なんです。
🔧設定チェック① 圧縮形式を「Gzip」「Brotli」から変更してみる
WebGLではビルド時にファイルを圧縮することで読み込みを高速化できますが、フォントや文字列がうまく展開できなくなることがあります。
📌おすすめの対策：
- 「File」→「Build Settings」→「WebGL」→「Player Settings」を開く
- 「Publishing Settings」の「Compression Format」を「Disabled」に変更してみましょう
✅「Disabled」で動作確認が取れたら、後で「Gzip」や「Brotli」に戻してもOKです。
🔧設定チェック② WebGLテンプレートの設定を見直す
UnityのWebGLテンプレート（HTMLテンプレート）をカスタマイズしている場合、フォント読み込みに影響が出ることがあります。
📌こんなケースに注意：
- カスタムテンプレートで
<meta charset="utf-8">が抜けている - HTML側でフォントのスタイルやサイズが強制上書きされている
✅対策：Unityのデフォルトテンプレートに戻して動作確認してみましょう。
🔧設定チェック③ Player Settingsの「ロケール」設定
WebGLビルドでは「System Language（システム言語）」の取得が制限されるため、日本語を想定してUIを作る場合は明示的に設定しておくと安心です。
Application.systemLanguage == SystemLanguage.Japanese
この条件がWebGLで正しく動かない場合があるので、デフォルト言語を日本語に固定する処理も考慮しておきましょう。
💡ビルド後にキャッシュの影響が出ることも
ビルド設定を変えたあとに「直ってない！」という場合は、ブラウザのキャッシュを削除してから再読み込みしてみてください。
Ctrl + Shift + R（Windows）や Command + Shift + R（Mac）で「キャッシュ無視のリロード」ができます！
これでビルドまわりのトラブルもかなり防げるはずです！
次のセクションでは、**「それでも直らないときに試したい追加テクニック」**をご紹介しますね。
5. トラブルシューティング：それでも文字化けする場合
ここまで設定を見直しても「やっぱり日本語が文字化けしてる…！」という場合は、もう一歩踏み込んだ対処法を試してみましょう。
✅① ブラウザのキャッシュをクリアしてみる
何度もビルド＆アップロードしていると、古いデータがブラウザに残ってしまい、それが原因で表示が崩れることがあります。
💡解決方法：
- **Ctrl + Shift + R（Windows）または Command + Shift + R（Mac）**で、強制的にキャッシュ無視のリロードをしてみましょう。
- それでも直らない場合は、ブラウザのキャッシュを手動で削除するのもアリです。
✅② フォントアセットを再生成してみる
TextMeshProのフォントアセットを作ったとき、含めた文字数が足りなかったり、設定がうまくいっていないこともあります。
💡対策：
- よく使うひらがな・カタカナ・漢字を広めにカバーしてフォントアセットを再生成してみましょう。
- 特に、濁点（゛）や半濁点（゜）が抜けがちなので注意です！
✅③ Fallback Font（代替フォント）を設定しておく
TextMeshProでは**表示できない文字が出てきたときに使う「代替フォント（Fallback Font）」**を設定できます。
📌やり方：
- TextMeshProのフォントアセットを選択
- インスペクターで「Fallback Font Assets」に日本語対応フォントを追加
これにより、メインのフォントアセットに含まれていない文字があっても、代わりのフォントで表示してくれるようになります。
✅④ ビルド後のファイル名が文字化けしていないか確認
まれにですが、ビルドしたあとにサーバーへアップロードしたとき、ファイル名やURLの文字コードが原因で文字化けするケースもあります。
特に日本語ファイル名を含んだテキストなどが外部読み込みされる場合は注意しましょう。
なるべくファイル名は英数字のみにしておくと安全です！
以上のトラブルシューティングをすべて試せば、ほとんどの文字化け問題は解決できるはずです！
次は、おすすめの日本語フォントと注意点を紹介していきますね。
6. よく使われる日本語フォントとその注意点
日本語フォントにはたくさん種類がありますが、Unity WebGLで使うなら「安定して動作する実績のあるもの」がおすすめです。
ここでは、初心者でも安心して使える日本語フォントと、それぞれの注意点をご紹介します！
🎌おすすめフォント① Noto Sans JP（Google Fonts）
特徴：
- Googleが提供する無料フォント
- 読みやすいゴシック体
- ひらがな・カタカナ・漢字をバランスよくカバー
メリット：
- 商用利用OK
- ウェイト（太さ）も豊富で使いやすい
- 高い互換性と安定性
注意点：
- フォントファイルがやや大きめなので、必要な文字だけ抽出してフォントアセットを作るのがベター！
🎌おすすめフォント② M+ FONTS（M PLUS 1pなど）
特徴：
- シンプルでスッキリしたデザイン
- フリーでオープンソース
- Web制作やアプリでも人気
メリット：
- 軽量で表示も速い
- かわいすぎず堅すぎないちょうどいい雰囲気
- ウェブ・ゲーム両対応
注意点：
- 一部の漢字に対応していない場合もあるので、使用予定の文字は事前に確認しておくと安心！
🎌おすすめフォント③ 源ノ角ゴシック（Source Han Sans）
特徴：
- AdobeとGoogleが共同開発
- プロ品質の超高クオリティ日本語フォント
- 多言語対応で中華・韓国語にも強い
メリット：
- 見た目がプロっぽい
- Unity内でも動作報告多数あり
注意点：
- 非常に重たい（100MB以上ある場合も）ので、WebGLで使う場合は部分抽出が必須！
🔧フォントを選ぶときのコツ
- 軽さ重視ならM+かNoto Sans JP
- ビジュアル重視なら源ノ角ゴシック
- 使う文字は事前に決めて、TextMeshProのカスタム文字設定に入れておく
これらのフォントをうまく使えば、WebGLでも美しく日本語を表示することができます！
おわりに
Unity WebGLで日本語が文字化けしてしまう問題は、TextMeshProの正しい使い方とフォントの設定さえ押さえれば、ちゃんと解決できます！
最初はちょっと戸惑うかもしれませんが、一度設定してしまえば他のプロジェクトでも使い回せるので、「最初だけ頑張ればOK」な内容です。
これからも日本語対応のゲームやツールを作っていくなら、今のうちに文字表示の仕組みを理解しておくととても役立ちますよ！
よくある質問（FAQ）
- QUnityの標準フォントだけで日本語表示はできませんか？
- A
残念ながら難しいです。
標準のフォント（Arialなど）は英語・記号向けに最適化されていて、日本語の文字データが入っていません。
そのため、TextMeshProで日本語対応フォントを用意するのが一番確実です。
- QTextMeshProでフォントアセットに含める文字数はどのくらい必要ですか？
- A
必要な文字だけを含めるのが理想です。
全部の漢字を入れようとするとフォントアセットが数百MBになることもあります。
UIで使うメッセージ文など、実際に使う文章からコピーして貼り付けるのが効率的です。
- Qスマホや別のブラウザで見ると文字化けします。なぜですか？
- A
キャッシュやビルド設定の影響があるかもしれません。
特にWebGLは圧縮設定やキャッシュに敏感です。圧縮形式を変更したり、ブラウザのキャッシュを削除してから再確認してみてください。
関連記事:
【初心者必見】Unity WebGLビルドエラーの原因と対処法まとめ
Unityの使い方⑫TextMeshProで日本語を表示できるようにしよう
【実践】UnityでJSONデータ管理！セーブ＆ロードを最適化する方法
Unityスマホゲームの収益化モデル完全比較｜最も稼げる方法はどれ？
【デバッグ強化】Unityのコンソールログを活用して効率的にバグを特定する方法
Unityのシリアライズ完全ガイド！データの保存・読み込みを自由自在に
メタルスラッグ風ゲームをUnityで作ろう！おすすめアセット10選
【Indieゲーム開発者向け】Unityで作ったゲームを効果的にプロモーションする方法
Unityで別シーンへ遷移！オブジェクトを指定座標へ移動させる方法を徹底解説
【完全解説】Unityの非同期処理！Coroutineとasync/awaitの違いと使い方
