UE5でウィジェットを部品化して再利用する方法｜子User Widgetの作成と配置

Unreal Engine 5（UE5）のUMGで一部の領域を部品化して再利用するには、共通で使うUIを独立した「ウィジェットブループリント（User Widget）」として切り出し、それを親のウィジェットにドラッグして埋め込むのが基本的な方法です。一度作った部品はパレットの「User Created」カテゴリから何度でも配置でき、変更も切り出し元の1か所を直すだけで全体に反映されます。この記事では、部品化の考え方から作成・配置・データの受け渡し・Named Slotによる柔軟化までを順に整理します。

1ウィジェットの部品化とは

UMGにおける部品化とは、画面の中で繰り返し登場するUIのかたまり（たとえばアイコン付きのステータスバー、共通デザインのボタン、ダイアログのヘッダーなど）を、独立した1つのウィジェットブループリントとして作成し、それを別のウィジェットの中に部品として埋め込んで使い回す手法を指します。

UE5では、UMGで作成したウィジェットブループリントはいずれも「User Widget」として扱われ、他のウィジェットブループリントの中に配置できるようになっています。つまり特別な仕組みを用意しなくても、ウィジェットブループリントを作った時点でそれは「再利用可能な部品」になっているという点が理解の出発点です。この挙動はEpic公式ドキュメントでも、UMGで作成した各ウィジェットブループリントは他のウィジェットブループリント内で再利用・配置できる User Widget として説明されています。

2部品化の基本的な考え方

部品化を進めるときは、まず「どこを切り出すか」を決めます。判断の目安は次のとおりです。

切り出した共通UIは別のウィジェットブループリントとして独立させ、それを使う側（親ウィジェット）に埋め込みます。親は「枠組み」を担当し、子（部品）は「再利用される中身」を担当する、という役割分担をイメージすると整理しやすくなります。

3再利用する部品（User Widget）を作成する

まず、再利用したいUIを単体のウィジェットブループリントとして作成します。

1. 新しいウィジェットブループリントを作成する

・コンテンツブラウザで右クリックし、「User Interface」→「Widget Blueprint」を選択します。

・親クラスを尋ねられた場合は、通常は「User Widget」を選びます。

・役割が分かる名前を付けます（例：WBP_StatusBar、WBP_CommonButton など、部品であることが分かる命名にしておくと管理が楽になります）。

2. 部品としてのレイアウトを組む

・Designerタブで、Vertical BoxやHorizontal Box、Overlayなどのパネルを使い、再利用したいUIだけを組み立てます。

・部品を別ウィジェットに埋め込む前提では、ルートを必ずしもCanvas Panelにする必要はありません。むしろVertical Boxなどの自動レイアウト系パネルをルートにしておくと、埋め込み先のサイズに合わせて伸縮しやすく、扱いやすくなる場合があります（最終的なサイズ調整は埋め込み先のスロットで行うため）。

3. 外から制御したい部分を変数・関数として用意する

・部品内のテキストや画像など、親から値を変えたい要素については、後述のとおり変数や関数を用意して「外から設定できる入り口」を作っておきます。

4作成した部品を親ウィジェットに配置する

部品ができたら、それを使う側のウィジェットブループリントに埋め込みます。

1. 親のウィジェットブループリントを開く

・部品を使いたい側のウィジェットブループリントを開き、Designerタブを表示します。

2. パレットの「User Created」から部品を探す

・Designer左側のPalette（パレット）に「User Created」というカテゴリがあり、自作のウィジェットブループリント（先ほど作った部品）がここに一覧表示されます。

3. ドラッグして配置する

・「User Created」から目的の部品をHierarchy（階層）またはプレビュー上の配置先パネルへドラッグ＆ドロップします。Epic公式の手順でも、新しいウィジェットブループリント内で User Created にあるテンプレート用ウィジェットをパネル上へドラッグして配置する流れが示されています。

・配置後は、親のスロット設定（Anchors、Size、Paddingなど）で位置とサイズを調整します。

4. 必要なら「Is Variable」を有効にする

・配置した部品を選択し、Detailsパネルで「Is Variable」にチェックを入れると、その部品が親のグラフ（イベントグラフ）から参照できる変数になります。グラフ側から部品の関数を呼び出したい場合に有効化します。

5親から子（部品）へデータを渡す

