魅せる会話シーンの演出｜SRPGのセリフ・立ち絵の使い方

会話シーンの演出は、SRPGの物語性を高めます。

立ち絵とテキストウィンドウを組み合わせれば、魅力的なシーンが作れます。

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

✨ この記事でわかること

テキストウィンドウの実装
立ち絵表示の実装
フェード演出の実装
アニメーション演出の実装
実装例とコード

ゲーム開発講師

会話シーンの演出は、テキストウィンドウから始めましょう。シンプルな構造が、拡張しやすくなります。

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

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

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

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

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

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

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

テキストウィンドウの実装
1. テキストウィンドウでできる演出表現
2. テキストウィンドウシステムの実装
立ち絵表示の実装
1. 立ち絵によって表現できる演出効果
2. 立ち絵管理システムの設計
フェード演出の実装
1. フェードシステム
アニメーション演出の実装
1. 立ち絵アニメーションシステム
実装例：完全な会話システム
よくある質問（FAQ）
まとめ

テキストウィンドウの実装

SRPGの会話シーンにおいて、テキストウィンドウは単なる「文字表示エリア」ではありません。

セリフの読みやすさ、会話のテンポ、物語への没入感を左右する、演出の土台となる要素です。

とくに戦闘とイベントが交互に進行するSRPGでは、会話シーンが冗長になるとテンポが崩れやすくなります。

そのため、必要な情報をコンパクトに、かつ感情が伝わる形で表示することが重要です。

テキストウィンドウでできる演出表現

今回実装するテキストウィンドウでは、以下のような演出が可能になります。

まず、テキストを1文字ずつ表示することで、キャラクターが「話している感覚」を演出できます。

一瞬で全文が表示されるよりも、感情や間（ま）を自然に表現でき、セリフの印象が強まります。

また、ボタン入力によるスキップ処理を入れることで、プレイヤーごとのプレイスタイルにも対応できます。

じっくり読みたい人はそのまま進行し、テンポ重視の人は素早く次へ進めるため、ストレスを感じにくくなります。

さらに、キャラクター名と立ち絵を同時に表示することで、「誰が話しているのか」「どんな感情なのか」を視覚的に補完できます。

これはセリフ量が多いSRPGほど効果的です。

テキストウィンドウシステムの実装

それでは、上記の演出を実現するための基本的なテキストウィンドウシステムを実装していきます。

構造はシンプルに保ち、後から演出を拡張しやすい設計にしています。

using UnityEngine;
using UnityEngine.UI;
using TMPro;
using System.Collections;

public class DialogueWindow : MonoBehaviour
{
    public GameObject dialoguePanel;
    public TextMeshProUGUI nameText;
    public TextMeshProUGUI dialogueText;
    public Image characterPortrait;
    
    public float textSpeed = 0.05f; // 1文字あたりの時間
    
    public IEnumerator ShowDialogue(string characterName, string dialogue, Sprite portrait)
    {
        // ウィンドウを表示
        dialoguePanel.SetActive(true);
        
        // キャラクター名と立ち絵を設定
        nameText.text = characterName;
        if (portrait != null)
        {
            characterPortrait.sprite = portrait;
            characterPortrait.gameObject.SetActive(true);
        }
        
        // テキストを1文字ずつ表示
        dialogueText.text = "";
        foreach (char c in dialogue)
        {
            dialogueText.text += c;
            
            // スキップチェック
            if (Input.GetButtonDown("Submit"))
            {
                dialogueText.text = dialogue;
                yield return new WaitForSeconds(0.1f);
                break;
            }
            
            yield return new WaitForSeconds(textSpeed);
        }
        
        // 入力待ち
        yield return new WaitUntil(() => Input.GetButtonDown("Submit"));
        
        // ウィンドウを非表示
        dialoguePanel.SetActive(false);
    }
}

using UnityEngine;

using UnityEngine.UI;

using TMPro;

using System.Collections;

public class DialogueWindow : MonoBehaviour

