◀ 24.

UE5でホバー時にマウスカーソルを手の形にする方法｜Cursor設定

▶
編集

Unreal Engine 5（UE5）で特定の画像の上にマウスカーソルを乗せたときにカーソルを手の形（Hand）へ変えるには、その画像（Image）やボタン（Button）ウィジェットの詳細パネルにある「Cursor」プロパティを「Hand」に設定し、対象ウィジェットをヒットテスト可能（マウスを受け取れる状態）にするのが基本です。加えて、画面上にマウスカーソルが表示されている必要があります。本記事では、UMG（Unreal Motion Graphics）でホバー時にカーソルを手の形にする手順と、うまく動かないときに確認すべきポイントを整理して解説します。

この記事の要点
  • 画像やボタンの詳細パネルにある「Behavior」カテゴリの「Cursor」を「Hand」に設定すると、その上でカーソルが手の形になります。
  • 「Cursor」プロパティが見当たらない場合は、カテゴリ右側の小さな下向き矢印（Advanced）を開くと表示されます。
  • 対象ウィジェットがマウス入力を受け取れること（Visibility が「Visible」など、ヒットテスト可能な状態）が前提です。
  • 常にではなくホバー中だけ変えたい、あるいは複数状態を切り替えたい場合は、On Hovered / On Unhovered イベントで「Set Cursor」を使う方法もあります。
  • そもそもマウスカーソルが表示されていないと変化が見えないため、Player Controller 側で「Show Mouse Cursor」を有効にしておきます。
  • 挙動やプロパティ名はバージョンや環境で異なる場合があるため、最終的には公式ドキュメントとお使いのエディタ表示での確認をおすすめします。

カーソルが手の形に変わる仕組み

UMG の各ウィジェットには、そのウィジェットの上にマウスがあるときに表示するカーソル形状を指定する「Cursor」プロパティがあります。ここで「Hand」を選ぶと、マウスがそのウィジェットの当たり判定（ヒットテスト）領域に入ったときに、OS 標準の手の形カーソル（指差しカーソル）へ自動的に切り替わります。Web ページのリンクにカーソルを乗せたときと同じ見た目をイメージすると分かりやすいでしょう。

重要なのは、この切り替えが「ウィジェットがマウスのヒットテスト対象になっていること」を前提にしている点です。画像をただ表示しているだけでも、ヒットテストが有効であればカーソルは変化します。逆に、見た目上は画像が乗っていても、設定によってマウスを素通りさせている（ヒットテスト無効）と、カーソルは変わりません。

手順1：画像（Image）ウィジェットを用意する

まず、カーソルを手の形にしたい画像をウィジェットブループリント上に配置します。

1. ウィジェットブループリントを作成し、デザイナー（Designer）タブを開きます。

2. パレットから「Image」ウィジェットをキャンバスパネルなどに配置します。

3. 配置した Image を選択し、詳細パネルの「Appearance」カテゴリにある「Brush」へ表示したいテクスチャ（画像アセット）を設定します。

4. サイズや位置を調整します。

ボタンらしい挙動（クリック反応）も欲しい場合は、Image の代わりに「Button」ウィジェットを使い、その中に Image を入れる構成も一般的です。Button は標準でマウス入力を受け取れるため、ホバーやクリックの扱いが分かりやすくなります。

手順2：「Cursor」プロパティを「Hand」に設定する

次に、対象ウィジェット（Image または Button）の詳細パネルでカーソル形状を指定します。

1. 対象のウィジェットを選択します。

2. 詳細パネルの「Behavior（ビヘイビア）」カテゴリを探します。

3. カテゴリ内で「Cursor」プロパティを確認します。見つからない場合は、カテゴリ右下にある小さな下向き矢印（Advanced／詳細設定の展開）をクリックすると、隠れていたプロパティが表示されます。

4. 「Cursor」のドロップダウンを開き、「Hand」を選択します。初期値は「Default」または未指定（None）になっていることが多く、その状態では OS 標準の矢印カーソルのままになります。

5. 設定後、エディタ上部の「再生（Play）」でプレイインエディタ（PIE）を実行し、対象画像の上にマウスを移動して手の形に変わるか確認します。

「Cursor」プロパティで選べる主な値の例は次のとおりです。表示される候補はバージョンによって増減することがあります。

