◀ 5.

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 で個別に設定

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

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

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

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

3手順 2：Button を配置

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

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

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

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

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

テキストのフォント・色

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

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

ボタンの背景（3 状態）

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

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

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

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

  1. UMG エディタ右上の Graph ボタンでブループリントグラフに切り替え
  2. 左の Variables から StartButton を選択し、Details の Events > On Clicked の + をクリック
  3. 生成された On Clicked (StartButton) ノードに処理を繋ぐ
// 例：別レベルへの遷移（Blueprint ノード相当）
// On Clicked → Open Level (LevelName = "GameMap")

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

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

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

8TextBlock と EditableText の違い

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

9多言語対応のヒント

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

10まとめ

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

11動的にラベルを変える

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

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

12つまずきやすいポイント

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

13関連

  • UMG（Unreal Motion Graphics）— UE5 の UI システム
  • Widget Blueprint — UI を組むブループリント
  • TextBlock — 静的テキスト表示
  • OnClicked イベント — ボタンクリックハンドラ
  • Add to Viewport — ウィジェットを画面に表示
編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 床の上に乗ったらイベントを発生させる方法
  2. OverlapAllDynamicとOverlapAllの違い
  3. タイトル画面を作る方法
  4. サードパーソンテンプレートでのキャラクター表示の仕組みと非表示にする方法
  5. ボタンに文字を記載する方法
  6. Event ActorBeginOverlapとOn Component Begin Overlapの違い
  7. キャラクターに特定のオブジェクトとの当たり判定を付ける
  8. 特定のオブジェクトに触れたとき、キャラクターが倒れるようにする
  9. 動いているオブジェクトに静止しているキャラクターが当たり判定を持たない原因と解決方法
  10. 「On Component Hit」に「Cast To ～」で複数のクラスを指定する方法
  11. Blenderファイルをインポートする方法
  12. 鏡を作成する方法
  13. レベルブループリントでキャラクターの出現を設定する方法
  14. サードパーソンテンプレートにおけるキャラクター出現の定義
  15. アイテムに近づいたらボタンを押してイベントを発火させる方法
  16. 画面の中央にメッセージを表示する方法
  17. どこからでも呼び出せるカスタムイベントを作成する方法
  18. カスタムイベントに引数を追加する方法
  19. 「Get Overlapping Actors」から特定のクラスの場合のみ処理を実行する方法
  20. オブジェクトに近づいている間だけメッセージを表示する方法
  21. PCの画面を操作するUIを作る方法
  22. コンテンツブラウザに画像を追加する方法
  23. SetInputMode_UIOnlyを取り消す方法
  24. 特定の画像の上にマウスカーソルを置いたら手マークにする方法
  25. オブジェクトがアウトライナーで選択できない原因と解決策
  26. PlayerStartを作成する方法
  27. メニュー画面を作成して開く方法
  28. 「Esc」キーを押してメニュー画面を開く方法
  29. イベントの「On Clicked」と「On Pressed」の違い
  30. 「Set Input Mode」の種類と使い方
  31. 「Set Game Paused」の使い方と詳細解説
  32. Motion Matchingとは？
  33. 「GameMode」と「GameModeBase」の違い
  34. マップに配置したTargetPointを取得する方法
  35. TargetPointにタグをつけて取得する方法
  36. Spawnしたインスタンスがイベントを実行する方法
  37. 特定の時間ごとに処理を実行する方法
  38. 数値をランダムで出力する方法
  39. ThirdPersonテンプレートでキャラクターの移動を歩くように変更する方法
  40. MaxWalkSpeedを変更する方法
  41. しゃがむ動作を導入する方法
  42. キャラクターのアニメーションを設定する方法
  43. 導入済みのプラグインを確認する方法
  44. Motion Matchingの導入と必要なプラグイン
  45. プレイヤーを非表示にする方法
  46. カメラを傾ける角度を制限させる方法
  47. 配列からランダムに重ならない要素を特定の数取得する方法
  48. カメラの映す画面に文字やエフェクトを付ける方法
  49. キャラクターやメッシュを非表示にした際にカメラが移動しなくなる問題の解決方法
  50. プライマリーデータアセットを活用する方法
  51. プレイヤーのHPといった変数を定義する最適な場所
  52. カメラに映った画面をスクリーンショットとして保存する方法
  53. ゲーム内のカメラ映像を保存して再表示する方法
  54. HighResShot を使って高解像度の画像を保存する方法（UE5）
  55. HighResShotで保存した画像のファイル名を取得する方法
  56. SceneCapture2DとFrameGrabberの画像保存方法の比較
  57. SceneCapture2Dを使用して画像を保存・取得する方法
  58. HighResShotとTake High Res Screenshotの違い
  59. ゲーム終了ボタンを作成する方法
  60. 「Save Game To Slot」の戻り値がfalseになる問題の解決方法
  61. 画面上にメッセージを指定された時間表示させる方法
  62. シェーダコンパイル時間を短縮する方法
  63. 「Take High Res Screenshot」実行時に「シェーダをコンパイル」に長時間待たされる問題とその解決策
  64. データベースを活用する方法
  65. UE5.5がインストールされた環境にUE5.4を追加で導入する方法
  66. World PartitionとWorld Compositionの違い
  67. オープンワールドテンプレートとは？
  68. ポーンをスポーンさせても視点を切り替えない方法
  69. キャラクター同士がすり抜けてしまう問題の解決方法
  70. キャラクターの外見を動的に変更
  71. World Partitionでインスタンスが「アンロード済み」になる問題
  72. データ アセットとデータ テーブルの違い
  73. コンポーネントイベントグラフ内で親クラスの変数にアクセスする方
  74. エディターのソースコードの自動保存の頻度を高める方法
  75. SpawnActorでSpawn Transform Rotationが反映されない理由
  76. ミニマップを表示しポーンの位置を反映する方法
  77. RInterp ToとVInterp Toの違い
  78. 毎秒実行するイベントの定義方法
  79. Niagara のエフェクトにコリジョンを持たせる方法
  80. 「Overlap」と「Hit」の違い
  81. OverlapはあるがHitがない原因
  82. Overlapした位置の座標を取得する方法
  83. ブループリントでレベル間のパラメータを受け渡す方法
2026-06-11 07:29:05 T 225

人気ページ

最近更新/作成されたページ