Unity│uGUIスクロールビューの作り方

uGUIの標準機能だけでスクロールビューを作る手順を解説します。

スクリプトは作成せず、コンポーネントの設定だけで実装できます。

完成イメージ

リストの作成

土台（ScrollView）の作成

1. GameObject → UI → Panelを作成
2. サイズ（Width/Height）を600×384に設定
3. 名前を「ScrollView」に変更

スクロール表示領域（Viewport）の作成

1. ScrollViewの子要素にGameObject → Create Emptyを作成
2. Rect Transformのアンカープリセットで上下左右にストレッチを設定
3. 余白（Left/Right/Top/Bottom）にそれぞれ16を入力
4. 名前を「Viewport」に変更

レイアウト領域（Content）の作成

1. Viewportの子要素にGameObject → Create Emptyを作成
2. Rect Transformのアンカープリセットで左右（横方向）にストレッチを設定
3. Pivotを上揃え（Y=1）に設定（上揃えにしないと配置の余白がずれます）
4. Grid Layout Groupコンポーネントを追加
5. Content Size Fitterコンポーネントを追加し、Vertical FitをPreferred Sizeに設定
6. 名前を「Content」に変更

アイテムの作成

1. Contentの子要素にGameObject → UI → Imageを作成
2. サイズを256×96に設定
3. 名前を「Item_1」に変更し、複製して計12個作成

Grid Layout Groupの設定

1. Cell Sizeにアイテムのサイズである256×96を入力
2. PaddingのLeftとSpacingに16を入力
3. ConstraintをFixed Column Countに設定し、Constraint Countの値を2に変更（2列表示）

Scroll Rectの設定

1. ScrollViewにScroll Rectコンポーネントを追加
2. Horizontalのチェックを外す（縦スクロールのみに制限）
3. ContentプロパティにContentオブジェクトを登録
4. ViewportプロパティにViewportオブジェクトを登録

スクロールバーの作成

スクロールバーの土台作成

1. ScrollViewの子要素にGameObject → UI → Imageを作成
2. アンカーを右寄せ・上下ストレッチに設定
3. Pos Xを-24、Top/Bottomを16に設定
4. 名前を「Scrollbar」に変更

ハンドルの作成

1. Scrollbarの子要素にGameObject → UI → Imageを作成
2. Colorを黒に設定
3. 全方位ストレッチにし、上下左右の余白（Left/Right/Top/Bottom）に3を設定
4. 名前を「Handle」に変更

Scrollbarコンポーネントの設定

1. ScrollbarオブジェクトにScrollbarコンポーネントを追加
2. Handle RectプロパティにHandleオブジェクトを登録
3. DirectionをBottom To Topに変更
4. ScrollViewのScroll RectコンポーネントにあるVertical ScrollbarにScrollbarを登録

Directionを切り替えるとハンドルの向きや比率が変化するため、配置に応じて調整してください。

Unityの関連記事は、まとめ記事から確認できます。

クロスフェードの実装方法はこちらで解説しています。

UI制作に活用できるシェーダーはこちらで紹介しています。

uGUIでのUI制作は、ほかにも書いています。

まとめ

階層構造：

• ScrollView（Panel + Scroll Rect）
• ├ Viewport（Empty）
• │ └ Content（Grid Layout Group + Content Size Fitter）
• │ 　└ Item_1〜12
• └ Scrollbar（Image + Scrollbar）
• 　└ Handle（Image）

ポイント：

• ContentのPivot（Y）は上揃え（1）に設定する
• Content Size FitterのVertical FitをPreferred Sizeに設定する
• Scroll RectにContentとViewportをそれぞれ割り当てる