効果的な UI とゲームデザインでプレイヤーを没頭させる方法

近日公開予定の e ブック「User interface design and implementation」から、ベテランゲームデザイナーの Christo Nobbs 氏が、UIとゲームデザインの相互作用について考察している箇所を抜き出してご紹介します。

近日公開予定の e ブック「User interface design and implementation」では、UI アーティストやデザイナーが Unity でより良いインターフェースを構築する方法を説明しています。このガイドでは、Unity で利用できる 2 つの UI システムのワークフローをカバーしていますが、主に Unity 2021 LTS 以降の Unity UI Toolkit を対象としたものです。「The Unity game designer playbook」にも大きく貢献したゲームデザイナー Christo Nobbs がこの最新ガイドに寄せた、UI とゲームデザインによってプレイヤーの心をつかみ続ける豊かな没入感を生み出す方法について解説したセクションを紹介します。

成功するゲームには没入感があります。VR シミュレーションであれ、モバイル向けのロールプレイングゲーム（RPG）であれ、優れたゲームは私たちを別の世界に連れて行ってくれます。

没入感を出すには、UI とゲームデザインの絶妙なバランスが求められます。UI は機能するものでなければなりませんが、同時にゲームのアートディレクションや全体的なアイデンティティを守るものでなければなりません。コツは、状況に応じて適切な UI を使い分けることです。

プレイヤーがアイテムを拾ったときや敵を倒したときに、画面上にアイコンを表示したほうがいいでしょうか。それともそうすると気が散ってしまうでしょうか。ポップアップの位置がずれていると、見ている人の視点がアクションから外れてしまわないでしょうか。これらの疑問は、UI デザイナーやアーティストとして、ゲームの大きな文脈の中で考える必要があるものです。

現在のトレンドの 1 つに、ダイエジェティック UI があります。現代のゲームプレイヤーは、体力バーやメニュー画面といった従来のゲーム世界から切り離された UI を、メディアにおける慣習として生得的に認めています。こうした UI はユーザーとコミュニケーションを取るための「第四の壁」に貼られた人工的なデバイスです。しかし、ダイエジェティック UI は逆に、物語やナラティブに自らを埋め込むのです。ゲーム世界の一部をユーザーインターフェースとして機能させます。

ゲームキャラクターが、スクリプト付きのタイムラインシーケンスで武器から空になったマガジンを取り出す場面を想像してください。このアニメーションは、ヘッドアップディスプレイ（HUD）ベースの弾薬カウンターを置き換えることができます。

『Dead Space』シリーズは、しばしばダイジェスティックインターフェースの代表例として引用されます。ここでは、プレイヤーは SF 的なサバイバルスーツを着用しますが、これがゲームの UI を動かすのです。スーツのホログラフィックディスプレイには、ゲーム内の統計情報やインベントリが映し出され、背中のカラーライトはライフ残量のインジケーターとしても機能します。その結果、物語に埋め込まれ、シームレスに統合された UI が完成したのです。

iRacing.com Motorsport Simulations 社の『iRacing』では、リアルな車内ダッシュボードのインジケーターがダメージを表示し、車のハンドリングにも影響します。ビネットを使ったり HUD のアイコンを明示的に点滅させたりせずとも、音声や視覚的な手掛かりから、プレイヤーは車両に異常があることを理解できます。

逆に、ゲームが 没入的すぎる場合は、デザイナーは「逃げ道」を作ることもあります。ホラーゲームでは、一時停止ボタンがプレイヤーの「退避呪文」となります。これは激しすぎるシーンにおいて、意図的に没入感を壊すものです。

経験豊富なデザイナーは、UI がゲームのアイデンティティに適合していなければならないことを理解しています。インターフェースは、クリーンで読みやすく、状況に応じた適切なものである必要があります。今のハードウェアなら、伝えたいストーリーをサポートする高度な UI を実現できます。

もう一方の端には、『Counter-Strike: Global Offensive』（CS:GO）、『Overwatch』、『League of Legends』などの対戦型ゲームがあり、これらのゲームは情報を集める UI に依存しています。こうしたゲームの UI は効率的でゲームプレイを支援するものでなければならないので、HUD が使われます。ここでは、ダイエジェティックなインターフェースはあまり適切ではありません。第四の壁を破ることで、より良いゲームを作ることができるのです。

プレイヤーは計画された体験に参加していると強く意識しているので、それに合わせて残り時間、チームメンバー、バイタル、ミニマップなど、「プレイ空間」を把握しやすいインターフェースになっています。これはある意味で、観客全員に対して情報を表示する UI が情報を伝えるスポーツイベントを模したものだと言えます。

