Amazonで商品を見るセール会場へ

Unity Canvasの使い方|描画モード・画面サイズ・アンカーの設定

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 Space3D空間内の看板など位置・向き・大きさと、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幅・高さ、またはその中間を基準に倍率を決める
ExpandCanvas領域が基準より小さくならないようにする
ShrinkCanvas領域が基準より大きくならないようにする

縦画面か横画面かだけで設定を固定せず、残したい表示範囲とUIの配置を確認します。Expandを選んでも、アンカーや余白が不適切な部品まで自動修正されるわけではありません。仕様の参照先:Unity公式・Canvas Scaler。

アンカーで親に対する配置を決める

アンカーは画面そのものではなく、親のRect Transformを基準にします。親がPanelなら、まずそのPanelの大きさと配置も確認します。ピボットは回転・サイズ変更などの基準点で、アンカーとは役割が異なります。

配置したいものアンカーの設定例
右上の小さなアイコン右上にまとめ、端からの位置を調整
中央のダイアログ中央にまとめ、幅・高さを調整
横幅に追従する帯横方向をStretchにして左右の余白を調整
親全体に広がる背景縦横をStretchにして各辺の余白を調整

横方向だけ伸ばす設定もできます。「固定」か「Stretch」かは縦横それぞれで確認してください。設定場所と操作の参照先:Unity公式・Basic Layout。

解像度を変えて崩れる場所を確認する

最初は同じ縦横比で解像度を変更し、次に縦横比を変更すると、全体の拡大縮小と配置の問題を分けて確認できます。端に置く部品を親の角へアンカー設定する考え方は、Unity公式の複数解像度向けUI設計でも説明されています。

  1. 設計時の解像度で、UIの位置とサイズを確認します。
  2. 同じ縦横比の別解像度へ変更し、UI全体の大きさを確認します。
  3. 別の縦横比へ変更し、端の部品・中央の部品・背景を個別に確認します。
  4. ずれた部品のアンカーと親の範囲を確認し、一度に一つの設定を変更します。
  5. 設定前後を保存し、変更した画面サイズへ再度切り替えて確認します。

この手順は確認方法の案内であり、本記事の実測結果ではありません。実機では画面の見た目に加えて、操作できる領域も確認してください。

UIの目的に合わせて次の実装へ進む

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

Unityのおすすめ書籍

開発PCの選び方

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次