【Unity 2D】文字数に応じてサイズが変わるメッセージウィンドウの作り方

1. はじめに
2. メッセージウィンドウ用の画像を準備
3. Sprite Editorでスプライトを9分割
4. メッセージウィンドウの作成
5. 一文字ずつ表示されるスクリプトの実装
6. まとめ

1. はじめに

こんにちは！今回は Unity 2D で 「文字数に応じてサイズが変わるメッセージウィンドウ」 を作る方法を紹介します。

ゲームを作っていると、キャラクターのセリフやシステムメッセージを表示するウィンドウが必要になることがありますよね。特に、RPGやノベルゲームでは、メッセージの内容によってウィンドウのサイズを柔軟に変更できると便利です。

そこで今回は、
✅ ウィンドウのサイズを自動調整する方法
✅ メッセージを一文字ずつ表示する方法
✅ クリックで次のメッセージに切り替える方法
を、わかりやすく解説していきます。

メッセージウィンドウを作るために、以下の技術を使います。

🔹 Sprite Editor を活用して、スプライト画像を9分割（スライス）
🔹 Content Size Fitter と Vertical Layout Group を使って、自動でサイズ調整
🔹 TextMeshPro でテキストを一文字ずつ表示
🔹 C#スクリプト を作成し、クリックでメッセージを進める処理を実装

初心者でも簡単に実装できるので、ぜひ試してみてください！それでは、さっそくメッセージウィンドウを作っていきましょう！ 🚀

2. メッセージウィンドウ用の画像を準備

メッセージウィンドウを作るためには、まずウィンドウの背景画像を用意する必要があります。
今回は、Sprite Editorを使ってウィンドウのサイズを自由に変更できるスプライト画像を作成します。

① ウィンドウ用のスプライト画像を用意

メッセージウィンドウのデザインは自由ですが、以下のような画像を準備しましょう。

✅ 背景が透過されているPNG形式の画像
✅ 枠がついたシンプルなウィンドウデザイン
✅ ウィンドウの四隅・上下・左右の部分が拡大されても違和感のないデザイン

もし適当な画像がない場合は、Unity Asset Store のフリー素材や、自分でペイントソフトを使って作成するのもOKです。

② Unityに画像をインポート

画像が準備できたら、Unityに取り込みます。

プロジェクトウィンドウ で 「Assets」フォルダを開く
「右クリック」→「Import New Asset…」 を選び、作成したウィンドウ画像をインポート
インポートした画像を選択し、インスペクタ（Inspector） を開く
「Texture Type」 を 「Sprite (2D and UI)」 に設定
「Mesh Type」 を 「Full Rect」 に変更（画像の変形を防ぐため）

この設定をすることで、ウィンドウの形を崩さずに自由なサイズ変更が可能になります。

この記事では、こちらの画像を使用しました。

③ Sprite Editor を開く

ウィンドウ画像を適切に分割するため、Sprite Editor を使います。

インポートした画像を選択し、インスペクタ の「Sprite Editor」ボタンをクリック
「Sprite Editor」ウィンドウが開くので、ここでスプライトを分割
次のステップでは、この画像を9分割（スライス） してサイズ変更時に崩れないように設定します

これで、メッセージウィンドウの準備が完了しました！
次のステップでは、Sprite Editorを使って9分割（スライス）を設定する方法 を解説していきます。

3. Sprite Editorでスプライトを9分割

メッセージウィンドウのサイズを自由に調整できるようにするため、Sprite Editorを使ってスプライトを9分割（スライス） します。
この設定をすることで、ウィンドウの四隅を固定しつつ、中央部分だけが伸縮するようになります。

① Sprite Editorを開く

まずは、Sprite Editor を開いて9分割の設定を行いましょう。

プロジェクトウィンドウ でインポートしたウィンドウ画像を選択
インスペクタ（Inspector） の 「Sprite Editor」 ボタンをクリック
「Sprite Editor」のウィンドウが開く

② 9スライス（スプライトの9分割）を設定

スプライトの9分割を設定すると、四隅をそのままにして、中央部分だけを自由に拡大・縮小 できるようになります。

Sprite Editorのウィンドウ で、左上の「Slice」ボタンをクリック
「Custom」オプションを選択 し、手動で分割できるようにする
ウィンドウの四隅を固定するように「9分割」のガイドラインを調整
- 左右の枠線が変形しないように、端の細い部分を固定
- 中央部分が拡大・縮小されるように、内側の枠を適切な位置に設定
- ガイドラインの位置はウィンドウデザインに応じて微調整
分割が完了したら、「Apply」ボタンを押して変更を保存

