UIとUXデザイン

ユーザーインターフェイス（UI）は、アート的なビジュアルデザインとコミュニケーション中心の情報デザインを組み合わせ、プレイヤーが操作するメニュー、ショップレイアウト、ヘッダーディスプレイ（HUD）、その他のインターフェイスを生成します。ユーザーエクスペリエンス（UX）は、プレイヤーがゲームとどのようにインタラクトするか、どのように選択を知らせるか、そしてどのように選択から次の選択に移行するかに関連します。UIとUXはしばしば協力して機能しますが、UXはインタラクティビティとプレイヤーの体験により重点を置き、UIの視覚的および情報的デザインよりも重要視されます。

UI

UIはヒットポイント、クエストの目的、価格などの重要な情報を共有し、プレイヤーが意思決定し、ゲームをナビゲートできるようにします。ゲームがプレイヤーとコミュニケーションを取る主な方法であるため、UIはプレイヤーの体験にとって重要です。 poorly designed UIはプレイヤーを混乱させ、フラストレーションを招き、リテンションを低下させる可能性があり、一方で巧妙にデザインされたUIはエンゲージメントとマネタイズに寄与できます。効果的にデザインされたUIは以下の原則を採用しています：

• 優先順位
• 注意
• ビジュアル言語
• 慣習
• 一貫性

優先順位

最も重要な情報を最初に共有することは、「情報の階層（Hierarchy of Information）」として知られています。これは、プレイヤーが制限された情報に基づいて瞬時に意思決定を行う必要があるゲームでは特に重要です。UIの優先順位を決定する際には、プレイヤーの体験にとって重要または関連性のあるものを特定し、それがアクセスしやすく見つけやすいことを確認します。次の質問を考えてみてください：

• プレイヤーは今何をしているか？
• プレイヤーが意識するべき、またはアクセスする必要がある最も重要なことは何か？
• プレイヤーはどのような選択をしなければならないか？
• その選択を行うために必要な情報は何か？
• どれくらい頻繁にその選択を行うか？

重要な情報や機能は、プレイヤーが果たしている役割、3Dワールド内の位置、および保持しているアイテムなどの要因によって変化します。UIは、各コンテキストで便利なボタンや情報のみを表示するように設計されることがあります。これにより、プレイヤーは必要なものを常に手元に持ち、無駄なものの混乱に悩まされることはありません。

例

無関係な要素は混乱や気を散らす原因となる可能性があります。Spellbound RPGは、特にモバイルインターフェイスに重要な、クリーンでミニマリストなUIを持っています。小さい画面は多くのボタン、画面、テキストで簡単に圧倒されることがあります。

Super Striker Leagueでは、プレイヤーのインタラクションはボールをコントロールしているかどうかによって異なります。ボールを持っていないときは、プレイヤーはスプリントとタックルを使ってコントロールを取り戻すことができます。ボールを持っているときは、ボタンがデクとパスに切り替わり、プレイヤーが相手をかわしたりボールをパスしたりできるようになります。これらのボタンを交互に使用することで、UIはコンテキストに応じて役立つ情報を提供し、不要な気を散らすことを避けます。

The Survival Gameでは、プレイヤーは自分の健康と飢餓の状態を把握し、地図、インベントリ、ツールにすぐにアクセスできる必要があります。この情報は、彼らが意思決定し、サバイバルのための行動を優先するのを助けます。この情報やツールが見つけにくいか欠けていると、サバイバルはより困難で無駄にフラストレーションを感じさせるものとなります。

注意

ミニマリスト、優先順位付けされた、文脈に応じたUIであっても、プレイヤーが必要なものを見つけるのを助けるためにまだ支援が必要なことがあります。UIデザイナーは、プレイヤーの注意を引き、ガイドするために、次のような視覚的手法を使用することができます：

