タクティクスゲーム用UI設計｜情報が瞬時に伝わるレイアウト

タクティクスゲームのUIは、情報量が多いです。

適切にレイアウトすれば、瞬時に情報が伝わります。

この記事では、設計方法を詳しく解説します。

✨ この記事でわかること

情報の優先度付け
レイアウトの設計
マス情報の表示
ユニット情報の表示
実装例とコード

ゲーム開発講師

UI設計は、情報の優先度から始めましょう。重要な情報を大きく、詳細情報を小さく表示します。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

ゲームを「遊ぶ側」から「作る側」へ

あなたのオリジナルゲーム、今年こそ完成させませんか？

RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。

Unity入門の森｜永久会員チケット

全講座ラインナップを見てみる

実際に完成するゲームを題材に、
ソースコード・素材・プロジェクト一式をすべて公開。
仕事や学校の合間の1〜2時間でも、
「写経→改造」で自分のゲームまで作りきれる環境です。

情報の優先度付け
1. 情報の階層
2. UIレイアウトの設計
マス情報の表示
1. マス情報表示システム
ユニット情報の表示
1. ユニット情報表示システム
ターン情報の表示
1. ターン情報表示システム
実装例：完全なUIシステム
よくある質問（FAQ）
まとめ

情報の優先度付け

情報の優先度付けは、UI設計の基礎です。

優先度を決めましょう。

情報の階層

✅ 情報の優先度

最重要：HP、MP、ターン順（常時表示）
重要：攻撃力、防御力、移動範囲（選択時表示）
詳細：ステータス詳細、スキル一覧（メニューで表示）

この階層で、情報を整理できます。

UIレイアウトの設計

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class TacticsUILayout : MonoBehaviour
{
    [Header("最重要情報")]
    public TextMeshProUGUI hpText;
    public TextMeshProUGUI mpText;
    public TextMeshProUGUI turnOrderText;
    
    [Header("重要情報")]
    public GameObject unitInfoPanel;
    public TextMeshProUGUI attackText;
    public TextMeshProUGUI defenseText;
    
    [Header("詳細情報")]
    public GameObject detailPanel;
    
    public void UpdateUI(Unit selectedUnit)
    {
        if (selectedUnit == null)
        {
            unitInfoPanel.SetActive(false);
            return;
        }
        
        // 最重要情報を更新
        hpText.text = $"HP: {selectedUnit.currentHP}/{selectedUnit.maxHP}";
        mpText.text = $"MP: {selectedUnit.currentMP}/{selectedUnit.maxMP}";
        
        // 重要情報を更新
        attackText.text = $"攻撃: {selectedUnit.attack}";
        defenseText.text = $"防御: {selectedUnit.defense}";
        
        unitInfoPanel.SetActive(true);
    }
}

using UnityEngine;

using UnityEngine.UI;

using TMPro;

public class TacticsUILayout : MonoBehaviour

{

[Header("最重要情報")]

public TextMeshProUGUI hpText;

public TextMeshProUGUI mpText;

public TextMeshProUGUI turnOrderText;

[Header("重要情報")]

public GameObject unitInfoPanel;

public TextMeshProUGUI attackText;

public TextMeshProUGUI defenseText;

[Header("詳細情報")]

public GameObject detailPanel;

public void UpdateUI(Unit selectedUnit)

{

if (selectedUnit == null)

{

unitInfoPanel.SetActive(false);

return;

}

// 最重要情報を更新

hpText.text = $"HP: {selectedUnit.currentHP}/{selectedUnit.maxHP}";

mpText.text = $"MP: {selectedUnit.currentMP}/{selectedUnit.maxMP}";

// 重要情報を更新

attackText.text = $"攻撃: {selectedUnit.attack}";

defenseText.text = $"防御: {selectedUnit.defense}";

unitInfoPanel.SetActive(true);

}

このコードで、UIレイアウトが実装できます。

情報の優先度に応じて、表示を切り替えます。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

マス情報の表示

マス情報は、戦略判断に重要です。

表示方法を紹介します。

マス情報表示システム

public class TileInfoDisplay : MonoBehaviour
{
    public GameObject tileInfoPanel;
    public TextMeshProUGUI tileNameText;
    public TextMeshProUGUI tileEffectText;
    