部品を「同じ見た目で値だけ違う」形で使い回すには、親から子へデータを渡す入り口を子側に用意します。代表的な方法は次の3つです。

「Instance Editable」を有効にした変数は、その部品を親のDesignerで選択したときDetailsパネルに表示され、配置ごと（インスタンスごと）に異なる値を設定できます。Epic公式でも、UIウィジェットの見た目や挙動を決める変数を用意し、それを他のウィジェットブループリントで使うときにインスタンス単位で上書きできる、と説明されています。

注意点として、Detailsパネルに値を出すだけなら「Instance Editable」だけで足りますが、変数をグラフから読み書きしたい場合は「Blueprint Read Only」または「Blueprint Read Write」など、用途に応じた可視性の設定が必要になります。とくにC++側でBindWidgetを使って関連付けたウィジェットは、ブループリントから触れるようにするためにプロパティの可視性指定が要る点に留意してください。

6中身を差し替えられる部品にする（Named Slot）

「枠やヘッダーは共通だが、中身だけ毎回違うものを入れたい」というテンプレート的な部品を作りたい場合は、Named Slotを使います。

Named Slotは、部品の中に「あとから別のウィジェットを流し込める空き枠」を用意するためのウィジェットです。部品側にNamed Slotを配置しておくと、その部品を親で使うときに、Named Slotの中へ親側から任意のウィジェットを入れ込めるようになります。共通のフレーム（外枠・装飾・余白など）を部品として固定しつつ、中身だけを呼び出し側ごとに差し替えられるため、ダイアログのテンプレートやカード型UIなどに適しています。Epic公式でも、Named Slotを使ってUIテンプレートを作り、後から中身を埋める使い方が紹介されています。

使い方の流れは次のとおりです。

・部品（テンプレート側）のウィジェットブループリントで、中身を差し替えたい位置に「Named Slot」を配置します。

・その部品を親ウィジェットの「User Created」から配置すると、Hierarchy上でNamed Slotが「中身を入れられる枠」として表示されます。

・親側で、そのNamed Slotの中に表示したいウィジェットをドラッグして入れます。

7部品化のメリット

・修正が1か所で済む：デザインや仕様の変更があっても、切り出し元の部品を直すだけで、その部品を使っているすべての箇所に反映されます。同じUIを各画面に手作業でコピーしている状態と比べ、修正漏れが起きにくくなります。

・UIの統一感が出る：共通部品を使い回すことで、ボタンや見出しなどの見た目・余白・挙動が画面間でそろい、一貫したUIになります。

・重複の削減と見通しの良さ：同じレイアウトの作り込みを繰り返さずに済み、親ウィジェット側は「どの部品をどう並べるか」に集中できるため、全体の構造が把握しやすくなります。

8部品化でつまずきやすい落とし穴

9よくある質問（FAQ）

Q. 親に埋め込んだ部品の中の特定のボタンやテキストを、親側から直接操作できますか？

A. 部品（子）の内部要素は、既定では親から直接触れません。親から操作したい要素は、子側に「公開した変数・関数・カスタムイベント」を用意し、その入り口を通して操作するのが基本です。これにより、部品の内部構造を変えても、入り口さえ保てば親側のコードを壊さずに済みます。なお配置した部品自体を親グラフから参照したい場合は「Is Variable」を有効にします。

Q. 同じ部品を1つの画面に複数個置いて、それぞれ違う表示にできますか？

A. できます。子の変数を「Instance Editable」にしておけば、配置した部品ごとに親のDetailsパネルから別々の値を設定でき、同じ部品でもインスタンスごとに異なる見た目・内容にできます。動的に生成する場合は「Expose on Spawn」やSetter関数で個別に値を渡します。

Q. 「子ウィジェットを配置する」のとNamed Slotは何が違いますか？

A. 通常の配置は「決まった中身を持つ部品をそのまま埋め込む」方法で、見た目・中身ともに部品側で完結します。一方Named Slotは「枠だけ共通にして、中身は使う側から流し込む」ための仕組みです。中身が毎回変わるテンプレート（共通の枠を持つダイアログなど）にはNamed Slot、見た目も中身も再利用したいパーツには通常の配置、と使い分けると整理できます。

なお、メニュー名やパネルの細かな表記・既定値はUE5のバージョンによって異なる場合があります。実際の操作にあたっては、お使いのバージョンに対応する公式ドキュメントもあわせて確認することをおすすめします。