【UE5】ウィジェットブループリントのサイズ設定|UIデザインの基本【ゲーム開発】

サイズ設定の種類
設定名 | 説明 | 主な用途 |
Fill Screen | 画面全体にフィットする | フルスクリーンのUI、HUD |
Custom | 手動で幅と高さを指定する | 固定サイズのウィンドウやポップアップ |
Custom on Screen | 画面の一部を指定したサイズで使用する | 特定のエリアに表示するUI |
Desired | ウィジェットの内容サイズに合わせる | 動的なサイズのボタンやラベル |
Desired on Screen | Desiredと同じだが、画面の範囲内で制限される | 画面からはみ出さないように制限付き |
※UI
「User Interface」の略で、日本語では「ユーザーインターフェイス」と呼ばれ、ユーザーとシステム(この場合はゲームやアプリケーション)とのやり取りを可能にする部分を指します。
ゲームにおけるUIは、プレイヤーがゲームと直接的にインタラクトするためのビジュアル要素や操作系のことを指します。
※HUD
「Heads-UP Display」の略で、ゲーム内でプレイヤーにリアルタイムで情報を表示するインターフェイスのことを指します。一般的には、画面の上部や隅に表示されるアイコン、数字、ゲージなどがHUDに含まれます。
Fill Screen(画面全体にフィット)
・ウィジェットを画面全体に広げる
・解像度が変わっても自動調整
・Canvas Panelを使うことが多い
✅用途
・フルスクリーンメニュー
・HUD(体力バー、スコア表示など)
・背景画像
Custom(手動でサイズを指定)
・固定サイズのウィジェット
・デバイスごとにサイズを変えたいときに使う
・レスポンシブデザインには向かない
✅用途
・固定サイズのポップアップ
・ダイアログボックス
一部のミニマップ
※レスポンシブデザイン
デバイスや画面サイズに応じて、ウェブページやUIが自動的に適応して、最適な表示をするデザイン手法のことを指します。これにより、PC、タブレット、スマートフォンなど異なるデバイスで閲覧しても、ユーザーが快適にコンテンツを閲覧・操作できるようになります。
Custom on Screen(画面の一部を使用)
・Customと同じだが、画面の範囲内で表示を制限
・ウィジェットがはみ出さないようにするために便利
✅用途
・画面の一部だけを使うUI
・一定のエリア内で動作するポップアップ
Desired(ウィジェットのサイズに応じる)
・ウィジェットの中身に応じて自動でサイズを決定
・動的に変わるUIに適している
・Canvas Panelでは使えないことがある
✅用途
・可変サイズのボタン
・テキストラベル(長さに応じて自動調整)
・ツールチップ
Desired on Screen(Desiredだけど画面範囲内で制限)
・Desiredと同じだが、画面の範囲を超えないように制限
・画面買いにはみ出す可能性のあるUIに便利
✅用途
・長いテキストがあっても画面内に収めたい場合
・ウィジェットの中身によってはサイズが変わるが、画面外に出さない
どれを選べばいい?(まとめ)
目的 | 最適な設定 |
---|---|
画面全体を使いたい | Fill Screen |
固定サイズで設計したい | Custom |
特定のエリア内で使いたい | Custom on Screen |
サイズを動的に変えたい | Desired |
サイズを動的に変えつつ、画面外にはみ出さないようにしたい | Desired on Screen |