    public void ShowTileInfo(Vector2Int position, TerrainData terrain)
    {
        if (terrain == null)
        {
            tileInfoPanel.SetActive(false);
            return;
        }
        
        tileNameText.text = terrain.terrainName;
        tileEffectText.text = $"回避+{terrain.evasionBonus}% 移動コスト{terrain.moveCost}";
        
        tileInfoPanel.SetActive(true);
    }
    
    public void HideTileInfo()
    {
        tileInfoPanel.SetActive(false);
    }
}

public class TileInfoDisplay : MonoBehaviour

{

public GameObject tileInfoPanel;

public TextMeshProUGUI tileNameText;

public TextMeshProUGUI tileEffectText;

public void ShowTileInfo(Vector2Int position, TerrainData terrain)

{

if (terrain == null)

{

tileInfoPanel.SetActive(false);

return;

}

tileNameText.text = terrain.terrainName;

tileEffectText.text = $"回避+{terrain.evasionBonus}% 移動コスト{terrain.moveCost}";

tileInfoPanel.SetActive(true);

}

public void HideTileInfo()

{

tileInfoPanel.SetActive(false);

}

このコードで、マス情報表示が実装できます。

マスを選択すると、情報が表示されます。

ゲーム開発講師

マス情報は、マウスオーバー時に表示しましょう。これにより、情報過多を防げます。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

ユニット情報の表示

ユニット情報は、選択時に表示します。

表示方法を紹介します。

ユニット情報表示システム

public class UnitInfoDisplay : MonoBehaviour
{
    public GameObject unitInfoPanel;
    public TextMeshProUGUI unitNameText;
    public Image unitIcon;
    public Slider hpBar;
    public Slider mpBar;
    public TextMeshProUGUI statsText;
    
    public void ShowUnitInfo(Unit unit)
    {
        if (unit == null)
        {
            unitInfoPanel.SetActive(false);
            return;
        }
        
        unitNameText.text = unit.unitName;
        unitIcon.sprite = unit.icon;
        
        hpBar.value = (float)unit.currentHP / unit.maxHP;
        mpBar.value = (float)unit.currentMP / unit.maxMP;
        
        statsText.text = $"攻撃: {unit.attack} 防御: {unit.defense} 速度: {unit.speed}";
        
        unitInfoPanel.SetActive(true);
    }
    
    public void HideUnitInfo()
    {
        unitInfoPanel.SetActive(false);
    }
}

public class UnitInfoDisplay : MonoBehaviour

{

public GameObject unitInfoPanel;

public TextMeshProUGUI unitNameText;

public Image unitIcon;

public Slider hpBar;

public Slider mpBar;

public TextMeshProUGUI statsText;

public void ShowUnitInfo(Unit unit)

{

if (unit == null)

{

unitInfoPanel.SetActive(false);

return;

}

unitNameText.text = unit.unitName;

unitIcon.sprite = unit.icon;

hpBar.value = (float)unit.currentHP / unit.maxHP;

mpBar.value = (float)unit.currentMP / unit.maxMP;

statsText.text = $"攻撃: {unit.attack} 防御: {unit.defense} 速度: {unit.speed}";

unitInfoPanel.SetActive(true);

}

public void HideUnitInfo()

{

unitInfoPanel.SetActive(false);

}

このコードで、ユニット情報表示が実装できます。

ユニットを選択すると、詳細情報が表示されます。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

ターン情報の表示

ターン情報は、戦闘の進行を把握するために重要です。

表示方法を紹介します。

ターン情報表示システム

public class TurnInfoDisplay : MonoBehaviour
{
    public TextMeshProUGUI currentTurnText;
    public TextMeshProUGUI currentUnitText;
    public GameObject turnOrderPanel;
    public List<TextMeshProUGUI> turnOrderTexts = new List<TextMeshProUGUI>();
    
