【Unity】Scroll Viewの使い方 | Script、List、Content、スクロール、Scroll Rect｜Wamutai Tech

UnityでUIを作るとき、大量のアイテムリストや長い文章を表示したい場合、どのようにスクロール可能にするか？ という問題に直面します。

アイテムのリスト（インベントリ、ランキング、チャット）を作成したい
長い説明文やストーリーをスクロールして表示したい
スマホでスワイプスクロールを実装したい

このようなときに便利なのがScroll View（スクロールビュー）です！
Scroll View を使うと、簡単にスクロール可能なリストやUIを作成でき、スクリプトで動的にアイテムを追加・削除することも可能です。

この記事では、Scroll View の基本からスクリプト制御、カスタマイズ、よくあるエラーの解決策まで詳しく解説します！

この記事で学べること
UnityのScroll Viewの使い方
1. Scroll Viewの追加方法
2. Scroll Viewの構成
Script(スクリプト)でListを動的に作成
1. アイテムを動的に追加する（Content）
2. アイテムを削除する（Content）
スクロールの設定とカスタマイズ（Scroll Rect）
よくあるエラーと解決策
まとめ

この記事で学べること

Scroll View（スクロールビュー）の基本的な使い方
スクリプトでリストを動的に生成・更新する方法
スマホ向けのスワイプスクロールの設定方法
スクロールバーやスクロールのカスタマイズ
よくあるエラーと解決策

UnityのScroll Viewの使い方

Scroll Viewの追加方法

・ [Hierarchy] → [右クリック] → [UI] → [Scroll View] を選択
・ Scroll Viewオブジェクトがシーンに追加される

Scroll Viewの構成

Scroll Viewは以下のコンポーネントで構成されています。

➡︎ Contentのサイズを変更すれば、自動的にスクロールできる
➡︎ 「Vertical Scroll」または「Horizontal Scroll」を有効にすると、縦・横スクロールが可能

オブジェクト	説明
Viewport	スクロール可能な表示領域
Content	実際にスクロールするオブジェクト（アイテムリストなど）
Scroll Rect	スクロール動作を制御するコンポーネント
Scrollbar	縦・横スクロールのバー（任意）

※ この他にも参考にしてください。

Script(スクリプト)でListを動的に作成

Scroll ViewはスクリプトでListを動的に追加・削除することも可能です。
例えば、ランキングリストやインベントリをリアルタイムで更新できます。

アイテムを動的に追加する（Content）

以下のようなスクリプトを実行すると、アイテムを追加し名前を連番にできます。

➡︎ アイテムを動的に生成し、スクロール可能なリストを作成
➡︎ リストのアイテムはContentの子オブジェクトとして配置される

using UnityEngine;
using UnityEngine.UI;
using System.Collections.Generic;

public class ScrollViewExample : MonoBehaviour
{
    public GameObject itemPrefab; // リストアイテムのプレハブ
    public Transform contentPanel; // Scroll ViewのContentオブジェクト

    void Start()
    {
        // 仮のデータを追加
        for (int i = 0; i < 10; i++)
        {
            AddItem("アイテム " + (i + 1));
        }
    }

    public void AddItem(string itemName)
    {
        GameObject newItem = Instantiate(itemPrefab, contentPanel);
        newItem.name = itemName;
    }
}

アイテムを削除する（Content）

➡︎ Content内のすべてのアイテムを削除して、リストをクリアできる

//すべてのアイテムを削除する関数
public void RemoveAllItems()
{
    foreach (Transform child in contentPanel)
    {
        Destroy(child.gameObject);
    }
}

スクロールの設定とカスタマイズ（Scroll Rect）

スクロールの挙動を調整

Scroll ViewのScroll Rectには、以下のオプションがあります。

➡︎ スマホでスワイプスクロールを自然にするなら「Inertia」をONにする

設定項目	説明
Horizontal / Vertical	横スクロール / 縦スクロールを有効化
Movement Type	スクロールの挙動（Elastic, Clamped, Unrestricted）
Elasticity	端でバウンドする力の調整
Inertia	慣性スクロールの有効/無効
Deceleration Rate	慣性スクロールの減速率

スクロール位置をスクリプトで制御

スクリプトで特定の位置までスクロールすることも可能。

➡︎ verticalNormalizedPosition = 1 にすると最上部へスクロール
➡︎ verticalNormalizedPosition = 0 にすると最下部へスクロール

using UnityEngine;
using UnityEngine.UI;

public class ScrollViewExample : MonoBehaviour
{
    public ScrollRect scrollRect;

    public void ScrollToTop()
    {
        scrollRect.verticalNormalizedPosition = 1f;
    }

    public void ScrollToBottom()
    {
        scrollRect.verticalNormalizedPosition = 0f;
    }
}

スクロールバーをカスタマイズ

➡︎ デザインに合わせてスクロールバーをカスタマイズ可能

Scroll Viewの「Scrollbar Vertical」、「Scrollbar Horizontal」 の Imageを変更
HandleのサイズをScrollbarのSizeで調整
Scroll RectのScrollbar設定で挙動を変更

よくあるエラーと解決策

スクロールしない（動かない）

・ ContentのサイズがViewportより大きいか確認
・ 「Vertical Scroll」、「Horizontal Scroll」がONになっているか確認

アイテムが正しく表示されない

・ ContentのVertical Layout GroupまたはGrid Layout Groupを正しく設定
・ スクリプトでLayoutRebuilder.ForceRebuildLayoutImmediate()を呼び出す

using UnityEngine;
using UnityEngine.UI;

public class LayoutFix : MonoBehaviour
{
    public RectTransform contentPanel;

    void UpdateLayout()
    {
        LayoutRebuilder.ForceRebuildLayoutImmediate(contentPanel);
    }
}

スクロールの慣性が強すぎる

・ Scroll RectのDeceleration Rateを調整

scrollRect.decelerationRate = 0.05f; // 減速を早める

まとめ

・ Scroll Viewを使えば、スクロール可能なリストや長いコンテンツを簡単に実装できる
・ スクリプトで動的にアイテムを追加・削除可能
・ スクロールの動きや慣性をScroll Rectで調整できる
・ スクリプトでスクロール位置を制御することも可能

Scroll View

【Unity】Scroll Viewの使い方 | Script、List、Content、スクロール、Scroll Rect