UE5で画像クリックでウィジェットを閉じる方法｜ButtonとOn Mouse Button Down

Unreal Engine 5（UE5）のUMGで「画像（Image）をクリックしたらそのウィジェットを閉じたい」場合は、Imageを「Button」の中に入れ、ButtonのOn Clickedイベントで閉じる処理（Remove from Parent など）を呼ぶ方法が最も確実です。Imageウィジェットはボタンのようなクリックイベントを直接持たないため、クリックを受け取れるButtonに包むか、On Mouse Button Down（マウス押下）をオーバーライドする形でクリックを拾う必要があります。この記事では、推奨される方法と代替手段、閉じる処理の書き方、つまずきやすいポイントまでを順に解説します。

11. なぜImageだけでは「クリックで閉じる」が作れないのか

UMGのウィジェットには、ユーザー操作に応じてイベントを発火するものと、そうでないものがあります。Buttonは「On Clicked」「On Pressed」「On Released」「On Hovered」といったクリック関連のイベントを公式に備えており、デザイナー上でウィジェットを選択すると、詳細パネルのイベント欄からこれらのイベントノードを簡単に追加できます。

一方でImageは、見た目（画像表示）を担当するウィジェットであり、Buttonのような「On Clicked」イベントを標準のイベント欄には持ちません。そのため、「Imageを選択して On Clicked を探す」というアプローチでは、目的のイベントが見つからないことになります。

クリックを画像で受け取りたい場合の考え方は、大きく2つに分かれます。

多くのケースでは、方法①が手軽で安定します。まずは方法①から見ていきましょう。

22. 方法①：ImageをButtonの中に入れてクリックで閉じる（推奨）

「×ボタン」のように、画像をクリックの当たり判定ごとButtonに任せる方法です。Buttonがクリックを受け取り、その中の画像が見た目を担当します。

2-1. ウィジェットの構成

ウィジェットブループリント上で、次のような階層を組みます。

手順は次のとおりです。

1. ウィジェットブループリントのデザイナーで、パレットからButtonを配置する。

2. そのButtonの子としてImageをドラッグして入れる。

3. Imageの「Brush」プロパティに表示したい画像（テクスチャ）を設定する。

4. Buttonの見た目を画像だけに見せたい場合は、Buttonの「Style」にある各状態（Normal / Hovered / Pressed）の背景を透明に近い設定にする。これにより、ユーザーには画像だけが見え、クリック判定はButtonが担当します。

2-2. On Clickedで閉じる処理をつなぐ

Buttonを選択した状態で、詳細パネル下部のイベント欄から「On Clicked」の＋を押すと、グラフにOn Clickedイベントノードが追加されます。あとは、このイベントから閉じる処理（次章の「3. ウィジェットを閉じる処理」）へつなぐだけです。

この方法のメリットは、クリック判定・ホバー演出・押下フィードバックといったボタンの機能をそのまま利用でき、追加のオーバーライドが不要なことです。一般的な「×ボタン」「閉じるボタン」はこの構成で十分実現できます。

33. 方法②：On Mouse Button DownでImage自体のクリックを拾う

Buttonで包まず、Image（あるいはそのImageを含むウィジェット）自体でマウスのクリックを直接受け取りたい場合は、On Mouse Button Down（マウスボタン押下イベント）のオーバーライドを使います。これはウィジェットがマウス押下を検知したときに呼ばれる関数で、戻り値として「このイベントを処理したかどうか（Handled / Unhandled）」を返す仕組みになっています。

3-1. クリックを受け取るための前提条件

マウス押下イベントを拾うには、対象のウィジェットが入力（ヒットテスト）を受け取れる状態である必要があります。ここがうまくいかない最大の原因になりやすいので、次の点を確認します。

「クリックしたImageだけ」を確実に判定したい場合の実装しやすい構成は、そのImageを単独の子ウィジェット（ユーザーウィジェット）として切り出し、その子ウィジェット側でOn Mouse Button Downをオーバーライドする形です。これにより、押下を受け取ったのがそのImage領域であることが明確になります。

3-2. 実装の流れ

1. クリック対象にしたいImage（またはそれを含むウィジェット）のVisibilityを「Visible」に設定する。

2. グラフ画面で「On Mouse Button Down」をオーバーライド（関数として追加）する。

3. そのイベントから閉じる処理（Remove from Parentなど）へつなぐ。

4. 必要に応じて、イベントの戻り値にHandledを返し、クリックがこのウィジェットで処理されたことを伝える。

