uGUIのScroll Rectを使い、12個の画像を2列で並べる縦スクロールの設定例を示します。自作のC#スクリプトは使わず、表示範囲、リストの高さ、入力、スクロールバーを順に設定します。
2026年10月3日にuGUI 2.0の公式資料を確認して整理しました。掲載画像は既存の旧作例で、正確なEditor版は未確認です。今回Unityでの実行は行っていないため、使用するEditor・パッケージ版で手順と結果を確認してください。
先に確認する完成条件
- 12項目が2列・6行に並ぶ。
- Viewportの外へ出た画像が隠れる。
- 表示範囲内のドラッグとホイールで上下に移動する。
- スクロールバーを動かすとContentの表示位置も変わる。
次のGIFは既存記事の旧完成作例です。今回この環境で再実行した結果ではありません。
1. CanvasとScrollViewを作る
既存Canvasに作成する場合はCanvasのGraphic Raycaster、EventSystemと入力方式に合うInput Moduleを確認します。旧Input ManagerではStandaloneInputModule、Input SystemではInputSystemUIInputModuleを使います。公式のUI入力資料
GameObjectのUIメニューからScroll Viewを作ると、Viewport・Content・Scrollbar等の標準構成を出発点にできます。以下は旧作例のPanelから組む方法で、標準作成後にも同じ役割を照合できます。両方を重ねて作る必要はありません。
- UIのPanelを作り、名前をScrollViewにする。
- Rect Transformを600×384へ設定する。これはこの作例の設計値で、全端末向けの推奨値ではない。
- ScrollViewにScroll Rectを追加する。
2. Viewportの表示範囲と入力面を作る
- ScrollViewの子にUI用の空オブジェクトを作り、名前をViewportにする。Rect Transformがあることを確認する。
- アンカーを上下左右のStretchにし、余白を左16・上16・下16、右48へ設定する。右側は今回のスクロールバー用の余白として広く取る。
- ViewportにImageとRectMask2Dを追加する。ImageはRaycast Targetを有効にし、背景を透明にしたい場合はColorのAlphaを0にする。
- Viewportの内側にContentを置く。RectMask2Dは長方形かつ同一平面のUI用で、曲線の形状を切り抜く機能ではない。
旧画像ではViewportをEmptyとして作成していますが、Scroll Rectだけでは表示範囲外の画像を切り抜けません。今回の説明ではRectMask2Dと入力を受けるImageを補いました。RectMask2Dの条件
3. Contentと12個のItemを作る
- Viewportの子にContentを作る。横方向をStretch、縦方向のアンカーを上端へ、Pivot Yを1へ設定する。Left/RightとPos Yは0を基準にする。
- ContentにGrid Layout GroupとContent Size Fitterを追加する。Horizontal FitはUnconstrained、Vertical FitはPreferred Sizeにする。
- Contentの子にUIのImageを作りItem_1とする。複製して12個にする。子の寸法は次のGrid Layout GroupのCell Sizeで決まる。
Grid Layout Groupの設定
| 目的・症状 | 設定・確認先 |
|---|---|
| Cell Size | 252×96 |
| Spacing | X=16、Y=16 |
| Padding | Left=16、Right=0、Top=0、Bottom=0 |
| Start Corner・Start Axis | Upper Left・Horizontal |
| Child Alignment | Upper Left |
| Constraint | Fixed Column Count、Count=2 |
旧作例の幅256では、2列の必要幅が16＋256×2＋16＝544になります。今回のViewport幅は600−16−48＝536なので、旧値のままでは8足りません。Cell Sizeの幅を252へ下げると必要幅536に合います。旧作例の256幅をそのまま使う場合は、ScrollViewまたはViewportを広げてください。
このページでは252×96を採用する例として進めます。6行の高さは96×6＋16×5＝656、Viewportの高さは384−16−16＝352という計算上の期待値です。Playモードで実際のContentの高さと表示を確認してください。
Fixed Column Countで列数を決めると、高さをContent Size Fitterで伸ばす制御を整理できます。Gridは子のpreferred sizeではなくCell Sizeで寸法を決めます。Grid Layout Groupの公式資料
4. Scroll Rectに参照を割り当てる
- Content欄へContentのRect Transform、Viewport欄へViewportのRect Transformをドラッグする。
- Horizontalを無効、Verticalを有効にする。
- 最初はMovement TypeをClampedにして端で止まることを確認する。弾ませたい場合はElasticへ変える。
- Playモードで表示範囲内をドラッグし、Contentが上下に移動するか確認する。
Scroll Rectの公式資料では、スクロールのための入力をScroll Rectの範囲内から受け取る必要があります。画面の別の場所をドラッグしても動くとは限りません。
5. 縦スクロールバーを付ける
- ScrollViewの子、Viewportの兄弟としてScrollbarのImageを作る。右端の中央を基準に上下へStretchし、幅16、Pos X=-24、Top/Bottom=16を作例の値とする。
- Scrollbarの子にHandleのImageを作る。全方向Stretch、余白3を旧作例の開始値とする。
- ScrollbarにScrollbarコンポーネントを付け、Handle RectへHandle、必要なTransitionのTarget GraphicへHandleのImageを割り当てる。
- DirectionをBottom To Topにし、Scroll RectのVertical Scrollbar欄へScrollbarを割り当てる。
ScrollbarはViewportの兄弟、HandleはScrollbarの子です。HandleをScrollView直下に置かないよう階層を確認してください。自動非表示はPlayモードで確認します。サイズを自動で広げるVisibilityを使う場合は、ViewportがScrollViewの子であることも確認します。Scrollbarの公式資料
動かない・はみ出すときの確認順
| 目的・症状 | 設定・確認先 |
|---|---|
| ドラッグもホイールも反応しない | EventSystem、Input Module、Graphic Raycaster、Raycast Target、前面画像の入力遮断を確認 |
| 移動できる範囲がない | Contentの高さがViewportを超えるか、FitterがPreferred Sizeか確認 |
| 画像が枠外にも見える | ViewportのRectMask2D、Contentの親子関係、UIが同一平面か確認 |
| 項目が横にはみ出す | 列数×Cell Size＋Spacing＋PaddingとViewportの幅を比較 |
| 上に戻る・寸法が毎回変わる | 同じRectの同じ軸を親Layout Group等で重複制御していないか確認 |
| バーだけ動いてリストが動かない | Scroll RectのVertical Scrollbar参照、Content・Viewport参照を確認 |
アンカー・サイズ制御の基礎はuGUIの基本設定へ、画面全体の拡大縮小はCanvasの設定へ分けています。
確認を終える条件
- 12項目の追加・削除でContentの高さが追従する。
- 先頭と末尾まで移動でき、Viewport外の画像が隠れる。
- ドラッグ・ホイール・Scrollbarのそれぞれで表示位置が変わる。
- 別の画面比率でも項目とバーが重ならない。
大量の項目を生成する場合の仮想化や、スマートフォン実機のタッチ性能はこの設定例だけで確認できません。今回の実機操作・負荷計測は未実施です。
関連するUnityの記事
uGUIでのUI制作は、ほかにも書いています。
