UnityのuGUIで画面サイズに対応するには、Canvasの描画方式、Canvas Scalerの拡大率、Rect Transformのアンカーを分けて設定します。
UI全体の大きさが合わない場合と、特定のボタンだけ位置がずれる場合では、確認する項目が異なります。
この記事は2026年10月3日に確認したuGUI 2.0の公式資料に基づきます。
実機での再現確認は含みません。
UI Toolkitの操作は対象外です。
最初に確認する3つの設定
| 困っていること | 確認する場所 |
|---|---|
| UIを画面上に重ねるか、3D空間に置くか決めたい | CanvasのRender Mode |
| 画面サイズによってUI全体が大きすぎる・小さすぎる | Canvas Scaler |
| 画面の端に置いたUIだけ位置がずれる | 対象と親のRect Transform、アンカー |
確認用のImageは、GameObject → UI → Imageから追加できます。
以下ではCanvasと子のImageを使い、まず表示と配置を確認します。
ボタンの入力処理は、表示とは別に確認してください。
Canvasの3つの描画モードを選ぶ
| Render Mode | 使う場面 | 確認項目 |
|---|---|---|
| Screen Space – Overlay | 画面上のメニューやスコア表示 | カメラを参照せず描画。CanvasはHierarchyの最上位に置く |
| Screen Space – Camera | カメラとUI平面の位置関係を利用する画面 | Render CameraとPlane Distance |
| World Space | 3D空間内の看板など | 位置・向き・大きさと、UIを見るカメラ |
描画方式はUIをどこへ描くかの設定です。
画面サイズが変わったときの部品の大きさや配置は、次のScalerとアンカーで調整します。
仕様の参照先：Unity公式・Canvas。
Canvas ScalerでUI全体の大きさを決める
CanvasがScreen Space – OverlayまたはScreen Space – Cameraの場合、ピクセル数を基準に大きさを保つならConstant Pixel Size、設計時の解像度を基準に拡大縮小するならScale With Screen Sizeを使います。
Constant Physical Sizeは物理単位を使う方式ですが、端末が報告するDPIの影響を受けます。
World Spaceではこの3つのUI Scale Modeを使わず、Canvas ScalerでUIのピクセル密度を調整します。
空間内の大きさや位置はRect Transformで設定してください。
Scale With Screen SizeではReference Resolutionに設計の基準を指定します。
たとえば横画面を1920×1080で設計する場合、その値を入力して配置を始めます。
これは設定例であり、すべてのゲームに共通する推奨値ではありません。
縦横比が違うときのScreen Match Mode
| 設定 | 選択の考え方 |
|---|---|
| Match Width Or Height | 幅・高さ、またはその中間を基準に倍率を決める |
| Expand | Canvas領域が基準より小さくならないようにする |
| Shrink | Canvas領域が基準より大きくならないようにする |
Match Width Or HeightのMatchは、0なら幅、1なら高さに合わせます。
中間値では縦横の倍率を対数空間で平均するため、0.5は倍率の単純な足し算の平均ではありません。
たとえば基準が640×480、表示先が480×640の場合、幅の倍率は0.75、高さの倍率は約1.33です。
Matchを0.5にすると倍率は1になり、Canvasの領域は480×640になります。
これはCanvasScalerのAPI資料に記載された計算例で、本記事の実測値ではありません。
縦画面か横画面かだけで設定を固定せず、残したい表示範囲とUIの配置を確認します。
Expandを選んでも、アンカーや余白が不適切な部品まで自動修正されるわけではありません。
仕様の参照先：Unity公式・Canvas Scaler。
アンカーで親に対する配置を決める
アンカーは画面そのものではなく、親のRect Transformを基準にします。
親がPanelなら、まずそのPanelの大きさと配置も確認します。
ピボットは回転・サイズ変更などの基準点で、アンカーとは役割が異なります。
| 配置したいもの | アンカーの設定例 |
|---|---|
| 右上の小さなアイコン | 右上にまとめ、端からの位置を調整 |
| 中央のダイアログ | 中央にまとめ、幅・高さを調整 |
| 横幅に追従する帯 | 横方向をStretchにして左右の余白を調整 |
| 親全体に広がる背景 | 縦横をStretchにして各辺の余白を調整 |
設定するには、子のImageなどを選び、InspectorのRect Transform左上にあるAnchor Presetsを開きます。
右上固定やStretchなど、配置したい形を選んでから位置・余白を調整します。
横のアンカーを一か所にまとめるとPos XとWidthで位置・幅を指定し、横に広げるとLeftとRightで左右の余白を指定します。
縦方向も同様に、固定ではPos YとHeight、StretchではTopとBottomを使います。
通常はアンカーやPivotを変更しても、その瞬間の見た目を保つように位置・サイズが自動調整されます。
プリセットを選んだだけで移動しない場合も、設定が失敗したとは限りません。
親の大きさを変えて追従を確認し、必要な位置や余白を入力してください。
横方向だけ伸ばす設定もできます。
「固定」か「Stretch」かは縦横それぞれで確認してください。
設定場所と操作の参照先：Unity公式・Basic Layout。
解像度を変えて崩れる場所を確認する
最初は同じ縦横比で解像度を変更し、次に縦横比を変更すると、全体の拡大縮小と配置の問題を分けて確認できます。
端に置く部品を親の角へアンカー設定する考え方は、Unity公式の複数解像度向けUI設計でも説明されています。
- 設計時の解像度で、UIの位置とサイズを確認します。
- 同じ縦横比の別解像度へ変更し、UI全体の大きさを確認します。
- 別の縦横比へ変更し、端の部品・中央の部品・背景を個別に確認します。
- ずれた部品のアンカーと親の範囲を確認し、一度に一つの設定を変更します。
- 設定前後を保存し、変更した画面サイズへ再度切り替えて確認します。
この手順は確認方法の案内であり、本記事の実測結果ではありません。
実機では画面の見た目に加えて、操作できる領域も確認してください。
UIの目的に合わせて次の実装へ進む
- 項目を一覧で見せる：ScrollViewの作り方
- ボタンで表示を変える：ボタンによる表示切り替え
- 画像の縦横比を保つ：Aspect Ratio Fitter
- 制作全体から探す：Unityの使い方まとめ
Matchの倍率とアンカーの操作・入力欄は、2026年10月26日にuGUI 2.0の公式資料で再確認しました。
Editorでの操作と実機表示は未検証です。