    public void UpdateTurnInfo(int turnNumber, Unit currentUnit, List<Unit> turnOrder)
    {
        currentTurnText.text = $"ターン {turnNumber}";
        currentUnitText.text = currentUnit != null ? currentUnit.unitName : "";
        
        // ターン順を表示
        for (int i = 0; i < turnOrderTexts.Count && i < turnOrder.Count; i++)
        {
            turnOrderTexts[i].text = $"{i + 1}. {turnOrder[i].unitName}";
        }
    }
}

public class TurnInfoDisplay : MonoBehaviour

{

public TextMeshProUGUI currentTurnText;

public TextMeshProUGUI currentUnitText;

public GameObject turnOrderPanel;

public List<TextMeshProUGUI> turnOrderTexts = new List<TextMeshProUGUI>();

public void UpdateTurnInfo(int turnNumber, Unit currentUnit, List<Unit> turnOrder)

{

currentTurnText.text = $"ターン {turnNumber}";

currentUnitText.text = currentUnit != null ? currentUnit.unitName : "";

// ターン順を表示

for (int i = 0; i < turnOrderTexts.Count && i < turnOrder.Count; i++)

{

turnOrderTexts[i].text = $"{i + 1}. {turnOrder[i].unitName}";

}

このコードで、ターン情報表示が実装できます。

現在のターンと、ターン順が表示されます。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

実装例：完全なUIシステム

実際に使える、完全なUIシステムの実装例を紹介します。

using UnityEngine;

public class CompleteTacticsUI : MonoBehaviour
{
    [Header("UI")]
    public TacticsUILayout layout;
    public TileInfoDisplay tileDisplay;
    public UnitInfoDisplay unitDisplay;
    public TurnInfoDisplay turnDisplay;
    
    public void OnUnitSelected(Unit unit)
    {
        layout.UpdateUI(unit);
        unitDisplay.ShowUnitInfo(unit);
    }
    
    public void OnTileHovered(Vector2Int position, TerrainData terrain)
    {
        tileDisplay.ShowTileInfo(position, terrain);
    }
    
    public void OnTurnChanged(int turnNumber, Unit currentUnit, List<Unit> turnOrder)
    {
        turnDisplay.UpdateTurnInfo(turnNumber, currentUnit, turnOrder);
    }
}

using UnityEngine;

public class CompleteTacticsUI : MonoBehaviour

{

[Header("UI")]

public TacticsUILayout layout;

public TileInfoDisplay tileDisplay;

public UnitInfoDisplay unitDisplay;

public TurnInfoDisplay turnDisplay;

public void OnUnitSelected(Unit unit)

{

layout.UpdateUI(unit);

unitDisplay.ShowUnitInfo(unit);

}

public void OnTileHovered(Vector2Int position, TerrainData terrain)

{

tileDisplay.ShowTileInfo(position, terrain);

}

public void OnTurnChanged(int turnNumber, Unit currentUnit, List<Unit> turnOrder)

{

turnDisplay.UpdateTurnInfo(turnNumber, currentUnit, turnOrder);

}

このコードで、完全なUIシステムが実装できます。

レイアウト、マス情報、ユニット情報、ターン情報を統合しています。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

よくある質問（FAQ）

Q: 情報の優先度はどう決めればいいですか？
A: 戦略判断に必要な情報を最重要にします。HP、MP、ターン順が基本です。

Q: UIレイアウトはどう設計すればいいですか？
A: 最重要情報を画面下部に配置します。詳細情報は、メニューで表示しましょう。

Q: マス情報はいつ表示すればいいですか？
A: マウスオーバー時に表示しましょう。常時表示すると、情報過多になります。

Q: ユニット情報はどう表示すればいいですか？
A: ユニット選択時に表示します。HPバーとMPバーで、視覚的に分かりやすくしましょう。

Q: UIのバランスはどう調整すればいいですか？
A: テストプレイで調整しましょう。情報の見やすさと、画面の見通しのバランスを取ります。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる

ゲームを「遊ぶ側」から「作る側」へ

あなたのオリジナルゲーム、今年こそ完成させませんか？

RPG・アクション・ホラー…Unityで本格ゲームを作りたい人のための学習サイトです。

Unity入門の森｜永久会員チケット

全講座ラインナップを見てみる

まとめ

UI設計は、情報の優先度から始めましょう。

重要な情報を大きく、詳細情報を小さく表示します。

✅ 今日から始める3ステップ

ステップ1：情報の優先度を決める（所要1時間）
ステップ2：UIレイアウトを設計する（所要3時間）
ステップ3：マス情報とユニット情報を実装する（所要3時間）

本格的にUnityを学びたい方は、Unity入門の森で実践的なスキルを身につけましょう。

あなたのペースで、少しずつ進めていけば大丈夫です。

＼ゲーム制作をゼロから学びたいあなたへ／
Unity入門の森を見る初心者歓迎！動画×プロジェクト一式で本格ゲーム制作を学べる