{

public GameObject dialoguePanel;

public TextMeshProUGUI nameText;

public TextMeshProUGUI dialogueText;

public Image characterPortrait;

public float textSpeed = 0.05f; // 1文字あたりの時間

public IEnumerator ShowDialogue(string characterName, string dialogue, Sprite portrait)

{

// ウィンドウを表示

dialoguePanel.SetActive(true);

// キャラクター名と立ち絵を設定

nameText.text = characterName;

if (portrait != null)

{

characterPortrait.sprite = portrait;

characterPortrait.gameObject.SetActive(true);

}

// テキストを1文字ずつ表示

dialogueText.text = "";

foreach (char c in dialogue)

{

dialogueText.text += c;

// スキップチェック

if (Input.GetButtonDown("Submit"))

{

dialogueText.text = dialogue;

yield return new WaitForSeconds(0.1f);

break;

}

yield return new WaitForSeconds(textSpeed);

}

// 入力待ち

yield return new WaitUntil(() => Input.GetButtonDown("Submit"));

// ウィンドウを非表示

dialoguePanel.SetActive(false);

}

このコードにより、キャラクター名・セリフ・立ち絵を一体化したテキストウィンドウが実装できます。

まずはこの基本形を作ることで、後からフェード演出やアニメーションを追加しやすくなります。

会話演出は、複雑な仕組みを最初から作る必要はありません。

読みやすく、テンポ良く表示できるテキストウィンドウを用意することが、魅せる会話シーンへの第一歩です。

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

立ち絵表示の実装

立ち絵は、SRPGの会話シーンにおいてキャラクターの感情や立場を視覚的に伝える重要な要素です。

セリフだけでは伝わりにくい「感情の強さ」や「会話の主導権」を、直感的にプレイヤーへ届ける役割を担います。

とくにSRPGでは、戦闘中はユニットを俯瞰で見る時間が長いため、イベントシーンでキャラクターを大きく見せることで印象を強める効果があります。

立ち絵を使った会話演出は、物語への没入感を高めるために欠かせません。

立ち絵によって表現できる演出効果

立ち絵を導入することで、会話シーンの表現力は大きく向上します。

たとえば、同じセリフであっても表情を切り替えるだけで、受け取られ方は大きく変わります。

感情ごとに立ち絵を用意すれば、喜び・怒り・悲しみといったニュアンスを直感的に伝えられます。
これにより、プレイヤーは文章を読み込まなくても、キャラクターの心情を自然に理解できます。

また、立ち絵を左右に配置することで、どちらが話しているのかが一目で分かるようになります。

複数人が登場する会話でも混乱しにくくなり、テンポ良く読み進められる点も大きなメリットです。

立ち絵管理システムの設計

ここでは、キャラクターIDと感情をもとに立ち絵を切り替える管理システムを実装します。

立ち絵データを一元管理することで、後からキャラクターや表情を追加しやすい構成になっています。

[System.Serializable]
public class CharacterPortrait
{
    public string characterID;
    public Sprite normal;
    public Sprite happy;
    public Sprite sad;
    public Sprite angry;
}

public class PortraitManager : MonoBehaviour
{
    public List portraits = new List();
    public Image leftPortrait;
    public Image rightPortrait;
    
    public void ShowPortrait(string characterID, PortraitEmotion emotion, PortraitSide side)
    {
        CharacterPortrait portrait = portraits.Find(p => p.characterID == characterID);
        if (portrait == null) return;
        
        Sprite sprite = GetEmotionSprite(portrait, emotion);
        Image targetImage = side == PortraitSide.Left ? leftPortrait : rightPortrait;
        
        targetImage.sprite = sprite;
        targetImage.gameObject.SetActive(true);
    }
    
    Sprite GetEmotionSprite(CharacterPortrait portrait, PortraitEmotion emotion)
    {
        switch (emotion)
        {
            case PortraitEmotion.Normal:
                return portrait.normal;
            case PortraitEmotion.Happy:
                return portrait.happy;
            case PortraitEmotion.Sad:
                return portrait.sad;
            case PortraitEmotion.Angry:
                return portrait.angry;
            default:
                return portrait.normal;
        }
    }
    
