本文へスキップ
UI設計

スキル振り直しと払い戻しを分かりやすくするゲームUI設計ガイド

スキルポイントの返却、再配分、確認導線を整理して、振り直しの不安と面倒さを減らす方法を解説します。

公開日: 2026-07-07#Unity#スキルツリー#振り直し#UI設計#Beginner
+
*
+
ココ先生・喜ぶ
ココ先生
ゲーム開発の案内役
この記事では スキルツリー を、読んで終わりにせず、SkillTreeDemo の小さな実装イメージまでつなげて案内します。
+
*
+
はじめちゃん・笑う
はじめちゃん
ゲームエンジン学習中
スキル振り直しと払い戻しを分かりやすくするゲームUI設計ガイド を読む前に、まずUnity のどこを見ればよいかを確認したいです。
ココ先生
今日は「スキルツリー」を、まず何が変わるのか、次に画面で何を見せるのか、最後にどの値を確認するのか、という順番で読んでいきます。
はじめちゃん
大きなテーマに見えますが、今日は「SkillTreeDemo」という小さな練習用の場面だけを作るのですね。何から始めればよいか分かりました。
ココ先生
未取得を表示を表示、Unlock Skill Buttonで進める、条件を確認を確認の流れを追えば、記事の内容を自分のプロジェクトへ移しやすくなります。
スキル振り直し、返金コイン、確認ダイアログを描いたヒーロー画像
完成イメージ

スキルツリーの状態を分ける

未取得を表示、条件を確認、取得後を更新 を別々の状態として扱い、今どの段階かを画面で確認できるようにします。

どの成長を選べるかをUIで伝える

Console だけではプレイヤーには見えません。TextMeshPro や Slider に skillPoints / requiredLevel / unlockedCount を出して、判断材料を画面へ移します。

最小実装から広げる

まず SkillTreeDemo を動かし、その後に本物の入力、通信、戦闘、保存処理などへ置き換えると、原因を見失いにくくなります。

導入

取ったスキルを戻し、使ったポイントを返します。積み木を外して手元に戻すような振り直しです。

作るもの

Skill Button に SkillRespec を付けます。Canvas に pointsText と refundButton を置きます。

取得時にポイントを使う

[SerializeField] private TMP_Text pointsText;   // 残りポイントを表示する文字
public void Learn(){ if(points<=0||learned)return; points--; learned=true; Refresh(); }

戻すと一ポイント返す

public void Refund(){ if(!learned)return; points++; learned=false; Refresh(); }

完成版

using UnityEngine;using TMPro;public class SkillRespec:MonoBehaviour{[SerializeField]TMP_Text pointsText;[SerializeField]GameObject learnedMark;int points=3;bool learned;public void Learn(){if(points<=0||learned)return;points--;learned=true;Refresh();}public void Refund(){if(!learned)return;points++;learned=false;Refresh();}void Refresh(){pointsText.text=$"ポイント {points}";learnedMark.SetActive(learned);}}
はじめちゃん
最後に整理すると、スキルツリーでいちばん見失いやすい所はどこですか?
ココ先生
内部処理だけを追って、画面で伝える言葉を後回しにする所です。SkillTreeDemoでは、まずプレイヤーに見える変化を先に決めます。
はじめちゃん
流れは「未取得を表示を表示」から始めて、「Unlock Skill Buttonで進める」で操作を入れる、と覚えればよいですか?
ココ先生
その通りです。その後に「条件を確認を確認」で途中状態を見て、「取得後を更新で結果を見る」で結果を確認します。順番を固定すると、失敗した場所も見つけやすくなります。
はじめちゃん
つまり、いきなり完成システムにせず、状態名、表示、値の変化を小さくそろえるのですね。
ココ先生
はい。最後は「スキルツリーをわかりやすく考える」の考え方で、難しい処理をプレイヤーに伝わる短い合図へ置き換えられるか確認しましょう。
この記事のまとめを案内するガイドキャラクター

この記事のまとめ

スキルポイントの返却、再配分、確認導線を整理して、振り直しの不安と面倒さを減らす方法を解説します。

大きな違いを生むのは、派手な性能よりも 毎日触れる環境を無理なく整えること です。見やすい画面と使いやすい道具がそろうと、学習や次の一歩を決めやすくなります。