タイトル: ウィジェット (Widget)
SEOタイトル: UE5のウィジェット(Widget/UMG)とは｜種類とUIの作り方・画面表示
Unreal Engine 5（UE5）のウィジェット（Widget）は、UMG（Unreal Motion Graphics）でUIを作るための部品です。ボタン・テキスト・画像・ゲージといった画面上の各パーツがそれぞれ1つのウィジェットで、これらを組み合わせてメニューやHUD（ヘッドアップディスプレイ）などのユーザーインターフェース（UI）を構築します。本記事では、ウィジェットの種類、Widget Blueprint（ウィジェットブループリント）での作り方、画面への表示方法、データの反映、つまずきやすい落とし穴までを順に解説します。
| この記事の要点 |
|---|
|
ウィジェットとは（UMGとWidget Blueprint）
UE5でUIを作る仕組みがUMG（Unreal Motion Graphics UI Designer）です。UMGで画面に配置する1つ1つのパーツが「ウィジェット」で、テキストを表示するTextや、押せるButton、画像を出すImageなどが該当します。これらは内部的には共通の基底クラス（UWidget）を継承しており、配置・サイズ・色などのプロパティを持ちます。
これらのウィジェットをまとめて1画面分のUIにしたものがWidget Blueprint（ウィジェットブループリント）です。Widget Blueprintは多くの場合UserWidgetを親クラスとして作成され、その内部にウィジェットを階層状（ウィジェットツリー）に並べていきます。たとえば「タイトルメニュー」というWidget Blueprintの中に、背景のImage・見出しのText・「はじめる」Buttonといった複数のウィジェットを含める、という構成になります。
つまり、ウィジェット＝部品、Widget Blueprint＝部品を組み合わせて作るUIの設計図、と整理すると理解しやすくなります。
主なウィジェットの種類
UMGには多数のウィジェットが用意されています。代表的なものを用途とともにまとめます。なお、どのウィジェットが利用できるか、細かなプロパティ名はバージョンにより異なる場合があるため、最終的な仕様はエディタ上やEpic Gamesの公式ドキュメントで確認することをおすすめします。
| 分類 | ウィジェット | 主な用途 |
|---|---|---|
| 表示 | Text | 文字列を表示する。スコアやメッセージなどに使う。 |
| 表示 | Image | 画像やアイコンを表示する。背景や装飾にも使う。 |
| 表示 | Progress Bar | HPやロード進捗などをゲージ（割合）で表示する。 |
| 入力 | Button | クリック／タップで操作を受け付ける。中に他の部品も置ける。 |
| 入力 | Check Box / Slider | オン・オフの切り替えや、数値の連続的な調整に使う。 |
| 入力 | Editable Text (Box) | ユーザーがキーボードで文字を入力する欄。 |
| レイアウト | Canvas Panel | 座標やアンカーで自由に配置する土台。最上位によく使われる。 |
| レイアウト | Vertical / Horizontal Box | 子要素を縦または横に自動で並べる。 |
| レイアウト | Grid Panel / Overlay | 格子状に整列、または要素を重ねて配置する。 |
レイアウト系のウィジェットは、それ自体は画面に何も描かず、内側に置いた子ウィジェットの並べ方を決める「入れ物」として機能します。表示・入力系の部品を、これらの入れ物の中に配置していくのが基本的な作り方です。
Widget Blueprintの作成と画面への表示
1. Widget Blueprintを作成する
コンテンツブラウザで右クリックし、「ユーザーインターフェース」→「ウィジェットブループリント」を選びます。親クラスを選ぶ画面が出た場合は、通常はUserWidgetを選択します。作成したアセットをダブルクリックすると、UMGの編集画面（Widget Blueprintエディタ）が開きます。
2. Designerで部品を配置する
編集画面のDesignerでは、左側のパレットからButtonやTextなどのウィジェットを画面プレビューへドラッグ＆ドロップして配置します。多くの場合、最上位にCanvas Panelを置き、その上に部品を並べたり、Vertical Boxなどで自動整列させたりします。後からブループリント側で操作したい部品は、詳細パネルのIs Variable（変数化）を有効にしておくと、Graphから参照できるようになります。
3. Create WidgetとAdd to Viewportで表示する
Widget Blueprintを作っただけでは画面には出ません。別のブループリント（レベルブループリントやプレイヤーキャラクター、プレイヤーコントローラーなど）から、次の2ステップで表示します。
- Create Widgetノードで、表示したいWidget Blueprintをクラスとして指定し、UIのインスタンスを生成する。
- その戻り値（Return Value）をAdd to ViewportノードのTargetにつなぎ、画面（ビューポート）へ追加する。
Create Widgetの戻り値は変数に保存しておくと、後で表示・非表示の切り替えや内容の更新を、作り直さずに行えます。なお、別のウィジェットの内部に子として組み込む場合は、Add to ViewportではなくレイアウトパネルのAdd Child系の方法を使います。Add to Viewportは「新しい画面（ウィンドウ）として最前面の階層に追加する」操作にあたります。
表示する場所を選ぶ際の目安として、いつ・どの単位で出したいUIかを基準にすると整理しやすくなります。ゲーム開始時から常に出しておきたいHUDはプレイヤー側のブループリントで生成し、特定の場面でだけ開くメニューはその場面を制御するブループリントで生成する、といった具合です。一度作ったUIを毎回作り直すと無駄が生じるため、頻繁に開閉するUIはCreate Widgetで一度だけ生成して変数に保持し、表示・非表示はVisibility（可視性）の切り替えで行う方法も有効です。
DesignerとGraphの役割
Widget Blueprintエディタは、画面右上のタブでDesignerとGraphを切り替えられます。役割は次のように分かれています。
| モード | 主な役割 |
|---|---|
| Designer | ウィジェットの配置・サイズ・色・アンカーなど、見た目とレイアウトを視覚的に編集する。 |
| Graph | ボタンが押されたときの処理や値の更新など、UIの動作（ロジック）をノードで組む。 |
たとえば「ボタンを押したらメニューを閉じる」という挙動は、DesignerでButtonを配置し、GraphでそのButtonのOnClickedイベントに処理をつなぐ、という分担になります。さらに、位置・サイズ・不透明度などを時間変化させるアニメーション機能もDesigner側に用意されており、Graphからアニメーションを再生して演出を加えられます。
データの反映（Bindingとイベント）
スコアやHPなど、ゲーム中に変化する値をUIへ反映する方法は大きく2通りあります。
- Binding（バインド）：TextのテキストやProgress Barの割合などのプロパティに関数を結びつけ、表示する値を関数の戻り値から自動で取得させる方法。設定は手軽ですが、後述のとおり評価タイミングに注意が必要です。
- イベント駆動での更新：値が変わった瞬間にだけ、Graphから対象ウィジェットの「Set Text」などを呼んで明示的に更新する方法。変化時のみ処理が走るため、負荷の面で有利になりやすいです。
頻繁には変化しない値や、変化のタイミングが明確な値は、イベント駆動での更新にしておくと無駄な処理を避けられます。たとえばスコアは、加算した瞬間にSet Textを呼べば十分で、毎フレーム表示し直す必要はありません。一方、HPゲージのように滑らかに増減させたい表示は、変化を補間しながら更新する設計が向きます。いずれの場合も、UIを操作するブループリント側が対象ウィジェットを参照できるよう、DesignerでIs Variableを有効にしておく点が共通の前提になります。
また、UIへ表示する元データ（スコアやHPの実体）は、ウィジェット側ではなくゲーム側のオブジェクトが保持し、ウィジェットはそれを参照して表示するだけ、という役割分担にしておくと、画面を作り直してもデータが失われず、管理も明快になります。
つまずきやすい落とし穴
| 症状・原因 | 対処の方向性 |
|---|---|
| Create WidgetしたのにUIが表示されない（Add to Viewport忘れ）。 | Create Widgetの戻り値をAdd to Viewportにつないでいるか確認する。 |
| 複数のUIが意図しない前後関係で重なって表示される。 | Add to ViewportやCanvas Panel配置時のZ Orderを見直し、前面に出したいUIに大きい値を設定する。 |
| UIのボタンが押せない、またはキャラクターが操作できなくなる。 | 入力モード（Input Mode）を用途に合わせて設定する。UI操作にはUI向け、ゲーム操作にはGame向けのモードを選ぶ。マウスカーソルの表示設定も併せて確認する。 |
| UIが増えると動作が重い（毎フレームのBindingやTickでの更新が多い）。 | 毎フレーム評価されるBindingや更新処理を減らし、値が変わった時だけ更新するイベント駆動へ切り替える。 |
とくにBindingは、表示のたびに結びつけた関数が繰り返し評価される場合があります。多数のウィジェットで重い計算をBindingに任せると負荷が積み重なるため、計算結果はあらかじめ変数に持たせ、変化時のみ反映する設計にすると安定しやすくなります。
FAQ
Q. 「ウィジェット」と「Widget Blueprint」は何が違いますか。
A. ウィジェットはButtonやTextといったUIの個々の部品を指します。Widget Blueprintは、それらの部品を組み合わせて1つのUIにまとめた設計図（アセット）です。部品を入れる箱がWidget Blueprint、と考えると区別しやすくなります。
Q. UIが画面に出ません。まず何を確認すべきですか。
A. 多くは「Create Widgetはしたが、Add to Viewportを呼んでいない」ケースです。次に、表示処理を書いたブループリントが実際に実行される場所にあるか、Z Orderで他のUIに隠れていないかを確認します。
Q. UIを表示したらキャラクターが動かせなくなりました。
A. 入力モードがUI操作側に切り替わっている可能性があります。UIを閉じたタイミングでゲーム操作向けの入力モードへ戻す、あるいは用途に応じてゲームとUIの両方を受け付けるモードを選ぶことで解決できる場合が多いです。具体的な設定項目はバージョンによって異なるため、公式ドキュメントの確認をおすすめします。
Q. 解像度の違う画面でレイアウトが崩れます。
A. Canvas Panel上で部品を絶対座標だけで配置していると、画面サイズが変わったときに崩れやすくなります。画面端や中央に追従させたい部品にはアンカーを設定し、要素を整列させたい箇所はVertical BoxやHorizontal Boxなどのレイアウトパネルに任せると、複数の解像度に対応しやすくなります。
ウィジェットとWidget Blueprint、Designer／Graphの役割、Create Widget→Add to Viewportという表示の流れを押さえれば、UE5でのUI制作の土台が固まります。まずはButtonとTextだけの簡単なWidget Blueprintを作り、画面に表示してクリックに反応させるところから始めると、全体像をつかみやすくなります。