    public void HidePortrait(PortraitSide side)
    {
        Image targetImage = side == PortraitSide.Left ? leftPortrait : rightPortrait;
        targetImage.gameObject.SetActive(false);
    }
}

public enum PortraitEmotion
{
    Normal,
    Happy,
    Sad,
    Angry
}

public enum PortraitSide
{
    Left,
    Right
}

[System.Serializable]

public class CharacterPortrait

{

public string characterID;

public Sprite normal;

public Sprite happy;

public Sprite sad;

public Sprite angry;

}

public class PortraitManager : MonoBehaviour

{

public List portraits = new List();

public Image leftPortrait;

public Image rightPortrait;

public void ShowPortrait(string characterID, PortraitEmotion emotion, PortraitSide side)

{

CharacterPortrait portrait = portraits.Find(p => p.characterID == characterID);

if (portrait == null) return;

Sprite sprite = GetEmotionSprite(portrait, emotion);

Image targetImage = side == PortraitSide.Left ? leftPortrait : rightPortrait;

targetImage.sprite = sprite;

targetImage.gameObject.SetActive(true);

}

Sprite GetEmotionSprite(CharacterPortrait portrait, PortraitEmotion emotion)

{

switch (emotion)

{

case PortraitEmotion.Normal:

return portrait.normal;

case PortraitEmotion.Happy:

return portrait.happy;

case PortraitEmotion.Sad:

return portrait.sad;

case PortraitEmotion.Angry:

return portrait.angry;

default:

return portrait.normal;

}

public void HidePortrait(PortraitSide side)

{

Image targetImage = side == PortraitSide.Left ? leftPortrait : rightPortrait;

targetImage.gameObject.SetActive(false);

}

public enum PortraitEmotion

{

Normal,

Happy,

Sad,

Angry

}

public enum PortraitSide

{

Left,

Right

}

このコードにより、キャラクターごとに複数の表情を管理し、会話の流れに応じて立ち絵を切り替えられます。

感情と表示位置を分離して指定できるため、柔軟な会話演出が可能です。

立ち絵演出は、会話シーンを「読むもの」から「見るもの」へと変えます。

テキストウィンドウと組み合わせることで、SRPGらしいテンポを保ちながら、印象に残る会話シーンを演出できます。

ゲーム開発講師

立ち絵は左右に配置することで、誰が話しているのかが直感的に伝わります。
複数人の会話ほど、このルールを徹底すると読みやすくなります。

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

フェード演出の実装

フェード演出は、シーンの切り替えを滑らかにします。

実装方法を紹介します。

フェードシステム

using UnityEngine;
using UnityEngine.UI;
using System.Collections;

public class FadeSystem : MonoBehaviour
{
    public Image fadeImage;
    public float fadeDuration = 0.5f;
    
    public IEnumerator FadeOut()
    {
        float elapsed = 0f;
        Color color = fadeImage.color;
        
        while (elapsed < fadeDuration)
        {
            elapsed += Time.deltaTime;
            color.a = elapsed / fadeDuration;
            fadeImage.color = color;
            yield return null;
        }
        
        color.a = 1f;
        fadeImage.color = color;
    }
    
    public IEnumerator FadeIn()
    {
        float elapsed = 0f;
        Color color = fadeImage.color;
        color.a = 1f;
        fadeImage.color = color;
        
        while (elapsed < fadeDuration)
        {
            elapsed += Time.deltaTime;
            color.a = 1f - (elapsed / fadeDuration);
            fadeImage.color = color;
            yield return null;
        }
        
        color.a = 0f;
        fadeImage.color = color;
    }
    
    public IEnumerator FadeTransition(System.Action onFadeOut, System.Action onFadeIn)
    {
        yield return StartCoroutine(FadeOut());
        onFadeOut?.Invoke();
        yield return StartCoroutine(FadeIn());
        onFadeIn?.Invoke();
    }
}

using UnityEngine;

using UnityEngine.UI;

using System.Collections;

public class FadeSystem : MonoBehaviour

{

public Image fadeImage;

public float fadeDuration = 0.5f;

public IEnumerator FadeOut()

{

float elapsed = 0f;

Color color = fadeImage.color;

while (elapsed < fadeDuration)

{

elapsed += Time.deltaTime;

color.a = elapsed / fadeDuration;

fadeImage.color = color;

yield return null;

}

color.a = 1f;

fadeImage.color = color;

}

public IEnumerator FadeIn()

{

float elapsed = 0f;

Color color = fadeImage.color;

color.a = 1f;

fadeImage.color = color;

while (elapsed < fadeDuration)

{

elapsed += Time.deltaTime;

color.a = 1f - (elapsed / fadeDuration);

fadeImage.color = color;

yield return null;

}

color.a = 0f;

fadeImage.color = color;

}

public IEnumerator FadeTransition(System.Action onFadeOut, System.Action onFadeIn)

{

yield return StartCoroutine(FadeOut());

onFadeOut?.Invoke();

yield return StartCoroutine(FadeIn());

onFadeIn?.Invoke();

}

このコードで、フェード演出が実装できます。

シーンの切り替えが滑らかになります。

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

アニメーション演出の実装

アニメーション演出は、立ち絵に動きを与えます。

実装方法を紹介します。

立ち絵アニメーションシステム

using UnityEngine;
using System.Collections;

public class PortraitAnimation : MonoBehaviour
{
    public Image portraitImage;
    
    public IEnumerator Shake(float duration, float magnitude)
    {
        Vector3 originalPos = portraitImage.rectTransform.localPosition;
        float elapsed = 0f;
        
        while (elapsed < duration)
        {
            float x = Random.Range(-1f, 1f) * magnitude;
            float y = Random.Range(-1f, 1f) * magnitude;
            portraitImage.rectTransform.localPosition = originalPos + new Vector3(x, y, 0);
            
            elapsed += Time.deltaTime;
            yield return null;
        }
        
        portraitImage.rectTransform.localPosition = originalPos;
    }
    
    public IEnumerator FadeInPortrait(float duration)
    {
        Color color = portraitImage.color;
        color.a = 0f;
        portraitImage.color = color;
        
        float elapsed = 0f;
        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            color.a = elapsed / duration;
            portraitImage.color = color;
            yield return null;
        }
        
        color.a = 1f;
        portraitImage.color = color;
    }
    
    public IEnumerator SlideIn(PortraitSide side, float duration)
    {
        RectTransform rect = portraitImage.rectTransform;
        Vector3 startPos = side == PortraitSide.Left 
            ? new Vector3(-Screen.width, rect.localPosition.y, 0)
            : new Vector3(Screen.width, rect.localPosition.y, 0);
        Vector3 endPos = rect.localPosition;
        
        rect.localPosition = startPos;
        
        float elapsed = 0f;
        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            rect.localPosition = Vector3.Lerp(startPos, endPos, elapsed / duration);
            yield return null;
        }
        
        rect.localPosition = endPos;
    }
}

using UnityEngine;

using System.Collections;

public class PortraitAnimation : MonoBehaviour

{

public Image portraitImage;

public IEnumerator Shake(float duration, float magnitude)

{

Vector3 originalPos = portraitImage.rectTransform.localPosition;

float elapsed = 0f;

while (elapsed < duration)

{

float x = Random.Range(-1f, 1f) * magnitude;

float y = Random.Range(-1f, 1f) * magnitude;

portraitImage.rectTransform.localPosition = originalPos + new Vector3(x, y, 0);

elapsed += Time.deltaTime;

yield return null;

}

portraitImage.rectTransform.localPosition = originalPos;

}

public IEnumerator FadeInPortrait(float duration)

{

Color color = portraitImage.color;

color.a = 0f;

portraitImage.color = color;

float elapsed = 0f;

while (elapsed < duration)

{

elapsed += Time.deltaTime;

color.a = elapsed / duration;

portraitImage.color = color;

yield return null;

}

color.a = 1f;

portraitImage.color = color;

}

public IEnumerator SlideIn(PortraitSide side, float duration)

{

RectTransform rect = portraitImage.rectTransform;

Vector3 startPos = side == PortraitSide.Left

? new Vector3(-Screen.width, rect.localPosition.y, 0)

: new Vector3(Screen.width, rect.localPosition.y, 0);

Vector3 endPos = rect.localPosition;

rect.localPosition = startPos;

float elapsed = 0f;

while (elapsed < duration)

{

elapsed += Time.deltaTime;

rect.localPosition = Vector3.Lerp(startPos, endPos, elapsed / duration);

yield return null;

}

rect.localPosition = endPos;

}

このコードで、立ち絵アニメーションが実装できます。

揺れ、フェード、スライドなどの動きを追加できます。

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

実装例：完全な会話システム

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

using UnityEngine;
using System.Collections;

[System.Serializable]
public class DialogueLine
{
    public string characterID;
    public string characterName;
    public string dialogue;
    public PortraitEmotion emotion;
    public PortraitSide side;
}

public class CompleteDialogueSystem : MonoBehaviour
{
    [Header("システム")]
    public DialogueWindow dialogueWindow;
    public PortraitManager portraitManager;
    public FadeSystem fadeSystem;
    public PortraitAnimation portraitAnimation;
    