• 色： 鮮やかな色は、鈍い色よりも注意を引きます。重要なテキスト、ボタン、および他の要素には鮮やかな色を、あまり重要でないものには muted shades を使用します。このコントラストは、視認性を高め、気を散らさないようにします。
• サイズ： 大きな要素は小さな要素と比較して目立ち、重要であると認識されます。
• スペース： 十分なネガティブスペースまたはパディングに囲まれた要素は目を引きます。
• 近接： グループ化された要素は関連性を示唆します。関連する機能やアイテムを近くに配置することで、プレイヤーはそれらの関連性を理解しやすくなります。
• 動き： アニメーション化された要素は注意を引きます。少しの動きでも、静的な要素の中で目立たせることができます。パーティクル効果、揺れるボタン、アニメーション付きの矢印は、案内のためにチュートリアルでよく使用されます。

これらのツールの使用においては、適度が重要です。明るく動く要素を過剰に使用すると、プレイヤーは圧倒され、混乱してしまうかもしれません。

例

JailbreakのシーズンパスUIでは、シーズンパス限定のアイコンの下に金色の黄のストライプが引かれ、プレミアム報酬に注意を引き、無料のものとは視覚的に区別されます。

Dragon Adventuresでは、最高価値のコインバンドルに視覚的優先が与えられ、サイズを増やし、より多くのパディングで区別しています。これにより、小さなバンドルと明確に区別されます。

Tower Defense Simulatorでは、サイズと近接の両方が使用され、デイリータワースキンをデイリークレートから視覚的にグループ化し区別しています。

ビジュアル言語

プレイヤーの注意を重要な要素に誘導するだけでなく、UIデザイナーはプレイヤーが何を見ているのかを理解するためのビジュアル言語を開発します。ビジュアル言語は、要素の目的、状態、関連性、重要性を一目で伝えるための意図的で一貫したデザイン選択のセットです。この言語は、形状、色、スタイルなどのツールから構成されます。ビジュアル言語の利用の一部には以下が含まれます：

アイコン

アイコンは意味や関連性を伝える視覚的アイデンティティを持つことができます。たとえば、特定のステータスに関連するアイコンは、色のパレットや形状を共有し、プレイヤーがその機能を認識し理解できるようにします。

ボタン

プレイヤーの入力の一般的な形式として、ボタンは簡単に識別できるべきです。ボタンをテキストやアイコンの周囲の色で囲むことで、背景と区別され、インタラクティブであるように見えます。ハイライトや影を加えることで、3Dの深さを示唆することで、触覚的な魅力を高めることができます。

テキスト

重要な高レベル情報を含むヘッダーやタイトルは、本文テキストよりも大きく太くするべきです。非常に読みやすく、表示される背景色に対してコントラストがよい色を考慮する必要があります。色や太文字などのスタイルの選択は、ゲーム内のアイテムやステータス、能力のような重要な情報を強調することができます。フォントを選ぶ際は常に可読性を優先してください。

ビジュアル言語が設計されたら、それはスタイルガイドに文書化され、チーム全員がゲーム全体で一貫してこの言語を適用する方法を理解するのに役立つルールや例のセットです。

慣習

慣習は、さまざまなゲームで見られる一般的なデザイン選択です。一部の例には以下が含まれます：

• 押すとダイアログを閉じるボタンにX記号
• 現在使用できないボタンに適用される灰色
• プレイヤーがまだ獲得していない、または解除していないことを示すためにボタンや機能に重ねられたロックアイコン

それらの広範な使用により、プレイヤーは通常このような慣習に慣れています。この慣習を活用することで、インターフェイスをより直感的にし、ゲーム固有の指示を減らすことができます。ターゲットジャンル内のゲームをプレイすることで、プレイヤーが認識できる慣習を特定するのが助けになります。UIデザイナーは、自分のゲームに合ったユニークなアプローチを選ぶこともできますが、これらの慣習を知っていることで意思決定プロセスをサポートできます。

一貫性

UIデザイナーが下すすべての決定は、ゲーム全体を通じて一貫して適用する必要があります。一貫性は、プレイヤーがゲームをより効率的にナビゲートするのに役立ち、混乱やフラストレーションを防ぎます。

ゲーム内でのUIの一貫性のいくつかの例は以下の通りです：

• 「ヘルス」ステータスは、すべてのテキスト、関連アイコン、およびヘルスバーで緑色で表示されます。
• NPCダイアログがゲーム内アイテムに言及する際は、それが常に太文字で強調表示されます。
• クローズボタンは常に四角形で赤色で、白いXを含み、ダイアログの右上隅にのみ表示されます。
• プレイヤーがショップでアイテムを購入できない場合、その価格は赤色で表示されます。

