Gameビューでは完璧に配置できたUI。ところが 実機で起動したら体力バーが画面外、ウィンドウサイズを変えたらボタンがメニューからは み出す——UIの「あるある」は、ほぼすべてアンカーとCanvas Scalerの理解不足が原因です。
この記事では、UnityのUIシステム（uGUI）の3大概念——Canvas・RectTransform・アンカー——と、画面サイズ対応の定番設定を解説します。
この記事でわかること
- CanvasとRender Mode 3種（Overlay／Camera／World Space）
- RectTransform——UI専用Transformの読み方
- アンカー——「画面サイズを変えたら崩れた」の対策の本丸
- Canvas Scaler——解像度対応の定番設定（
Scale With Screen Size）- UIパーツ別・アンカー設定の早見表（体力バー・ボタン・ヘッダー・背景）
Canvas: UIを描画するキャンバス
すべてのUI要素は、Canvasという特別なゲームオブジェクトの子として配置します。シーンに初めてUI要素（Image・Buttonなど）を作ると、UnityがCanvasとEventSystem（クリックやタップを検知する仕組み）を自動生成します。
CanvasのRender Modeは、UIを「どこに」描くかの選択です。
- Screen Space - Overlay: 最も一般的。UIはシーンの一番手前に画面へ張り付くように描画されます。スコア表示・メニューなど、通常のUIはこれです。
- Screen Space - Camera: 指定カメラの前方一定距離に描画。UIの手前にパーティクルを出したいなど、3Dとの前後関係が必要な場合に使います。
- World Space: UIを3D空間内の板として扱います。キャラクターの頭上のHPバー、VRの メニューなど「世界の中にあるUI」用です。
まずはデフォルトのScreen Space - Overlayから始めましょう。
RectTransform: UIのためのTransform
3Dオブジェクトの位置・回転・スケールはTransformが管理しますが、UI要素は RectTransform（矩形トランスフォーム）という専用版で管理されます。「点」ではなく 「矩形（四角い領域）」 を扱うのが違いです。
- Width / Height: UI要素の幅と高さ。
- Anchors（アンカー）: 親のどこに固定するか。レイアウト崩れ対策の主役（次節）。
- Pivot（ピボット）: 自身の基準点。回転・スケールの中心で、通常は中央（0.5, 0.5）。
Anchors: レイアウトの崩れを防ぐ「錨」
アンカーは、UI要素が親要素のどの相対位置に「固定」されるかを決める錨（いかり）です。スマホの画面比率は機種ごとに違います。アンカーが中央のまま右上にボタンを置くと、横長の機種ではボタンが画面外へ消えます。
アンカープリセット
Inspectorのアンカーアイコン（十字の的のようなマーク）をクリックすると、プリセット一覧が開きます。
- 四隅・中央への固定:
top-leftなら「親の左上からの距離」で固定。画面の隅に置くUIは、その隅にアンカーが原則です。 - ストレッチ: 四隅が分離したプリセットを選ぶと、親のサイズ変化に合わせて引き伸ばされるようになります。ヘッダーバーは左右ストレッチ、背景は全方向ストレッチ、が定番です。
アンカーの挙動を理解する
Inspectorの数値の意味はアンカー状態で変わります。
- アンカーが一点:
Pos X/Y＝アンカーポイントからの相対位置。 - アンカーが分離（ストレッチ）:
Left/Right/Top/Bottom＝親の縁からの余白。
「数値の意味が変わった？」と混乱し たら、まずアンカーがどのプリセットかを確認してください。
Canvas Scaler: 解像度対応の要
アンカーは「位置」を守りますが、「大きさ」を守るのはCanvas Scalerです。CanvasオブジェクトのInspectorにあるこのコンポーネント、デフォルトのConstant Pixel Sizeのままだと、高解像度の端末でUIが豆粒のように小さくなります。
定番設定はこの3点セットです。
UI Scale ModeをScale With Screen Sizeに変更。Reference Resolutionにデザインの基準解像度（例: 1920×1080）を入力。Matchスライダーは0.5（幅と高さのバランス）か、横持ちゲームならHeight寄せ（1.0）が無難です。
これで「基準解像度でデザインしたUIが、どの画面でも同じ見た目の比率で表示される」ようになります。新しいCanvasを作ったら、まずCanvas Scalerを設定する——これを習慣にしてください。
実践: モバイルHUDを崩れないように組む
アクションゲームの体力バーとポーズボタン、放置ゲームの上部リソースバー、シューティングの操作ボタン——ジャンルは違っても、モ バイルHUDの構成要素は驚くほど共通しています。ここまでのアンカーとCanvas Scalerを、実際のHUD配置に落とし込んでみましょう。
手順は3ステップです。
- CanvasにCanvas Scalerを設定:
Scale With Screen Size＋基準解像度（例: 1920×1080）＋Match 0.5。大きさの基準を最初に固定します。 - 各パーツを配置してからアンカーを合わせる: だいたいの位置に置いたら、アンカープリセットをAlt＋Shift＋クリックで選ぶと「アンカー＋位置＋ピボット」がまとめてその隅にスナップされて便利です。
- 早見表どおりにアンカーを割り当てる: 迷ったら下の表から。
| UIパーツ | アンカー | 理由 |
|---|---|---|
| 体力バー・スコア | 左上（top-left） | どの画面比率でも左上に張り付く |
| ポーズボタン | 右上（top-right） | 同上（右上固定） |
| 決定・ジャンプボタン | 右下（bottom-right） | スマホの親指圏に固定 |
| ヘッダーバー | 上・左右ストレッチ | 幅の違いに追従して伸びる |
| 背景パネル | 全方向ストレッチ | 画面全体を常に覆う |
| 中央ダイアログ | 中央（middle-center） | 常に画面中央 |
ポイントは2つです。
- 「隅のものは隅に、伸びるものはストレッチ」: 位置を守りたいパーツはその隅へアンカー、幅や画面全体に追従させたいパーツはストレッチ。この2択に整理すると、どんなHUDでも迷いません。
- 配置したらアスペクト比を振って検証: Gameビュー左上の解像度ドロップダウンで16:9・4:3・21:9あたりを行き来して、はみ出し・重なりをその場で確認します。実機で気づくより100倍安上がりです。
体力バーの中身（HPに応じてゲージを減らす処理）はImageのFill Amountで作るのが定番です。文字表示を組み合わせるなら TextMeshProの記事 が次のステップです。
おまけ：先に知っておくと良いこと
- 文字はTextMeshProで: uGUIのテキスト表示は、旧TextではなくTextMeshProが現在の標準です（TextMeshProの記事 参照）。
- 並べる系はLayout Group: インベントリのアイテム一覧やボタン列は、手動配置ではなく
Horizontal/Vertical/Grid Layout Groupで自動整列させると、増減に自動で対応できます。Layout Groupの記事 で使い分けから実践まで解説しています。 - EventSystemは消さない: ボタンが反応しないときは、シーンに
EventSystemがあるかをまず確認。UIのクリック・タップ検知はこれが担っています。ボタンまわりの仕組みとつまずきどころは ボタンとクリックイベントの記事 にまとめています。 - ノッチ対応（Safe Area）: スマホのノッチやホームバーを避けるには
Screen.safeAreaを使ったSafeArea対応が必要になります。モバイルUIでは早めに意識しておくと後で楽です。
まとめ
- Canvasが土台。Render Modeは通常
Overlay、頭上HPバーはWorld Space。 - RectTransformは「矩形」を扱うUI専用Transform。数値の意味はアンカー状態で変わる。
- アンカーが位置を守る。「画面の隅に置くUIは、その隅にアンカー」が原則。伸ばしたいものはストレッチ。
- Canvas Scalerが大きさを守る。
Scale With Screen Size＋基準解像度が定番。 - 早見表から始めて、Gameビューでアスペクト比を変えて検証。
アンカーとCanvas Scalerの2つを押さえれば、「実機で崩れた」の9割は防げます。アンカーを制する者はuGUIを制します。