本文へスキップ
Equipment UI Design

Equipment comparison and stat preview design guide

A practical guide to making equipment swaps easier to judge by clearly showing what goes up, what goes down, and what kind of playstyle change the new item creates.

公開日: 2026-07-06#Equipment UI#Stat Comparison#Progression#Beginner

Quick Start

Start with a tiny working version

Players do not struggle with equipment screens because there are too few numbers. They struggle because the meaning of the change is unclear.

Build it in small code pieces

1. 値を用意する

Inspectorで変更できる値と表示先を置きます。

EquipmentStatPreviewTutorial.cs
csharp
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float attackDelta = 1f;
    [SerializeField] private float defenseDelta = 2f;
    [SerializeField] private float speedDelta = 3f;

2. 状態を変える

ボタンを押した時に、1つだけ状態を進めます。

EquipmentStatPreviewTutorial.cs
csharp
    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "現在装備を見る" : step == 1 ? "候補を選ぶ" : "増減を色で出す";
        if (statusText != null)
        {
            statusText.text = $"{label}\nattackDelta={attackDelta:0.##}\ndefenseDelta={defenseDelta:0.##}\nspeedDelta={speedDelta:0.##}";
        }

3. 画面に表示する

変わった結果を画面に出して確認します。

EquipmentStatPreviewTutorial.cs
csharp
        if (statusText != null)
        {
            statusText.text = $"{label}\nattackDelta={attackDelta:0.##}\ndefenseDelta={defenseDelta:0.##}\nspeedDelta={speedDelta:0.##}";
        }
        Debug.Log($"装備比較と増減プレビュー: {label}");

Complete script

EquipmentStatPreviewTutorial.cs
csharp
using UnityEngine;
using TMPro;

public class EquipmentStatPreviewTutorial : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI statusText;
    [SerializeField] private float attackDelta = 1f;
    [SerializeField] private float defenseDelta = 2f;
    [SerializeField] private float speedDelta = 3f;

    private int step;

    public void NextStep()
    {
        step = (step + 1) % 3;
        var label = step == 0 ? "現在装備を見る" : step == 1 ? "候補を選ぶ" : "増減を色で出す";
        if (statusText != null)
        {
            statusText.text = $"{label}\nattackDelta={attackDelta:0.##}\ndefenseDelta={defenseDelta:0.##}\nspeedDelta={speedDelta:0.##}";
        }
        Debug.Log($"装備比較と増減プレビュー: {label}");
    }
}

Inspector

Connect the UI reference in the Inspector, then use the button to confirm each value changes.

Summary

What to take away

A practical guide to making equipment swaps easier to judge by clearly showing what goes up, what goes down, and what kind of playstyle change the new item creates.

The page is designed to help you move from reading to a small practical decision. Use the checklist above before jumping into the next related article.

Related guides

SYSSkill tree readability and progression UI guideA practical guide to readable skill trees that make branch roles, unlock conditions, and next choices easier to understand.MAPReward loops and item drops for beginnersA practical guide to coins, loot, chests, and progression rewards that keep players moving without flattening your game.