Canvas Panel（キャンバスパネル）は、子ウィジェットを自由な座標とアンカーで配置できるUMGのレイアウトパネルです。Unreal Engine 5（UE5）のウィジェットブループリントにおいて、ピクセル単位の絶対配置と、解像度変化に追従する相対配置の両方を扱える、もっとも自由度の高いコンテナです。この記事では、アンカーとポジションの考え方、子のSlot設定、画面解像度への対応、他パネルとの使い分けまでを順に解説します。

この記事の要点

Canvas Panelは、子ウィジェットを自由な座標とアンカーで配置できるUMGのレイアウトパネル。HUDやメニューのルートとして多用される。 子ウィジェットはCanvas Panel Slotを持ち、Anchors（アンカー）・Position・Size・Alignment・ZOrderで配置を制御する。 アンカーは親キャンバスのどこに張り付くかを示す相対座標で、左上が(0,0)・右下が(1,1)。これを使うと解像度が変わってもレイアウトが崩れにくい。 Positionはアンカーからのオフセット、Alignmentはウィジェット自身のどの点を基準にするか（中央配置は0.5,0.5）。 整列が主目的ならVertical Box / Horizontal Box / Grid / Overlayのほうが向く。Canvas Panelは自由配置が必要な場面に絞って使うのがセオリー。 典型的な落とし穴はアンカー誤設定による解像度変化時のズレと、Canvasの深い入れ子によるパフォーマンス劣化。

Canvas Panelとは

Canvas Panelは、UE5のUMG（Unreal Motion Graphics）でUIを組むときのレイアウトパネルの一種です。ウィジェットブループリントを新規作成すると、最初からルート要素としてCanvas Panelが配置されているのが一般的で、HUD（体力バーやミニマップ）、メインメニュー、ポップアップなど、多くのUIの土台になります。

最大の特徴は、子ウィジェットを任意の座標に絶対配置できることです。Vertical BoxやGridのように「自動で整列させる」パネルとは異なり、Canvas Panelは「どこに置くかをこちらが指定する」パネルです。そのぶん自由度が高い反面、配置の管理はすべて設計者の責任になります。

Canvas Panelに子ウィジェットを追加すると、その子は自動的にCanvas Panel Slotという専用のスロット情報を持ちます。Slotには配置に関するプロパティ（後述するAnchors・Position・Size・Alignment・ZOrder）がまとまっており、ヒエラルキーで子を選択したときにDetailsパネルのSlot欄から編集できます。

アンカー（Anchors）とポジションの考え方

Canvas Panelを正しく使ううえで最重要の概念がアンカー（Anchors）です。アンカーは「子ウィジェットが親キャンバスのどの位置に張り付くか」を表す相対座標で、親キャンバスの左上を(0,0)、右下を(1,1)とする正規化座標で指定します。

アンカーにはMinimum（最小）とMaximum（最大）の2点があり、この2点の関係で挙動が変わります。

アンカー設定	挙動	代表例
Min と Max が同じ1点	その1点に対して固定サイズで配置。位置はPositionで指定し、サイズはSizeで指定。	左上のスコア表示、右上のミニマップ
Min と Max が異なる	2点を結んだ矩形に対して引き伸ばし（ストレッチ）配置。サイズは左右上下のオフセットで決まる。	画面幅いっぱいの上部バー、全画面背景

たとえば、Min・Maxをともに(0,0)にすると左上固定、ともに(1,1)にすると右下固定になります。Minを(0,0)・Maxを(1,1)にすると、キャンバス全体に引き伸ばされ、いわゆるフルスクリーン配置になります。横方向だけ伸ばしたい上部バーであれば、Minを(0,0)・Maxを(1,0)のように指定します。

UE5のエディタには、よく使うアンカー（四隅・上下中央・左右中央・中央・各方向のストレッチ）をワンクリックで設定できるアンカーメダリオン（Anchor Medallion）のプリセットが用意されており、Detailsパネルのアンカー欄から選べます。

