UE5でメニュー画面を作成・表示する方法｜UMGとAdd to Viewport

▶

この記事の要点

UE5 のメニュー画面は ウィジェットブループリント（UMG）で UI を作り、Create Widget → Add to Viewport で表示する
ボタンの OnClicked イベントに Open Level / Quit Game / Remove from Parent を結線して、開始・終了・閉じるを実装
Set Input Mode UI Only / Game and UI / Game Only と Show Mouse Cursor で入力モードとカーソル表示を切り替える
メインメニューは 専用レベルに置き、Open Level でゲーム本編へ遷移するのが定番構成
ポーズメニューは Set Game Paused (true/false) で時間を止めるのがセオリー

1UE5 のメニュー画面の基本構成

Unreal Engine 5（UE5）でメニュー画面を作るときは、UMG（Unreal Motion Graphics）と呼ばれる UI システムを使います。具体的には ウィジェットブループリントで見た目を作り、レベルブループリントやプレイヤーコントローラーから Create Widget → Add to Viewport の流れで画面に表示します。

本ページでは、もっとも頻出するメインメニュー・ポーズメニューの作り方を順を追って解説します。

21. ウィジェットブループリントを作る

コンテンツブラウザで右クリック
ユーザーインターフェース → ウィジェットブループリント
親クラスは User Widget を選択
名前を WBP_MainMenu のように分かりやすく付ける

ダブルクリックでウィジェットエディタが開きます。デザイナタブで UI を配置していきます。

32. レイアウトの基本

要素	役割
Canvas Panel	ルートの自由配置パネル（デフォルト）
Vertical Box / Horizontal Box	ボタンを縦／横に並べる
Button	ボタン。OnClicked イベントを持つ
Text Block	テキスト表示。ボタン内の文字にも使う
Image	背景画像 / アイコン
Spacer	余白

メインメニューなら、Canvas Panel の中央に Vertical Box を置き、その中に「PLAY」「OPTIONS」「QUIT」のボタンを縦に並べるのが定番です。

43. ボタンのイベントを設定する

ウィジェットエディタ右上のGraphタブに切り替え、配置したボタンを選択して OnClicked イベントを追加します。

PLAY ボタン：ゲーム本編へ遷移

OnClicked (PlayButton) → Open Level (by Name) → ゲーム本編のレベル名を入れる
Remove from Parent で自身を消す（任意。Open Level するとレベルが変わるので必須ではない）

OPTIONS ボタン：設定ウィジェットを表示

OnClicked (OptionsButton) → Create Widget（クラス: WBP_Options）→ Add to Viewport
必要に応じてメインメニュー側を Set Visibility → Collapsed で隠す

QUIT ボタン：ゲームを終了

OnClicked (QuitButton) → Quit Game（Player Controller を渡す）
Quit Preference は Quit（モバイルなら Background も可）

54. メインメニューをレベルブループリントから表示する

メインメニュー専用のレベル（例: L_MainMenu）を作り、そのレベルブループリントで以下の処理を組みます。

Event BeginPlay
→ Create Widget（Class: WBP_MainMenu、Owning Player: Get Player Controller）
→ Add to Viewport
→ Set Input Mode UI Only（Player Controller / In Widget to Focus にウィジェット参照）
→ Set Show Mouse Cursor (true)（Player Controller の関数）

65. ポーズメニュー（ゲーム中の Esc 開閉）

ゲーム本編で Esc キーを押したらポーズメニューを開く処理は、プレイヤーコントローラーのブループリントが置き場所として最適です。

入力アクションの設定

Project Settings → Input → Action Mappings に PauseMenu を追加し、Esc キーをバインド
プレイヤーコントローラーの BP で InputAction PauseMenu イベントを作る

開く処理

Create Widget（Class: WBP_PauseMenu）
→ Add to Viewport
→ Set Game Paused (true)（UGameplayStatics）
→ Set Input Mode Game and UI
→ Set Show Mouse Cursor (true)

