ゲームにおいてUIは、プレイヤーの体験を支える重要な要素だ。本連載では、C&R Creative Studiosの2DCG専門スタジオ「Planet Design Studio」が、Unreal Engineを使用したUI制作の基本を段階的に解説していく。第1回は、UEのUI制作ツール「UMG」を使い、タイトル画面を作成しながら基本的なしくみを学ぶ。

＜1＞はじめに

みなさん、はじめまして！
C&R Creative StudiosのUIデザイナー、大谷です。

今回から始まる Unreal Engine 連載では、ゲーム開発の基礎から実践的なテクニックまで、段階を追って学べる内容をお届けします。Unreal Engine は非常に強力なゲームエンジンですが、初めて触ると「どこから始めればいいの？」と迷ってしまうポイントも多いですよね。

そこで第1回となる今回は、ゲームに欠かせない UI（ユーザーインターフェイス）をつくるためのしくみ「UMG」について、初心者向けにわかりやすく紹介していきます。

※本連載で使用するUEのバージョンは「5.7.3」です（UEのインストール手順は省略しています）。

＜2＞UMG（Unreal Motion Graphics）とは？

UMG（Unreal Motion Graphics）は、Unreal Engine に標準搭載されている UI制作ツール です。

✔ ゲーム画面にスコアを表示したい
✔ ボタンを配置してメニュー画面を作りたい
✔ ダメージを受けたときに赤いフラッシュを出したい

といった「画面に見える UI 演出」を作成するためのしくみが UMG です。Unity の Canvasに近い存在、と言うとイメージがしやすいかもしれません。

＜3＞UMGでできること

UMG を使うと、ノードを組むだけで、以下のことが簡単にできます。

1. UIウィジェットの作成

・テキスト
・画像
・ボタン
・プログレスバー

などをドラッグ＆ドロップで配置できます。

2. ブループリントを使った UI の動作制御

ブループリントのグラフを使って、

・ボタンを押したときの処理
・数値の更新（スコア、HP、経過時間など）
・UIアニメーションの再生

を作成することができます。

3. UI のアニメーション

UMG にはアニメーション機能があり、例えば

・フェードイン
・スケールアップ
・色を変える

などの演出も簡単に実装できます。

＜4＞UMGの基本パーツを理解しよう

Widget Blueprint（ウィジェットブループリント）

UIをつくるための“ひな型”です。メニュー画面、HPバー、ポップアップなど、全て Widget Blueprint から作成します。

Designer（デザイナー）タブ

画面に配置する UI パーツをドラッグ＆ドロップする場所。Photoshop でレイアウトするような感覚で UI を配置できます。

Graph（グラフ）タブ

UIの挙動を「イベント」や「関数」などのブループリントノードで設定する場所。

例：「ボタンが押されたら音を鳴らす」「数値のテキストを毎フレーム更新する」

＜5＞UI制作の下準備

それでは、実際にUIコンポーネントを触ってUI画面を作成し、実装までやってみましょう。

1：UEを起動してプロジェクトを作成

プロジェクトを作成していない場合は、画面左の項目にある［新規プロジェクト］を選択します。

［新規プロジェクト］を選択後、新規プロジェクト作成画面が表示されます。

①左の項目から［ゲーム］を選択
②サンプルデータは［ブランク］を選択
③プロジェクトはデフォルト設定のままでOK
④ プロジェクト名は任意で、今回は「MyProject2026」にしています
⑤［作成］を押してUEを起動させます

作成したプロジェクト名でUEの起動が開始されます。これでUEエディタが作成されました。

2：レベルデータの作成

UI画面を作成する前に、「レベル」と「UMG」の基本的な関係について説明します。

UEでは、ゲームのステージ（レベル）と、その中で表示される視覚的な要素（UMG）を組み合わせて使用します。「UMG」はアセットで言うと「ウィジェットブループリント」というアセットにあたります。

データは、コンテンツブラウザから新規作成できます。
まず、コンテンツブラウザ内の空いているスペースを右クリックします。

検索欄からも、該当するデータを選択することができます。レベルやUMG以外のデータを作成することも可能です。