これらの選択は意図的で、プレイヤーの理解やナビゲーションを促進することを目的としています。それらを一貫して適用することで、プレイヤーは関連要素を関連付け、重要なアイテムを特定し、筋肉記憶を発展させ、迅速な情報に基づく意思決定を行い、ゲームに没入する時間を増やします。

UX

UXデザインは、プレイヤーがゲームとどのようにインタラクトするか、どのように選択を知らせるか、そしてどのように選択から次の選択に移行するかに関連します。UXはしばしばユーザーインターフェイス（UI）と密接に関係していますが、それは視覚や情報デザインよりもインタラクティビティとプレイヤー体験に焦点を当てています。

プレイヤーの理解

UXデザイナーの主な目標は、プレイヤーが直感的に使いやすく、邪魔にならず便利なインタラクションとフローを作成することです。このプロセスは、プレイヤー自身を理解することから始まります。それはゲームのターゲットオーディエンスです。ゲームのプレイヤーを特定する際には、以下のことを考慮してください：

• 人口統計： 人口統計は、プレイヤーグループに関する一般的な情報を明らかにすることで、デザインの選択を知らせるのに役立ちます。たとえば、若いプレイヤーは通常、パーソナルコンピュータよりもモバイルまたはタブレットデバイスでプレイする可能性が高いため、そのオーディエンスを対象にしたゲームは、モバイルユーザーエクスペリエンスの設計と洗練を優先することがよくあります。

• 経験レベル： 開発者は、少ないゲーム経験を持つプレイヤー、かなりの経験を持つプレイヤー、中間のプレイヤー向けに設計することを選択できます。トーキングタブのアイテムを装備するために数字キーを押すなど、経験豊富なプレイヤーには馴染みのあるインタラクションは、経験が少ないプレイヤーには明らかでない場合があり、追加のメッセージやトレーニングを必要とすることがあります。

• ジャンルの親しみやすさ： 一般的な経験レベルに似て、ジャンルの親しみやすさは、特定のゲームタイプに対するプレイヤーの経験レベルを反映しています。ロブロックスの人気ジャンルに該当するゲーム、たとえばロールプレイ、サバイバルホラー、ファーストパーソンシューティングなどは、以前に同様のジャンルをプレイしたことのある多くの潜在的プレイヤーを持つ可能性があります。他のジャンルのゲームは、経験豊富なプレイヤーが少ないかもしれませんが、その経験のギャップはチュートリアルや使いやすさによって克服できることがあります。

• プレイスタイル： プレイヤーはしばしば、競争や成果の収集から探査や協力に至るまで、特定のプレイタイプを好む傾向があります。これらの好みは、プレイヤーが好むゲームメカニクスだけでなく、UXの決定にも影響を与えます。デザイナーは、どのインタラクションを優先すべきか、どれを洗練すべきか、どれをプレイヤーに提示すべきかを考慮し、プレイヤーがこれらのインタラクションに関与する際に持つ心構えや引き出したい感情についても考慮します。

これらの要因を考慮し、ターゲットプレイヤーグループ（またはグループ）を選択した後は、彼らを知るために出会い、共にプレイし、彼らの目標や好みを学ぶことでデザイン選択をより良く決定することができます。

インタラクションのデザイン

インタラクションは、プレイヤーがゲーム内での選択を体験し伝えるための機能です。UXデザイナーは、それらのインタラクションが直感的であり、できるだけ説明を必要としないようにしたいと考えています。そのために彼らが利用するのは：

• 慣習
• メタファー
• フィードバック

慣習

慣習は、プレイヤーが他のゲームから既に知っているUXデザインや原則です。

慣習の例には以下が含まれます：

• プレイヤーがアイテムをインタラクト可能にするため、近くに立つと現れるアイテムのインタラクト可能性を示すためにロブロックスの開発者が使用する「E」のプロキシミティプロンプト。
• プレイヤーのアバターが障害物を避けたり、狭いスペースにフィットさせるために、しゃがむことを可能にする「C」キー。
• アバターの手にアイテムを装備するために、ツールバーからアイテムを手に持たせる数字キー。
• 地面のサークルに入ることでマッチのキューに入る。

