キャラ立ち絵UIの作り方｜SRPG会話シーンを華やかにする技法

立ち絵UIは、SRPGの会話シーンを華やかにします。

表情差分と表示位置を実装すれば、魅力的なシーンが作れます。

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

✨ この記事でわかること

立ち絵表示システムの実装
表情差分の実装
表示位置の制御
シナリオとの連携
実装例とコード

ゲーム開発講師

立ち絵UIは、左右の配置から始めましょう。これにより、会話の流れが分かりやすくなります。

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

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

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

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

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

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

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

立ち絵表示システムの実装
1. 立ち絵管理システム
表情差分の実装
1. 表情切り替えシステム
表示位置の制御
1. 位置制御システム
シナリオとの連携
1. シナリオ連携システム
実装例：完全な立ち絵システム
よくある質問（FAQ）
まとめ

立ち絵表示システムの実装

立ち絵表示システムは、キャラクターの画像を表示します。

実装方法を紹介します。

立ち絵管理システム

using UnityEngine;
using UnityEngine.UI;

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

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

using UnityEngine;

using UnityEngine.UI;

[System.Serializable]

public class CharacterPortraitData

{

public string characterID;

public Sprite normal;

public Sprite happy;

public Sprite sad;

public Sprite angry;

}

public class PortraitDisplaySystem : MonoBehaviour

{

public Image leftPortrait;

public Image rightPortrait;

public List<CharacterPortraitData> portraits = new List<CharacterPortraitData>();

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

{

CharacterPortraitData data = portraits.Find(p => p.characterID == characterID);

if (data == null) return;

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

Sprite sprite = GetEmotionSprite(data, emotion);

targetImage.sprite = sprite;

targetImage.gameObject.SetActive(true);

}

Sprite GetEmotionSprite(CharacterPortraitData data, PortraitEmotion emotion)

{

switch (emotion)

{

case PortraitEmotion.Normal:

return data.normal;

case PortraitEmotion.Happy:

return data.happy;

case PortraitEmotion.Sad:

return data.sad;

case PortraitEmotion.Angry:

return data.angry;

default:

return data.normal;

}

public void HidePortrait(PortraitSide side)

{

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

targetImage.gameObject.SetActive(false);

}

このコードで、立ち絵表示システムが実装できます。

左右に立ち絵を表示できます。

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

表情差分の実装

表情差分は、感情に応じて立ち絵が変化します。

実装方法を紹介します。

表情切り替えシステム

using System.Collections;

public class EmotionChangeSystem : MonoBehaviour
{
    public PortraitDisplaySystem portraitSystem;
    
    public IEnumerator ChangeEmotion(string characterID, PortraitEmotion newEmotion, PortraitSide side, float transitionTime = 0.3f)
    {
        Image targetImage = side == PortraitSide.Left 
            ? portraitSystem.leftPortrait 
            : portraitSystem.rightPortrait;
        
        // フェードアウト
        yield return StartCoroutine(FadeOut(targetImage, transitionTime / 2));
        
        // 表情を変更
        portraitSystem.ShowPortrait(characterID, newEmotion, side);
        
        // フェードイン
        yield return StartCoroutine(FadeIn(targetImage, transitionTime / 2));
    }
    
    IEnumerator FadeOut(Image image, float duration)
    {
        Color color = image.color;
        float elapsed = 0f;
        
        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            color.a = 1f - (elapsed / duration);
            image.color = color;
            yield return null;
        }
        
        color.a = 0f;
        image.color = color;
    }
    
    IEnumerator FadeIn(Image image, float duration)
    {
        Color color = image.color;
        color.a = 0f;
        image.color = color;
        
        float elapsed = 0f;
        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            color.a = elapsed / duration;
            image.color = color;
            yield return null;
        }
        
        color.a = 1f;
        image.color = color;
    }
}

using System.Collections;

public class EmotionChangeSystem : MonoBehaviour

