TextMeshProで美しいテキストを表示しよう【Unityスタートガイド9-3】

2026-10-06

9-2で作ったテキスト、日本語を入れたら「□□□」になってしまいませんでしたか？今回は、TextMeshPro（TMP）で日本語を表示する方法と、縁取りや影で文字をかっこよく見せる方法をご紹介します！

この記事で学べること

TextMeshPro（TMP）とは何か
TMPを使う準備（TMP Essential Resources）
日本語フォントのフォントアセットの作り方（Dynamic）
フォールバックとデフォルトフォントの設定
グラデーション・アウトライン（縁取り）・アンダーレイ（影）

前提知識

テキスト、ボタン、画像の基本UI要素

TextMeshPro（TMP）とは？

TextMeshProは、Unityで文字をきれいに表示するための仕組みです。今のUnityでは、UIの文字は基本的にTMPを使います。

古いTextとの違い

古いText（Legacy）
- 文字を画像として描くので、拡大するとぼやける
- 縁取りなどの効果が少ない
- UI>Legacy>Textとして、今も残っています
TextMeshPro
- 拡大・縮小してもくっきり表示できる
- 縁取り・影・グラデーションなどを細かく設定できる
- 文字の一部だけ色や大きさを変える「リッチテキスト」も使える

TMPを使う準備

パッケージは最初から入っている

Unity6では、TextMeshProはUIの機能（Unity UI／uGUIパッケージ）の中に最初から入っています。Package Managerで別にインストールする必要はありません。古い記事に「Package ManagerでTextMeshProをインストール」と書いてあっても、Unity6ではこの手順は不要です。

TMP Essential Resourcesを取り込む

TMPで文字を表示するには、基本のフォントやシェーダーなど（Essential Resources）をプロジェクトに取り込む必要があります。

初めてUI>Text – TextMeshProを作ると、TMP Importerのウィンドウが自動で開くので、Import TMP Essentialsを押す
自分で開くときは、Window>TextMeshPro>Import TMP Essential Resources
Import TMP Examples & Extrasはサンプル集なので、なくても大丈夫です

取り込むと、Assetsの中に「TextMesh Pro」フォルダが作られます。

TMPのテキストを作る

Canvasを右クリック>UI>Text – TextMeshPro

作り方と基本の設定は9-2で説明したとおりです。

Font Asset：使うフォント（TMP専用のフォントアセット）
Material Preset：縁取りや影の設定が入ったマテリアル（後で説明します）

日本語フォントの設定

日本語フォントの準備

最初から入っているフォントアセット（LiberationSans SDF）には、日本語の文字が入っていません。日本語のフォントを用意しましょう。

Google Fontsで「Noto Sans JP」を探してダウンロード
中の.ttfファイル（例：NotoSansJP-Regular.ttf）を、Assets/Fontsフォルダなどにドラッグ＆ドロップ

オススメの日本語フォント

Noto Sans JP：Googleの無料のフォント。読みやすくてクセがない
M PLUS 1p / M PLUS Rounded 1c：丸みのあるものもあり、ゲームっぽい雰囲気に合う
どのフォントも、ゲームで使う前にライセンス（商用利用できるか）を確認しましょう

フォントアセットを作る（Dynamic）

TMPでフォントを使うには、フォントファイルからフォントアセットを作ります。

Projectウィンドウで、取り込んだフォント（.ttf）を右クリック
Create>TextMeshPro>Font Asset>SDFを選ぶ
「NotoSansJP-Regular SDF」というフォントアセットが作られる

こうして作ったフォントアセットは、Dynamic（ダイナミック）という種類になっています。

使われた文字を、その場でフォントファイルから読み込んで追加していく
日本語のように文字の種類がとても多い言語でも、最初から全部の漢字を入れておく必要がない
ゲームで入力した名前など、あらかじめ分からない文字も表示できる

Atlas Population Mode：Dynamic：文字をその場で追加する
Multi Atlas Textures：チェックを入れておくと、文字が増えて1枚の画像（アトラス）に入りきらなくなっても、自動で2枚目を作ってくれます。日本語ではチェックを入れておくのがオススメです

スライム

古い記事にある「Font Asset Creatorで漢字の範囲（4E00-9FFF）を全部入れる」方法は、漢字が2万字以上あって512の画像には入りきりません・・・日本語はDynamicで作るのが手軽です

フォントアセットを使う

Text (TMP)のFont Assetの欄に、作ったフォントアセットをドラッグ＆ドロップ
日本語を入力して、「□」ではなく正しく表示されればOK

フォールバックを設定する

フォールバックは、「このフォントに文字がなかったら、次はこのフォントで探す」という設定です。

Edit>Project Settings>TextMeshProを開く
Fallback Font Assetsのリストに、日本語のフォントアセットを追加する

こうしておくと、英語用のフォントを使っているテキストでも、日本語の部分だけ自動で日本語フォントで表示されます。「英語はかっこいい英語フォント、日本語はNoto Sans JP」のような使い分けが出来ます。

デフォルトのフォントにする

毎回Font Assetを設定するのが面倒な場合は、日本語フォントを最初から使われるフォントにしておきます。

Edit>Project Settings>TextMeshProのDefault Font Assetに、日本語のフォントアセットを設定

これで、これから新しく作るTMPのテキストには、最初から日本語フォントが使われます（すでに作ってあるテキストは変わらないので、個別に設定し直してください）。