慣習は、特定の実装やデザイン選択が使いやすさから人気を博すことによって確立されます。「C」をしゃがむために使用するのは、しゃがむという単語の最初の文字であり、WASD（プレイヤーがナビゲートするために使用するキー）のすぐそばに位置しているため、覚えやすいです。これは迅速かつ緊張感の中で実行するのが容易なインタラクションであり、しゃがむことの一般的な使い方に理想的です。

メタファー

メタファーは、抽象的な概念をより馴染みのあるものに関連付け、理解のショートカットを作成します。この例は、Spellbound Wizard RPGからのもので、魔法の呪文を唱える行為はデッキからカードを引くことによって行われます。デッキベースのUI/UXは、実際の表現を持たない抽象的な呪文を、プレイヤーがより簡単に関連付けて理解できるものに根付かせます。

フィードバック

ゲームからプレイヤーへのコミュニケーションはフィードバックとして知られています。フィードバックは、プレイヤーが取ったアクションを理解するのに役立ちます。それは、ゲームの機能を学ぶのに寄与し、使いやすさを高める追加の触感を加える要素です。フィードバックの例には以下が含まれます：

• 敵がプレイヤーの武器からダメージを受けたことを示すために、「ヒット」反応アニメーションを再生する
• ボタンが色を変えてホバー状態、押下状態、リリース状態（選択状態）を示す
• プレイヤーが購入を完了したときに「チャキン！」と音が鳴るレジスター
• プレイヤーがクエストの目的を完了するに伴い進捗バーが満たされる

フィードバックが欠落しているか不十分な場合、プレイヤーは自分が達成したことを知らなかったり、効果が良かったのか悪かったのかを理解できなかったり、使用している機能が正常に機能しているのかバグが発生しているのかわからなくなります。

フローのデザイン

目標を達成するためには、プレイヤーが複数のインタラクションを必要とすることがよくあります。UXデザイナーは、プレイヤーが一つのアクションやUI画面または選択から別のものへ移動する際に、これらの道筋が論理的で便利であることを確認します。

たとえば、Berry Avenue RP でアイテムをアバターに装備するには、プレイヤーは以下のことを行う必要があります：

• Avatarボタンを見つけてタップします
• アイテムカテゴリーを選択します（顔、頭、首など）
• 興味のあるアイテムを見つけるためにスクロールします
• アバターに装備するためにアイテムをタップします
• アバターのカスタマイズを終了するためにDoneボタンを見つけてタップします

これらのステップをまとめて、アバターのカスタマイズフローを表します。このフローはシンプルでわかりやすく、アイテムを装備するために必要なステップはできる限り少なくするべきです。プレイヤーが多くのアクションを実行したり、何をすべきかについてあまり考えなくても済むため、このフローは低摩擦（friction）に保たれ、目標に到達するための努力を測る指標です。

効率的で低摩擦のフローを設計するには、使用ケースを慎重に考慮する必要があります。これらの使用ケースは、プレイヤーの目標を表すことができます：

• アバターを迅速に変更できるようにしたい
• 変更する際にアイテムを簡単に見つけたい
• 選択前にアイテムをプレビューしたい
• 選択後にアイテムを簡単に削除したい

これらの目標が機能のUIとUXデザインを導きます：

• プレイヤーは、HUD上の目立つボタンからアバターのカスタマイズ機能にアクセスし、すぐにアイテムをアバターに装備し始めることができます
• タブはアイテムを便利なカテゴリに整理し、検索フィールドを使用してプレイヤーがアイテムを直接検索することを可能にします
• アイテムはアバターに瞬時にプレビューされます
• プレイヤーは再度タップしてアイテムを非選択にするか、装備アイテムリスト内でタップすることでアイテムを削除できます

デザイナーは、その後、UIのレイアウトを開始し、プレイヤーがアバターを変更する目標を達成するために取るステップを計画します。このプロセスは、プレイヤーがUIをナビゲートする際の行動を視覚的に示すフローチャートを使用することで助けられます。これらの図は見落とされたステップ、手順が不明確または不便な痛点、および過度の摩擦を特定するのに役立ちます。