③ 9分割の動作確認

ヒエラルキーウィンドウ で適当な UI > Image を作成し、
先ほど9分割したスプライトを適用してみましょう。

ヒエラルキーウィンドウで「UI」→「Image」を作成
インスペクタの「Source Image」に、9分割したスプライトを設定
「Image Type」を「Sliced」に変更
Imageのサイズを拡大・縮小して、枠が綺麗に調整されるか確認

うまく設定されていれば、ウィンドウの四隅はそのままで、中央部分だけが伸縮 するようになっているはずです。

これで、スプライトの9分割（スライス）設定 が完了しました！
次は、このスプライトを使ってメッセージウィンドウを作成し、自動でサイズが変わる仕組みを作っていきます。

4. メッセージウィンドウの作成

9分割（スライス）したスプライトを使って、メッセージウィンドウを作成 します。
ここでは、UIの「Image」オブジェクトを作成し、サイズを自動調整する仕組み を設定していきます。

① メッセージウィンドウのベースを作成

まずは、メッセージウィンドウの基本となる UI Image を作成します。

ヒエラルキーウィンドウ で右クリックし、
「UI」→「Image」 を選択
作成した Imageオブジェクトの名前を「MessageWindow」に変更
インスペクタ（Inspector） で、次の設定を行う
- 「Source Image」 に 9分割（スライス）したスプライトを適用
- 「Image Type」 を 「Sliced」 に変更
- RectTransform のサイズ を適当な大きさ（例：Width 400、Height 150）に設定
- アンカー（Anchor） を 下部中央（Bottom Center） に設定すると自然な配置に

✅ ポイント： 「Sliced」に変更することで、ウィンドウの四隅を保持しながらサイズを変更 できるようになります。

② 自動でサイズ調整する設定

次に、メッセージの文字数に応じてウィンドウサイズが変わるように 設定します。
これには、「Content Size Fitter」 と 「Vertical Layout Group」 を使います。

MessageWindowを選択 した状態で、「Add Component」 をクリック
「Content Size Fitter」 を追加し、以下の設定を行う
- Horizontal Fit（横サイズ）: Unconstrained（制約なし）
- Vertical Fit（縦サイズ）: Preferred Size（推奨サイズ）
さらに「Vertical Layout Group」 を追加し、以下の設定を行う
- Child Alignment（子オブジェクトの配置）: Middle Center
- Control Child Size（子オブジェクトのサイズ制御）: 「Height」にチェック
- Padding（余白）: 上下左右に適切な数値を設定（例：10）

これにより、ウィンドウのサイズがテキストの長さに応じて自動で調整 されるようになります！

③ メッセージテキストの追加

ウィンドウの中に、メッセージを表示するテキストオブジェクト を作成します。

ヒエラルキーウィンドウで右クリック
「UI」→「Text（Legacy）」または「TextMeshPro」 を選択
作成したテキストを 「MessageText」に名前変更
RectTransform を「Stretch」に設定（ウィンドウのサイズに合わせる）
インスペクタで以下の設定を行う
- Text（初期値）: 「こんにちは！」（適当なテスト用テキスト）
- Font Size: 30（適宜調整）
- Alignment（配置）: Center（中央揃え）
- Best Fit（自動調整）: ON（サイズを自動調整）
- TextMeshProの場合: 「Auto Size」をON にすることで文字サイズが自動調整される

✅ ポイント：

TextMeshProを使うと、より綺麗なフォント表示が可能 なので、そちらを推奨します。

④ 動作確認

ここまでの設定で、テキストの長さに応じてウィンドウのサイズが変わる仕組みができました！
以下の手順で確認してみましょう。

MessageTextに長い文章を入力してみる
ウィンドウのサイズが自動で変わるかチェック
Paddingの数値を調整して、メッセージと枠のバランスを調整

これで、テキストの長さに応じてサイズが変わるメッセージウィンドウ の準備が整いました！
次は 「一文字ずつ表示されるスクリプト」 を作成し、よりゲームらしいメッセージウィンドウを実装していきます。

5. 一文字ずつ表示されるスクリプトの実装

