ユーザーインターフェイス (UI) は、芸術的な視覚デザインとコミュニケーション中心の情報デザインを組み合わせて、プレイヤーが相互作用するメニュー、ショップレイアウト、ヘッドアップディスプレイ (HUD) および他のインターフェイスを生成します。ユーザーエクスペリエンス (ユーザー体験) は、プレイヤーがゲームとどのように対話し、選択をゲームに公開し、次の選択にどのように移行するかに関連しています。UIとUXはしばしば協力して作業しますが、UXは視覚的な情報デザインではなく、プレイヤーの経験により大きな焦点を当てています。
UI
UI は、ヒットポイント、クエスト目標、およびゲームをナビゲートするための価格など、プレイヤーが意思決定を行い、ゲームをナビゲートできる重要な情報を共有します。ゲームがプレイヤーとコミュニケーションする主な方法の多くが UI であるため、プレイヤーの経験にとって重要です。悪く設計された UI は、プレイヤーを混乱させ、悩ませ、悪い継続利用率をもたらす可能性がありますが、専門に設計された UI は、エンゲージメントと資収益化に貢献する可能性があります。効果的に設計された UI は次の原則を採用しています：
- 優先順位付け
- 注意
- ビジュアル言語
- 規約
- 一貫性
優先順位付け
最も重要な情報を最初に共有することを 情報の階層 と呼びます。特にゲームでは、プレイヤーが制限された情報に基づいて即座に決定を下すことが頻繁にあります。UI の優先順位を設定するときは、プレイヤーのエクスペリエンスに不可欠かつ最も関連性の高いものを特定し、アクセス可能でありながら簡単に見つけることができるようにします。次の質問を考えてください：
- プレイヤーは現在、何をしていますか?
- 彼らが意識したり、アクセスできたりするのが最も重要なものは何ですか？
- 彼らはどの選択をする必要がありますか？
- それらの選択を行うために、何らかの情報が必要ですか?
- どの程度頻繁にそれらの選択に参加するでしょうか？
プレイヤーが担当する役割、ゲームワールド内の位置、持っているアイテムなどの要因によって、ゲームの進行中に重要な情報と機能が変更されます。UI は、コンテキストに関連するものだけを表示するように設計できます - 各コンテキストで有用なものに応じて、ボタンや情報を交換します。これにより、プレイヤーは常に必要なものを持ち、必要ないものの混乱を避けることができます。
例
無関係な要素は混乱と気を散らす可能性があります。スペルバウンド RPG は、モバイルインターフェイスに特に重要な、洗練されたミニマリストUIを持っています。小さな画面では、過剰なボタン、画面、およびテキストが簡単に圧倒されるため、モバイルインターフェイスには特に重要です。
In スーパーストライカーリーグ 、プレイヤーの相互作用はボールをコントロールできるかどうかによって変わります。ボールがなければ、プレイヤーはダッシュしてタックルしてコントロールを取り戻すことができます。一度入手すると、ボタンはデケとパスに切り替わり、プレイヤーが敵をかわしてボールをパスできるようにします。これらのボタンを交互に使用すると、UI はコンテキストに役立つまま、不必要な気を散らすのを避けます。
In サバイバルゲームでは、 プレイヤーは自分の体力と栄養状況持ち物リストを意識し、マップ、インベントリ、およびツールに素早くアクセスする必要があります。この情報により、彼らは生存のための決定を下し、行動の優先順位を決めることができます。この情報やツールが見つかりにくい、または欠落している場合、生存がより困難になり、無駄に煩わしくなります。
注意
最小限の、優先順位の高い、コンテキスト化された UI にもかかわらず、プレイヤーはまだ自分が必要とするものを見つけるのに助けが必要な場合があります。UI デザイナーは、次のような視覚ツールを使用して、プレイヤーの注意を捕捉し、導くことができます：
- 色: 明るい色は退屈な色よりも注目を集めます。重要なテキスト、ボタン、その他の要素には鮮やかな色を、そうでないものには静かな色を使用します。このコントラストは視認性を高め、気を散らすことを減少します。
- サイズ: より大きな要素は、より目立ちやすく、より小さな要素よりも重要と見なされます。
- スペース: 広いネガティブスペースまたはパッドで囲まれた要素は、目を引きます。
- 距離: グループ化された要素は接続を示唆します。関連する機能やアイテムを互いの近くに配置することで、プレイヤーは自分の関連を理解し、より簡単に見つけることができます。
- 移動: アニメーテッド要素が注目を集めます。軽微な動作でも、静的な相手の中で要素が際立つことがあります。パーティクル効果、バタバタボタン、アニメーションされた矢印は、ガイドのためのチュートリアルでよく使用されます。
これらのツールでは、モデレーションがキーです。明るく動く要素の過度の使用は、プレイヤーを助けるのではなく、混乱させる可能性があります。
例
In 抜け出す のシーズンパスUIでは、季節限定アイコンの下に金黄色のストライプがあり、プレミアム報酬に注目を向け、無料のものと区別して視覚的に区別します。
In ドラゴンアドベンチャー, 視覚優先度は、サイズを増やし、より多くのパッドで分離して、より小さなバンドルと区別することにより、コインバンドルの最高価値に与えられます。
In タワーディフェンスシミュレータ では、サイズと距離が使用されて、デイリータワースキンとデイリークレートを視覚的にグループ化し、区別します。
ビジュアル言語
プレイヤーの注意を画面上の最も重要な要素に向けることに加えて、UI デザイナーはプレイヤーが見ているものを理解するのを助けるビジュアル言語を開発します。ビジュアル言語は、要素の目的、状状況、関連性、および関連性について一目で情報を提供する意図的で一貫したデザイン選択のセットです。言語は、形状、色、スタイルなどのツールから構築されます。ビジュアル言語の使用の一部には、次が含まれます：
アイコン
アイコンは、意味と関連を伝える視覚的な身分を採用できます。たとえば、特定の統計に関連するアイコンは、色のパレットと同様の形状を共有し、プレイヤーが自分の機能を認識し理解できるようにします。
ボタン
プレイヤーの入力の主要な形式として、ボタンは簡単に識別できる必要があります。テキストまたはアイコンを囲む色などのコンテナ内の住宅ボタンは、背景と区別して、インタラクティブに見えるようにします。ハイライトやシャドウを追加すると、3Dの深さを示唆して、触覚的な魅力を高めることができます。
テキスト
重要な高レベルの情報を含むヘッダーとタイトルは、ボディテキストよりも大きく、大胆になるべきです。非常に読みやすく、背景色に対してよくコントラストする色は、考慮すべきです。色や強調のようなスタイリッシュな選択は、ゲーム内のアイテム、統計、または能力のような重要な情報を強調することができます。フォントを選択するときは、常に読みやすさを最優先に考えます。
ビジュアル言語が設計されたら、チーム全体がゲーム全体で言語を一貫して適用する方法を理解するのに役立つ スタイルガイド のセットのルールと例に記録できます。
規約
コンベンションは、多くの異なるゲームで見られる一般的に適用されるデザイン選択です。いくつかの例は次のとおりです：
- ボタンを押すとダイアログを閉じる X シンボル
- 現在使用できないボタンに適用される色グレー
- ボタンまたは機能を覆うロックアイコンで、プレイヤーがまだ獲得またはロック解除していないことを示す
広範囲に使用されているため、プレイヤーは通常、そのような規約に精通しています。この熟練度を活用すると、インターフェイスがより直感的になり、ゲーム固有の指示の必要性が減少します。ターゲットのジャンル内でゲームをプレイすると、ゲーマーが認識できる規則を特定するのに役立つ可能性があります。UI デザイナーは、ゲームにより適したアプローチを選択することができますが、これらの規約を知ることで、意思決定プロセスが向上します。
X 閉じるボタン in 運命の風 , ドラゴンアドベンチャー , BotClash シミュレーター , そして ドア
一貫性
UI デザイナーがどんな決定を下しても、ゲーム全体で一貫して適用する必要があります。一貫性は、プレイヤーがゲームをより効率的にナビゲートする方法を学び、混乱や挫折を防ぐのに役立ちます。
ゲーム内の UI の一貫性の例をいくつか示します：
- 「健康」ステートは、すべてのテキスト、関連するアイコン、および健康バーに緑で表示されます。
- NPC の対話がゲーム内のアイテムを언급するときは、いつでも強調されます。
- 閉じるボタンは常に正方形、赤で、ダイアログの右上隅にのみ表示される白い X を含んでいます。
- プレイヤーがショップでアイテムを買えないときは、価格が赤で表示されます。
これらの選択は意図的であり、プレイヤーの理解とナビゲーションを容易にすることを目的としています。一貫して適用することで、プレイヤーが関連する要素を関連付け、重要なアイテムを特定、筋肉記憶を開発、迅速に情報を共有し、ゲームに没頭してより多くの時間を費やすことができます。
ユーザー体験
UX デザインは、プレイヤーがゲームとどのように対話し、選択をゲームに公開し、次の選択に移行するかに関連しています。UX はユーザーインターフェイス (UI) と密接に働くことが多いものの、視覚的および情報的な UI のデザインよりも、インタラクティビティとプレイヤーの経験に焦点を当てています。
プレイヤーを理解する
UX デザイナーの主な目標は、プレイヤーが使いやすいインタラクションとフローを作成することです。インテュイティブで、邪魔にならず、便利です。そのプロセスは、プレイヤー自身、ゲームのターゲットオーディエンスの理解から始まります。エクスペリエンスのプレイヤーを識別するときは、フォロー中のことを考えてください：
デモグラフィック: デモグラフィックは、プレイヤーグループに関する一般的な情報を明らかにし、デザイン選択を通知するのに役立ちます。たとえば、若いプレイヤーは一般的にモバイルまたはタブレットデバイスでプレイする可能性が個人コンピュータよりも高いので、そのオーディエンスに向けたゲームは、モバイルユーザーエクスペリエンスの設計と調整を優先して行うことが多いです。
経験レベル: 開発者は、少しのゲーム経験、大きな量、またはその間のどこかを持つプレイヤーに向けて設計することを選択できます。ツールバーにアイテムを装備するために番号キーをタップするなど、経験豊富なプレイヤーに熟知されているインタラクション、または c を押してかがむなど、経験のないプレイヤーには明らかではない可能性があり、追加のメッセージやトレーニングが必要になります。
ジャンルの熟練度： 一般の経験レベルと同様、ジャンルの熟練度は、特定のゲームタイプでプレイヤーの経験レベルを反映します。Roblox の人気ジャンルに属するゲーム、例えばロールプレイ、サバイバルホラー、1プレイヤーシューターなどは、以前同じゲームをプレイした可能性の高い多くのプレイヤーがいる可能性があります。他のジャンルのゲームには、経験豊富なプレイヤーが少ないかもしれませんが、チュートリアルと使用性を通じてその経験のギャップは克服できます。
ゲームプレイスタイル： プレイヤーは、競争と達成の収集から探検と協力まで、特定のプレイタイプをよく好みます。これらのプレファレンスは、ゲームメカニクスが好まれるプレイヤーだけでなく、UXの決定にも影響を与えます。デザイナーは、優先するインタラクション、ポリッシュするインタラクション、プレイヤーに提示するインタラクションを考えます。また、これらの相互作用に参加し、それらから感情を引き出そうとするときのプレイヤーのマインドセットと、それらから感情を引き出そうとする目的も考慮します。
これらの要因を考慮し、ターゲットのプレイヤーグループ (またはグループ) を選択した後、彼らに会い、彼らと一緒に遊び、彼らの目標と好みを学んで、デザイン選択についてよりよく情報を提供するようになります。
デザインインタラクション
インタラクション は、プレイヤーがゲームで選択を体験し、コミュニケーションできる機能です。UX デザイナーは、それらのインタラクションが直感的であり、可能な限り説明が少ないことを望んでいます。これを行うには、彼らは次を使用します：
- 規約
- メタファー
- 反響
規約
規約 は、プレイヤーが他のゲームから既に熟知している可能性のあるUXデザインや原則です。
規約の例には、以下があります:
- Roblox 開発者がプレイヤーにアイテムが表示できるかどうかをシグナルするために使用する「E」近接プロンプト。
- 「C」キーでプレイヤーのアバターがしゃがみ、障害物の下に入ったり、狭いスペースに合わせることができます。
- ツールバーからアバターの手に数字キーを装備して、使用できるようにする。
- マッチにキューアップするために、地一致の円に歩いて入る。
特定の実装やデザイン選択が使いやすさのために人気が高まると、規約が確立されます。例えば、「C」をかがむのは、単語のかがむの最初の文字であるため、ナビゲーションバー憶しやすく、WASD、プレイヤーがナビゲートするために使用するキーの隣に便利に配置されています。近づく脅威から隠れたり逃げたりすることがクローンの共通の使用ケースであるため、迅速かつ圧力の下で行う簡単な相互作用は理想的です。
メタファー
メタファー は抽象的なコンセプトをより熟知されたものに関連付け、理解への近道を作成します。この例では、スペルバウンドウィザード RPG から、マジックスペルをキャストする行為は、デッキからカードを引き出すことによって実行されます。デッキベースの UI/UX は、実生活の表現がない呪文の投げ込みの抽象的な行為を、プレイヤーがより簡単に理解しやすく、より迅速に理解できるものに落とし込みます。
フィードバック
ゲームからプレイヤーへの通信は、フィードバックと呼ばれます。フィードバックは、プレイヤーが行ったアクションがゲームに影響を与えたことを理解するのに役立ちます。ゲームの機能を学び、特徴をより使いやすくするための追加のポーランド層を追加するのに貢献できます。フィードバックの例には、以下があります：
- 敵が「ヒット」反応アニメーションを再生し、プレイヤーの武器からダメージを受けたことを示す
- ホバー、デプレット、リリース (選択済み) 状態を示す色を変更するボタン
- プレイヤーが購入を完了すると、レジ「チャチング！」サウンド効果が再生するレジ
- プレイヤーがクエスト目標を完了すると満タンになる進行バー
フィードバックが不足していたり不十分だと、プレイヤーは自分が何を達成したのか、効果が良かったか悪かったか、または使用している機能が正しく機能しているかバグが発生しているかを理解できない可能性があります。
設計フロー
プレイヤーがゴールを完了するには、複数のインタラクションが必要な場合が多い。UX デザイナーは、プレイヤーが 1つのアクションや UI 画面から次へ移動し、それらの経路が論理的で便利であることを確認することが心配されています。
たとえば、ベリーアベニューRP でアバターにアイテムを装備するには、プレイヤーは:
- アバターボタンを見つけてタップする
- アイテムカテゴリを選択 (顔、頭、首など)
- スクロールして関心のあるアイテムを見つける
- アイテムをタップしてアバターに装備する
- 完了ボタンを見つけてタップして、アバターのカスタマイズを終了する
ベリーアベニューRP のアバターカスタマイズフロー Avatar customization flow in Berry Avenue RP
これらのステップは、一緒に取るとアバターのカスタマイズフローを表します。このフローはシンプルで直感的で、アイテムを装備するために必要なステップが少なくて済みます。プレイヤーは多くのアクションを実行したり、何をすべきかについて考えすぎる必要がないため、このフローは 摩擦 が低く、目標に到達するために必要な努力の測定です。
効率的で摩擦の少ないフローを設計するには、使用ケースの注意深い検討が必要です。それらの使用ケースは、プレイヤーの目標のように表現できます：
- アバターを迅速に変更できることを望む
- 修正中にアイテムを簡単に見つける
- 選択する前にアイテムをプレビューする
- 選択後の簡単なアイテム削除
これらの目標は、機能の UI とUX デザインを指導します：
- プレイヤーは、HUD の目立つボタンを通じてアバターのカスタマイズ機能にアクセスし、すぐにアバターにアイテムを装備し始めることができます
- タブはアイテムを便利なカテゴリに分類し、検索フィールドでプレイヤーはアイテムを直接検索できます
- アイテムはアバターに即座にプレビューされます
- プレイヤーは、再度タップして選択を解除するか、装備されたアイテムリストでタップすることでアイテムを削除できます
デザイナーは次に、UI を配置し、プレイヤーがアバターの修正の目標を完了するために取るステップを計画し始めることができます。このプロセスは、UI をナビゲートする際にプレイヤーのアクションを視覚的に描写する フローチャート の使用で補助できます。これらの図は、見逃されたステップ、ステップが不明確または不便である箇所、過剰な摩擦を特定するのに役立つことがあります。
