ゲームUI・UXデザイン：良い画面はなぜ目立たないのか
HUDの種類、Dead Spaceの体に付いた体力表示、レッド・デッド・リデンプション2の状況対応型HUD、フィッツの法則とモバイルのタッチ設計まで。ゲームUI・UXの基本原理を事例とともにまとめます。
ゲームレビューでUIが褒められることはめったにありません。逆に、使いにくいUIはすぐに批判されます。「メニューが深すぎる」「ボタンが指で隠れる」「体力があとどれくらい残っているかわからない」といった不満は、ゲームそのものの面白さとは関係なくプレイヤーを疲れさせます。よくできたUIは空気のように目立たず、出来の悪いUIだけが目立つのです。
この記事では、ゲームのUI（ユーザーインターフェース）とUX（ユーザーエクスペリエンス）の違いから出発して、画面に情報を表示するさまざまな方法、実際のゲームが選んだやり方、そしてモバイルゲームを作る小さなスタジオとして私たちが守っている原則をまとめます。
UIとUXはどう違うのか
二つの言葉はよく一緒に使われますが、指す範囲が異なります。
- UI（User Interface）は、プレイヤーが見て触れるものです。体力バー、ミニマップ、メニューボタン、インベントリ画面、フォントやアイコンがここに含まれます。
- UX（User Experience）は、それらすべてを通してプレイヤーが味わう体験全体です。ゲームを起動して最初の1回を始めるまでに何回タップする必要があるか、欲しいアイテムを見つけるまでにどれだけ迷うか、うっかり押し間違えたときに元に戻せるか、といったことがUXの問題です。
きれいなボタン（UI）を作っても、そのボタンがメニューの4階層下に隠れていればUXは悪くなります。逆に、無骨な画面でも必要な情報が必要なときに見えるなら、UXは良いと言えます。ゲームUI・UXデザインは結局、「プレイヤーが今知るべきことを、できるだけ邪魔をせずに伝えること」と要約できます。
HUD：画面上の計器盤
ゲーム画面に重ねて表示される情報をHUD（ヘッドアップディスプレイ）と呼びます。飛行機のコックピットの前面ガラスに情報を映し出す装置から取られた名前です。HUDによく含まれる要素は次のとおりです。
| 要素 | 役割 | 代表的な形 |
|---|---|---|
| 体力・残機 | 今どれくらい危険か | 体力バー、ハート、数字 |
| 武器・弾薬 | 今何ができるか | 弾倉の数、武器アイコン |
| 進行状況 | どこまで来たか | スコア、お金、周回数、レベル |
| ミニマップ・コンパス | どこへ行くべきか | レーダー、目標の矢印 |
| 状況情報 | 今だけ必要なもの | 「A - ドアを開ける」のような案内 |
| 照準 | どこを狙っているか | 十字線、カーソル |
同じ情報でも、表現方法はいくつもあります。体力は鉄拳やストリートファイターのように減っていくバーで見せることもできれば、ゼルダの伝説のようにハートの数で見せることもできます。ギアーズ・オブ・ウォーは体力を常に表示せず、ダメージを受けると画面に赤い歯車の紋様が浮かび上がり、ダメージが大きいほど濃くなる方式を採用しました。
画面の外ではなく世界の中に：ダイジェティックUI
HUDのほとんどは「非ダイジェティック」です。つまり、ゲーム世界の中の登場人物には見えず、プレイヤーだけが見る情報です。これに対して、情報をゲーム世界の中の物に溶け込ませる方式を「ダイジェティック（diegetic）UI」と呼びます。
最もよく引用される例がDead Space（2008）です。主人公アイザックの体力は宇宙服の背骨に沿って光るバーで表示され、弾薬の数は武器を構えたときに銃の上に表示されます。マップ、インベントリ、ショップ、ビデオ通話まで、すべてゲーム内のホログラムで表示されます。メニューを開いてもゲーム内の時間が止まらないため、怪物が出る宇宙船の中で持ち物をあさっている瞬間にも緊張が途切れません。発売当時、批評家たちは一般的なHUDがまったくないことを肯定的に評価しました。
ダイジェティックUIは没入感を高めますが、万能ではありません。Dead Spaceは三人称視点で主人公の背中が常に画面に見えているため、この方式が機能しました。一人称のゲームで同じ方法を使うと、情報を見るために視線を動かさなければならない不便さが生じることがあります。バイオハザード2のように、足を引きずったり息を切らしたりするキャラクターの姿でケガを知らせる方法もありますが、正確な数値がわかりにくいという欠点があります。
極端な例として、ICOはHUDをまったく置かず、環境と音だけで情報を伝えます。静かな雰囲気のゲームでは、画面を空けること自体がデザインになります。
必要なときだけ現れる情報
最近よく使われるのが「状況対応型（動的）HUD」です。常にすべての情報を表示するのではなく、今必要なものだけを見せます。
レッド・デッド・リデンプション2では、馬に乗って移動しているときはミニマップと馬の体力くらいしか表示されませんが、戦闘が始まると弾薬、主人公の体力とスタミナ、特殊能力のゲージ、馬の状態があわせて表示されます。画面がすっきりしていれば景色を楽しみやすく、緊急時には必要な情報がすべて集まります。
選択をプレイヤーに委ねるゲームもあります。Horizon Zero DawnはHUDの要素一つひとつを「常に表示」「必要なときだけ」「表示しない」から選べるようにし、ワールド オブ ウォークラフトはスクリプトでインターフェースを大きく作り変えられるほど、ユーザーによる改変を幅広く認めています。
ここから得られる原則はシンプルです。すべての情報が常に重要なわけではないこと、そして何が重要かは状況とプレイヤーによって異なることです。
手と目の法則：操作が快適でこそUXは良くなる
UXでよく引用される法則に、フィッツの法則（Fitts's law）があります。心理学者ポール・フィッツが1954年の論文で提案したもので、目標を指し示すのにかかる時間は、目標までの距離と目標の大きさによって決まるという内容です。簡単に言えば、遠くて小さいボタンは押しにくく、近くて大きいボタンは押しやすいということです。
当たり前に思えますが、モバイルゲームではこの法則に反する画面がよく見られます。私たちが画面を作るときに確認している項目は次のとおりです。
- よく押すボタンは親指が届く場所に。 スマートフォンを両手で持つと、画面下側の左右が最も楽です。
- 危険なボタンは遠くに、そしてもう一度確認を。 「購入」と「閉じる」が隣り合っていると、ミスが起きます。
- 指で隠れる場所に重要な情報を置かない。 タッチしている指のすぐ上の数字は見えません。
- 押したという反応をすぐに返す。 ボタンが少しへこんだり音が鳴ったりしないと、プレイヤーは二度押ししてしまいます。
操作設計が体験全体を変えた例もあります。Dead Spaceの開発中、素早く振り返る機能が何度も追加されては削除されたそうですが、それは残っていたボタンにこの機能を割り当てたところ、テストプレイヤーが危険な瞬間にうっかり振り返ってしまうことが起きたためだといいます。良い機能でも、間違った場所にあれば邪魔になります。
読みやすい画面のための基本
派手な演出よりも先に押さえるべき基本があります。
- 階層（hierarchy）： 最も重要な情報が最初に目に入るようにします。大きさ、色、位置で順序を決めます。
- 一貫性： 同じ色は同じ意味であるべきです。赤がある場所では危険、別の場所では割引を意味していたら、プレイヤーは混乱します。
- コントラストと可読性： 明るい背景の上の白い文字や、小さすぎる文字は避けます。小さなスマートフォンの画面で実際に確かめてみるのが最も確実です。
- 色だけに頼らない： 色の区別が難しいプレイヤーもいるため、色と一緒に形やアイコンでも区別できるようにします。
- フィードバック： 何をしたのか、その結果がどうなったのかをすぐに見せます。スコアが上がれば数字が跳ね上がり、ダメージを受ければ画面の端が赤くなる、といった具合です。
情報がそのままゲームになるとき
どんな情報を見せるかによって、ゲームの性格そのものが変わることもあります。私たちのRICOSHOT: Golf Puzzleは、ボールを打つ前に壁で跳ね返る予想軌道を画面に表示します。この線一本によって、ゲームは勘で打つゴルフではなく、角度を計算するパズルになります。逆にこの情報を隠していたら、同じレベルでもまったく違うゲームになっていたでしょう。UIを設計するときの「何を見せるか」は、「どんなゲームを作るか」と同じ問いなのです。
おわりに
良いゲームUI・UXを判断する最も良い方法は、初めて遊ぶ人にゲームを渡して、何も言わずに見守ることです。どこで指が止まるのか、何を探して画面をきょろきょろ見回しているのかを見れば、直すべきところが見えてきます。プレイヤーが画面を意識せずゲームだけに集中できるなら、そのUIは役割を果たしたと言えます。
