uGUIの画像を引き伸ばさずに表示する方法は、画像の描画だけを変えるか、Rect Transformの幅・高さを変えるかで選びます。ImageのPreserve AspectとAspect Ratio Fitterの役割を分け、幅320なら高さ180になる16:9の設定例を示します。
2026年10月3日に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自体を元画像の比率へ自動変更する機能ではありません。枠と画像の比率が違えば、描画されない余白ができます。画像の配置領域も変えたい場合は次の方法へ進みます。ImageのAPI資料
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なら高さを入力して幅を変えます。比率に使う幅・高さは画像の透明な余白を含むかも確認してください。
親に収めるか、親を覆うか
- Fit In Parent：比率を保って親の内側に収める。親との比率差によって余白が残る。
- Envelope Parent：比率を保って親全体を覆う。子が親からはみ出す場合がある。
- None：比率によるサイズ調整を行わない。
Fit In ParentとEnvelope Parentは幅・高さだけでなく位置・アンカーも調整します。Envelope Parentだけでははみ出した部分を切り抜きません。長方形の切り抜きが必要なら、条件に合うRectMask2Dなどを別に設定します。Aspect Ratio Fitterの公式資料／RectMask2D
比率が戻る・WidthやHeightを編集できないとき
- 親Layout Groupが子のサイズを決めていないか、対象にContent Size Fitterや別のサイズ変更スクリプトがないか確認する。
- 同じ軸を複数のコンポーネントで制御しない。外側をLayout Groupで並べ、内側の画像に比率調整を設定する構成も候補にする。
- Aspect Ratio Fitterはminimum/preferred sizeを参照して全体配置を解決する機能ではない。
- ピボットに合わせてサイズが変わるため、片側だけ伸ばしたい場合はピボットも確認する。
設定の基準点と親子関係はuGUIの基本設定、画面全体のサイズ対応はCanvasの設定で確認できます。
調整後に確認する結果
- 指定した比率とWidth÷Heightが一致するか確認する。
- Preserve Aspectでは枠の寸法が変わらず、画像が意図した範囲に描画されるか確認する。
- 親の横幅・高さを変え、余白、はみ出し、クリッピング、隣のUIとの重なりを確認する。
関連するUnityの記事
uGUIでのUI制作は、ほかにも書いています。
さらに学びたい・環境を整えたい方へ
2Dゲーム制作の流れを体系的に学びたい方に向けた参考情報です。
購入前に目次とUnityの対応バージョンをご確認ください。