日本語の改行（禁則処理）

句読点が行の先頭に来ないようにする「禁則処理」の設定も、同じEdit>Project Settings>TextMeshProにあります。Line Breaking for Asian languagesの項目で、行の頭に来てはいけない文字（。、）など）を設定できます。まずは初期設定のままで大丈夫です。

文字をかっこよく見せる

グラデーション

TextMeshPro – TextコンポーネントのColor Gradientにチェック
4つの角（左上・右上・左下・右下）の色を設定すると、文字全体にグラデーションがかかる

アウトライン（縁取り）

Inspectorの一番下にある、マテリアルの設定（「NotoSansJP-Regular SDF Material」など）を開く
OutlineのColorで縁の色、Thicknessで太さを設定

アンダーレイ（影）

同じマテリアルの設定のUnderlayにチェック
Offset X / Offset Y：影をずらす方向と距離
Dilate：影の太さ
Softness：影のぼかし

古い記事の「Shadow（Angle / Distance）」という項目は、TMPではUnderlayのことです。

マテリアルは共有されることに注意

アウトラインやアンダーレイは、フォントアセットのマテリアルの設定です。そのまま変えると、同じフォントを使っている全部のテキストに縁取りが付いてしまいます。

タイトルだけ縁取りしたいときは、ProjectウィンドウでフォントアセットのMaterialを複製（Ctrl+D）して、名前を「NotoSansJP-Title」のように付ける
タイトルのText (TMP)のMaterial Presetで、複製したマテリアルを選ぶ
縁取りや影は、複製したマテリアルの方で設定する

組み合わせると

グラデーション（金色からオレンジ色へ）
アウトライン（黒い縁取り）
アンダーレイ（うすい黒い影）

を組み合わせると、タイトルらしい文字になります。

フォントアセットの整理

Assets/
└── Fonts/
    ├── Source/
    │   └── NotoSansJP-Regular.ttf
    └── FontAssets/
        ├── NotoSansJP-Regular SDF.asset
        └── NotoSansJP-Title.mat   （タイトル用に複製したマテリアル）

元のフォントファイル（.ttf）は、Dynamicのフォントアセットが文字を読み込むのに使うので、消さないでください
太字を使いたい場合は、Bold（NotoSansJP-Bold.ttf）でも同じようにフォントアセットを作ります

実践：タイトルの文字を作ろう

9-2で作ったタイトル画面のTitleTextを選ぶ
Font Assetに日本語のフォントアセットを設定
Text Inputに日本語のタイトルを入力、Font Sizeを96に
フォントアセットのマテリアルを複製し、TitleTextのMaterial Presetに設定
複製したマテリアルで効果を設定
- Color Gradient：金色からオレンジ色
- Outline：黒、Thickness 0.2
- Underlay：黒、Offset X 1、Offset Y -1

注意点や小ネタ

文字が多すぎるときは

画面いっぱいに大量の文字を表示すると、動作が重くなることがあります。スマホ向けでは、縁取りや影を付ける文字は、タイトルなど目立たせたいところだけにしておくのがオススメです。

フォントのライセンス

フリーのフォントでも、商用利用や改変の条件はフォントごとに違います
Noto Sans JPはSIL Open Font Licenseで、ゲームへの組み込みも出来ます
必要に応じて、ゲームのクレジットにフォント名を書いておきましょう

フェアリー

文字の見た目はゲームの第一印象を大きく変えるよ！フォントを変えるだけで雰囲気がガラッと変わるから、いろいろ試してみてね

よくあるエラーと対処法

エラー：日本語が「□」で表示される

原因：Font Assetに日本語の文字が入っていない（LiberationSans SDFのまま）
対処法：日本語のフォントアセット（Dynamic）を作ってFont Assetに設定する。またはFallback Font Assetsに日本語のフォントアセットを追加する

エラー：Window>TextMeshProのメニューが見つからない・文字が表示されない

原因：TMP Essential Resourcesを取り込んでいない
対処法：Window>TextMeshPro>Import TMP Essential Resourcesを実行する

エラー：縁取りを付けたら、ほかのテキストまで縁取りされた

原因：フォントアセットの共通のマテリアルを変えた
対処法：マテリアルを複製して、Material Presetで使い分ける

エラー：ビルドしたゲームで、一部の漢字が□になる

原因：Dynamicのフォントアセットの元のフォントファイルを消した、または別のフォントアセット（Static）を使っている
対処法：元の.ttfを消さずに残しておく。Atlas Population ModeがDynamicになっているか確認する

エラー：文字がぼやける

原因：フォントアセットのSampling Point Sizeが小さい、またはCanvas Scalerの設定で文字がとても大きく拡大されている
対処法：フォントアセットのGeneration SettingsでSampling Point Sizeを上げる（90前後）

まとめ

UIの文字はTextMeshProを使う。Unity6ではインストール不要で、TMP Essential Resourcesの取り込みだけ
日本語は、フォントを右クリック>Create>TextMeshPro>Font Asset>SDFでDynamicのフォントアセットを作る
FallbackとDefault Font Assetで、日本語フォントを自動で使わせる
縁取りはOutline、影はUnderlay。変えるときはマテリアルを複製して使い分ける

次のステップ

文字の表示ができるようになったので、次はスクリプトからUIの表示を変える方法を学びましょう：

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

TextMeshProで美しいテキストを表示しよう【Unityスタートガイド9-3】

この記事で学べること

前提知識