ボーダー（Border）は、Unreal Engineのウィジェットブループリント（UMG）で使用されるUIコンポーネントの一つになります。

特定のエリアを囲んだり、背景を設定したり、装飾として使用できる。

※本記事はUE5.5.3時点の内容になります

主な用途

✅背景を付ける→テキストやボタンの背景を設定

✅枠線（Border）を作る→視認性を向上

✅装飾やデザインの統一→UIの見た目を整える

✅ウィジェットのコンテナとして使用→内部に他のウィジェットを配置

主なプロパティ

プロパティ	説明	設定例
Brush Color	背景色	白、黒、半透明など
Brush Image	背景画像	テクスチャやマテリアル
Padding	内側の余白	10,10,10,10
Border Color	枠線の色	赤、青、透明など
Horizontal Alignment	水平方向の配置	Left / Center / Right
Vertical Alignment	垂直方向の配置	Top / Center / Bottom

利用例について

シンプルな背景付きテキスト

1.Borderを追加
2.Brush Colorを白（#FFFFFF）
3.Border Colorを黒（#000000）
4.内部にTextを配置

簡易的ですが、背景を追加するだけでも、変わりますね！

画像付きボーダー

1.Borderを追加
2.Brush Imageにテクスチャ（例：UIFrameTexture）設定
3.サイズと配置を調整

こちらも簡単ですが、ボーダー追加後にBrushのImageを設定すると、UI上に画像を配置することが可能です！
画像の横の長さや縦の長さを個別に設定することができるので、さまざまなサイズで画像を利用することが可能です。

ボタンの装飾

1.Borderを追加
2.中にButtonを配置
3.ボーダーの背景色を設定
4.枠線を設定してボタンを強調

ボタンも簡単に配置ができます。
ボーダーとボタンの余白設定は、ボタンのDetailタブにあるPaddingを設定することで変更可能です。

ここまでのまとめ

項目	説明
ボーダーの役割	UIの装飾、背景、枠線、コンテナとして使用
主なプロパティ	色、画像、枠線の太さ、余白、配置設定
ボーダーの使い方	背景付きテキスト、装飾ボタン、画像フレーム
ブループリント制御	Set Brush Colorで色変更可能

ボーダーを活用すると、よりデザイン性の高いUIが作れるかもね！

BorderのEventについて

✅On Mouse Button Down
目的：マウスのボタンが押されたときに発生するイベント。
用途：ユーザーがボーダー上でクリックを開始したときに何かアクションをトリガーする場合に使用します。

✅On Mouse Button Up
目的：マウスボタンが離されたときに発生するイベント。
用途：クリックした後に何かのアクションを完了させる場合や、ボーダーを離したときの動作を制御する場合に使用します。

✅On Mouse Move
目的：Borderがクリックされたときに発生するイベント。
用途：ボーダー上でマウスを動かした際にリアルタイムで何らかのビジュアルエフェクトを変更したり、ドラッグ＆ドロップの操作を行う場合に使用します。

✅On Mouse Double Click
目的：ボーダー上でダブルクリックが発生したときに呼び出されるイベント。
用途：ユーザーがボーダーをダブルクリックした際に特定のアクション（詳細画面の表示など）をトリガーする場合に使用します。

イベントの名称と用途のまとめ

イベント	説明	用途
On Mouse Button Down	マウスボタンが押されたとき	クリック時に何かのアクションをトリガー
On Mouse Button Up	マウスボタンが話されたとき	クリック完了後のアクションや状態変更
On Mouse Move	マウスが動いているとき	マウスの位置に応じたアクション（例：ホバーエフェクト）
On Mouse Double Click	ダブルクリックが発生したとき	ダブルクリック時に特定のアクションを実行