設定値カーソルの見た目（一般的な挙動）
DefaultOS 標準の既定カーソル（多くは矢印）
Hand手の形（指差し）。クリックできそうな要素の表現に使う
Cross hairs十字（照準）カーソル
I beamテキスト入力を示す I 字カーソル
Grab hand / Grab hand closedつかむ／つかんでいる状態を示す手のカーソル

手順3：対象をクリック可能・ヒットテスト可能にする

「Cursor」を「Hand」にしてもカーソルが変わらないときの多くは、ウィジェットがマウス入力を受け取れていないことが原因です。次の点を確認します。

Visibility（可視性）の設定: 対象ウィジェットの詳細パネルにある「Behavior」カテゴリの「Visibility」を確認します。マウスのヒットテストを受け取れる状態にする必要があります。代表的な値は以下のとおりです。

Visibility の値マウス入力（ヒットテスト）
Visible受け取る。クリックやホバーに反応する
Hit Test Invisible表示はされるが、自分も子も入力を受け取らない
Self Hit Test Invisible自分は入力を受け取らないが、子は受け取れる
Collapsed / Hidden非表示（Collapsed はレイアウト領域も占有しない）

カーソルを変えたい画像自体に反応させたい場合は、その画像の Visibility を「Visible」にします。なお Image ウィジェットの初期 Visibility はプロジェクトやバージョンによって異なることがあるため、意図通りか必ず確認してください。

手前に透明な要素が重なっていないか: 対象画像の上に、別のパネルや画像がヒットテスト有効な状態で重なっていると、そちらがマウスを先に受け取ってしまい、下の画像のカーソル設定が働きません。重なっている前面の要素は、入力を通したいなら Visibility を「Self Hit Test Invisible」などに調整します。

Button を使う場合: Button は標準でクリック可能・ヒットテスト有効です。Button の「Cursor」を「Hand」にすれば、その上で手の形になります（Button の中に置いた Image 単体ではなく、Button 側に設定するのが分かりやすい構成です）。

手順4：マウスカーソルを画面に表示する

そもそも画面上にマウスカーソルが表示されていなければ、形状の変化を目で確認できません。ゲームプレイ中にカーソルを表示するには、Player Controller 側で表示を有効にします。

主な方法は次のいずれかです。

1. Player Controller ブループリントの詳細パネルで「Show Mouse Cursor」を有効（チェックオン）にする。

2. ブループリントのノードで「Get Player Controller」から「Set Show Mouse Cursor」を呼び出し、Show Mouse Cursor を true にする。

また、UI 操作中はマウスが画面外へ出ないよう入力モードを調整しておくと扱いやすくなります。「Set Input Mode UI Only」や「Set Input Mode Game And UI」を併用するケースが一般的です。

ホバー中だけ手の形にしたい場合（Set Cursor）

「Cursor」プロパティで固定的に指定する方法とは別に、マウスが乗ったタイミングと外れたタイミングで動的に切り替えたい場合は、イベントとノードを使います。Button を使うと On Hovered / On Unhovered イベントが利用でき、実装しやすくなります。

大まかな流れは次のとおりです。

1. Button を選択し、詳細パネルの「Events」から「On Hovered」「On Unhovered」イベントを追加します。

2. On Hovered の実行ピンから、対象ウィジェットに対して「Set Cursor」ノードを呼び出し、カーソルに「Hand」を指定します。

3. On Unhovered では「Set Cursor」で「Default」に戻します。

下記はイベントグラフの考え方を疑似コードで示したものです（実際はノードで接続します）。

// On Hovered（マウスが乗ったとき）

Target Image -> Set Cursor (New Cursor = Hand)

 

// On Unhovered（マウスが外れたとき）

Target Image -> Set Cursor (New Cursor = Default)

なお、プレイヤー全体のカーソル状態を変えたい（特定ウィジェット上に限らない）場合は、Player Controller の「Get Mouse Cursor」「Set Mouse Cursor」相当の制御を使う方法もあります。用途に応じて、ウィジェット単位の「Set Cursor」と、コントローラ単位の制御を使い分けてください。

カーソルの見た目（アイコン）を変えたい場合

「Hand」を含む標準カーソルの見た目そのものを、独自のテクスチャやウィジェットに差し替えることもできます。プロジェクト設定から行う方法が一般的です。

1. 「Edit（編集）」→「Project Settings（プロジェクト設定）」を開きます。

2. 検索欄に「Cursor」や「Software」と入力し、カーソル関連の項目を探します。

3. 「Software Cursors」などの項目で、差し替えたいカーソル種別（例：Default、Hand）に対して、表示に使うウィジェットブループリントやテクスチャを割り当てます。