今回は、「コンテンツ」直下に「Asset」フォルダを作成し、以下のような構成で下層フォルダを用意します。

①    Map：レベルデータを格納する場所
②    Texture：テクスチャ（イメージ）データを格納する場所
③    Widget：ウィジェットブループリントを格納する場所

Mapフォルダ内に「MAP_Title」のレベルデータを作成します。

後ほど、作成したレベルデータにウィジェットブループリントを表示する設定を行います。

3.ウィジェットブループリントデータを作成

続いて、ウィジェットブループリントにUI画面を作成していきます。

Widgetフォルダ内に「WBP_Title」のウィジェットブループリントを作成します。

作成した「WBP_Title」を開いてウィジェットブループリントエディタを開きましょう。開いている画面が「デザイナパネル」の画面になり、エディタUIの外観は以下の内容になります。

※1：メニューバー
一般的なメニューオプションが含まれます。

※2：ツールバー
ブループリントエディタで一般的に使用するコンパイル、保存、プレイなどの機能が多数あります。

※3：エディタモード
ブループリントエディタをデザイナモードとグラフモードの間で切り替えます。

※4：パレット
ビジュアルデザイナにドラッグ可能なウィジェットのリストです。UWidgetから継承したクラスを表示します。

※5：階層
ユーザーウィジェットの構造を表示します。このPaletteパネルにウィジェットをドラッグすることもできます。

※6：ビジュアルデザイナ
UIレイアウトを視覚的に表したものです。ビジュアルデザイナにドラッグされたウィジェットはウィンドウで操作できます。

※7：詳細
現在選択されているウィジェットのプロパティを表示します。このパネルでそれらを調整することができます。

※8：アニメーション
UMGのアニメーションとトラックです。ウィジェットのアニメーションキーフレーム化することができます。

また、※3のエディタモードから［グラフ］を選択すると「グラフパネル」の画面に切り替わります。

UI制作では、デザイナパネルの画面でボタンや画像などUI要素の配置を行い、グラフパネルの画面でボタンの処理やUIアニメーションの再生などのノードを追加します。

デザイナパネルの画面に戻り、UIを配置していきます。

＜6＞タイトル画面をつくってみよう

1.テクスチャの組み込み

いよいよ、タイトル画面を作成していきます。以下から使用する素材をダウンロードしてください。

【第1回素材データ】ダウンロードはこちら＞＞

素材を解凍していただくと、以下の2点のテクスチャが格納されています。
・Img_Logo.png

・Img_bg.png

コンテンツブラウザの「Texture」フォルダ内に、2点のテクスチャをドラッグ＆ドロップで追加します。

次に、追加した2つのテクスチャの設定を、デフォルト設定からUI用に変更します。

変更する主な理由は「ぼやけを解消し、クッキリ表示させるため」や「メモリの削減をするため」です。

追加したテクスチャを選択して、テクスチャエディタを開きます。

詳細パネル上で、以下の内容を変更します。

Texture Group：UI
圧縮設定：BC7 Compressed(BC7)

2.スケールボックスの配置

追加したテクスチャに対して設定をした後、UIに組み込みをしていきます。

ウィジェットブループリントエディタの「パレットパネル」の［▼パネル］以下にあるパネルウィジェットを選択して配置します。

●主なパネルウィジェットの種類と用途
・Overlay（オーバーレイ）：要素を重ねる（UIの上にテキストを表示する際など）
・Canvas Panel（キャンバスパネル）：自由な位置にアンカーを使って配置したい場合（HUDなど）
・Grid Panel（グリッドパネル）：スロットやアイテムリストなどのグリッドレイアウト
・Scale Box／Size Box（スケールボックス／サイズボックス）：子ウィジェットのサイズやスケールを指定する
・Border（ボーダー）：背景画像や枠線を付け、その中に別の要素を入れる

UMGに直接画像やテキストを配置することもできますが、パネルウィジェットを使う主な理由は、UIの構造化、自動配置、パフォーマンス最適化、そして画面サイズ変更への対応（レスポンシブデザイン）のためです。

