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全体の大きさを決める
ピクセル数を基準に大きさを保つならConstant Pixel Size、設計時の解像度を基準に拡大縮小するならScale With Screen Sizeを使います。Constant Physical Sizeは物理単位を使う方式ですが、端末が報告するDPIの影響を受けます。
Scale With Screen SizeではReference Resolutionに設計の基準を指定します。たとえば横画面を1920×1080で設計する場合、その値を入力して配置を始めます。これは設定例であり、すべてのゲームに共通する推奨値ではありません。
縦横比が違うときのScreen Match Mode
| 設定 | 選択の考え方 |
|---|---|
| Match Width Or Height | 幅・高さ、またはその中間を基準に倍率を決める |
| Expand | Canvas領域が基準より小さくならないようにする |
| Shrink | Canvas領域が基準より大きくならないようにする |
縦画面か横画面かだけで設定を固定せず、残したい表示範囲とUIの配置を確認します。Expandを選んでも、アンカーや余白が不適切な部品まで自動修正されるわけではありません。仕様の参照先:Unity公式・Canvas Scaler。
アンカーで親に対する配置を決める
アンカーは画面そのものではなく、親のRect Transformを基準にします。親がPanelなら、まずそのPanelの大きさと配置も確認します。ピボットは回転・サイズ変更などの基準点で、アンカーとは役割が異なります。
| 配置したいもの | アンカーの設定例 |
|---|---|
| 右上の小さなアイコン | 右上にまとめ、端からの位置を調整 |
| 中央のダイアログ | 中央にまとめ、幅・高さを調整 |
| 横幅に追従する帯 | 横方向をStretchにして左右の余白を調整 |
| 親全体に広がる背景 | 縦横をStretchにして各辺の余白を調整 |
横方向だけ伸ばす設定もできます。「固定」か「Stretch」かは縦横それぞれで確認してください。設定場所と操作の参照先:Unity公式・Basic Layout。
解像度を変えて崩れる場所を確認する
最初は同じ縦横比で解像度を変更し、次に縦横比を変更すると、全体の拡大縮小と配置の問題を分けて確認できます。端に置く部品を親の角へアンカー設定する考え方は、Unity公式の複数解像度向けUI設計でも説明されています。
- 設計時の解像度で、UIの位置とサイズを確認します。
- 同じ縦横比の別解像度へ変更し、UI全体の大きさを確認します。
- 別の縦横比へ変更し、端の部品・中央の部品・背景を個別に確認します。
- ずれた部品のアンカーと親の範囲を確認し、一度に一つの設定を変更します。
- 設定前後を保存し、変更した画面サイズへ再度切り替えて確認します。
この手順は確認方法の案内であり、本記事の実測結果ではありません。実機では画面の見た目に加えて、操作できる領域も確認してください。
UIの目的に合わせて次の実装へ進む
- 項目を一覧で見せる:ScrollViewの作り方
- ボタンで表示を変える:ボタンによる表示切り替え
- 画像の縦横比を保つ:Aspect Ratio Fitter
- 制作全体から探す:Unityの使い方まとめ