アンカーを決めたうえで、実際の表示位置を微調整するのがPosition（ポジション）です。Positionはアンカー位置からのオフセット（ピクセル）で、アンカーを基準点として「そこから右にいくつ、下にいくつ」という相対的なズレを表します。アンカーが画面のどこに張り付くかを決め、Positionがそこからの微調整を決める、という二段構えで理解すると整理しやすくなります。

子のSlot設定（Position / Size / Alignment / ZOrder）

Canvas Panel Slotで扱う主なプロパティは次のとおりです。実際の見た目はこれらの組み合わせで決まります。

プロパティ	役割
Anchors	親キャンバスのどこに張り付くか（Min/Maxの相対座標）。配置の基準点・基準矩形を決める。
Position	アンカーからのオフセット。アンカーが1点のとき、子の表示位置を決める。
Size	子ウィジェットの幅・高さ。Size To Contentを有効にすると、中身に合わせて自動でサイズが決まる。
Alignment	子ウィジェット自身の基準点（ピボット）。0で左上、0.5で中央、1で右下。中央寄せは(0.5, 0.5)。
ZOrder	重なり順。値が大きいほど手前（上）に描画される。同一Canvas内の前後関係を制御する。

ここで混同しやすいのがAnchorsとAlignmentの違いです。Anchorsは「親のどこを基準にするか」、Alignmentは「子自身のどこを基準点にするか」を指します。たとえばボタンを画面のど真ん中に置きたい場合は、次の3つを組み合わせます。

// 画面中央に正確に配置する設定 Anchors : Min(0.5, 0.5) / Max(0.5, 0.5) // 親の中央に張り付く Position : (0, 0) // アンカーからのオフセットなし Alignment: (0.5, 0.5) // 子自身の中央を基準点にする

Alignmentを(0,0)のままにすると、ウィジェットの左上が中央アンカーに合うため、見た目は中央から右下方向にずれます。Alignmentを(0.5, 0.5)にして初めて、子の中心が中央アンカーに一致し、正確なセンタリングになります。

ZOrderは同じCanvas Panel内での重なり順の制御です。背景を奥、ボタンやテキストを手前にしたい場合などに使います。なお、別々のウィジェット（プレイヤー画面に追加した複数のUserWidget）同士の重なり順は、それぞれを画面に追加するときのZOrderで制御する点に注意してください。

画面解像度への対応（アンカーで相対配置）

ゲームUIで避けて通れないのが、さまざまな解像度・アスペクト比への対応です。Canvas Panelでこれを実現する鍵がアンカーです。

子ウィジェットを単なる絶対座標（Min/Maxとも(0,0)）で置いてしまうと、画面が広がっても左上からの固定ピクセル位置のまま動かないため、画面端に置きたかった要素が中途半端な位置に残ってしまいます。一方、右上に置きたいミニマップであればアンカーを右上(1,0)に張り付けておくことで、解像度が変わっても常に右上を基準に配置され、レイアウトが破綻しにくくなります。

基本方針は次のとおりです。

• 画面の四隅・端に固定したい要素は、対応する四隅・辺のアンカーに張り付ける。
• 画面幅・高さに追従させたい帯状の要素（上部バーなど）は、Min/Maxを離してストレッチアンカーにする。
• 中央に出すダイアログは中央アンカー＋Alignment(0.5,0.5)でセンタリングする。

加えて、UMG全体のスケーリングはDPIスケーリング（プロジェクト設定のUI Scale Rule / DPI Curve）でも制御されます。アンカーが「配置の追従」、DPIスケーリングが「サイズの拡縮」を担うイメージで、両者を併用して幅広い解像度に対応するのが一般的です。詳細な挙動はバージョンにより異なる場合があるため、最終的な見た目は実機・各解像度のプレビューで確認し、必要に応じて公式ドキュメントを確認することを推奨します。

他のパネルとの使い分け

Canvas Panelは万能に見えますが、整列が目的なら専用パネルのほうが圧倒的に楽で堅牢です。UMGの主要パネルを比較します。