なお、左クリックだけを対象にしたい場合は、押下イベントが渡してくる入力情報（押されたボタンの種類）を確認して分岐させると、誤動作を防げます。

44. ウィジェットを閉じる処理

クリックを受け取った後の「閉じる」処理は、方法①・方法②で共通です。基本はRemove from Parentを使います。

閉じる対象が「自分自身のウィジェット」であれば、グラフ内でその対象を参照してRemove from Parentを呼びます。ボタンや画像はあくまでウィジェット内の部品なので、閉じたいのは部品ではなく、それを含むウィジェット全体である点を意識してください。

4-1. 入力モードやカーソルを元に戻す

ポップアップやメニューを開くときに、入力モード（UI操作向けのモード）への切り替えやマウスカーソルの表示を行っていた場合は、閉じるタイミングで元の状態に戻す処理も忘れずに行います。たとえば、ゲーム操作に戻す入力モードへ切り替えたり、ゲーム中はカーソルを非表示に戻したりといった調整です。これを行わないと、ウィジェットを閉じてもUI操作モードのままになり、ゲーム側の操作が効かない、といった違和感につながります。

55. 具体例：×（バツ）ボタン画像でポップアップを閉じる

ここまでの内容を、よくある「ポップアップ右上の×ボタン」を例にまとめます。方法①（推奨）の構成です。

1. ポップアップ用のウィジェットブループリントを用意する。

2. 右上にButtonを配置し、その子に×印のImageを入れる。

3. Buttonの各状態（Normal / Hovered / Pressed）の背景を透明寄りにして、見た目を×画像だけにする。

4. ButtonのOn Clickedイベントを追加する。

5. On Clickedから、このポップアップウィジェット自身を対象にRemove from Parentを呼ぶ。

6. 必要なら、同じ流れの中で入力モードやカーソルの状態を元に戻す。

これで、×画像をクリックするとポップアップが閉じる挙動になります。ホバー時に×の色を変えるなどの演出も、ButtonのStyleで簡単に追加できます。

66. つまずきやすいポイント（落とし穴）

77. よくある質問（FAQ）

Q1. Buttonで包む方法と、On Mouse Button Downを使う方法はどちらが良いですか？

一般的な「クリックで閉じる」用途であれば、Buttonで包む方法①が手軽で安定します。On Clickedイベントがそのまま使え、ホバーや押下の演出も得られるためです。On Mouse Button Down（方法②）は、Buttonを使わずにImage領域で直接マウス押下を判定したい、押下と離しを細かく区別したい、といった事情があるときに選ぶとよいでしょう。

Q2. 画像をクリックしても何も起きません。何を確認すればよいですか？

方法②（On Mouse Button Down）の場合は、対象ウィジェットのVisibilityが「Visible」になっているかを最初に確認してください。ヒットテストを無効化する設定だとマウス入力を受け取りません。方法①（Button）の場合は、Imageが本当にButtonの子になっているか、On Clickedイベントが正しく閉じる処理につながっているか、別のウィジェットがButtonの上に重なってクリックを遮っていないかを順に確認します。

Q3. 閉じたウィジェットをあとでまた表示したい場合はどうすればよいですか？

Remove from Parentは表示ツリーから取り外す操作です。同じウィジェットを再表示したい運用では、毎回作り直して表示する方法と、取り外しの代わりにVisibilityで表示・非表示を切り替える方法があります。再表示の頻度が高いUIでは、削除ではなく表示状態の切り替えで管理すると扱いやすくなります。用途に応じて、どちらの方針にするかを決めてください。

88. まとめ

UE5のUMGで「画像をクリックしたらウィジェットを閉じる」を実現するポイントは、Imageがクリックイベントを直接持たないことを前提に、クリックを受け取れる仕組みを用意することです。最も簡単で確実なのは、ImageをButtonの中に入れてOn Clickedで閉じる方法①です。Buttonを使わずにImage領域で直接マウス押下を拾いたい場合は、On Mouse Button DownのオーバーライドとVisibility「Visible」を組み合わせる方法②が選択肢になります。閉じる処理はRemove from Parentを基本に、必要に応じて入力モードやカーソルの状態を元に戻すところまで含めて作ると、違和感のない閉じる動作になります。表示・操作仕様はUEのバージョンや設定によって挙動が異なる場合があるため、最終的な確認は実機（エディタでのプレイ）で行うことをおすすめします。