この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:8
ページ更新者:T
更新日時:2026-06-11 07:29:05

タイトル: ボタンに文字を記載する方法
SEOタイトル: UE5 UMG ボタンに文字を表示する方法（Button + TextBlock 配置 / Hierarchy の親子化 / 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：ウィジェットブループリント作成

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

手順 2：Button を配置

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

手順 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 を挟みましょう。

手順 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 にして角丸・色・テクスチャを変更できます。

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

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

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

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

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

TextBlock と EditableText の違い

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

多言語対応のヒント

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

まとめ

  1. Button の子要素として TextBlock を Hierarchy で親子化
  2. TextBlock の Text 欄に文字を入力し、Justification = Center
  3. Appearance / Style でフォントと 3 状態の見た目を整える
  4. OnClicked をバインドしてクリック処理を実装
  5. レベルブループリントで 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 を設定していない → マウスが反応しない（ゲーム入力にキャプチャされ続ける）

関連

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