ビデオゲームのUXとUIの基礎ゲームがプレイヤーとどのように対話するか
Unity チーム - Unity Technologies
このウェブページは、お客様の便宜のために機械翻訳されたものです。翻訳されたコンテンツの正確性や信頼性は保証いたしかねます。翻訳されたコンテンツの正確性について疑問をお持ちの場合は、ウェブページの公式な英語版をご覧ください。
ビデオゲームのUIとUXの初心者ガイド：HUDとは何か、インターフェースが存在し得る4つの場所、シンプルなデザインプロセス、そしてすべてのゲームに必要なアクセシビリティの基礎。
すべてのゲームは絶えずあなたと話しています。ヒットを受けると体力バーが減ります。押せる時にボタンが光ります。何かを拾うと音が鳴ります。ほとんどの場合、あなたはこれらの中のどれにも気づきませんが、それがポイントなのです。良いインターフェースフェースデザインは、邪魔になることなく再生するのに役立ちます。
このガイドでは、初めてのクリエイター向けにビデオゲームのUIとUXの基礎を解説します。インターフェースが何で構成されているか、それが存在する可能性のあるさまざまな場所、簡単なデザインプロセス、そしてより多くの人がゲームを楽しむのに役立つアクセシビリティの基礎について説明します。
UI 対 UX違いは何ですか？
ゲームのユーザーインターフェースフェース（UI）デザインとは、プレイヤーがゲームを理解しコントロールするために使用するあらゆるもの、つまりメニュー、ボタン、ヘッドアップディスディスプレイ（HUD）、アイコン、プロンプト、マップ、フィードバック効果の計画と作成のことです。ユーザーエクスペリエンス（UX）は全体像です。ゲーム全体がどれだけ使いやすく、消去やすく、快適に感じられるかということです。
test for both はシンプルです。良いUIはプレイヤーがプレイに集中できるようにする。悪いUIは邪魔をしたり、混乱させたり、フラストレーションをかけたりします。
典型的な、非ダイエジェティックなゲームUI。左側には、丸みを帯びたオレンジ色の図形が、起伏のある丘と三つの雲のある晴れた空を背景にして地面に立っています。2つの浮体式プラットフォームがあります。一つ目はオレンジ色のピルキャラクターの正面に浮かんでおり、その上には3枚の小さなコインが浮かんでいます。右側には、宝箱があり、プレイヤーに「E」を押して開けるように促す、わずかに高くなった浮遊プラットフォームがあります。画像の左上から右へ、以下のものが表示されています。3つのハートで表されたヘルスシステム（2つは満タンで1つは空）、タイマー、収集されたコインを示すカウンター（1,250）、そしてゲームが一時停止していることを示す一時停止アイコンです。画像の下中央には、にんじん3つ、紫色のポーション、金のキーを含む利用可能なアイテムを示すUI要素があります。Unity Spark（Unity Ultra）によって生成された画像、2026年10月22日。
ビデオゲームインターフェースの構成要素
ほとんどのゲームインターフェースは、いくつかの馴染みのある要素で構成されています。
- HUD:プレイ中に画面に表示される情報、例えば体力、スコア、タイマー、またはミニマップなど。キー要素は通常、画面の端の近くに配置され、中央はアクションのために消去ておきます。
- メニュー再生前やプレイ中の画面 – ゲームの開始、設定の変更、アイテムの管理など。
- プロンプト:プレイヤーにどのボタンを押すか、何と対話するできるかを伝える短いヒント。プロンプトを表示することで、プレイヤーはすべてを暗記する必要がなくなります。
- フィードバック何かが起こったことを確認する音、アニメーション、エフェクト。すべてのボタンの押下には、1秒未満で視覚的および聴覚的な反応が必要です。
インターフェースが存在できる4つの場所
ゲームデザイナーは、インターフェースをゲームワールドにおける存在位置によって説明することがよくあります。広く使用されているフレームワークは、それを4つのタイプに分類します。
ノンダイエジェティックUI
この種のインターフェースはゲームワールドの外にあり、プレイヤーにのみ表示されます。コーナーにある体力バーのような、最も古典的なHUD要素がここに収まります。
シンプルなフラットスタイルでレンダリングされたインベントリシステムの非ダイエジェティックUIの例。インベントリの左側には、7マスを4列に並べた28個のスロットがあります。1行目にはポーションが入っています（赤いポーション5個、青いポーション3個、緑のポーション2個、涙滴型のポーション8個）。2行目には武器（剣、斧、盾）が含まれています。3行には材料（葉12枚、羽8枚、アメジスト2個、赤い葉4枚、金属キューブ9個）が含まれています。4行目にはクエストアイテム（1つのキーと1つのスクロール）が含まれています。右側には回復薬がハイライトされており、使用、ドロップ、装備のオプションがあります。ヒーリングポーションに関するキー情報も表示されています（3秒かけて50の体力を回復し、25ゴールドコインで売ることができます）。Unity Spark（Unity Ultra）によって生成された画像、2026年10月22日。
DiegeticUI
この種のインターフェースはゲームワールドの中に存在するため、キャラクターもそれを見たり聞いたりすることができます。例えば、キャラクターのスーツに組み込まれた体力表示や、キャラクターが実際に持っているマップなどです。
ダイエジェティックUIを示すピクセル画像緑のジャケットに毛皮の袖口、赤いミトンをつけたプレイヤーキャラクターの透視から見たゲーム内のマップ。プレイヤーのARMには、ハートと赤いバーで表された総体力ポイントを示すHUDを備えたアームガードを着用している。彼らは右手で、残りの燃料の量をオレンジ色のバーで示すランタンを持っています。Unity Spark（Unity Ultra）によって生成された画像、2026年10月22日。
空間UI
空間UI要素はゲームの3Dスペースに表示されますが、ワールドそのものの一部ではありません。例えば、味方プレイヤーの周りのアウトラインやキャラクターの頭上に浮かぶアイコンなどです。
Meta UI
メタUI要素とは、血しぶきやプレイヤーがダメージを受けた際の端の赤フラッシュのように、ゲームワールド内のオブジェクトを通してではなく、画面そのものを通して伝達される効果のことです。
空間UIとメタUIの例を含むビデオクリップ2つの抽象的な錠剤のような形のキャラクターがエレベーターのドアの両側に立っている。左の図（ルーク）は青色で描かれ、その頭上にひし形があることで味方であることを示しています。正しいキャラクターは、注意マークが付いた赤色で、体力が半分ほど減っていることを示す体力バーがあり、敵であることを示しています。ドアには「リアクター」と記されており、プレイヤーから140mの距離にあります。シーン全体が、プレイヤーが危険にさらされていることを示す点滅する赤いエフェクトに囲まれている。Unity Spark（Unity Ultra）によって生成されたビデオ、2026年10月22日。
ほとんどのゲームは複数の種類のUIを組み合わせています。完全にダイエジェティックになるのは特に難しいです。すべての情報をワールドに盛り込むことはゲームを再生しにくくするため、通常は妥協が必要になります。ワールドに存在するインターフェースを望むなら、後から追加するのではなく、最初から計画するべきです。
ビデオゲームUIを設計するための7つのステップ
インターフェースフェースを消去に設計するために、デザイナーである必要はありません。ビデオゲームのUIを簡単にデザインするための7つのステップを以下に示します。
- 入力と出力をリスト化する:プレイヤーがしなければならないこと（移動、ジャンプ、一時停止、アイテム選択）と、ゲームがプレイヤーに伝えるべきこと（体力、スコア、目的、危険）をすべて書き出してください。サポートするデバイス（タッチ、コントローラー、またはキーボード）を決定してください。
- 優先する重要度と変更頻度で出力の順位付けをしてください。重要な、絶えず変化する情報は、目につきやすい場所に置かれる。めったに使われないオプションはメニューに入ります。
- アフォーダンスを使用する何かが何をするのかを示唆する形状、アイコン、動作を選択する。盛り上がったボタンは押せるように見える。可能な限り慣習に従ってください。
- 即座にフィードバックを提供する:すべての入力には、すぐに視覚的および聴覚的な反応が必要です。
- 削減不必要なものをすべて取り除く。数字は単純な棒になることができますか？弾薬が少なくなっているときに表示される弾薬カウンターのような、必要なときだけ情報が表示されることはありますか？
- プロトタイプ紙または画面上で素早くモックアップを作成する。
- プレイテスト人々があなたのインターフェースを使うのを見て、ためらう点を記録し、繰り返してください。
消去なビデオゲームインターフェースの一般的な原則
広く使用されているユーザビリティガイドラインは、ゲームにきれいに翻訳されます。最も役立つものの一部
- 何が起こっているか表示する:ゲームがセーブされているか、何がロードされているか、そして彼らがどれだけの体力を持っているかをプレイヤーに知らせてください。
- 人々がすでに知っている記号を使用する:健康のためのハート、マップのアイコンをマップ。
- プレイヤーを戻す彼らがキャンセルしたり、間違いを元に戻したり、すでに見たシーンをスキップできるようにする。
- 一貫性を保つ同じボタンはどこでも確認されるべきであり、各アイコンは一つの意味を保つべきです。
- 間違いを防ぐ保存を削除する前に「本当に削除しますか？」と尋ね、実行不可能な操作はグレーしてください。
- きれいに保つ今必要なことだけを見せてください。
いくつかのレイアウトのヒントもヘルプます：
- ゲームプレイのために画面の中央を消去してください。
- プレイヤーの距離から読みやすいようにテキストを作成してください。部屋の向こうのテレビには、携帯電話よりも大きなテキストが必要です。
- 携帯電話では大きなタッチターゲットを使用し、コンソールではすべてのメニューがコントローラーで動作するようにしてください。
ビデオゲームデザインにおけるアクセシビリティの基礎
アクセシブルなインターフェースフェースデザインは、より多くの人があなたのゲームを再生するのを助け、最も効果的なステップの多くはシンプルです。ゲームアクセシビリティガイドラインは、これらを基本的な、広く適用可能な推奨事項として挙げています。
- プレイヤーが操作を再マップする割り当てできるようにする。
- 読みやすいデフォルトフォントサイズと、シンプルで消去な言葉遣いを使用してください。
- テキストまたはインターフェースと背景のコントラストを高くしてください。
- 色だけで本質的な情報を伝えないでください。
- 音だけで本質的な情報を伝えないでください。
- 効果音、音声、音楽で個別の音量調整が可能な重要なスピーチの字幕を提供してください。
- インターフェースのすべての部分がゲームプレイと同じ入力メソッドで動作するようにしてください。
- 画面上のボタンを大きく、間隔を広くしてください。特にタッチスクリーンで。
- 難易度レベルの選択肢を提供し、プレイヤーの設定を保存する。
色、形状、音を組み合わせることは一般的に良い習慣です。なぜなら、そのシグナルの一つが欠落しても情報が失われないからです。
標準的でカスタマイズ可能な設定メニューがアクセシビリティ画面で開いている。これには、3種類のテキストサイズオプション、字幕のトグル、音楽、効果音、音声の個別の音量レベルを制御するためのスライダー、ハイコントラストのトグル、およびコントロールを再マップするオプションが含まれます。Unity Spark（Unity Ultra）によって生成された画像、2026年10月22日。
ビデオゲームにおける良いUIと悪いUI
小さな選択がどのように積み重なるか：
ビデオゲームにおける良いUIと悪いUIの比較表Claude Opus 5.5によって生成された画像、2026年10月23日。
設計の悪いUIを示す画像オレンジ色のカプセル型の物体が、起伏のある丘と三つの雲のある晴れた空を背景に地面に立っている。様々なUI要素が画面の中央に密集して重なり合い、プレイヤーの視界を遮っています。文字が小さく読みにくく、右下のメニュー項目も同様です。Unity Spark（Unity Ultra）によって生成された画像、2026年10月22日。
ゲームのユーザーインターフェースデザインチェックリスト
ゲームを共有する前に、尋ねてください：
- プレイヤーは常に最も必要とする情報を見ることができるでしょうか？
- すべてのアクションに即座のフィードバックがありますか？
- 画面上に不要なものはありますか？
- 重要な情報は、色や音だけでなく、複数の方法で表示されていますか？
- 誰か新しい人はヘルプなしで操作を理解できますか？
- 誰かがそれを再生しているのを見たことがありますか？
プレイヤーはプレイすることに集中してください
最高のインターフェースは目に見えないと感じられる。彼らはプレイヤーに知っておくべきこと、いつ知るべきかを正確に伝え、それから邪魔にならないように立ち去る。プレイヤーが何をすべきか、何を見るべきかから開始、シンプルに保ち、実際の人間でテストしてください。
最初のゲームUIをビルドする準備はできましたか？開発者である必要はありません。Unity Sparkは、ゲームを記述し、実際のウェブエディターで洗練させ、他の人が再生できるように公開できる、UnityのブラウザーベースのAIゲーム作成プラットフォームです。
ヘッダー画像に関する注記：青とオレンジのぼやけた背景に重ねられた空白のゲーム設計ドキュメントの抽象的な表現。Claude Opus 5.5によって生成された画像、2026年10月7日。