uGUIの画像を引き伸ばさずに表示する方法は、画像の描画だけを変えるか、Rect Transformの幅・高さを変えるかで選びます。
ImageのPreserve AspectとAspect Ratio Fitterの役割を分け、幅320なら高さ180になる16:9の設定例を示します。
2026年10月25日にuGUI 2.0の公式資料を再確認しました。
掲載画像は既存の旧作例で、正確なEditor版は未確認です。
今回Unityでの実行は行っていないため、使用するEditor・パッケージ版で手順と結果を確認してください。
画像の見た目と配置領域を分けて選ぶ
| 目的・症状 | 設定・確認先 |
|---|---|
| 決まった枠の中に画像全体を収める | ImageのSimpleとPreserve Aspect |
| 幅または高さを変えるともう片方も変えたい | Aspect Ratio Fitter |
| 親の枠に収める・親を覆う | Fit In Parent・Envelope Parent |
| Sceneビューで一度だけサイズを調整する | Rect Toolのハンドル操作 |
1. 枠を変えずにImageの比率を保つ
- Source ImageにSpriteを指定し、Image TypeをSimpleにする。
- Preserve Aspectを有効にする。
- Rect TransformのWidth・Heightを変えて、画像全体が枠内に収まるか確認する。
Preserve Aspectは画像の描画を調整します。
Rect Transform自体を元画像の比率へ自動変更する機能ではありません。
枠と画像の比率が違えば、描画されない余白ができます。
画像の配置領域も変えたい場合は次の方法へ進みます。
2. Rect Toolで一度だけサイズを調整する
旧作例はTキーでRect Toolを選び、AltとShiftを押しながら四隅をドラッグして比率を維持した資料です。
Shiftの比率固定とAltの基準点を中心とする調整は別の操作です。
操作後はWidth／HeightとScaleを確認してください。
後から数値入力や親のサイズ変更で比率を自動維持する用途には、Aspect Ratio Fitter等の制御を使います。
3. Aspect Ratio FitterでRect Transformを調整する
- 対象のUIオブジェクトにAspect Ratio Fitterを追加する。
- Aspect Ratioへ「幅÷高さ」を入力する。16:9は約1.777778、正方形は1。元Spriteの比率は自動で読み取る設定ではないため、自分で指定する。
- Aspect ModeをWidth Controls Heightにする。
- Rect TransformのWidthを320にして、Heightが約180になるか確認する。Widthを640に変えれば期待値は約360になる。
上の数値は比率から計算した期待値で、今回測定したUnityの結果ではありません。
Height Controls Widthなら高さを入力して幅を変えます。
比率に使う幅・高さは画像の透明な余白を含むかも確認してください。
比率設定を確認する資料と、2D制作の学習書
| 学びたいこと | 選ぶ資料 | 注意点 |
|---|---|---|
| 画像の比率設定だけを確認 | この記事と無料のuGUI公式資料 | 自分のCanvasで表示と余白を試す |
| Unityの操作から2Dゲーム制作まで学ぶ | 楽しく学ぶ Unity「2Dゲーム」作りのきほん | 有料の入門書。比率設定だけが目的なら必要範囲を先に確認 |
このページの比率設定を確認する目的なら、まずuGUIの公式資料と最小のUI作例を使ってください。
Unityの操作やスクリプトから学びたい場合は、次の入門書が候補です。
出版社の内容紹介・目次ではUnity 6対応と、ゲーム作成を通じて基本を学ぶ構成を確認できます。
2026年10月25日に出版社情報を確認しましたが、本書を購入・実践しての評価ではありません。
親に収めるか、親を覆うか
- Fit In Parent：比率を保って親の内側に収める。親との比率差によって余白が残る。
- Envelope Parent：比率を保って親全体を覆う。子が親からはみ出す場合がある。
- None：比率によるサイズ調整を行わない。
Fit In ParentとEnvelope Parentは幅・高さだけでなく位置・アンカーも調整します。
Envelope Parentだけでははみ出した部分を切り抜きません。
長方形の切り抜きが必要なら、条件に合うRectMask2Dなどを別に設定します。
Aspect Ratio Fitterの公式資料／RectMask2D
例えば親が300×300、子の比率が16:9なら、Fit In Parentは300×168.75が計算上の期待値です。
Envelope Parentでは約533.33×300となり、親の左右にはみ出します。
どちらも比率は同じで、違いは全体を収めるか親を覆うかです。
これは比率からの計算例で、今回Unityで測定した値ではありません。
比率が戻る・WidthやHeightを編集できないとき
- 親Layout Groupが子のサイズを決めていないか、対象にContent Size Fitterや別のサイズ変更スクリプトがないか確認する。
- 同じ軸を複数のコンポーネントで制御しない。外側をLayout Groupで並べ、内側の画像に比率調整を設定する構成も候補にする。
- Aspect Ratio Fitterはminimum/preferred sizeを参照して全体配置を解決する機能ではない。
- ピボットに合わせてサイズが変わるため、片側だけ伸ばしたい場合はピボットも確認する。
設定の基準点と親子関係はuGUIの基本設定、画面全体のサイズ対応はCanvasの設定で確認できます。
Width Controls HeightでHeightが自動制御されること自体は正常です。
このモードではWidthを入力し、Heightは設定した比率から変わる値として確認します。
Height Controls Widthでは、その逆にHeightを入力してください。
調整後に確認する結果
- 指定した比率とWidth÷Heightが一致するか確認する。
- Preserve Aspectでは枠の寸法が変わらず、画像が意図した範囲に描画されるか確認する。
- 親の横幅・高さを変え、余白、はみ出し、クリッピング、隣のUIとの重なりを確認する。
関連するUnityの記事
uGUIでのUI制作は、ほかにも書いています。