{

public PortraitDisplaySystem portraitSystem;

public IEnumerator ChangeEmotion(string characterID, PortraitEmotion newEmotion, PortraitSide side, float transitionTime = 0.3f)

{

Image targetImage = side == PortraitSide.Left

? portraitSystem.leftPortrait

: portraitSystem.rightPortrait;

// フェードアウト

yield return StartCoroutine(FadeOut(targetImage, transitionTime / 2));

// 表情を変更

portraitSystem.ShowPortrait(characterID, newEmotion, side);

// フェードイン

yield return StartCoroutine(FadeIn(targetImage, transitionTime / 2));

}

IEnumerator FadeOut(Image image, float duration)

{

Color color = image.color;

float elapsed = 0f;

while (elapsed < duration)

{

elapsed += Time.deltaTime;

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

image.color = color;

yield return null;

}

color.a = 0f;

image.color = color;

}

IEnumerator FadeIn(Image image, float duration)

{

Color color = image.color;

color.a = 0f;

image.color = color;

float elapsed = 0f;

while (elapsed < duration)

{

elapsed += Time.deltaTime;

color.a = elapsed / duration;

image.color = color;

yield return null;

}

color.a = 1f;

image.color = color;

}

このコードで、表情切り替えが実装できます。

フェードで滑らかに表情が変化します。

ゲーム開発講師

表情差分は、4種類（通常、喜び、悲しみ、怒り）が基本です。必要に応じて追加できます。

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

表示位置の制御

表示位置の制御は、立ち絵の配置を調整します。

実装方法を紹介します。

位置制御システム

using System.Collections;

public class PortraitPositionController : MonoBehaviour
{
    public RectTransform leftPortraitRect;
    public RectTransform rightPortraitRect;
    
    public Vector3 leftDefaultPos = new Vector3(-200, 0, 0);
    public Vector3 rightDefaultPos = new Vector3(200, 0, 0);
    
    public IEnumerator SlideIn(PortraitSide side, float duration = 0.5f)
    {
        RectTransform targetRect = side == PortraitSide.Left ? leftPortraitRect : rightPortraitRect;
        Vector3 startPos = side == PortraitSide.Left 
            ? new Vector3(-Screen.width, leftDefaultPos.y, 0)
            : new Vector3(Screen.width, rightDefaultPos.y, 0);
        Vector3 endPos = side == PortraitSide.Left ? leftDefaultPos : rightDefaultPos;
        
        targetRect.localPosition = startPos;
        
        float elapsed = 0f;
        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            float t = elapsed / duration;
            targetRect.localPosition = Vector3.Lerp(startPos, endPos, t);
            yield return null;
        }
        
        targetRect.localPosition = endPos;
    }
    
    public IEnumerator SlideOut(PortraitSide side, float duration = 0.5f)
    {
        RectTransform targetRect = side == PortraitSide.Left ? leftPortraitRect : rightPortraitRect;
        Vector3 startPos = targetRect.localPosition;
        Vector3 endPos = side == PortraitSide.Left 
            ? new Vector3(-Screen.width, startPos.y, 0)
            : new Vector3(Screen.width, startPos.y, 0);
        
        float elapsed = 0f;
        while (elapsed < duration)
        {
            elapsed += Time.deltaTime;
            float t = elapsed / duration;
            targetRect.localPosition = Vector3.Lerp(startPos, endPos, t);
            yield return null;
        }
        
        targetRect.localPosition = endPos;
    }
}

using System.Collections;

public class PortraitPositionController : MonoBehaviour

