Unreal Engine 5（UE5）のUMGでボタン（Button）に文字（ラベル）を表示するには、Buttonの中に「テキスト（Text Block）」ウィジェットを子として配置し、そのText BlockのTextプロパティに文字列を入力します。Button自体には文字を直接書き込むプロパティが用意されておらず、Buttonはあくまで「入れ物（コンテナ）」として振る舞うためです。この記事では、Designer上でのText Blockの配置から、ブループリントによる動的なテキスト変更、見た目の調整、そして文字が表示されない場合の対処までを順を追って解説します。

この記事の要点
Buttonは「入れ物」。文字はButton本体ではなく、その中に入れたText Block（テキスト）に表示させる。 DesignerでButtonのなかへText Blockをドラッグ＆ドロップし、詳細パネルのText欄に表示したい文字を入力する。 実行中に文字を切り替えたいときは、Text Blockに対してSet Text (Text)ノードを使う。あるいはTextプロパティをBind（バインド）して関数の戻り値と連動させる。 Buttonは子を1つだけ持てる単一子コンテナ。複数の要素（アイコン＋文字など）を並べたいときは、Buttonの中にHorizontal Boxなどを挟む。 文字が見えないときは、テキスト色とボタン色のコントラスト・Visibility・フォントサイズ・バインドの戻り値を確認する。

1. なぜButtonに直接文字を書けないのか

UMGのButtonは、クリックやホバーといった操作と見た目（背景・各状態のスタイル）を担当するウィジェットで、内部に表示する内容そのものは持ちません。Buttonの詳細パネルを見ても「ここに表示する文字」を入力する欄は見当たらないはずです。これは仕様で、Buttonは子ウィジェットを1つだけ受け取り、それを表示する単一子コンテナとして設計されているためです。

そのため、ボタンに「OK」や「スタート」といったラベルを出したい場合は、Buttonの中にText Block（テキスト）を入れ、そのText Blockに文字を設定する、という二段構えになります。HTMLの<button>タグの中に文字を書くのと考え方は似ていますが、UMGでは「文字を表示する専用ウィジェット」を明示的に子として置く点が異なります。

2. ボタンを用意する

まずは文字を載せる対象となるButtonを配置します。すでにButtonがある場合はこの章は読み飛ばして構いません。

手順

1. コンテンツブラウザで右クリックし、「ユーザーインターフェース」→「ウィジェットブループリント」を選択して、ウィジェットブループリントを作成する（既存のものを使う場合は開くだけでよい）。

2. 作成したウィジェットブループリントをダブルクリックで開き、Designer（デザイナー）タブを表示する。

3. 左側のパレットから「Button」を探し、画面中央のキャンバス（またはVertical Boxなどのレイアウト用パネルの中）へドラッグ＆ドロップする。

4. 配置したButtonは、左上の「階層（Hierarchy）」パネルにツリー表示される。以降の作業はこの階層を見ながら進めると分かりやすい。

3. ボタンの中にText Blockを入れて文字を設定する

ここが本題です。Buttonの中にText Blockを子として入れ、文字を入力します。

手順

1. パレットから「Text」（Text Block）を探す。

2. 「Text」を、階層パネルに表示されているButtonの上へ重ねるようにドラッグ＆ドロップする。Buttonがハイライトされた状態でドロップすると、Buttonの子としてText Blockが入る。階層上で「Button ▸ Text」という親子関係になっていれば成功。

3. 階層パネルで追加したText Blockを選択し、右側の「詳細（Details）」パネルを開く。

4. 「Content」カテゴリにあるText欄に、ボタンに表示したい文字（例：「スタート」「OK」など）を入力する。入力と同時にDesigner上のボタンにも文字が反映される。

キャンバスに直接Text Blockを置いてしまうと、ボタンの上に文字が「乗っているだけ」でボタンの子にはなりません。その場合ボタンのサイズが文字に合わせて広がらず、レイアウトがずれる原因になります。必ず階層パネルでButtonの中にネスト（入れ子）されていることを確認してください。

4. 見た目（中央寄せ・余白・サイズ）を整える

文字を入れただけでは、左に寄っていたり、ボタンの端に文字が張り付いていたりすることがあります。Buttonは内部の余白や配置を「子ウィジェットのスロット（Slot）」設定で調整します。

階層パネルでButtonの中のText Blockを選択した状態で、詳細パネルの上部にある「Slot（Button Slot）」カテゴリを確認してください。主な項目は次のとおりです。

設定項目	役割	よく使う値の例
Horizontal Alignment	ボタン内での横方向の配置	中央寄せにするなら「Center」
Vertical Alignment	ボタン内での縦方向の配置	中央寄せにするなら「Center」
Padding	文字とボタン枠のあいだの余白	四辺に数px程度（例：左右に大きめ、上下に少なめ）

横にも縦にも文字を中央へ置きたい場合は、Horizontal AlignmentとVertical Alignmentをともに「Center」に設定します。文字とボタンの縁がくっついて窮屈に見えるときは、Paddingを少し増やすと読みやすくなります。なお、文字サイズや色そのものはText Block側の詳細パネル（「Appearance」カテゴリのFontやColor and Opacity）で調整します。

5. 実行中にボタンの文字を動的に変更する

ゲーム実行中にボタンの文字を「開始」→「停止」のように切り替えたい、あるいは数値やプレイヤー名を反映したい場合は、ブループリントから変更します。方法は大きく2通りあります。

方法A：Set Text (Text) ノードで書き換える