    public IEnumerator PlayDialogueSequence(List<DialogueLine> dialogueLines)
    {
        // フェードイン
        yield return StartCoroutine(fadeSystem.FadeIn());
        
        foreach (var line in dialogueLines)
        {
            // 立ち絵を表示
            portraitManager.ShowPortrait(line.characterID, line.emotion, line.side);
            
            // 立ち絵アニメーション
            StartCoroutine(portraitAnimation.SlideIn(line.side, 0.3f));
            
            // 会話を表示
            Sprite portrait = portraitManager.GetPortraitSprite(line.characterID, line.emotion);
            yield return StartCoroutine(dialogueWindow.ShowDialogue(line.characterName, line.dialogue, portrait));
        }
        
        // フェードアウト
        yield return StartCoroutine(fadeSystem.FadeOut());
    }
}

using UnityEngine;

using System.Collections;

[System.Serializable]

public class DialogueLine

{

public string characterID;

public string characterName;

public string dialogue;

public PortraitEmotion emotion;

public PortraitSide side;

}

public class CompleteDialogueSystem : MonoBehaviour

{

[Header("システム")]

public DialogueWindow dialogueWindow;

public PortraitManager portraitManager;

public FadeSystem fadeSystem;

public PortraitAnimation portraitAnimation;

public IEnumerator PlayDialogueSequence(List<DialogueLine> dialogueLines)

{

// フェードイン

yield return StartCoroutine(fadeSystem.FadeIn());

foreach (var line in dialogueLines)

{

// 立ち絵を表示

portraitManager.ShowPortrait(line.characterID, line.emotion, line.side);

// 立ち絵アニメーション

StartCoroutine(portraitAnimation.SlideIn(line.side, 0.3f));

// 会話を表示

Sprite portrait = portraitManager.GetPortraitSprite(line.characterID, line.emotion);

yield return StartCoroutine(dialogueWindow.ShowDialogue(line.characterName, line.dialogue, portrait));

}

// フェードアウト

yield return StartCoroutine(fadeSystem.FadeOut());

}

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

テキストウィンドウ、立ち絵、フェード、アニメーションを統合しています。

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

よくある質問（FAQ）

Q: テキスト表示速度はどう設定すればいいですか？
A: 1文字あたり0.05秒が標準です。これにより、読みやすさとテンポのバランスが取れます。

Q: 立ち絵の表情はいくつ用意すればいいですか？
A: 4種類（通常、喜び、悲しみ、怒り）が基本です。必要に応じて追加できます。

Q: フェード時間はどう設定すればいいですか？
A: 0.5秒が標準です。短すぎると急、長すぎるともっさりします。

Q: アニメーションは必須ですか？
A: 必須ではありませんが、強く推奨します。アニメーションがあることで、演出が魅力的になります。

Q: 会話システムのテンポはどう調整すればいいですか？
A: テストプレイで調整しましょう。テキスト速度とアニメーションのバランスを取ります。

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

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

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

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

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

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

まとめ

会話シーンの演出は、テキストウィンドウから始めましょう。

立ち絵とアニメーションを組み合わせれば、魅力的なシーンが作れます。

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

ステップ1：テキストウィンドウを実装する（所要3時間）
ステップ2：立ち絵表示を実装する（所要2時間）
ステップ3：フェード演出を実装する（所要2時間）

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

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

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