今回は画面サイズの変更に対応できるようにするため、「スケールボックス」を使用してUIを配置していくかたちにします。

［▼パネル→スケールボックス］を選択して、ドラッグ＆ドロップで［階層→WBP_Title］の下に配置します。

これで、スケールボックスを配置することができました。

3.サイズボックスの配置

次に、「サイズボックス」を配置します。

今回は、画面サイズが変更されたときに、配置したテクスチャの比率が崩れないようなデータ構成にするため、スケールボックスの下にサイズボックスを配置します。

［▼パネル→サイズボックス］を選択して、ドラッグ＆ドロップで［階層→スケールボックス］の下に配置します。

エディタ上のサイズボックスは小さく表示されています。

続いて、サイズボックスの詳細パネルより以下の設定を行います。

▼スロット（スケールボックススロット）
Horizontal Alignment：水平方向に塗りつぶし
Vertical Alignment：垂直方向に塗りつぶし
※親コンテナ（スケールボックス）に合わせて中身のコンテンツ（画像やテキスト）を横いっぱいに引き延ばす設定

▼チャイルドレイアウト
Width Override：0.0　※チェックを入れる
Height Override： 0.0　※チェックを入れる
※中身のコンテンツのサイズを固定にする。画面比率が変わってもサイズを維持させるためにチェックを入れます。

設定後のサイズボックスは以下のように表示されます。

4.キャンパスパネルの配置

次にサイズボックス下の階層に「キャンバスパネル」を配置します。

［▼パネル→キャンバスパネル］を選択し、ドラッグ＆ドロップで［階層→サイズボックス］の下に配置します。

このキャンバスパネルに対しては、詳細パネルでの設定は不要です。

5.ボーダーの配置

ここまででUIを配置するベースができました。

次に、背景のテクスチャを反映させるため、［▼一般］の項目にある［ボーダー］をキャンバスパネルの下に配置します。

配置したボーダーは、エディタ上では小さく表示されているので、サイズやアンカーの設定をします。

配置したボーダーを選択し、詳細パネルの［スロット→アンカー］を選択してメニューを開き、右下の［両方向の引き延ばし］を選択します。

次に、以下の項目の数値を変更します。

右オフセット：0.0
下オフセット：0.0

設定後のボーダーの表示は以下のようになります。

UEのUMGにおけるアンカー（Anchor）は、UI要素を画面の特定位置（左上、中央、四隅など）に固定し、画面の解像度やアスペクト比が変更された際にUIが崩れないようにするための機能です。

キャンバスパネル内でウィジェットの基準位置を定義します。アンカーポイントの位置で「位置X,位置Y」の基準となる数値が変更されます。

今回のボーダーは、上の階層のキャンバスパネルの四隅に固定した設定となります。

ボーダーの設定が完了したので、ボーダーの名前を「Border_BG」に変更します。名前は詳細パネルより変更が可能です。

6.背景テクスチャの設定

次に、背景用のテクスチャを設定します。

詳細パネルから［アピアランス→Brush］の項目にある［Image］でテクスチャを選択します。

先ほどコンテンツブラウザに追加した「Img_bg」を選択します。

これで、背景用のUIが配置されました。

7.タイトル画像の配置

続いて、タイトル画像を配置するため［パレット］から［▼一般］の項目にある［画像］を選択して、ドラッグ＆ドロップで［階層→キャンバスパネル］の下の階層に配置します。

配置した画像は左上に表示されています。※サイズはデフォルト値

次に、画像の名前を「Img_Title」に変更します。

名前変更した「Img_Title」にタイトル用のテクスチャを設定します。詳細パネルから［アピアランス→Brush］の項目にある［Image］でテクスチャを選択します。

先ほどコンテンツブラウザより追加した「Img_Logo」を選択します。

次に「Img_Title」のアンカー、位置、サイズ調整をします。最初に［アンカー］のメニューを開いて［アンカーポイント中央上］を選択します。

位置とサイズを以下の内容で設定をします。

位置Ｘ：-700.0
位置Ｙ：178.0
サイズＸ：1400.0
サイズＹ：600.0