イベント（クリックなど）が起きたタイミングで文字を差し替えるシンプルな方法です。

1. 文字を変更したいText Blockを選択し、詳細パネル右上の「Is Variable」にチェックを入れる。これでText Blockをブループリントのグラフから参照できるようになる。

2. Graph（グラフ）タブを開き、左の「Variables」から該当のText Blockをドラッグして「Get」ノードとして配置する。

3. そのノードから線を引き出し、Set Text (Text) ノードをつなぐ。

4. Set Textの「In Text」ピンに表示したい文字列をつなぐ。文字列リテラルを使う場合は、StringからText型へ変換するとよい（UMGの表示文字列はText型を使うため）。

下のように、変更したいきっかけのイベント（例：ボタンが押された）からSet Textへ実行ピンをつなぎます。

[Event] ──▶ [Set Text (Text)]     Target : MyTextBlock（対象のText Block）     In Text : "停止"（Text型）

「Set Text」というノード名はText Block用のものです。Button本体には文字設定用のSet Textはないため、ノード検索の際は対象がText Blockになっていることを確認してください。

方法B：TextプロパティをBind（バインド）する

表示する文字を「ある変数や計算結果に常に追従させたい」場合は、バインドが便利です。

1. Text Blockを選択し、詳細パネルのText欄の右側にある「Bind」ボタン（▼の付いたドロップダウン）をクリックする。

2. 「Create Binding」を選ぶと、Text型を返す関数が自動生成され、グラフに移動する。

3. その関数内で、表示したい文字を計算してReturn Nodeの戻り値（Text型）に接続する。たとえばスコア変数をFormat Textなどで文字列化して返す、といった使い方ができる。

バインドは「毎フレーム評価される」ため記述次第では負荷になり得ます。頻繁に変わらない文字であれば、方法AのSet Textで必要なときだけ更新するほうが軽量です。用途に応じて使い分けてください。

6. アイコンと文字を横に並べたいとき

Buttonは子を1つしか持てないため、「アイコン画像＋文字」のように2つ以上の要素を並べたい場合は、いったんButtonの中にHorizontal Box（横並びのレイアウト用パネル）を入れ、そのHorizontal Boxの中にImageとText Blockを並べます。階層は「Button ▸ Horizontal Box ▸（Image、Text Block）」という形になります。縦に積みたいならVertical Box、重ねたいならOverlayを使うなど、レイアウト用パネルを1段挟むのがポイントです。

7. 文字が表示されない・見えないときの対処

よくある落とし穴

Button本体に文字を書こうとしている：Buttonの詳細パネルには文字入力欄がない。文字はButtonの中に入れたText Block側で設定する。 Text Blockがボタンの子になっていない：キャンバスに直接置くと、見た目は重なっていてもボタンの一部にならない。階層パネルで「Button ▸ Text」の入れ子になっているか確認する。 文字色とボタン色が同系色：白いボタンに白い文字など、コントラスト不足で見えていないだけのことがある。Text BlockのColor and Opacityを変えて確認する。 フォントサイズが小さすぎる／ボタンが小さすぎる：文字がボタン枠で見切れているときは、フォントサイズかボタンのサイズ、またはPaddingを調整する。 VisibilityがCollapsed／Hidden：Text BlockのVisibilityが非表示系になっていると当然見えない。「Visible」になっているか確認する。 バインドの戻り値が空：Textをバインドしている場合、バインド関数が空のTextを返していると何も表示されない。Designerの入力欄ではなくバインド関数側の戻り値を確認する（バインド中はDesignerでの直接入力が反映されない点にも注意）。

8. よくある質問（FAQ）

Q1. Buttonの詳細パネルに文字を入れる欄が見当たりません。場所が違うのでしょうか？

場所の問題ではなく、Button本体には文字を入力する欄がないのが仕様です。文字はButtonの中にText Block（テキスト）を子として追加し、そのText欄に入力します。本記事の3章の手順で配置してください。

Q2. ボタンを押すたびに表示する文字を切り替えたいです。どうすればよいですか？

切り替え対象のText Blockを「Is Variable」にしてブループリントから参照できるようにし、ボタンのクリックイベントなどからSet Text (Text) ノードでText Blockの文字を書き換えます（5章の方法A）。フラグ変数で現在の状態を持ち、押すたびに表示文字を入れ替えるとトグル動作になります。

Q3. 文字は入力したのにボタン上に出てきません。原因として何が考えられますか？

主な原因は、Text Blockがボタンの子になっていない（キャンバスに直接置かれている）、文字色とボタン色のコントラストが不足している、フォントサイズやボタンが小さく見切れている、VisibilityがCollapsed／Hiddenになっている、Textをバインドしていて関数が空を返している、のいずれかです。7章のチェック項目を上から順に確認してください。

Q4. アイコンと文字を1つのボタンに同時に表示できますか？

できます。ただしButtonは子を1つしか持てないため、Buttonの中にHorizontal Boxなどのレイアウト用パネルを1段入れ、その中にImageとText Blockを並べます（6章参照）。

UMGでは「Buttonは入れ物、文字はその中のText Blockが担当する」という役割分担を押さえておくと、ボタンのラベル表示はもちろん、アイコン付きボタンや動的に変化するボタンも迷わず作れるようになります。なお、メニュー項目やパネルの細かな名称・操作はUE5のバージョンによって表記が異なる場合があるため、実際の表示が本記事と違う場合はお使いのバージョンの公式ドキュメントもあわせて確認することをおすすめします。