ゲーム画面を作り直しました｜「管理画面」から「ゲーム盤」へ
情報が並ぶ画面から、現在の手番・危険なルート・使える行動を見分けやすい通信盤へ。Signal UIの再設計を振り返ります。
ウラギリ・シグナルの初期画面には、必要な情報そのものは揃っていました。残り行動、プレイヤー、3本のルート、操作ボタンを順番に並べ、現在の状態を文字で説明する構成です。
しかし、HUD、Player、Routes、Actionsがほぼ同じ視覚階層にあり、「今は誰の手番か」「どのルートが危険か」「どの行動を押せるか」を瞬時に見分けにくい画面でもありました。ゲームを操作する盤面というより、状態を確認する管理画面に近い見え方です。
そこで、ルールや通信方式は変えず、画面の情報設計と見た目を作り直しました。
3枚のカードを、ひとつの通信網へ
以前はROUTE A、B、Cがそれぞれ大きなカードとして見え、別々の情報ブロックという印象が強くなっていました。現在は3本を共通のnetwork boardへ置き、technical grid、薄い軌道線、信号の接続線を同じ背景上にまとめています。
各ルートは独立した進行を持ちますが、4人が直しているのはひとつの通信網です。共通盤面として見せることで、別のルートへ移るSWITCHや、全体の完成状況も理解しやすくなりました。
ノードの状態も、長い文字を主役にする構成から、記号を中心に変えています。未確認は「?」、接続済みは「✓」、修理済みは工具、障害は警告、JAMMEDは「×」とglitch表現です。CONNECTED、JAMMED、REPAIREDなどのラベルは残しつつ、最初に形で見分け、その後に文字で確認できます。
接続線も同じ考え方です。接続済み区間はcyanやlimeのglow、未接続は暗い線、JAMMEDは途切れたorange、REPAIREDは復旧したgreenで表現します。色だけに頼らず、アイコンとラベルも組み合わせています。
手番と操作を先に見つけられるようにする
プレイヤー表示は普通の長方形カードから、通信端末をイメージしたmarkerへ変更しました。番号、名前、接続状態をまとめ、現在手番のプレイヤーだけ外周のlime glowを強くしています。Access Restrictionのpendingとactiveも、小さなbadgeと説明を使い分けています。
画面下部のAction HUDは、CONNECT、REPAIR、SCAN、BOOST、SWITCHをアイコン中心のtactical buttonにしました。使える操作はlimeやcyan、使えない操作は暗い表示にし、選択中はouter ringを加えています。見た目だけでなく、無効なボタンは実際のdisabled状態と一致させています。
デスクトップでは、上部HUD、Players、Route A/B/C、Action HUDまでをできるだけ1画面に収めました。役割の詳しい説明やログはその下に置き、まず手番で必要な判断へ到達できる順序にしています。
モバイルでは装飾より操作を優先する
コンセプトビジュアルへ近づけるほど、細い線や広い盤面を使いたくなります。しかし、PC向けの見栄えをそのまま375px幅へ縮めると、文字もボタンも小さくなります。
モバイルでは背景装飾を減らし、プレイヤー名とルート状態の読みやすさを優先しました。Action HUDは3つと2つに分かれるgridにし、最低限のタップ領域を保っています。横へスクロールしなくても主要操作へ届くことを確認しました。
動きが苦手な人のためのprefers-reduced-motion、キーボード操作時のfocus表示、ボタンのariaとdisabled semanticsも維持しています。状態を色だけで区別しないことも、装飾を加える前提条件にしました。
かっこいいだけではゲームUIにならない
dark greenのHUDや発光するノードは、ウラギリ・シグナルの雰囲気を伝えるためのものです。ただし、その演出によって手番や操作が分かりにくくなれば目的が逆になります。
今回の再設計では、コンセプトビジュアルをそのまま再現するのではなく、実際に押すボタン、公開してよい情報、スマートフォンで読める大きさを優先しました。秘密のJAMやSCAN結果は、見た目を豊かにするために他のプレイヤーへ公開してよい情報ではありません。UIはWorkerから受け取った公開状態の範囲だけを描きます。
これからも、ゲームらしい雰囲気と、迷わず操作できることの両方を確認しながら整えていきます。