Unity UIのスケーリング設定とScreen Match Modeに関する資料
対象環境：Unity 6（6000系）＋ uGUI 2.x。Canvas Scaler の仕様は Unity 6.6 時点の公式ドキュメント（uGUI 2.0）に基づいています。
2026年9月29日更新：Screen Match Mode（Expand / Shrink）の説明に誤りがあったため、全面的に書き直しました。
はじめに
本資料では、Unity の UI（uGUI）を画面サイズの違う環境で正しく表示するための Canvas Scaler の設定を解説します。特に誤解されやすい Screen Match Mode（Match Width Or Height / Expand / Shrink）について、具体的な数値と図で違いを確認します。
最初に結論を押さえておきましょう。
- 画面が小さいと UI が縮小されるのは、Scale With Screen Size の基本動作です（Expand だけの仕様ではありません）。
- Screen Match Mode は「画面の大きさ」ではなく「縦横比（アスペクト比）のずれ」をどう吸収するかの設定です。
- Expand は「はみ出さない代わりに余白ができる」、Shrink は「余白ができない代わりに端がはみ出す」モードです。
Canvas Scaler の基本設定
Canvas Scaler は Canvas と同じ GameObject に付いているコンポーネントで、Canvas 配下のすべての UI（文字サイズや画像の枠も含む）の拡大率を決めます。
UI Scale Mode
| モード | 動き | 向いている場面 |
|---|---|---|
| Constant Pixel Size | 画面サイズに関係なく、UI を同じピクセル数で表示する（Scale Factor で全体の倍率は変更可能） | 解像度がほぼ固定の環境、ツール的な画面 |
| Scale With Screen Size | 基準解像度で作ったレイアウトを、実際の画面サイズに合わせて拡大・縮小する | ゲーム全般（最もよく使われる） |
| Constant Physical Size | UI をミリやポイントなどの物理的な大きさで表示する。端末が画面の DPI を正しく報告することが前提で、報告しない端末用に Fallback Screen DPI を指定する | 「指で押しやすい大きさ」を端末をまたいで揃えたいとき |
Constant Pixel Size は「ピクセル数」が一定なので、解像度の低い画面では UI が画面に占める割合が大きくなり、高解像度の小さなスマホでは UI が物理的に小さく見えます。「大きさを保つ」と言っても、何を保つのか（ピクセル数／物理的な大きさ／画面に占める割合）で選ぶモードが変わる点に注意しましょう。
Scale With Screen Size の仕組み
Reference Resolution（基準解像度）
UI をデザインするときの基準の解像度です（例：1920×1080）。UI の位置やサイズは、この解像度のピクセルを単位として指定します。
- 実際の画面が基準より大きい → UI 全体が拡大される
- 実際の画面が基準より小さい → UI 全体が縮小される
これは Screen Match Mode をどれにしても同じです。冒頭の動画で、Game ビューを小さくすると UI が縮小されるのはこの動作によるもので、正常です。
縦横比が違うとき、どうなるか
問題になるのは、実際の画面の縦横比が基準解像度と違うときです。縦と横を別々の倍率で拡大すると UI がつぶれて（引き伸ばされて）しまうため、Unity は倍率を 1 つに決めて縦横比を保ちます。その代わり、どこかで「余白」か「はみ出し」が生まれます。その倍率の決め方を選ぶのが Screen Match Mode です。
Screen Match Mode の3つのモード
基準解像度 1920×1080（16:9）の UI を、1440×1080（4:3）の画面に表示する場合で比べてみます。横の比率は 1440÷1920＝0.75、縦の比率は 1080÷1080＝1.0 です。
Expand
キャンバスの領域を縦か横に広げて、基準解像度より小さくならないようにします。倍率は「横の比率」と「縦の比率」の小さい方（上の例では 0.75）が使われます。
- 基準解像度の範囲が必ず全部画面に収まる（切れない）
- その代わり、縦横比が違うと余白ができ、UI は少し小さく見える
Shrink
キャンバスの領域を縦か横に切り詰めて、基準解像度より大きくならないようにします。倍率は「横の比率」と「縦の比率」の大きい方（上の例では 1.0）が使われます。
- 画面いっぱいに表示され、余白はできない
- その代わり、縦横比が違うと端がはみ出して見えなくなる。UI は Expand より大きく表示される
注意：「UI を小さくしたいから Shrink」は逆です。Shrink は Expand よりも UI が大きくなります。
Match Width Or Height
「横の比率」と「縦の比率」のどちらを基準にするかを、Match スライダーで決めます。
- Match＝0（Width）：横の比率を使う（上の例では 0.75）
- Match＝1（Height）：縦の比率を使う（上の例では 1.0）
- その間の値：両方を混ぜた倍率（0.5 で約 0.87）
補足：中間値は単純な平均ではなく、対数を使った平均で計算されます。0.5 のときは √(0.75×1.0) ≒ 0.87 になります。授業では「0 と 1 の間で混ざる」と覚えておけば十分です。
横長のスマホ画面の場合
今度は逆に、基準より横長の 2400×1080（20:9、横向きのスマホ）で比べます。横の比率は 1.25、縦の比率は 1.0 です。
| モード | 倍率 | 見え方 |
|---|---|---|
| Expand | 1.0（小さい方） | 全部見える。左右に余白 |
| Shrink | 1.25（大きい方） | 上下がはみ出す |
| Match＝1（Height） | 1.0 | Expand と同じ |
| Match＝0（Width） | 1.25 | Shrink と同じ |
このように、同じモードでも「画面が基準より横長か縦長か」で余白やはみ出しの出る方向が変わります。
どれを選べばよいか
| 選び方 | おすすめ |
|---|---|
| UI が切れるのは絶対に避けたい | Expand（できた余白はアンカーで対応） |
| 横画面のゲームで、縦方向のレイアウトを揃えたい | Match Width Or Height（Match＝1）がよく使われる |
| 縦画面のゲームで、横方向のレイアウトを揃えたい | Match Width Or Height（Match＝0）がよく使われる |
| 背景などで画面を必ず埋めたい | Shrink（端に大事な UI を置かない） |
RectTransform とアンカー設定の重要性
上の図の UI 部品は、すべて画面中央を基準（アンカー）に配置した場合の見え方です。実は、Canvas Scaler の設定だけでは「余白」や「はみ出し」の問題は解決しません。仕上げに必要なのが、各 UI 要素の RectTransform のアンカー設定です。
- スコア表示（左上）：アンカーを左上にすると、画面の縦横比が変わっても常に画面の左上に張り付く。Shrink でもはみ出さず、Expand でも余白側に取り残されない
- ボタン（右下）：アンカーを右下にすると、常に画面の右下に表示される
- 背景画像：アンカーをストレッチ（四隅いっぱい）にすると、Expand でできた余白も埋められる
- タイトルロゴなど：中央に置きたいものは中央アンカーのままでよい
「Canvas Scaler で全体の倍率を決め、アンカーで各部品を画面のどこに寄せるかを決める」という二段構えで考えると整理しやすくなります。詳しい手順は Unity 公式の Designing UI for Multiple Resolutions も参考になります。
確認のしかた
- Game ビュー上部の解像度（アスペクト比）のプルダウンを開く
- 16:9、4:3、20:9 など縦横比の違う設定に切り替える（一覧にないものは「＋」から追加できる）
- UI が切れていないか、余白が不自然でないかを確認する
スマホ向けなら、Game ビューを Simulator ビューに切り替えると、ノッチ（切り欠き）を含めた実機に近い表示で確認できます。
まとめ
- 画面が小さいと UI が縮小されるのは Scale With Screen Size の基本動作で、正常。
- Screen Match Mode は縦横比のずれを吸収する方法を選ぶ設定。
- Expand＝切れない代わりに余白ができる／Shrink＝余白がない代わりにはみ出す／Match Width Or Height＝横基準か縦基準かをスライダーで選ぶ。
- ピクセル数や物理的な大きさを固定したい場合は、Constant Pixel Size や Constant Physical Size を検討する。
- 最後は RectTransform のアンカーで、各 UI 部品を画面のどこに寄せるかを決める。