本文へスキップ
UI設計

会話ウィンドウと選択肢UIの作り方入門

読みやすい会話欄、分かりやすい選択肢、テンポを崩さない演出の考え方を整理し、初心者でも扱いやすい会話UIを設計するための入門記事です。

公開日: 2026-06-27#Unity#会話UI#選択肢#テキスト表示#初心者
+
*
+
ココ先生・喜ぶ
ココ先生
ゲーム開発の案内役
この記事では 会話選択肢UI を、読んで終わりにせず、DialogueChoiceDemo の小さな実装イメージまでつなげて案内します。
+
*
+
はじめちゃん・笑う
はじめちゃん
ゲームエンジン学習中
会話ウィンドウと選択肢UIの作り方入門 を読む前に、まずUnity のどこを見ればよいかを確認したいです。
ココ先生
今日は「会話選択肢UI」を、まず何が変わるのか、次に画面で何を見せるのか、最後にどの値を確認するのか、という順番で読んでいきます。
はじめちゃん
大きなテーマに見えますが、今日は「DialogueChoiceDemo」という小さな練習用の場面だけを作るのですね。何から始めればよいか分かりました。
ココ先生
質問を出すを表示、Choice Buttonで進める、選択肢を選ぶを確認の流れを追えば、記事の内容を自分のプロジェクトへ移しやすくなります。
会話ウィンドウと分岐選択肢が表示されたゲームUIのビジュアル
完成イメージ

会話選択肢UIの状態を分ける

質問を出す、選択肢を選ぶ、結果を返す を別々の状態として扱い、今どの段階かを画面で確認できるようにします。

選んだ返事の結果をUIで伝える

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

最小実装から広げる

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

導入

会話文を一文字ずつ表示し、選択肢を押したら次の文に進めます。本を一枚ずつめくる会話画面です。

作るもの

Canvas に bodyText と choiceButton を置きます。DialogueController に文章配列を入れます。

一文字ずつ表示する

[SerializeField] private TMP_Text bodyText;     // 会話本文
IEnumerator Type(string line){ bodyText.text=""; foreach(char c in line){bodyText.text+=c;yield return new WaitForSeconds(.03f);} }

選択肢で次の文章を選ぶ

public void Choose(int index){ StartCoroutine(Type(lines[index])); }

完成版

using UnityEngine;using TMPro;using System.Collections;public class DialogueController:MonoBehaviour{[SerializeField]TMP_Text bodyText;[TextArea][SerializeField]string[] lines;public void Start(){Choose(0);}public void Choose(int index){if(index>=0&&index<lines.Length)StartCoroutine(Type(lines[index]));}IEnumerator Type(string line){bodyText.text="";foreach(char c in line){bodyText.text+=c;yield return new WaitForSeconds(.03f);}}}
はじめちゃん
最後に整理すると、会話選択肢UIでいちばん見失いやすい所はどこですか?
ココ先生
内部処理だけを追って、画面で伝える言葉を後回しにする所です。DialogueChoiceDemoでは、まずプレイヤーに見える変化を先に決めます。
はじめちゃん
流れは「質問を出すを表示」から始めて、「Choice Buttonで進める」で操作を入れる、と覚えればよいですか?
ココ先生
その通りです。その後に「選択肢を選ぶを確認」で途中状態を見て、「結果を返すで結果を見る」で結果を確認します。順番を固定すると、失敗した場所も見つけやすくなります。
はじめちゃん
つまり、いきなり完成システムにせず、状態名、表示、値の変化を小さくそろえるのですね。
ココ先生
はい。最後は「会話選択肢UIをわかりやすく考える」の考え方で、難しい処理をプレイヤーに伝わる短い合図へ置き換えられるか確認しましょう。
この記事のまとめを案内するガイドキャラクター

この記事のまとめ

読みやすい会話欄、分かりやすい選択肢、テンポを崩さない演出の考え方を整理し、初心者でも扱いやすい会話UIを設計するための入門記事です。

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