チームのポジションを表示したり、ウォールを使って選手の情報を表示したりと形はさまざまですが、こうした UI には戦略や戦術を強化する効果があります。また、プレイヤーに緊張感を与え、体験を盛り上げることができます。UI のおかげで、オンライン対戦で負けた後に観戦するのも、時にはプレイするのと同じくらい楽しくなります。

『World of Tanks』では、各プレイヤーのタンクの上に空間 UI 要素が表示され、チームメイトや敵の情報（名前、Tier、ライフ、タンクのアイコンなど）が表示されます。HUD のポイントバー、ナビゲーション要素、ミニマップは、すべて明瞭でわかりやすいビジュアル言語を共通して使っています。

デザイナーと協力することで、ゲームの UI ニーズをより理解することができます。ゲームプレイは、プレイヤーへの挑戦と、プレイヤーのスキルの向上とを調和させたものです。フローチャネルに乗るようにするのが理想的です（下図参照）。

どちらか一方に傾きすぎると、プレイヤーを退屈させてしまう恐れがあります。それを緩和するために、UI 要素を減らして、課題のレベルを上げます。そうすれば、あまり手をかけずにプレイヤーがゲームプレイに手ごたえを感じさせることができます。

他方で、ゲームを難しくしすぎると、プレイヤーを不安にさせてしまいます。この場合、UI を追加することでゲームプレイの混乱を軽減し、目標とする複雑さを適度なレベルに戻すことができます。

UI は、このフローチャンネルにゲームを誘導するためのデザイン装置とお考えください。インターフェースは、見る人の時間を無駄にしないものでなければなりません。その内容（重量や体力など）を明確に伝えるべきで、それ以外のものは不要です。デザイナーは、製品が出荷可能なレベルまで進化する過程で、何度も繰り返し作業を行うことになるでしょう。あとはプレイヤーに、そしてゲームプレイに任せてましょう。

今日のインターフェースデザイナーは、膨大に蓄積されたゲームアプリケーションの事例から学ぶことができます。そうした事例は、Game UI Database で探すことができます。巨大なサイトですが、HUD 要素、タイプ、スタイル、機能などのカテゴリーで絞り込みが可能な検索機能に優れたサイトでもあります。ここでは数百本の発売済みゲームのメニューや画面をじっくりと観察することができます。

もう 1 つの素晴らしいリソースは、Interface in Game です。UI 要素の動画を閲覧できるのが特徴です。このデータベースを使って、プラットフォームやジャンル別に幅広いタイトルを検索することができます。ビジュアルエフェクトや UI の細部にまで磨きをかける必要があるという方は、ここで参考情報を数多く得られるはずです。

ゲームのインターフェースを調べていくと、特にジャンルごとのパターンが見えてきます。例えば FPS（一人称視点シューティング）では、画面の下に体力のステータスが表示されているだろうと考えます。多くのアプリケーションがこの方式を採用しているので、ほとんど確立された慣例になっています。

UI をデザインする際には、そのジャンルのビジュアル言語を把握することが重要です。RPG を作るなら、他の RPG がインベントリやスキルツリー、レベルアップなどをどのように扱っているかを見てみましょう。プレイヤーに馴染みのあるものを作ることで、確立されたスタイルの部分についてはわかると考え、ゲームプレイに飛び込むことができるのです。

UI デザインパターンはでたらめなものではありません。ある種の共同作業を通じて、時間をかけて進化してきたのです。デザイナーはすでに何が有効かを見極めており、新しいデザインは既存のゲームの規範を基礎として構築されるだけです。こうした過去の設計上の判断から学ぶことができます。時間短縮になるだけでなく、ゲーム内で特定のパターンやビジュアルが出てくるだろうと期待しているプレイヤーも満足させることができます。

UI デザインパターンの詳細については、Double Eleven 社のシニア UI アーティストである Edd Coates 氏による、「Best practices for designing effective user interface」をご覧ください。

「UI Toolkit sample - Dragon Crashers」は Unity Asset Store から無料でダウンロードできる新しいデモです。このサンプルは、ミニ RPG である 2D プロジェクト『Dragon Crashers』のスライスを題材に、実行時に Unity 2021 LTS の UI Toolkit ワークフローを使いながら、皆さんのアプリケーションでどのように UI Toolkit を使い、フル機能のインターフェースを提供できるかを示したものです。

Unity クリエイター向けのより高度な e ブックは、How-to ハブでご覧いただけます。