ゲームUIのSafe Areaと実機QA：デバッグ順序とPrefab修正

最も多い報告は、Gameビューでは問題ないのに、縦長端末ではHUDがノッチ下に入る、またはボタンは押せそうに見えるがヒットしないというものです。Safe Areaは「Anchorを少し動かす」話ではなく、ルートCanvasの方針、フルブリード背景とインセット付きコンテンツの分離、実行時safeAreaがチャネルと一致するかがセットです。Editorで再現できるログと実機スモークの両方が必要です。

失敗の分類、Unity UGUIのデバッグ順序、Prefab修正の原則、チャネル／ミニゲームの注意点を扱います。デザインハンドオフ項目7のセーフゾーン指定は文末「デザインが渡すもの」に要約します。出荷前項目1の実機範囲をここで具体化し、エンジン+MCPチェックリストのRaycast／初回Playは繰り返しません。

Godot / Cocos： DisplayServer.get_display_safe_area()／各エンジンのSafeAreaウィジェットに対応。手順の順序はUnityと同型です。

不合格基準（いずれか1つ）： 主フローの可読UIや必須ボタンがノッチ・ホームインジケータ・角丸に隠れる；見た目とヒット領域のずれが明らか；Editor 16:9のみで目標アスペクトの実機未検証；DevとReleaseでSafe Area挙動が異なり仕様なし。

---

まず分類：クリップ、オフセット、背景のみ

症状	第一嫌疑	エンジニアの最初の一手
視覚クリップ（ノッチ内に文字・アイコン）	コンテンツ未インセット；ルートを全画面扱い	safeAreaとコンテンツRectの交差を確認
タップオフセット	Canvasスケール、複数Canvas、カメラ不一致	EventSystemレイキャストとrenderMode
背景のみ切れ、ボタンOK	意図的フルブリード＋コンテンツインセット	仕様許可なら不合格にしない
回転後にずれ	orientation／safeArea変更未監視	回転後にインセット再計算
特定チャネルビルドのみ	SDKがsafeAreaや解像度を変更	そのビルドをスモーク；汎用Androidのみ不可

---

Unity UGUI：推奨デバッグ順序（6ステップ）

1. 再現条件を固定

端末、OS、Dev/Release、向き、Gameビュー解像度を記録。出荷前項目5でDev/Release各々メインHUD。

2. safeAreaと参照解像度をログ

メインUI表示後に Screen.width/height、Screen.safeArea、Display.cutouts（Android 11+）を出力。

読み方： safeAreaが画面より小さい→コンテンツインセット必須。EditorではsafeArea＝全画面になりがち→実機の代替にならない。

3. CanvasルートとCanvas Scaler

確認	典型ミス	修正方向
ルートRender Mode	Screen SpaceとCamera UI混在	UIモードを統一
Canvas Scaler	Reference Resolutionが縦基準と不一致	エンジン項目1に合わせる
Match	縦長でスケール・端ウィジェットが drift	Match方針を合意；SceneだけでなくPrefab修正
複数Canvas	ヒットが別レイヤーへ	sortingOrderとRaycast対象を一致

4. レイヤー：フルブリード背景 vs セーフコンテンツ

Canvas
├── Background_FullBleed   （全アンカー、ノッチ可、入力なし）
└── SafeRoot               （Safe AreaコンポーネントまたはsafeAreaパディング）
    ├── HUD_Content
    └── Popups

Unity Safe Area（またはScreen.safeAreaでoffsetMin/Maxを設定）。インセットなし全画面ストレッチのクリックボタンは不可。

Studio一層エクスポートは 9-slice／構造化再エクスポート と キャンバス→Prefab を参照。

5. 実機タップ spot-check

主フロー重要ボタン3〜5個で視覚中心と指位置を比較。特定ポップアップのみずれ→ネストCanvas／二重Scaler。

6. リポジトリPrefabに反映

合格基準はバージョン管理Prefabに（出荷前項目6）。Anchor変更後は ロケールオーバーフロー スモーク。

---

チャネル／ミニゲーム

シナリオ	注意
ネイティブApp	Screen.safeArea＋実機
一部ミニゲーム	コンテナのsafeArea API≠Editor
Androidカットアウト	cutout≠safeAreaのことがある
PC等	safeArea＝全画面が多い

パターン： ISafeAreaProvider等でプラットフォーム注入；HUD Prefabに#ifを書かない。

---

修正ルーティング

症状	原因	対応	担当
実機クリップ、Editor OK	SafeRootなし	レイヤー＋Safe Area；実機再テスト	エンジニアリング
背景OK、ボタン切れ	Bleed下にボタン	SafeRootへ移動；Studio再エクスポート	エンジニアリング＋デザイン
タップずれ	複数Canvas／Scaler	Canvas統合／レイキャストカメラ統一	エンジニアリング
解像度で drift	Anchor固定のみ	エンジン項目6	エンジニアリング
セーフ枠なし稿	項目7不足	デザインがnotch参照追加	デザイン
Studio平坦エクスポート	BG/HUD未分割	インプレース分割	エンジニアリング＋デザイン

---

デザインが渡すもの

交付物	エンジニア用途
目標解像度＋セーフ参照（notch／ホームバー）	Reference Resolutionとインセット期待
フルブリードとHUDのレイヤー名	Background_*／SafeRoot
端Tabがセーフ内か	Anchor方針

スクリプト不要—明確な指定でインセットpxの推測を減らす。

---

よくある質問

GameビューのiPhone解像度で足りる？
Devスモークのみ；出荷は目標実機必須（出荷前項目1）。

Safe Areaコンポーネント vs 手書きoffset？
チームで統一；手書きはsafeArea／向き変更で再計算。

Canvas Scalerだけでクリップ修正？
Scalerは全体スケール；インセットは別。クリップはコンテンツRectの問題。

MCP/Cursorは？
Prefab改名・Safe Area付与・Playスモーク向き；数値は実機ログ。エンジン+MCP。

Safe Areaと多言語爆框？
SafeRootを先に整え、ストレス言語を後で。

VberAI StudioとGoogle AI Studio？
別物。比較。