この設定を使うと、ホバー時の「Hand」表示を、ゲームの世界観に合わせた独自デザインのカーソルにできます。割り当てに使う項目名や対応するカーソル種別はバージョンによって異なることがあるため、エディタ上の表示で確認してください。

うまくいかないときのチェックリスト（落とし穴）

よくある原因と対処
  • 「Cursor」プロパティが見つからない: 「Behavior」カテゴリ右下の下向き矢印（Advanced）を開くと表示されます。閉じたままだと隠れています。
  • カーソルが表示されていない: Player Controller の「Show Mouse Cursor」が無効だと、形状変化を確認できません。先に表示を有効にします。
  • Visibility がヒットテスト無効になっている: 対象画像の Visibility が「Hit Test Invisible」などだとマウスを受け取らず、カーソルが変わりません。「Visible」にします。
  • 手前に別の要素が重なっている: 透明・半透明でもヒットテスト有効な要素が前面にあると、そちらが入力を奪います。前面要素の Visibility を調整します。
  • Image 単体に期待しているがクリック挙動も欲しい: クリック反応まで必要なら、Button でラップする構成が扱いやすいです。
  • 固定設定と動的設定の混在: 「Cursor」プロパティでの固定指定と、Set Cursor による動的変更を併用すると、意図しない状態が残ることがあります。On Unhovered で確実に戻す処理を入れます。

よくある質問（FAQ）

Q1. 画像（Image）に直接設定するのと、ボタン（Button）に設定するのはどちらが良いですか？

カーソルを手の形にするだけなら Image の「Cursor」を「Hand」にし、Visibility をヒットテスト可能にすれば足ります。ただしクリックや押下のフィードバック（On Clicked など）も使いたい場合は、Button を使うか Button で画像を包む構成が扱いやすく、ホバーイベントも利用できます。

Q2. 「Hand」に設定したのにカーソルが変わりません。

多くは「マウスカーソルが表示されていない」「対象の Visibility がヒットテスト無効」「手前に別要素が重なっている」のいずれかです。本記事の落とし穴チェックリストを上から順に確認してください。

Q3. ホバー中だけ手の形にして、外れたら矢印に戻したいです。

Button の On Hovered / On Unhovered イベントで「Set Cursor」を呼び出し、ホバー時に「Hand」、解除時に「Default」を指定する方法が分かりやすいです。固定の「Cursor」プロパティと併用する場合は、戻し処理を忘れないようにします。

Q4. 手の形カーソルのデザイン自体を変更できますか？

可能です。プロジェクト設定のカーソル関連項目（Software Cursors など）で、カーソル種別に独自のウィジェットやテクスチャを割り当てると、標準の手の形を任意のデザインへ差し替えられます。

まとめ

UE5 で特定の画像の上にカーソルを手の形にするには、対象ウィジェットの「Behavior」カテゴリにある「Cursor」を「Hand」に設定し、その画像がマウスのヒットテストを受け取れる状態（Visibility が Visible など）にしておくことが基本です。さらに、画面上にマウスカーソルが表示されていることも前提になります。ホバー時だけ動的に切り替えたい場合は Button のホバーイベントと「Set Cursor」を組み合わせ、見た目自体を変えたい場合はプロジェクト設定のカーソル項目を活用します。プロパティ名や挙動はバージョンや環境で差が出ることがあるため、最終的な確認は公式ドキュメントとお使いのエディタ表示で行うことをおすすめします。

編集
Post Share
子ページ

子ページはありません

