Unityで作るランキング表示のベストプラクティス

2025年10月15日

ゲームやアプリにランキングを導入すると、ユーザー同士の競争心を刺激し、継続利用を促す効果があります。本記事では、Unityでランキングを表示する方法を、UI構築・データ構造・更新処理の3つの観点から解説します。単純なサンプルから始め、実際に使いやすいコードへ改良していく流れを追っていきましょう。

UIの準備

ランキングは「縦に並んだリストUI」が基本です。以下の構成でCanvasに配置します。

RankingDialog (Panel)
- ScrollView
  - Viewport
    - Content（縦方向に並べる）
RankingButton（Prefab）
- 名前テキスト
- スコアテキスト
- アイコン画像

配置には Vertical Layout Group を利用し、自動整列を行います。

テキストには TextMeshPro を推奨します。可読性と装飾性が高く、今後のUnity開発では必須に近い存在です。

データ構造（ランキングクラス）

シングルトンを使ってランキングデータを集中管理します。

using System;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;

public sealed class Ranking
{
    private Ranking() {}
    private static Ranking _instance;
    public static Ranking Instance => _instance ??= new Ranking();

    // ランキングの1件を表すデータ構造
    public sealed class Ranker
    {
        public string Name { get; }
        public Sprite Icon { get; }
        public int Score { get; }
        public Ranker(string name, Sprite icon, int score)
            => (Name, Icon, Score) = (name, icon, score);
    }

    private readonly List<Ranker> _rankers = new();
    public IReadOnlyList<Ranker> Rankers 
        => _rankers.OrderByDescending(r => r.Score).ToList();

    public void Add(string name, Sprite icon, int score)
        => _rankers.Add(new Ranker(name, icon, score));

    public bool Remove(string name)
        => _rankers.Remove(_rankers.Find(r => r.Name == name));

    public void Clear() => _rankers.Clear();
}

UI更新処理

ランキングを表示するUIコントローラです。

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

public class RankingDialog : MonoBehaviour
{
    [SerializeField] Transform content;
    [SerializeField] GameObject rankingButtonPrefab;

    private readonly List<GameObject> _buttons = new();

    public void ShowRanking()
    {
        var rankers = Ranking.Instance.Rankers;

        // 差分更新：必要数だけ再利用または生成
        for (int i = 0; i < rankers.Count; i++)
        {
            GameObject button;
            if (i < _buttons.Count)
            {
                button = _buttons[i];
                button.SetActive(true);
            }
            else
            {
                button = Instantiate(rankingButtonPrefab, content);
                _buttons.Add(button);
            }

            var rb = button.GetComponent<RankingButton>();
            rb.Set(rankers[i].Name, rankers[i].Icon, rankers[i].Score);
        }

        // 余分なボタンは非表示
        for (int i = rankers.Count; i < _buttons.Count; i++)
            _buttons[i].SetActive(false);
    }
}

各ボタンの制御

ランキング1件分の表示用Prefab側スクリプトです。

using TMPro;
using UnityEngine;
using UnityEngine.UI;

public class RankingButton : MonoBehaviour
{
    [SerializeField] TMP_Text nameText;
    [SerializeField] TMP_Text scoreText;
    [SerializeField] Image iconImage;

    public void Set(string name, Sprite icon, int score)
    {
        nameText.text = name;
        scoreText.text = score.ToString();
        iconImage.sprite = icon;
    }
}