閉じる処理（メニュー内の「再開」ボタン）

Remove from Parent（自身のウィジェット参照）
→ Set Game Paused (false)
→ Set Input Mode Game Only
→ Set Show Mouse Cursor (false)

76. 入力モードとマウスカーソル

UI のクリック可否やキャラクター移動可否は、Set Input Mode 系の関数で切り替えます。

関数	用途
Set Input Mode UI Only	メインメニューなどゲーム入力を完全に止めたいとき
Set Input Mode Game and UI	ポーズメニュー / インベントリ。両方の入力を受け取る
Set Input Mode Game Only	通常プレイ。マウスカーソルを隠す
Set Show Mouse Cursor	マウスカーソルの表示／非表示

87. よくあるトラブル

症状	原因と対処
ボタンが押せない	Set Input Mode が Game Only のまま / マウスカーソル非表示 / Z オーダーで別ウィジェットが上に
2 重に開く	開く処理にトグル制御が無い。ウィジェット参照を変数に保持して `Is Valid` で判定
ポーズ中にアニメが動く	そのアニメ / コンポーネントが Tick when Paused になっている。普通は Off
レベル遷移後に UI が残る	Open Level 前に Remove from Parent または Remove All Widgets
キーが効かなくなる	UI Only に切り替えたまま閉じていない

98. C++ で同じことをする場合

// 例: PlayerController.cpp
void AMyPlayerController::ShowPauseMenu()
{
    if (PauseMenuClass)
    {
        UUserWidget* W = CreateWidget<UUserWidget>(this, PauseMenuClass);
        if (W)
        {
            W->AddToViewport();
            UGameplayStatics::SetGamePaused(this, true);
            bShowMouseCursor = true;
            FInputModeGameAndUI Mode;
            Mode.SetWidgetToFocus(W->TakeWidget());
            SetInputMode(Mode);
        }
    }
}

10まとめ

ウィジェットブループリントで UI をデザイン
各ボタンの OnClicked にゲーム遷移／設定表示／終了を結線
Create Widget → Add to Viewport で画面に出す
Set Input Mode と Show Mouse Cursor を必ずペアで切り替え
ポーズメニューは Set Game Paused で時間を止める

11関連

UMG / Widget Blueprint — UE5 の UI システム
Create Widget / Add to Viewport — UI の表示
Set Input Mode — 入力モード切替
Open Level / Quit Game — レベル遷移とゲーム終了
Set Game Paused — ゲームの一時停止

編集

子ページ

子ページはありません

同階層のページ

2026-06-11 07:07:02 T 281

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

PHP $_SERVERとは｜DOCUMENT_ROOT・PHP_SELFなど主な要素 2026-08-07 17:15:57
PHPでのファイルアップロード方法｜multipart/form-dataと$_FILES 2026-08-07 17:15:57
Scratchのアカウントの作り方｜メールアドレスとユーザー名の登録手順 2026-08-07 17:15:57
Bluetoothとは｜仕組み・BLEとClassicの違い・用途 2026-08-07 17:15:57
Spring Bootのテスト入門｜@SpringBootTestとJUnitでの単体・結合テスト 2026-08-07 17:15:57
djangoにおけるMVCアプリケーション実装例 2026-08-07 17:15:57
Scratch 作品の公開方法 2026-08-07 17:15:56
【PHPフレームワーク】Laravelの使い方 2026-08-07 17:15:56
Google OAuth 2.0 認証の実装方法 2026-08-07 17:15:56
APIキー取得方法 2026-08-07 17:15:56
インストール方法(Windows版) 2026-08-07 17:15:56
Java とは？言語仕様・JVM・主要フレームワーク一覧 2026-08-07 17:15:56
データベースとは？RDB / NoSQL / SQL の基礎 2026-08-07 17:15:56
インストール(eclipseプラグイン) 2026-08-07 17:15:56
Spring Frameworkの使い方 2026-08-07 17:15:56

ページ一覧

その他