レベルアップ：ゲームUIのガイド（インフォグラフィック付き）

公開: 2022-03-11

60年前、ニューヨーク州アプトンのブルックヘブン国立研究所はオープンハウスを開催しました。ラボを見学した訪問者は、 TennisforTwoというタイトルのゲームであるインタラクティブな展示に接しました。セットアップは簡単でした。5インチのアナログディスプレイと2つのコントローラーで、それぞれに1つのノブと1つのボタンがあります。世界初のビデオゲームが誕生しましたが、2年後、展示は終了しました。

12年が経過し、不気味に似たアーケードゲームがAndyCapp'sTavernというバーに現れました。ゲームの名前は？ポン。そのメーカー？アタリ。一夜にして、急成長するビデオゲームの世界が一変しました。目新しさは産業になりました。

Pong以来、ビデオゲームグラフィックスの複雑さは飛躍的に進化しました。私たちは、想像できるすべての軍隊からのエイリアンの昆虫、エルフの冒険、そして兵士に遭遇しました。私たちはキノコの王国、ボクシングのリング、そして敵対的な風景の膨張する宇宙に勇敢に立ち向かいました。変なキャラクターや不可能なプロットラインを思い出すのは楽しいですが、ビデオゲームをプレイする価値のあるデザイン要素であるUIコンポーネントについても説明する価値があります。

ウェブサイトやモバイルアプリと同様に、ビデオゲームには、プレーヤーがナビゲートし、情報を見つけ、目標を達成するのに役立つ共通のUIコンポーネントがあります。スタート画面からコインカウンターまで、ビデオゲームのUIコンポーネントは、プレイアビリティ（プレーヤーの楽しみと娯楽の体験）の重要な側面です。これらのコンポーネントがゲーム体験にどのように影響するかを理解するには、ビデオゲームデザインに不可欠な2つの概念であるナラティブとフォースウォールにすばやく取り組む必要があります。

物語

物語はビデオゲームが語る物語です。

第四の壁

第四の壁は、ゲームプレーヤーとゲームが行われるスペースとの間の架空の障壁です。

ナラティブと第四の壁は、ゲームに組み込まれているすべてのUIコンポーネントについて尋ねなければならない2つの質問を提供します。

コンポーネントはゲームストーリーに存在しますか？
コンポーネントはゲームスペースに存在しますか？

これらの2つの質問から、4つのクラスのビデオゲームUIコンポーネントが浮かび上がります。ディエゲシス; 空間的な; とメタ。

非ディエゲシス

コンポーネントはゲームストーリーに存在しますか？番号
コンポーネントはゲームスペースに存在しますか？番号

非ディエゲシスUIコンポーネントは、ゲームのストーリーとスペースの外にあります。プレイヤーのアバターを含むゲーム内のどのキャラクターも、コンポーネントが存在することを認識していません。非ディエゲシスコンポーネントの設計、配置、およびコンテキストが最も重要です。

ペースの速いゲームでは、非ディエゲシスコンポーネントがプレーヤーの没入感を妨げる可能性があります。しかし、戦略が重いゲームでは、リソースとアクションのより微妙な評価をプレーヤーに提供できます。

非ディエゲシスコンポーネントは、一般的にビデオゲームで統計メーターとして表示されます。それらは、ゲームプレイ中にプレイヤーが蓄積して消費するポイント、時間、ダメージ、およびさまざまなリソースを追跡します。

ビデオゲームのUI — スーパーマリオブラザーズ3では、スタットメーターはゲームの世界とストーリーの外に存在するため、非ディエゲシスです（ゲーム内のキャラクターはそれがそこにあることを知りません）。

ディエゲシス

コンポーネントはゲームストーリーに存在しますか？はい
コンポーネントはゲームスペースに存在しますか？はい

ディエゲシスUIコンポーネントはゲームのストーリーとスペースの両方に存在し、ゲーム内のキャラクターはコンポーネントを認識しています。それらはゲームのストーリーと空間内に存在しますが、十分に考慮されていないディエゲシスコンポーネントは、プレイヤーの注意をそらしたりイライラさせたりする可能性があります。

スケールは、ディエゲシスコンポーネントをトリッキーにします。たとえば、車両のダッシュボードにあるゲーム内の速度計は、プレーヤーがはっきりと見るには小さすぎる可能性があります。一部のゲームでは、ハンドヘルドのディエゲシスコンポーネント（マップなど）を2Dの全画面表示に切り替えて、非ディエゲシスにすることができます。

ゲームインターフェース — 解体レーシングゲームのWreckfestでは、車はディエゲシスのUIコンポーネントです。レースの過程で、プレイヤーが競争からノックアウトされるまでの距離を示す目に見えるダメージを受けます。

空間的な

コンポーネントはゲームストーリーに存在しますか？番号
コンポーネントはゲームスペースに存在しますか？はい

空間UIコンポーネントはゲームのスペースにありますが、ゲーム内のキャラクターには表示されません。空間コンポーネントは、多くの場合、視覚的な補助として機能し、プレーヤーがオブジェクトを選択したり、重要なランドマークを指摘したりするのに役立ちます。

テキストラベルは、空間UIコンポーネントの典型的な例です。ファンタジーゲームやアドベンチャーゲームでは、プレイヤーは見た目がよくない重要なオブジェクトに遭遇する可能性があります。テキストラベルはあいまいさをすばやく取り除き、プレーヤーをゲーム体験に没頭させます。

ビデオゲームのUIデザイン — アメリカンフットボールのフランチャイズであるマッデンには、プレーヤーがアバターを選択してゲームのシナリオを理解するのに役立つ空間UIコンポーネントがあります。

メタ

コンポーネントはゲームストーリーに存在しますか？はい
コンポーネントはゲームスペースに存在しますか？番号

メタUIコンポーネントはゲームのストーリーに存在しますが、ゲームのスペースには存在しません。プレーヤーのアバターは、メタコンポーネントを認識している場合と認識していない場合があります。従来、メタコンポーネントは、プレーヤーのアバターへのダメージを示すために使用されてきました。

メタコンポーネントは、ゲームの2D平面にゆっくりと蓄積する汚れの層のように非常に微妙な場合がありますが、ゲーム体験で目立つように機能する場合もあります。アクションゲームやアドベンチャーゲームでは、視野全体が揺れたり、ぼやけたり、変色したりして、プレーヤーがダメージを受けたことを示します。

最高のビデオゲームUI — ゼルダの伝説は、スクロールテキスト（メタコンポーネント）を利用して物語を進め、プレイヤーに役立つヒントを提供します。

ビデオゲームのUIコンポーネントの分類は、必ずしも切り詰められているとは限りません。ライフメーターは、あるゲームではディエゲシスである場合がありますが、別のゲームでは非ディエゲシスである場合があります。ゲームの物語とそのプレイヤーと第4の壁との関係によっては、コンポーネントによってクラス間の境界線が曖昧になる場合があります。同様に、ゲームのアートディレクションに応じて、無限の範囲の視覚スタイルと構成をコンポーネントに適用できます。

このインフォグラフィックのPDFバージョンをダウンロードしてください。

このインフォグラフィックをWebサイトに埋め込みます。

•••

Toptal Designブログでさらに読む：

暗いUI。良い点と悪い点。規則ルール。
デザインの基礎–ビジュアル階層のガイド（インフォグラフィック付き）
拡張現実vs.仮想現実vs.複合現実–入門ガイド
VR/ARデザインへの飛躍
ゲーミフィケーションデザインへの実用的なアプローチ