Unity6でWebGLビルドを作ったあと、ブラウザで開いた瞬間に……
- エディタではちゃんと日本語が見えていたのに、WebGLだと「□」や「???」になる
- UIテキストだけ消えたように見える（英数字は出るのに日本語だけ出ない）
- TextMeshProを使っているのに、なぜか文字化けする
こんな状態に当たると、焦りますよね。私も最初は「Unity6の不具合？」「WebGLって日本語ムリなの？」って疑いました🙂
でも安心してください。WebGLで日本語が文字化けする原因は、たいてい「バグ」ではなく「仕様＋設定不足」です。
とくに多いのが、日本語を含まないフォント（Arial / LiberationSansなど）を使っているケースと、エディタでは働いていたフォールバック（代替フォント）がWebGLだと効かないケース。この2つが重なると、ほぼ確実に「文字化け・未表示」が起きます。
この記事では、Unity初心者〜中級者の方でも迷わないように、
- なぜWebGLだけ日本語が壊れるのか（原因の整理）
- TextMeshProで日本語フォントを正しく設定する手順（最重要）
- ビルドにフォントを確実に含める方法
- それでも直らない時の切り分けチェック（設定・キャッシュ・入力）
この順番で、再現→解決までいけるようにまとめます。
ゴールは「なんとなく直った」ではなく、次から自分で原因を切り分けられる状態です。WebGLでの公開はここが最初の壁になりがちなので、一緒にサクッと越えちゃいましょう✨
結論：Unity WebGLの日本語文字化けは「フォント設定」でほぼ解決できる
先に結論からお伝えします。
UnityでWebGLビルドしたときに日本語が文字化け・表示されない原因のほとんどは、
- 日本語を含まないフォントを使っている
- WebGLではOSフォントのフォールバックが使えない
この2点です。
逆に言うと、TextMeshProで日本語対応フォントのFont Assetを正しく作成・設定すれば、ほぼ100％解決できます。
「エディタでは見えていたのに、WebGLだけダメだった」というケースも、実は
- エディタやPCビルドではOSフォントで“たまたま”補われていた
- WebGLではその補助が一切働かない
という仕様差が原因です。Unity6の不具合というより、WebGL特有の挙動ですね。
もし日本語フォントを設定しているのに直らない場合は、
- ビルド時にフォントアセットが除外されている
- 圧縮形式やキャッシュの影響を受けている
- InputFieldや入力系だけ別問題が起きている
といった「次の切り分けポイント」を確認する必要があります。
このあと本文では、
- なぜWebGLだけ日本語が壊れるのか（原因）
- 初心者でも失敗しないTextMeshPro日本語フォント設定
- 「設定したのに直らない」時のチェック順
を順番に解説していきます。
まずは、そもそもなぜWebGLで日本語が文字化けしやすいのかから見ていきましょう。
WebGLで日本語が文字化けする主な原因
Unityのエディタ上では問題なく日本語が表示されているのに、WebGLにすると一気に文字化けする……。
この現象はかなり多く、原因を知らないと「何が悪いのか分からない」状態に陥りやすいです。
ここでは、WebGLで日本語が壊れる代表的な原因を順番に整理します。
Unity標準フォント・TMP標準フォントは日本語に対応していない
まず一番多い原因がこれです。
UnityのUIやTextMeshProでデフォルト設定のまま使われがちな
- Arial
- LiberationSans（TextMeshProの初期フォント）
これらは英語圏向けフォントで、日本語の文字データを持っていません。
そのため、本来は日本語を表示できないのですが、エディタ上では次に説明する「フォールバック」によって、たまたま表示できているケースがあります。
エディタでは表示されるのにWebGLで壊れる理由（フォールバックの罠）
UnityエディタやPCビルドでは、
- フォントに文字が無い
- → OSに入っている別フォントで自動的に補う
というフォールバック（代替表示）が働きます。
その結果、
- 実は日本語非対応フォントを使っている
- でもエディタでは普通に見えている
という「一番やっかいな状態」になります。
WebGLではこのOSフォント依存のフォールバックが基本的に使えないため、
- □（豆腐）になる
- ??? に置き換わる
- 文字自体が消える
といった現象が一気に表面化します。
WebGLビルド時にフォントアセットが除外されることがある
もう一つ見落とされがちなのが、ビルド時のアセット除外（ストリッピング）です。
WebGLは容量を小さくするために、
- シーン上で使われていない
- 参照関係がUnityから追えない
と判断されたアセットを、ビルドから自動的に外します。
その結果、
- 日本語フォントを作ったのにWebGLで反映されない
- 一部の文字だけ表示されない
といった現象が起きることがあります。
UIやテキストがそもそも表示されないケースについては、こちらの記事も参考になります。
ここまでが「なぜWebGLで日本語が壊れやすいのか」の正体です。
次は、これらの問題を一気に解決できる、最も確実な方法である
TextMeshProでの日本語フォント設定を見ていきましょう。
【最重要】TextMeshProで日本語フォントを正しく設定する方法
WebGLで日本語文字化けを直すうえで、ここが一番大事なポイントです。
正直に言うと、Unity WebGLの日本語問題は、
「TextMeshProで日本語対応フォントを正しく設定できているか」でほぼ決まります。
逆にここを曖昧にしたまま他の設定をいじっても、遠回りになることが多いです。
まずは日本語対応フォントを用意する
最初に、日本語の文字データを含んだフォントが必要です。よく使われるのは次のあたりですね。
- Noto Sans JP（Google提供・汎用性が高い）
- M+ FONTS（軽量でゲーム向き）
- 源ノ角ゴシック（高品質だが重め）
フォント（.ttf / .otf）をUnityのProjectビューにインポートします。
※ここで重要なのは、「日本語フォントを使っているつもり」にならないこと。
Arialなどを使っている場合、日本語は入っていません。
Font Asset Creatorで日本語フォントアセットを作成する
次にTextMeshPro用のFont Assetを作ります。
- メニューから Window → TextMeshPro → Font Asset Creator を開く
- Source Font File に日本語フォントを指定
- Atlas Resolution を 4096×4096 もしくは 8192×8192 に設定
- Character Set を Custom Characters に変更
Character SetをCustomにすることで、
「使わない漢字まで全部入れて容量が爆増する」事故を防げます。
ひらがな・カタカナ・常用漢字など、
実際に使う文字だけを Custom Character List に入れるのがおすすめです。
生成したFont AssetをTextMeshProに必ず指定する
Font Assetを生成したら、
- TextMeshPro（UI / Text）コンポーネントの
- Font Asset に作成した日本語フォントを指定
これで初めて、WebGLでも日本語を表示できる状態になります。
「フォントは作ったけど、Font Assetを指定し忘れていた」
というミスも本当によくあるので、ここは必ず確認してください。
TextMeshProの日本語設定について、基礎から確認したい場合はこちらも参考になります。
ここまでできていれば、多くのケースで日本語文字化けは解消します。
次は、「設定したのにWebGLで反映されない」場合にチェックすべき、
フォントを確実にビルドへ含める方法を解説します。
フォントをWebGLビルドに確実に含める方法
TextMeshProで日本語フォントを正しく設定しても、
「それでもWebGLで日本語が出ない」というケースがあります。
その場合に疑うべきなのが、フォントアセットがビルドから除外されている問題です。
WebGLは容量削減のため、Unityが「使われていない」と判断したアセットを自動で外します。 そのため、設定は合っているのに表示されない、という状況が起きます。
シーンまたはPrefabに必ず配置する
まず一番シンプルで確実なのがこの方法です。
- 日本語フォントを設定したTextMeshProオブジェクトを
- 実際にシーン、もしくはPrefabとして配置する
これによりUnityは「このフォントは使われている」と判断し、 WebGLビルドに含めてくれます。
コード上で動的に生成するUIでも、
一度でもPrefabとして参照されていればOKなことが多いです。
Resourcesフォルダを使う方法（初心者向け）
もう一つ手軽なのが、フォントアセットを Resources フォルダに入れる方法です。
- Assets/Resources フォルダを作成
- その中にFont Assetを配置
Resources配下のアセットは、
Unityが「必ず必要なもの」と判断してビルドに含めます。
ただし、Resourcesはプロジェクトが大きくなると管理が大変になるため、 小〜中規模向けの応急処置と考えるのが無難です。
Addressablesでフォントを管理する（中級者向け）
UIやフォントを柔軟に管理したい場合は、 Addressable Asset Systemを使う方法もあります。
Addressablesを使えば、
- フォントを明示的にロードできる
- WebGLでも除外されにくい
- 将来的な多言語対応にも強い
といったメリットがあります。
Addressablesの基本や考え方については、こちらの記事が参考になります。
ここまでで、フォント設定＋ビルド除外対策はほぼ完了です。
それでも直らない場合は、
次にWebGLビルド設定やブラウザ側の問題を切り分けていきましょう。
WebGLビルド設定・ブラウザ側で確認すべきポイント
日本語フォントを正しく設定し、ビルドに含めたはずなのに、
それでもWebGLで表示がおかしい場合があります。
この段階まで来たら、フォントそのものではなく「実行環境」を疑っていきましょう。
Compression Formatの影響を切り分ける
まず確認してほしいのが、WebGLの圧縮設定です。
Player Settings → Publishing Settings → Compression Format が Gzip や Brotli になっている場合、
- サーバー側の設定
- ブラウザの挙動
によっては、フォントやテキスト関連のデータが正しく読み込まれないことがあります。
切り分けとして、一度 Disabled にしてビルドし直し、
日本語が正しく表示されるかを確認してみてください。
Disabledで直る場合は、Unity側ではなく配信環境側の問題の可能性が高いです。
HTMLテンプレートとUTF-8の指定
自作のHTMLテンプレートを使っている場合は、
文字コードの指定も必ず確認してください。
HTMLの <head> 内に、次の記述があるかをチェックします。
<meta charset="utf-8">これが無い、もしくは別の文字コードが指定されていると、 JavaScript側で日本語が正しく扱えないことがあります。
ブラウザキャッシュを必ずクリアする
WebGLはブラウザキャッシュの影響をとても受けやすいです。
フォントを修正したのに直らない場合、
実は古いビルドがそのまま使われているということも珍しくありません。
- Windows：Ctrl + Shift + R
- Mac：Command + Shift + R
で、キャッシュを無視した再読み込みを行ってください。
それでも怪しい場合は、
シークレットウィンドウでの確認もおすすめです。
WebGL特有のビルドトラブル全般については、こちらの記事も参考になります。
ここまで確認して問題がなければ、
次はInputFieldなど「日本語入力まわり」の話に進みます。
表示は直ったけど、入力できない…というのも、WebGLではよくある落とし穴なんです。
InputField・日本語入力ができない問題への対処
「日本語は表示できるようになったけど、
InputFieldに日本語が入力できない……」
ここでまた詰まる人、かなり多いです。
これはフォント設定の問題ではなく、
WebGLにおける日本語入力（IME）の制限が原因です。
WebGL標準のInputFieldは日本語入力に弱い
Unityの標準InputField（TMP含む）は、
WebGL環境では次のような制限があります。
- IME変換中の文字が正しく反映されない
- 確定前の日本語が入力欄に表示されない
- そもそも日本語入力ができないブラウザがある
これはUnity6の不具合というより、
WebGL＋ブラウザ＋IMEの仕様問題に近いです。
WebGLInput系スクリプトを使うのが定番対策
WebGLで日本語入力を扱いたい場合、
よく使われるのが WebGLInput 系のスクリプトです。
仕組みとしては、
- HTML側の input 要素を使ってIME入力を処理
- 確定した文字列だけをUnity側に返す
という形で、WebGLの弱点を回避しています。
チャット欄・名前入力・検索UIなど、
日本語入力が必須な場合はほぼ必須の対策と考えてOKです。
Unity6でビルドエラーが出る場合の注意点
Unity6環境でWebGLInput系スクリプトを使うと、
ビルド時にエラーが出るケースがあります。
よくある原因の一つが、スクリプト内の次の記述です。
using UnityEngine.Windows;この名前空間はWebGLでは使えないため、
削除することでビルドが通る場合があります。
入力まわりのトラブルが、
新Input SystemやUnity6特有の挙動と絡んでいる場合は、
次の記事も参考になります。
これで「表示」と「入力」の両方が揃いました。
次は、初心者がやりがちな勘違いや、
「それ不具合じゃないです」というポイントをまとめて整理します。
UI表現を強化したい人向け（文字化け対策の“次の一歩”）
ここまでの設定で、WebGLでも日本語が正しく「表示・入力」できる状態になったはずです。
ただ、実際にブラウザで動かしてみると、
「読めるけど、ちょっと味気ないな……」と感じることも多いんですよね。
WebGLは描画が軽量なぶん、
テキスト表現がそのままだとチープに見えやすいのも事実です。
ここでは、文字化け対策が終わったあとに入れると効果的なUI演出を紹介します。
文字をアニメーションさせて情報を伝えやすくする
会話文・チュートリアル・ストーリー表示などでは、
文字が一気に出るより、少しずつ表示されたほうが読みやすいです。
TextMeshPro対応で、
タイプライター風の演出を簡単に追加できるアセットがこちらです。
スクリプトをゴリゴリ書かなくても、
日本語テキストに自然な「間」を作れるので、WebGLとの相性も良いです。
Glitch表現は「不具合」と誤解されやすいので注意
サイバー系・ホラー系の作品では、
文字をわざと崩すGlitch演出を使いたくなることもあります。
ただし、WebGLでは
- 本当の文字化け
- 演出としてのGlitch
この2つが非常に誤解されやすいです。
TextMeshPro専用で、
「意図的な演出」と分かるGlitchを作れるアセットはこちら。
日本語フォント設定がきちんとできている状態で使うと、 「バグっぽさ」ではなく「演出」として成立しやすくなります。
次は、ここまで読んだあとに 初心者がつい勘違いしやすいポイントを整理します。
よくある誤解・初心者がやりがちなミス
最後に、WebGLの日本語文字化け対応で
特につまずきやすい勘違い・ミスをまとめておきます。
ここを知っておくだけで、同じトラブルを何度も繰り返さずに済みます。
フォントを変えただけで安心してしまう
日本語フォント（.ttf / .otf）をProjectに入れただけで、
「これでOK」と思ってしまうケースはとても多いです。
ですが実際に必要なのは、
- TextMeshPro用のFont Assetを作成する
- TextMeshProコンポーネントにそれを指定する
ここまでセットでやって、初めてWebGLでも日本語が表示されます。
Atlas Resolutionを無駄に最大にしてしまう
「日本語が多いから、とりあえず8192にしておこう」
という設定もありがちです。
確かに文字数は入りますが、
- ビルドサイズが大きくなる
- 読み込みが遅くなる
- 端末によっては不安定になる
といったデメリットもあります。
まずは 4096 で試し、
足りなければ拡張する、という順番がおすすめです。
日本語ファイル名・プロジェクト名を使っている
意外と見落とされがちなのが、
- プロジェクト名
- フォルダ名
- ビルド後のファイル名
に日本語（全角文字）を使っているケースです。
これが原因で、
- フォントが読み込まれない
- 一部環境だけ動かない
といったトラブルが起きることがあります。
WebGLでは、英数字のみで統一するのが安全です。
Unity6の不具合だと決めつけてしまう
「Unity6にしたら日本語が壊れた」という相談もありますが、
多くの場合は
- フォント設定が初期化された
- TMPの参照が外れた
- WebGLの仕様差が表に出ただけ
というパターンです。
まずはこの記事で紹介した順番で切り分けてみてください。
それでも再現性のある不具合があれば、
そのとき初めてUnity側の問題を疑う、くらいでちょうどいいです。
まとめ
Unity6でWebGLビルドしたときに日本語が文字化けする問題は、
一見ややこしそうですが、原因を分解するとシンプルです。
- WebGLでは日本語非対応フォントはそのまま表示できない
- エディタで見えていたのは、OSフォントのフォールバックによるもの
- TextMeshProで日本語フォントを正しく設定すればほぼ解決する
まず最優先でやるべきことは、
- 日本語対応フォントを用意する
- Font Asset CreatorでFont Assetを作成する
- TextMeshProコンポーネントに必ず指定する
ここまでで、多くの「WebGLだけ文字化けする」問題は解消できます。
それでも直らない場合は、
- フォントがビルドから除外されていないか
- Compression Formatや配信環境に問題がないか
- ブラウザキャッシュが残っていないか
- InputFieldなど入力系の別問題ではないか
この順番で切り分けていくのが、安全で無駄の少ない進め方です。
WebGLは「一度正しく設定できれば安定する」反面、
最初だけ仕様差でつまずきやすい分野でもあります。
今回の内容を押さえておけば、
今後別のプロジェクトやアップデート時にも落ち着いて対応できるはずです。
最後まで読んでいただき、ありがとうございました🙂
参考文献・参考リンク
- unityroom ヘルプ｜WebGLで日本語が表示されない場合の対処
- TechTech Note｜Unity WebGLでTextMeshProの日本語が表示されない問題
- NullExit｜Unity TextMeshProで日本語フォントを使う方法
- UUMAメモ｜Unity WebGLで日本語が表示されない原因と対策
- Matsubon Games｜Unity WebGLでInputFieldに日本語入力する方法
- Qiita｜Unity WebGLで日本語入力（IME）を扱う際の注意点
よくある質問（FAQ）
- Q日本語フォントは「全部の文字」を入れないとダメですか？
- A
いいえ、全部入れる必要はありません。
むしろ、ひらがな・カタカナ・常用漢字・実際に使う記号など、
必要な文字だけを指定してFont Assetを作るほうが安全です。全部入りにすると、
- Atlasサイズが巨大になる
- WebGLのロード時間が伸びる
- 環境によっては不安定になる
といったデメリットがあります。
最初は必要最低限 → 足りなければ追加、という運用がおすすめです。
- QこれはUnity6特有のバグですか？
- A
ほとんどの場合、Unity6特有のバグではありません。
Unityのバージョンに関係なく、
- WebGLではOSフォントに頼れない
- 日本語非対応フォントは表示できない
という仕様は以前から変わっていません。
Unity6にアップデートしたタイミングで問題が出た場合も、
- TMPの参照が外れた
- フォント設定が初期化された
といったケースがほとんどです。
まずはこの記事の手順どおりに設定を見直してみてください。
- Qスマホブラウザ（iOS / Android）でも同じ対策で大丈夫ですか？
- A
基本的には同じ対策でOKです。
TextMeshProの日本語フォント設定や、
フォントをビルドに含める対策は、PC・スマホ共通で有効です。ただしスマホの場合は、
- メモリが少ない
- 巨大なFont Atlasが読み込めない
といった制約があるため、
Atlas Resolutionを必要以上に大きくしない
使う文字を絞るこの2点は特に意識しておくと安定しやすくなります。
※当サイトはアフィリエイト広告を利用しています。リンクを経由して商品を購入された場合、当サイトに報酬が発生することがあります。
※本記事に記載しているAmazon商品情報（価格、在庫状況、割引、配送条件など）は、執筆時点のAmazon.co.jp上の情報に基づいています。
最新の価格・在庫・配送条件などの詳細は、Amazonの商品ページをご確認ください。