モバイルHUDの情報階層：戦闘・ロビー・モーダルで何を表示すべきか

HUDの失敗は「ヘルスバーを忘れた」ことではなく、同一優先度の要素が1画面に多すぎることです。戦闘中にロビーのタブが出ていたり、シネマティックの上にタップ可能なショップが重なったり、モーダルが開いているのに下層のHUDがタップを奪い続けているケースです。デザインモックは単一フレームであることが多く、「戦闘中は通貨を隠す」と明記されません。そこで状態 × レイヤーの仕様が必要になり、エンジニアリングが表示・入力ブロック・描画順を確定できます。

以下ではUnity UGUI（Prefab、Canvas.sortingOrder、Graphicのレイキャスト）を主な用語として使います。GodotではCanvasLayerのlayer + Controlのmouse_filter、Cocosではノードの描画順 + BlockInputEvents / 全画面ブロッカーが対応し、判定基準と表は同じです。セーフエリア、フローティングテキスト、Canvas順序の詳細はセーフエリア、フローティングダメージ数値を参照してください。実機・全ロケール・Releaseビルドは出荷前チェックリストの項目1、2、5を確認してください。

不合格基準（いずれか1つでも該当＝不合格）： モーダル / シネマティック / 決済フロー中に下層のHUDが操作可能（仕様で「半画面は操作可能」と明記されていない場合）。戦闘中に閉じられない非戦闘プロモがプレイ領域を塞ぐ。同じ情報が二重表示（例：上部バーのコインと戦闘中の大きなコインUI）でプロダクト上の注記がない。前の状態のコントロールが残る（表示されている、またはレイキャストをブロックし続けている）。多言語ストレスロケールで戦闘最小レイアウトでも長いコピー（DE/ESなど）がクリップする。

---

まず状態を定義し、次にコントロールを決める

ゲーム状態（例）	HUDの目的	通常表示する	通常隠す / 縮退する
ロビー / ホーム	ナビ + リソース + イベント	上部通貨、下部タブ、イベント入口	戦闘スキル、クロスヘア
戦闘 / レベル内	アクション + 生存情報	ヘルス、スキル、ポーズ	ロビータブ、全画面イベントバナー
シネマティック / CG	入力なし、またはスキップのみ	スキップボタン	ほぼすべてのHUD（またはスキップのみ）
モーダル（ショップ、設定）	ダイアログに集中	モーダル内コントロール	下層HUDのレイキャスト無効、またはレイヤー全体を非表示
決済 / コンプライアンス	フローを完了	規約、確認	ゲーム内プロモオーバーレイ

状態のenumはデザイン + エンジニアリングで合意します（例：GameUIState.Lobby | Combat | Cinematic | Modal）。UIルートはステートマシンを購読します（UnityのPrefabグループ / Godotのシーンブランチ / CocosのPrefab）。すべてのボタンスクリプトでSetActive / visibleを散在させないようにします。

---

レイヤーと並び順（エンジン非依存の仕様）

下から上へ記載します（数値が大きいほど前面）：

レイヤー	内容	入力
L0	全画面背景 / シーンUIの下地	なし
L1	戦闘HUD（ヘルス、ジョイスティックのプレースホルダー）	あり
L2	戦闘フローティングテキスト / ヒント	レイキャストなし（フローティングダメージ数値を参照）
L3	システムトースト / マーキー	通常なし
L4	モーダル / 全画面ダイアログ	あり。L1〜L3のタップをブロック
L5	ネットワーク切断、強制アップデート	あり。すべてをブロック

UnityではsortingOrder / 複数Canvas、GodotではCanvasLayerのlayer、Cocosでは1つのCanvas配下の兄弟順またはレイヤーCanvas + マスクを使います。モーダルを開くときはL4を上げ、L1のレイキャスト / mouse_filter / BlockInputを無効化します。「前面に描画されているがタップは通過する」状態にしてはいけません。

---

情報の優先度（戦闘の例）

小さな画面で戦闘中に読めるブロックをN個しか残せない場合、デフォルトの上限は次のとおりです：

優先度	ブロック	縮退戦略
P0	ヘルス / 失敗条件に関わる	隠さない
P0	ポーズ / 戦闘離脱	隠さない
P1	スキル / 主要アクション	より少ないボタンに統合
P2	短い目標テキスト	アイコン + 長押しで詳細
P3	通貨、イベント入口	戦闘中はデフォルトで非表示、またはポーズメニュー内
P3	チャット入口	アイコンに折りたたむ

縮退は多言語ストレスロケール（DE/ESなど）でも読める必要があります。英語のみの縮小テストでは不十分です。

---

受け入れ（5ステップ）

1. 状態を列挙する — メインフローから遷移を列挙します（レベル開始、ショップを開く、CG、再接続）。
2. 状態ごとにスクリーンショット — EditorのPlayと実機のReleaseをそれぞれ取得します（出荷前項目1と5）。SetActive(false) / visible=falseのノードが依然として入力を受け取るか確認します。
3. モーダルのスポットチェック — ショップ / 設定 / 決済を開いた状態で、以前のHUDボタンのタップが何も起こさないことを確認します（全画面透明レイキャストまたはBlockInputマスク）。

4. セーフエリアと交差確認 — 戦闘のP0コントロールがセーフインセット内にあること（セーフエリアを参照）。
5. バージョン管理されたアセットをコミット — 状態テーブルが表示を制御します（UnityのScriptableObject / GodotのResource / Cocosの設定）。Sceneだけの一時的な非表示にしないようにします。

---

デザインが追加すべきもの

成果物	目的
状態ごとのワイヤーフレーム（少なくともロビー / 戦闘 / モーダル）	エンジニアリングが表示を設定できる
モック上の戦闘「隠してよい」リスト	すべての要素を1フレームに描かないようにする
モーダル仕様：背景の暗転、タップ通過を許可するか？	レイキャストポリシーを決定する
プロモ / イベントレイヤーのzオーダー	L4/L5と整合させる

デザイナーがステートマシンを書く必要はありません。表 + 注記が推測を減らします。

---

修正ルーティング

症状	考えられる原因	対応	担当
ダイアログ後も戦闘をタップできる	下層のレイキャストが有効	モーダルレイヤーのGraphicレイキャストを無効化 / 全画面マスク	エンジニアリング
戦闘中に全画面イベント	状態テーブルがない	戦闘中はP3を隠す。デザインの承認	エンジニアリング + デザイン
シネマティック後にHUDが残る	Cinematic状態のフックがない	ステートマシンがHUDを一律に隠す	エンジニアリング
通貨表示が2つある	戦闘中にロビーバーがオフになっていない	戦闘中は上部バーを隠す、またはデータソースを統合	エンジニアリング + デザイン
戦闘最小レイアウトで長いロケールがクリップ	DE/ESが未テスト	ロケールオーバーフローの経路	デザイン + エンジニアリング

---

FAQ

ロビーと戦闘で2つのCanvasを使うべきですか？
問題ありません。または1つのCanvasとグループでも構いません。重要なのは状態の表示 + レイキャストであり、Canvasの数ではありません。

半画面のショップはモーダルですか？
はい。下層がタップ可能か、戦闘ロジックを一時停止するかを仕様に明記します。

「少ないほど良い」UXと矛盾しませんか？
階層テーブルはプロダクトルールであり、美学ではありません。P3はステートマシンのフラグでイベント用に再度開けます。

3Dのワールド空間オーバーヘッドバーは？
それらは戦闘情報であり、L1で管理します。ワールド空間の並び順ルールはフローティングダメージ数値とセーフエリアに整合させます。