Unity製ミニゲームをiPhoneで遊びやすくする5つの改善

PC上では問題なく遊べるUnity製ミニゲームでも、iPhoneで実機確認すると、UIや文字が小さい、ボタンを押しにくい、ノッチと重なるといった問題が起きることがあります。

この記事では、PC向けの見た目を無理に縮小せず、スマートフォンで迷わず操作できる画面へ直すための基本をまとめます。

1. Canvas Scalerを画面サイズへ追従させる

Canvasの Canvas Scaler を次のように設定します。

• UI Scale Mode: Scale With Screen Size
• Reference Resolution: 1080 x 1920（縦画面の場合）
• Screen Match Mode: Match Width Or Height
• Match: 0.5 を基準に実機で調整

横画面なら基準解像度を 1920 x 1080 とします。ただし、基準解像度を設定しただけでは十分ではありません。各UIのAnchorが画面中央へ固定されたままだと、縦横比が変わったときに位置が崩れます。

2. Anchorを役割ごとに設定する

UIを「画面のどこに置きたいか」で分けます。

• スコア・ステータス: 上辺へAnchor
• 操作ボタン: 下辺へAnchor
• ダイアログ: 中央へAnchor
• 全画面パネル: 四辺へStretch

親要素には Horizontal Layout Group や Vertical Layout Group を使うと、固定座標を並べるより画面幅へ対応しやすくなります。

3. ノッチとホームインジケーターを避ける

iPhoneでは Screen.safeArea を使い、安全領域内へUIを収めます。

using UnityEngine;

[RequireComponent(typeof(RectTransform))]
public sealed class SafeAreaFitter : MonoBehaviour
{
    private RectTransform rectTransform;
    private Rect lastSafeArea;
    private Vector2Int lastScreenSize;

    private void Awake()
    {
        rectTransform = GetComponent<RectTransform>();
        Apply();
    }

    private void Update()
    {
        if (lastSafeArea != Screen.safeArea ||
            lastScreenSize.x != Screen.width ||
            lastScreenSize.y != Screen.height)
        {
            Apply();
        }
    }

    private void Apply()
    {
        Rect safe = Screen.safeArea;
        Vector2 anchorMin = safe.position;
        Vector2 anchorMax = safe.position + safe.size;

        anchorMin.x /= Screen.width;
        anchorMin.y /= Screen.height;
        anchorMax.x /= Screen.width;
        anchorMax.y /= Screen.height;

        rectTransform.anchorMin = anchorMin;
        rectTransform.anchorMax = anchorMax;
        rectTransform.offsetMin = Vector2.zero;
        rectTransform.offsetMax = Vector2.zero;

        lastSafeArea = safe;
        lastScreenSize = new Vector2Int(Screen.width, Screen.height);
    }
}

このコンポーネントを、画面全体のUIをまとめる親RectTransformへ付けます。画面回転へ対応する場合は、解像度や safeArea の変化を検知して再計算します。

4. タップ領域は見た目より大きくする

小さなアイコンだけをタップ対象にすると、実機では押しにくくなります。

• ボタンの最小サイズを十分に取る
• ボタン同士の間隔を空ける
• アイコンの透明な親要素をタップ領域にする
• 押した瞬間に色・縮小・音などで反応を返す

Hover表現だけでは、タッチ端末で状態が伝わりません。PointerDown や選択状態を明確に表示します。

5. 文字は「入るサイズ」ではなく「読めるサイズ」にする

TextMeshProのAuto Sizeは便利ですが、枠へ入れるために文字が小さくなり過ぎることがあります。

• 本文・ボタン・補足で最小フォントサイズを決める
• 長い説明は常時表示せず、必要な場面で開く
• 現在の目的と次の操作を画面上部へ短く表示する
• 重要な状態は文章だけでなく、アイコンやゲージでも伝える

ゲーム画面では情報量を増やすより、「今すること」を1つに絞る方が分かりやすくなる場合があります。

WebGL版ではメモリと初回ロードも確認する

• 使用していないテクスチャや音源を除外
• テクスチャサイズと圧縮設定を確認
• 長いBGMや効果音の読み込み方式を見直す
• シーン開始時に大量のPrefabを生成しない
• 実機SafariとLINE内ブラウザの両方で確認

Editor上で快適でも、端末のメモリやブラウザ制限で動作が変わります。

実機テストで確認する項目

1. 初回ロードからゲーム開始まで迷わないか
2. 文字を拡大せず読めるか
3. 片手でも主要ボタンを押せるか
4. ノッチやホームインジケーターと重ならないか
5. 画面回転後にUIが崩れないか
6. ゲーム終了後の戻り方が分かるか

まとめ

スマートフォン対応は、PC版をそのまま縮小する作業ではありません。

• Canvas Scaler
• AnchorとLayout Group
• Screen.safeArea
• 十分なタップ領域
• 読める文字と少ない情報量

この5点を実機で確認すると、操作性は大きく改善します。特にLINEミニアプリやWebGLゲームでは、ブラウザの表示領域も含めて実機確認することが大切です。