UE5 UMGボタンに文字を表示する方法｜TextBlock配置とOnClicked

▶

この記事の要点

UE5（Unreal Engine 5）でボタンに文字を載せるには、UMG（Unreal Motion Graphics）で Button の子要素に TextBlock を入れる
通常の用途では TextBlock を使う。EditableText は入力可能なテキストフィールド用途で、ボタンラベルには不向き
配置は Hierarchy パネルで Button の下にドラッグして親子関係を作る
OnClicked イベントをグラフでバインドしてクリック時の処理を書く
フォント・色・サイズは Details > Appearance > Font、ボタンの背景は Style > Normal / Hovered / Pressed で個別に設定

結論：Button の子に TextBlock を入れる

UE5 でボタンに文字を載せる正攻法は、UMG ウィジェットエディタで Button を配置し、その子要素として TextBlock を入れることです。Button はそれ自体に文字表示機能を持たない単なるクリック可能な枠で、内側に好きな子ウィジェット（テキストや画像）を 1 つ持てます。

手順 1：ウィジェットブループリント作成

コンテンツブラウザで右クリック → User Interface > Widget Blueprint
名前を WBP_MainMenu など分かりやすい名前にリネーム
ダブルクリックして UMG エディタを開く

手順 2：Button を配置

左の Palette パネルから Common > Button を Canvas へドラッグ
位置とサイズを調整（または Anchor で中央寄せ）
Hierarchy パネル上で名前を StartButton 等に変更

手順 3：TextBlock を Button の子にする

Palette から Common > Text（TextBlock）を Canvas にドラッグ
Hierarchy パネルで Text を StartButton の上にドラッグして子要素にする
Details パネルで Text 欄に表示したい文字（例：Start Game）を入力
必要なら Justification を Center にして中央寄せ

ポイント： Button は子を 1 つだけ持てます。文字 + アイコンなど複数並べたい場合は、間に Horizontal Box や Overlay を挟みましょう。

手順 4：見た目をカスタマイズ

テキストのフォント・色

TextBlock を選択 → Details > Appearance で以下を設定。

項目	役割
Font > Family	使用フォント
Font > Size	文字サイズ（pt）
Font > Typeface	Regular / Bold / Italic 等
Color and Opacity	文字色
Shadow Offset / Color	影

ボタンの背景（3 状態）

Button を選択 → Details > Style に通常 / ホバー / 押下時の3 状態がある。

状態	説明
`Normal`	通常状態の見た目
`Hovered`	マウスオーバー時
`Pressed`	押下中
`Disabled`	非活性

各状態の Draw As を Box や Image にして角丸・色・テクスチャを変更できます。

手順 5：OnClicked イベントをバインド

UMG エディタ右上の Graph ボタンでブループリントグラフに切り替え
左の Variables から StartButton を選択し、Details の Events > On Clicked の + をクリック
生成された On Clicked (StartButton) ノードに処理を繋ぐ

// 例：別レベルへの遷移（Blueprint ノード相当）
// On Clicked → Open Level (LevelName = "GameMap")

手順 6：ビューポートに追加

レベルブループリントなどで以下のフローを組みます。

Event BeginPlay
Create Widget（Class = WBP_MainMenu）
Add to Viewport
必要に応じて Set Input Mode UI Only + Show Mouse Cursor

TextBlock と EditableText の違い

ウィジェット	用途	ボタンラベル
`TextBlock`	静的なラベル表示	これを使う
`EditableText`	1 行のテキスト入力	不向き（クリックを奪う）
`EditableTextBox`	枠付きテキスト入力	不向き
`MultiLineEditableText`	複数行入力	不向き

多言語対応のヒント

TextBlock の Text 欄の右にある地球マークからローカライズキーを設定すると、ローカライゼーションダッシュボードで言語別に文字を差し替えられます。プロジェクト全体で日本語 / 英語対応するときに必須。

まとめ

Button の子要素として TextBlock を Hierarchy で親子化
TextBlock の Text 欄に文字を入力し、Justification = Center
Appearance / Style でフォントと 3 状態の見た目を整える
OnClicked をバインドしてクリック処理を実装
レベルブループリントで Create Widget + Add to Viewport

動的にラベルを変える

言語切り替え・スコア表示・購入確認などでラベル文字を動的に差し替えたい場合は、TextBlock を Variable 化（Designer の Details で「Is Variable」にチェック）して、ブループリントから SetText ノードで書き換えます。バインディングを使えば毎フレーム評価される値（残機数・所持金など）も自動で反映できますが、コストが高いので頻繁に変わらない値には SetText 直叩きが軽量です。

// Blueprint 疑似コード
// Event Tick / OnPlayerScoreChanged
//   → StartButtonText (TextBlock) → SetText
//     → Format Text "スコア: {0}" with PlayerScore

つまずきやすいポイント

TextBlock を Button の子にしていない → ボタン枠の上に文字が浮いた状態になる
Button の Hit Test を奪う子要素（EditableText など）を入れている → クリックが効かない
OnClicked をDesigner 画面から付けようとして見つからない → Graph に切替えてから Details の Events から追加
Add to Viewport を呼んでいない → 画面に出ない
Set Input Mode を設定していない → マウスが反応しない（ゲーム入力にキャプチャされ続ける）

ページ一覧

その他