{

public RectTransform leftPortraitRect;

public RectTransform rightPortraitRect;

public Vector3 leftDefaultPos = new Vector3(-200, 0, 0);

public Vector3 rightDefaultPos = new Vector3(200, 0, 0);

public IEnumerator SlideIn(PortraitSide side, float duration = 0.5f)

{

RectTransform targetRect = side == PortraitSide.Left ? leftPortraitRect : rightPortraitRect;

Vector3 startPos = side == PortraitSide.Left

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

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

Vector3 endPos = side == PortraitSide.Left ? leftDefaultPos : rightDefaultPos;

targetRect.localPosition = startPos;

float elapsed = 0f;

while (elapsed < duration)

{

elapsed += Time.deltaTime;

float t = elapsed / duration;

targetRect.localPosition = Vector3.Lerp(startPos, endPos, t);

yield return null;

}

targetRect.localPosition = endPos;

}

public IEnumerator SlideOut(PortraitSide side, float duration = 0.5f)

{

RectTransform targetRect = side == PortraitSide.Left ? leftPortraitRect : rightPortraitRect;

Vector3 startPos = targetRect.localPosition;

Vector3 endPos = side == PortraitSide.Left

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

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

float elapsed = 0f;

while (elapsed < duration)

{

elapsed += Time.deltaTime;

float t = elapsed / duration;

targetRect.localPosition = Vector3.Lerp(startPos, endPos, t);

yield return null;

}

targetRect.localPosition = endPos;

}

このコードで、表示位置制御が実装できます。

スライドイン・アウトで、立ち絵が動きます。

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

シナリオとの連携

シナリオとの連携は、会話に応じて立ち絵を表示します。

実装方法を紹介します。

シナリオ連携システム

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

public class ScenarioPortraitSystem : MonoBehaviour
{
    public PortraitDisplaySystem portraitSystem;
    public EmotionChangeSystem emotionSystem;
    public PortraitPositionController positionController;
    
    public IEnumerator PlayDialogueWithPortrait(DialogueLine line)
    {
        // 立ち絵をスライドイン
        yield return StartCoroutine(positionController.SlideIn(line.side, 0.5f));
        
        // 立ち絵を表示
        portraitSystem.ShowPortrait(line.characterID, line.emotion, line.side);
        
        // 会話を表示
        yield return StartCoroutine(ShowDialogue(line.characterName, line.dialogue));
        
        // 表情を変更（必要に応じて）
        if (line.emotion != PortraitEmotion.Normal)
        {
            yield return StartCoroutine(emotionSystem.ChangeEmotion(
                line.characterID, 
                line.emotion, 
                line.side
            ));
        }
    }
    