パネル	配置方式	得意なこと	主な用途
Canvas Panel	自由配置（アンカー＋座標）	任意の位置への絶対/相対配置	HUD、UIのルート、自由配置メニュー
Vertical Box	縦に自動整列	項目を縦に並べる	メニューリスト、設定項目
Horizontal Box	横に自動整列	項目を横に並べる	ツールバー、タブ、アイコン列
Grid / Uniform Grid	格子状に整列	行・列の表形式配置	インベントリ、スキル一覧
Overlay	重ねて配置	同じ領域に要素を重ねる	背景＋前景、バッジ重ね

実務ではこれらを入れ子にして併用します。たとえばルートにCanvas Panelを置き、その中の「メニュー領域」にVertical Boxを入れて項目を縦整列させる、といった構成が定番です。整列はBox/Gridに任せ、Canvas Panelは「領域全体を画面のどこに置くか」を担当させると、解像度対応も管理もしやすくなります。

典型的な用途

• HUD：体力バー（左下）、ミニマップ（右上）、弾薬表示（右下）など、画面の各所に要素を散りばめる土台。
• メインメニュー / ポーズメニュー：背景画像を全画面ストレッチで敷き、その上にボタン群を配置。
• ポップアップ / ダイアログ：中央アンカーでセンタリングし、ZOrderを上げて最前面に表示。
• ドラッグ移動するUIウィンドウ：Canvas Slotの位置を実行時に書き換えることで、自由に動かせるパネルを実現。
• ワールド座標に追従するマーカー：3D位置を画面座標へ変換し、Canvas Slotのpositionを毎フレーム更新する。

落とし穴と注意点

落とし穴	内容と対策
アンカー誤設定で解像度変化時にズレる	すべて左上アンカーのまま絶対座標で配置すると、解像度やアスペクト比が変わったとき要素が意図しない位置に残る。端に置く要素は対応する四隅・辺のアンカーへ、中央要素は中央アンカー＋Alignment(0.5,0.5)へ正しく設定する。複数解像度でプレビューして確認する。
AlignmentとAnchorの混同	中央に置いたつもりがずれるのは、Alignmentが(0,0)のままで子の左上が基準になっているケースが多い。中央寄せは必ずAlignmentも(0.5,0.5)にする。
Canvasの深い入れ子によるパフォーマンス劣化	Canvas Panelは子の絶対配置を計算するため、Box系より処理コストがやや高い。Canvasを何重にも入れ子にすると無駄が増える。整列で済む箇所はBox/Gridに置き換え、Canvasは必要な階層だけに絞る。
ZOrderの取り違え	同一Canvas内の重なりはSlotのZOrderで、別々のウィジェット同士の重なりは画面追加時のZOrderで決まる。どちらの話かを区別しないと、いくらSlotのZOrderを上げても最前面に来ない。

よくある質問（FAQ）

Q1. ボタンを画面のちょうど中央に置くにはどう設定すればよいですか？

アンカーをMin/MaxともにCenter(0.5, 0.5)にし、Positionを(0, 0)、Alignmentを(0.5, 0.5)に設定します。アンカーで親の中央に張り付け、Alignmentで子自身の中心を基準点にすることで、解像度が変わっても正確に中央へ配置されます。

Q2. メニュー項目を縦にきれいに並べたいのですが、Canvas Panelで一つずつ座標指定すべきですか？

その用途ではVertical Boxの利用をおすすめします。Canvas Panelで等間隔に手動配置すると、項目の増減やフォントサイズ変更のたびに座標調整が必要になります。Vertical Boxなら自動で縦整列されるため、Canvas Panelの中にVertical Boxを置き、その中に項目を並べる構成が扱いやすく堅牢です。

Q3. アンカーをストレッチ（Min≠Max）にしたとき、Positionの値はどう効きますか？

アンカーがストレッチ設定の場合、子のサイズは固定値ではなく、アンカー矩形に対する上下左右のオフセット（余白）で決まります。このとき従来のPosition/Sizeの代わりに、Offset Left / Top / Right / Bottomで親に対するマージンを指定する形になります。意図した余白になっているかは、各解像度のプレビューで確認してください。挙動の細部はバージョンによって異なる場合があるため、不明点は公式ドキュメントの確認を推奨します。