同階層のページ
  1. 床の上に乗ったらイベントを発生させる方法
  2. OverlapAllDynamicとOverlapAllの違い
  3. タイトル画面を作る方法
  4. サードパーソンテンプレートでのキャラクター表示の仕組みと非表示にする方法
  5. ボタンに文字を記載する方法
  6. Event ActorBeginOverlapとOn Component Begin Overlapの違い
  7. キャラクターに特定のオブジェクトとの当たり判定を付ける
  8. 特定のオブジェクトに触れたとき、キャラクターが倒れるようにする
  9. 動いているオブジェクトに静止しているキャラクターが当たり判定を持たない原因と解決方法
  10. 「On Component Hit」に「Cast To ～」で複数のクラスを指定する方法
  11. Blenderファイルをインポートする方法
  12. 鏡を作成する方法
  13. レベルブループリントでキャラクターの出現を設定する方法
  14. サードパーソンテンプレートにおけるキャラクター出現の定義
  15. アイテムに近づいたらボタンを押してイベントを発火させる方法
  16. 画面の中央にメッセージを表示する方法
  17. どこからでも呼び出せるカスタムイベントを作成する方法
  18. カスタムイベントに引数を追加する方法
  19. 「Get Overlapping Actors」から特定のクラスの場合のみ処理を実行する方法
  20. オブジェクトに近づいている間だけメッセージを表示する方法
  21. PCの画面を操作するUIを作る方法
  22. コンテンツブラウザに画像を追加する方法
  23. SetInputMode_UIOnlyを取り消す方法
  24. 特定の画像の上にマウスカーソルを置いたら手マークにする方法
  25. オブジェクトがアウトライナーで選択できない原因と解決策
  26. PlayerStartを作成する方法
  27. メニュー画面を作成して開く方法
  28. 「Esc」キーを押してメニュー画面を開く方法
  29. イベントの「On Clicked」と「On Pressed」の違い
  30. 「Set Input Mode」の種類と使い方
  31. 「Set Game Paused」の使い方と詳細解説
  32. Motion Matchingとは？
  33. 「GameMode」と「GameModeBase」の違い
  34. マップに配置したTargetPointを取得する方法
  35. TargetPointにタグをつけて取得する方法
  36. Spawnしたインスタンスがイベントを実行する方法
  37. 特定の時間ごとに処理を実行する方法
  38. 数値をランダムで出力する方法
  39. ThirdPersonテンプレートでキャラクターの移動を歩くように変更する方法
  40. MaxWalkSpeedを変更する方法
  41. しゃがむ動作を導入する方法
  42. キャラクターのアニメーションを設定する方法
  43. 導入済みのプラグインを確認する方法
  44. Motion Matchingの導入と必要なプラグイン
  45. プレイヤーを非表示にする方法
  46. カメラを傾ける角度を制限させる方法
  47. 配列からランダムに重ならない要素を特定の数取得する方法
  48. カメラの映す画面に文字やエフェクトを付ける方法
  49. キャラクターやメッシュを非表示にした際にカメラが移動しなくなる問題の解決方法
  50. プライマリーデータアセットを活用する方法
  51. プレイヤーのHPといった変数を定義する最適な場所
  52. カメラに映った画面をスクリーンショットとして保存する方法
  53. ゲーム内のカメラ映像を保存して再表示する方法
  54. HighResShot を使って高解像度の画像を保存する方法（UE5）
  55. HighResShotで保存した画像のファイル名を取得する方法
  56. SceneCapture2DとFrameGrabberの画像保存方法の比較
  57. SceneCapture2Dを使用して画像を保存・取得する方法
  58. HighResShotとTake High Res Screenshotの違い
  59. ゲーム終了ボタンを作成する方法
  60. 「Save Game To Slot」の戻り値がfalseになる問題の解決方法
  61. 画面上にメッセージを指定された時間表示させる方法
  62. シェーダコンパイル時間を短縮する方法
  63. 「Take High Res Screenshot」実行時に「シェーダをコンパイル」に長時間待たされる問題とその解決策
  64. データベースを活用する方法
  65. UE5.5がインストールされた環境にUE5.4を追加で導入する方法
  66. World PartitionとWorld Compositionの違い
  67. オープンワールドテンプレートとは？
  68. ポーンをスポーンさせても視点を切り替えない方法
  69. キャラクター同士がすり抜けてしまう問題の解決方法
  70. キャラクターの外見を動的に変更
  71. World Partitionでインスタンスが「アンロード済み」になる問題
  72. データ アセットとデータ テーブルの違い
  73. コンポーネントイベントグラフ内で親クラスの変数にアクセスする方
  74. エディターのソースコードの自動保存の頻度を高める方法
  75. SpawnActorでSpawn Transform Rotationが反映されない理由
  76. ミニマップを表示しポーンの位置を反映する方法
  77. RInterp ToとVInterp Toの違い
  78. 毎秒実行するイベントの定義方法
  79. Niagara のエフェクトにコリジョンを持たせる方法
  80. 「Overlap」と「Hit」の違い
  81. OverlapはあるがHitがない原因
  82. Overlapした位置の座標を取得する方法
  83. ブループリントでレベル間のパラメータを受け渡す方法
2026-06-13 13:26:28 atom 53

人気ページ

最近更新/作成されたページ