メッセージウィンドウのサイズを自動調整できるようになったので、次は 一文字ずつ表示されるスクリプト を実装していきます。
これにより、RPGやノベルゲームのような 「文字が順番に表示されるメッセージ演出」 を作ることができます！

Unityの使い方⑤C#スクリプトを作成してみよう

① スクリプトの作成

まずは、メッセージを一文字ずつ表示するためのC#スクリプト を作成します。

プロジェクトウィンドウ で 「Assets」フォルダを開く
「右クリック」→「Create」→「C# Script」 を選択
スクリプトの名前を「MessageWindowController」に変更
スクリプトを開き、以下のコードを入力

using TMPro;
using UnityEngine;
using System.Collections;

public class MessageWindowController : MonoBehaviour
{
    [SerializeField] private TextMeshProUGUI tmpText;  // メッセージを表示するTextMeshPro
    [SerializeField] private string[] messages;        // 表示するメッセージの配列
    [SerializeField] private float charDisplayInterval = 0.05f; // 文字の表示間隔
    private int currentMessageIndex = 0;  // 現在のメッセージのインデックス
    private bool isTyping = false;  // メッセージを表示中かどうか

    private void Start()
    {
        // サンプルメッセージを設定（実際のゲームでは外部から設定）
        messages = new string[]
        {
            "おはようございます。",
            "今日はいい天気ですね。",
            "Unityの勉強を頑張りましょう！"
        };

        StartCoroutine(DisplayMessage()); // 最初のメッセージを表示
    }

    private void Update()
    {
        // クリックで次のメッセージへ
        if (Input.GetMouseButtonDown(0) && !isTyping)
        {
            currentMessageIndex++;

            if (currentMessageIndex < messages.Length)
            {
                StartCoroutine(DisplayMessage());
            }
        }
    }

    private IEnumerator DisplayMessage()
    {
        isTyping = true;
        tmpText.text = "";  // メッセージをクリア
        string message = messages[currentMessageIndex];

        for (int i = 0; i < message.Length; i++)
        {
            tmpText.text += message[i]; // 一文字ずつ追加
            yield return new WaitForSeconds(charDisplayInterval); // 指定時間待機
        }

        isTyping = false;
    }
}

② スクリプトを適用

作成した MessageWindowController スクリプトを、メッセージウィンドウに適用します。

ヒエラルキーウィンドウで「MessageText」オブジェクトを選択
「MessageText」に「MessageWindowController」スクリプトをドラッグ＆ドロップ
インスペクタで「tmpText」の項目に「MessageText」をドラッグ＆ドロップして設定

③ 動作確認

ここまで設定できたら、プレイボタン（▶）を押して動作を確認 してみましょう！

✅ 文字が一文字ずつ表示されるか？
✅ クリックすると次のメッセージに切り替わるか？

これで、一文字ずつ表示されるメッセージウィンドウ の実装が完了しました！ 🎉

💡 もっと簡単＆多彩なエフェクトを追加したい？
手動でスクリプトを書くのは基本ですが、もっとリッチな文字アニメーションを作りたいなら、「Text Animator for Unity」 を使うのもオススメ！
例えば、以下のようなエフェクトを簡単に追加できます👇
✅ テキストの揺れ、スライド、フェードインなどのアニメーション
✅ 感情表現（強調や波打つエフェクト）を追加可能
✅ スクリプト不要で、エディタから直感的に設定できる
スクリプトでの実装が面倒な人は、このアセットを活用すると一気に表現の幅が広がります！

次は 「スキップ機能を追加する」「ボタンを押したら次のメッセージが表示される」 など、さらに便利な機能を追加していきましょう！

6. まとめ

今回は、Unity 2Dで「文字数に応じてサイズが変わるメッセージウィンドウ」 を作成する方法を解説しました！
これで、RPGやノベルゲームのようなメッセージ表示が簡単に実装できるようになりましたね 😊

✅ この記事で学んだこと

スプライト画像を準備し、Sprite Editorで9分割する方法
- 9スライスを設定することで、ウィンドウのサイズを自由に変更可能に！
メッセージウィンドウを作成し、自動でサイズを調整する方法
- 「Content Size Fitter」と「Vertical Layout Group」 を使って、テキストの長さに応じてウィンドウサイズを調整！
一文字ずつメッセージを表示するスクリプトの作成
- C#スクリプトで一文字ずつ表示される処理 を作成し、クリックで次のメッセージへ進む仕様を実装！