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上で快適でも、端末のメモリやブラウザ制限で動作が変わります。

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

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

まとめ

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

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

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