UnityでUIを置くと、まずCanvasが作られる。
ここで決めることは3つあり、どこに描くか、画面サイズにどう合わせるか、どこを基準に並べるかになる。
この3つを先に決めておくと、別の解像度で開いたときに崩れにくい。
内容は2026年9月20日にUnityの公開マニュアルを確認したもので、実機での再現は含まない。
どこに描くかを決める
Canvasには描画モードが3つあり、UIをどこに置くかが変わる。
| モード | どう描かれるか | 使う場面 |
|---|---|---|
| Screen Space – Overlay | 画面に合わせて拡大され、他のグラフィックスの上に描かれる | 常に手前に出るUI |
| Screen Space – Camera | カメラの前方の一定の距離にある平面に描かれたようになる | UIの前後に3Dの物を置きたい |
| World Space | シーンの中にある平らな物として描かれる | 空間に置く看板や画面 |
公式マニュアルでは、Overlayはシーンやカメラへの参照なしで直接描かれると説明されている。
画面サイズが変わると自動で拡大され、常に一番上に出る。
Cameraにすると、UIの平面より手前の3Dの物が前に出て、奥の物は隠れる。
World Spaceは、カメラのほうを向く必要がなく、好きな向きに置ける。
このとき、画面に映る大きさはカメラからの距離と角度で決まる。
モードで出る設定が変わる
| 設定 | 出るモード |
|---|---|
| Pixel Perfect | Screen Spaceの2つ |
| Render Camera | Screen Space – Cameraのみ |
| Plane Distance | Screen Space – Cameraのみ |
| Event Camera | World Spaceのみ |
World SpaceでUIを押せないときは、Event Cameraが空のことが多い。
ここに、そのUIを見るカメラを入れる。
画面サイズにどう合わせるかを決める
Canvasには、Canvas Scalerという部品が付いている。
ここでUI Scale Modeを決めると、画面サイズが変わったときの振る舞いが変わる。
| UI Scale Mode | 振る舞い |
|---|---|
| Constant Pixel Size | 画面サイズにかかわらず、ピクセルでの大きさを保つ |
| Scale With Screen Size | 画面が大きいほどUIも大きくなる |
| Constant Physical Size | 画面サイズと解像度にかかわらず、物理的な大きさを保つ |
スマートフォンとPCの両方で動かすなら、Scale With Screen Sizeを選ぶことになる。
このとき、Reference Resolutionに、設計の基準にする解像度を入れる。
公式マニュアルでは、画面の解像度がこれより大きければ拡大され、小さければ縮小されると説明されている。
縦と横のどちらに合わせるか
Scale With Screen Sizeを選ぶと、Screen Match Modeが出る。
| Screen Match Mode | 何をするか |
|---|---|
| Match Width Or Height | 幅を基準にするか、高さを基準にするか、その中間にする |
| Expand | Canvasの領域を横か縦に広げ、基準より小さくならないようにする |
| Shrink | Canvasの領域を横か縦に切り、基準より大きくならないようにする |
Match Width Or Heightには0から1のスライダーがあり、0が幅、1が高さになる。
縦持ちのスマートフォンで作るなら、幅を基準にすると横幅いっぱいの配置が保たれる。
横長の画面が混ざるなら、Expandにして端が切れないようにする方法もある。
どこを基準に並べるかを決める
Canvasの中に置いた物は、TransformではなくRect Transformを持つ。
公式マニュアルでは、位置・回転・スケールに加えて幅と高さを持つと説明されている。
そして、回転・サイズ・スケールの変更はピボットを中心に行われる。
アンカーは、親のどこを基準にするかを決めるものになる。
アンカーが1点のときと範囲のとき
| アンカーの形 | 出る項目 | 親が広がったとき |
|---|---|---|
| 1点にまとまっている | Pos X / Pos Y / Width / Height | 大きさは変わらず、位置がついていく |
| 範囲に開いている | Left / Right / Top / Bottom | 親に合わせて伸び縮みする |
画面の端に貼り付けたいものは1点、背景のように広げたいものは範囲にする。
よく使う組み合わせは、Rect Transformの左上にあるAnchor Presetsから選べる。
崩れるときに見るところ
- Game画面の解像度を変えて、どこがずれるかを見る
- ずれた物のアンカーが、親のどこを指しているかを見る
- 画面の端に置きたいのに中央を指していないかを見る
- 伸ばしたいのにアンカーが1点になっていないかを見る
- Canvas ScalerのReference Resolutionが、作っている画面と合っているかを見る
1つずつ直す前に、解像度を変えて全体を見ると、原因が同じ場所に集まっていることが多い。
作り始める前に決めること
- 描画モードを決める（3Dの物との前後が要るかどうか）
- Reference Resolutionを決める
- Screen Match Modeを決める（縦持ちなら幅を基準にする）
- 画面の端に付けるものと、伸ばすものを分ける
- Game画面で複数の解像度に切り替えて確かめる
あとから基準の解像度を変えると、すべてのUIの位置を見直すことになる。
まとめ
- Canvasの描画モードは3つあり、Overlayは常に最前面、Cameraは3Dの物と前後する
- World SpaceでUIを押せないときはEvent Cameraを見る
- 画面サイズに合わせるならUI Scale ModeをScale With Screen Sizeにする
- Reference Resolutionが基準になり、これより大きい画面では拡大される
- アンカーが1点なら大きさが変わらず、範囲なら親に合わせて伸びる
- 回転とサイズの変更はピボットを中心に行われる
この記事は2026年9月20日時点の公開マニュアルの記載に基づいている。
描画モードはUnity公式のCanvasにある。
画面サイズへの対応はCanvas Scalerにまとまっている。
アンカーとピボットはBasic Layoutに載っている。
Unityの操作はUnityの使い方まとめにも置いている。
