本文へスキップ
UI設計

会話履歴と字幕の読みやすさを整えるゲームUI設計ガイド

字幕の長さ、話者表示、会話履歴の見返し導線を整理して、ストーリー理解を助ける実践ガイドです。

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

会話履歴と字幕の状態を分ける

字幕を表示、履歴に保存、読み返しを開く を別々の状態として扱い、今どの段階かを画面で確認できるようにします。

何を聞き逃したかをUIで伝える

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

最小実装から広げる

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

導入

話した文を履歴に残し、字幕は数秒で消します。聞き逃しても、メモ帳を開けば読み返せる形です。

作るもの

Canvas に subtitleText、Scroll View の historyContent を置きます。履歴用 Text の Prefab も用意します。

字幕を表示する

[SerializeField] private TMP_Text subtitleText; // 画面下の字幕
public void Say(string line){ subtitleText.text=line; StartCoroutine(HideSubtitle()); AddHistory(line); }

履歴へ一行追加する

void AddHistory(string line){ Instantiate(historyLine,historyContent).text=line; }

完成版

using UnityEngine;using TMPro;using System.Collections;public class DialogueHistory:MonoBehaviour{[SerializeField]TMP_Text subtitleText;[SerializeField]TMP_Text historyLine;[SerializeField]Transform historyContent;public void Say(string line){subtitleText.text=line;Instantiate(historyLine,historyContent).text=line;StartCoroutine(HideSubtitle());}IEnumerator HideSubtitle(){yield return new WaitForSeconds(3);subtitleText.text="";}}
はじめちゃん
最後に整理すると、会話履歴と字幕でいちばん見失いやすい所はどこですか?
ココ先生
内部処理だけを追って、画面で伝える言葉を後回しにする所です。DialogueSubtitleDemoでは、まずプレイヤーに見える変化を先に決めます。
はじめちゃん
流れは「字幕を表示を表示」から始めて、「Next Line Buttonで進める」で操作を入れる、と覚えればよいですか?
ココ先生
その通りです。その後に「履歴に保存を確認」で途中状態を見て、「読み返しを開くで結果を見る」で結果を確認します。順番を固定すると、失敗した場所も見つけやすくなります。
はじめちゃん
つまり、いきなり完成システムにせず、状態名、表示、値の変化を小さくそろえるのですね。
ココ先生
はい。最後は「会話履歴と字幕をわかりやすく考える」の考え方で、難しい処理をプレイヤーに伝わる短い合図へ置き換えられるか確認しましょう。
この記事のまとめを案内するガイドキャラクター

この記事のまとめ

字幕の長さ、話者表示、会話履歴の見返し導線を整理して、ストーリー理解を助ける実践ガイドです。

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