    IEnumerator ShowDialogue(string name, string dialogue)
    {
        // 会話表示処理
        // 実装は省略
        yield return new WaitForSeconds(2f);
    }
}

[System.Serializable]

public class DialogueLine

{

public string characterID;

public string characterName;

public string dialogue;

public PortraitEmotion emotion;

public PortraitSide side;

}

public class ScenarioPortraitSystem : MonoBehaviour

{

public PortraitDisplaySystem portraitSystem;

public EmotionChangeSystem emotionSystem;

public PortraitPositionController positionController;

public IEnumerator PlayDialogueWithPortrait(DialogueLine line)

{

// 立ち絵をスライドイン

yield return StartCoroutine(positionController.SlideIn(line.side, 0.5f));

// 立ち絵を表示

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

// 会話を表示

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

// 表情を変更（必要に応じて）

if (line.emotion != PortraitEmotion.Normal)

{

yield return StartCoroutine(emotionSystem.ChangeEmotion(

line.characterID,

line.emotion,

line.side

));

}

IEnumerator ShowDialogue(string name, string dialogue)

{

// 会話表示処理

// 実装は省略

yield return new WaitForSeconds(2f);

}

このコードで、シナリオ連携が実装できます。

会話に応じて、立ち絵が自動的に表示されます。

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

実装例：完全な立ち絵システム

ここまで解説してきた「立ち絵表示」「表情差分」「表示位置制御」「シナリオ連携」を、
ひとつのクラスにまとめた実装例を紹介します。

個別の仕組みを理解したうえで統合することで、会話シーンの制御がシンプルになり、実際のゲーム制作でも扱いやすくなります。

完全な立ち絵システムのサンプルコード

以下は、各システムをまとめて制御するためのクラスです。

会話開始時にキャラクターを表示する、といった用途を想定しています。

using UnityEngine;

public class CompletePortraitSystem : MonoBehaviour
{
    [Header("システム")]
    public PortraitDisplaySystem displaySystem;
    public EmotionChangeSystem emotionSystem;
    public PortraitPositionController positionController;
    public ScenarioPortraitSystem scenarioSystem;
    
    public void ShowCharacter(string characterID, PortraitEmotion emotion, PortraitSide side)
    {
        StartCoroutine(ShowCharacterCoroutine(characterID, emotion, side));
    }
    
    IEnumerator ShowCharacterCoroutine(string characterID, PortraitEmotion emotion, PortraitSide side)
    {
        // 立ち絵をスライドイン
        yield return StartCoroutine(positionController.SlideIn(side));
        
        // 表情付きで立ち絵を表示
        displaySystem.ShowPortrait(characterID, emotion, side);
    }
}

using UnityEngine;

public class CompletePortraitSystem : MonoBehaviour

{

[Header("システム")]

public PortraitDisplaySystem displaySystem;

public EmotionChangeSystem emotionSystem;

public PortraitPositionController positionController;

public ScenarioPortraitSystem scenarioSystem;

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

{

StartCoroutine(ShowCharacterCoroutine(characterID, emotion, side));

}

IEnumerator ShowCharacterCoroutine(string characterID, PortraitEmotion emotion, PortraitSide side)

{

// 立ち絵をスライドイン

yield return StartCoroutine(positionController.SlideIn(side));

// 表情付きで立ち絵を表示

displaySystem.ShowPortrait(characterID, emotion, side);

}

このクラスを使えば、キャラクターID・表情・表示位置を指定するだけで、立ち絵の表示と演出をまとめて呼び出せます。

シナリオ側の処理が簡潔になり、管理もしやすくなります。

立ち絵UIを「華やかに見せる」演出のコツ

立ち絵システムは、実装できただけでは少し味気なく見えがちです。

以下のポイントを意識すると、初心者でも会話シーンの印象を大きく改善できます。

まず重要なのは「変化を付けること」です。

立ち絵が常に同じ状態で表示されていると、どれだけ綺麗なイラストでも単調に見えます。

スライドイン・フェード・表情切り替えなどを組み合わせ、会話の節目ごとに小さな変化を入れることが効果的です。

また、感情が切り替わるタイミングを「セリフと連動させる」ことも大切です。

驚きや怒りのセリフが表示された直後に表情が変わるだけで、キャラクターが生きているように感じられます。

初心者がやりがちなNG例

最後に、立ち絵UIでよくある失敗例も押さえておきましょう。

これらを避けるだけでも、完成度は大きく向上します。

ひとつ目のNGは、立ち絵を「常に表示しっぱなし」にしてしまうことです。

会話が終わっても立ち絵が残っていると、画面がうるさくなり、次のイベントへの切り替えも不自然になります。

不要になった立ち絵は、スライドアウトや非表示処理を行いましょう。

ふたつ目は、表情差分をほとんど使わないケースです。

せっかく表情システムを実装しても、常に通常表情のままでは意味がありません。

最低限「通常・喜び・悲しみ・怒り」の4種類を使い分けるだけでも、会話シーンの説得力は大きく変わります。

これらのポイントを意識しながら実装すれば、SRPGの会話シーンを自然で魅力的に演出できるようになります。

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

よくある質問（FAQ）

Q: 立ち絵のサイズはどう設定すればいいですか？
A: 画面の1/3〜1/2が標準です。大きすぎると画面を占領し、小さすぎると見づらくなります。

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

Q: 表示位置はどう配置すればいいですか？
A: 左右に配置しましょう。これにより、会話の流れが分かりやすくなります。

Q: アニメーションは必須ですか？
A: 必須ではありませんが、強く推奨します。スライドイン・アウトで、演出が魅力的になります。

Q: 立ち絵システムのパフォーマンスはどう最適化すればいいですか？
A: 画像を事前に読み込んでおきましょう。また、不要な立ち絵はメモリから解放します。

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

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

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

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

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

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

まとめ

立ち絵UIは、左右の配置から始めましょう。

表情差分とアニメーションを追加すれば、魅力的なシーンが作れます。

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

ステップ1：立ち絵表示システムを実装する（所要3時間）
ステップ2：表情差分を実装する（所要2時間）
ステップ3：表示位置制御を実装する（所要2時間）

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

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

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