ここまでで、「Img_Tilte」の位置とサイズの設定は完了です。

8.テキストコンポーネントの配置

テキストコンポーネントを配置します。

追加したテキストコンポーネントが「テキストブロック」として表示され左上に配置されます。

次にテキストの中身、アンカー、位置、サイズの調整を行います。詳細パネルより［コンテンツ］からテキストの中身を「PRESS ANY BUTTON」に変更します。

続いて、［スロット→アンカー］を［アンカーポイント中心］に変更します。

位置とサイズは、以下の内容に変更します。

位置X：-252.0
位置Y：281.0
サイズX：504.0
サイズY：66.0

テキストのフォント設定を行うため［アピアランス→Font］の項目を以下の内容に設定します。

Typeface：Regular
Size：48

「輪郭設定」から、テキストの境界線を設定するため以下の項目を変更します。

輪郭サイズ：2
輪郭色
R：0.0
G：0.0
B：0.2
A：0.5

テキストを中央揃えにするため［Justification］を［テキスト中央揃え］に変更します。

ここまででテキストの変更は完了です。

これで、UI要素の配置は完了しました。変更されたUIの情報をエディタ上で反映・検証するために「ツールバー」にある、黄色い［コンパイル］のアイコンを選択してください。問題がなければコンパイル処理が完了し、アイコンの色が緑色に変わります。

• 

• 

コンパイルはデザイナパネルで配置したボタンや画像、グラフ画面で組んだブループリントのロジックを、ゲーム内で実際に動作する形式に変換する処理で、UI制作には不可欠なプロセスです。

最後に、［ツールバー→保存］を押します。

9.グラフの追加

作成したウィジェットブループリントを実装するため、「レベルデータ」の「MAP_Title」に「WBP_Title」を表示させる「グラフ」を追加します。

MAP_Titleのデータを開いて［ツールバー→レベルブループリントを開く］を選択してください。

「レベルブループリント」の画面が表示されて、ここに先ほど作成したWBP_Titleを表示させるグラフを追加します。

「イベントグラフ」内の何もない場所で右クリックを押して「グラフの追加」をします。

検索エリアで「Create Widget」と入力して表示された［Create Widget］を選択して、グラフを追加します。

• 

• 

追加した「Create Widget」の［Class→クラスを選択］を選択し、「WBP_Title」に設定します。

これで、どのウィジェットを表示させるかという設定ができました。

次にウィジェットを画面に表示させるグラフの［Add to Viewport］への追加を先ほどと同じ手順で行います。

今回は［状況に合わせた表示］のチェックを外してから［Add to Viewport］を選択してグラフを追加します。チェックが入っていると［Add to Viewport］が表示されません。

• 

• 

ここまでで、グラフの追加は完了しました。

ただし、追加しただけでこのままでは何も処理は発生しません。

今度は処理を実行するグラフに、先ほど追加したグラフを接続します。接続先は［Event BeginPlay］です。

［Event BeginPlay］はウィジェット（WBP）がゲーム内で生成され、最初にプレイ状態になった瞬間に1回だけ実行されるイベントノードです。

以下の内容でグラフを接続して［コンパイル］を押します。

何も問題がなければコンパイルが成功すると思いますので、いよいよ作成したUI画面を実装してみましょう。

「MAP_Title」を選択して、ツールバーにある［プレイ］ボタンを選択してみましょう。

無事に作成したウィジェットを表示することができました！！

実装画面を新規ウィンドウで確認する方法もあります。「WBP_Title」を選択してから［プレイ］ボタンを選択してみてください。

新規ウィンドウのサイズはメニューバーの［編集→エディタの環境設定］より変更することができます。

［エディタの環境設定］が開いたら［レベルエディタ→プレイ］を選択して、［ゲームビューポート設定→新しいビューポート解像度］で変更できます。

今回はシンプルなUI画面の作成・実装までを解説しました。まずはUEに触ってUI画面作成のながれを体験してみて、イメージを掴んでもらえたら嬉しいです。

次回はUIアニメーション、ボタンの作成と処理の内容について解説します。