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

この記事の要点

UE5では、すべてのウィジェットブループリントが他のウィジェットに埋め込める「User Widget（部品）」として扱える。 共通UI（ボタン、ステータス表示、ヘッダーなど）を別のウィジェットブループリントに切り出し、親のDesignerでパレットの「User Created」からドラッグ配置して再利用する。 親から子へ値を渡すには、子側の変数に「Instance Editable（インスタンス編集可能）」と「Expose on Spawn」を設定するか、公開した関数を呼び出す。 埋め込んだ子をグラフから操作するには、配置時に「Is Variable」を有効にする。 中身の差し替えに対応したい部品は、子の中に「Named Slot」を置くことで、親側から任意のウィジェットを流し込めるテンプレートになる。 主なメリットは「修正が1か所で済む」「UIの統一感」「重複の削減」。落とし穴は循環参照・公開設定の漏れ・サイズ／アンカーのずれ。

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

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

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

部品化の基本的な考え方

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

判断の観点	部品化に向いているもの
出現回数	同じレイアウトが複数の画面・複数の箇所で繰り返し使われている
独立性	その領域だけで意味が完結し、外部との依存が少ない
変更頻度	デザインや仕様の変更が予想され、まとめて直したい
差し替え	枠は共通で、中身（テキストや一覧の項目）だけ変えたい

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

再利用する部品（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. 外から制御したい部分を変数・関数として用意する

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

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

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

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」にチェックを入れると、その部品が親のグラフ（イベントグラフ）から参照できる変数になります。グラフ側から部品の関数を呼び出したい場合に有効化します。

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

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

方法	設定の要点	向いている場面
公開変数（Instance Editable）	子の変数で「Instance Editable」を有効化。親のDetailsパネルから値を直接入力できる	固定的なラベルや色など、配置時に一度決めれば十分な値
Expose on Spawn	変数で「Expose on Spawn」を有効化。Create Widgetノードのピンとして値を渡せる	グラフから動的に生成し、生成時に値を渡したいとき
公開関数・カスタムイベント	子に「Setter」となる関数やイベントを用意し、親から呼び出して内部を更新	複数の値をまとめて反映、更新時に内部処理も走らせたいとき

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

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

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

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

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

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

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

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

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

部品化のメリット

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

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

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

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

落とし穴と対策

循環参照：親と子が互いを直接参照し合うと、依存関係が複雑になり、参照の解決やロードで問題が起きやすくなります。基本は「親が子を持つ」一方向の関係にとどめ、子から親へ伝えたいことはイベントディスパッチャー（Event Dispatcher）などで通知する形にすると、結合をゆるく保てます。 公開設定の漏れ：親から値を渡したいのに、子の変数で「Instance Editable」や「Expose on Spawn」を有効にし忘れると、親のDetailsパネルやCreate Widgetノードに入り口が出てきません。値が反映されないときは、まず子側の変数の公開設定を確認します。 サイズ・アンカーのずれ：部品を配置したのに大きさや位置が意図どおりにならない場合、原因は親のスロット設定にあることが多いです。Canvas Panelに置いたときのAnchors/Alignment、Box系に置いたときのSize（AutoかFillか）を確認し、部品側のルートパネルの種類と組み合わせて調整します。 「Is Variable」の付け忘れ：配置した部品をグラフから操作したいのに参照できない場合、「Is Variable」が無効のままになっていないか確認します。 中身の差し替えにNamed Slotを使い忘れる：枠だけ共通で中身を都度変えたいのに通常の固定UIで作ってしまうと、パターンごとに別部品が増えがちです。差し替え前提ならNamed Slotの採用を検討します。

よくある質問（FAQ）

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

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

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

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

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

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

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