UI と UX デザイン

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

UI

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

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

優先順位

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

• プレイヤーは今何をしていますか？
• 彼らが知っておくべき、またはアクセスすべき最も重要なことは何ですか？
• 彼らはどのような選択をしなければなりませんか？
• その選択を行うために必要な情報は何ですか？
• 彼らはその選択をどのくらいの頻度で行いますか？

重要な情報や機能は、プレイヤーが取る役割、3D 世界での位置、保持しているアイテムなどの要因によって変わります。UI は、文脈に応じて重要な情報のみを表示するように設計できます。これにより、プレイヤーは必要な情報を常に持ち、不要な情報の混乱を避けることができます。

例

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

Super Striker League では、プレイヤーのインタラクションはボールをコントロールしているかどうかによって異なります。ボールがない場合、プレイヤーはスプリントとタックルを使用してコントロールを取り戻すことができます。ボールを保持しているときは、ボタンがデケとパスに切り替わり、プレイヤーは相手をかわしたりボールをパスしたりできます。これらのボタンを交互に切り替えることで、UI は文脈に応じて有用であり続け、不要な気を散らす要素を避けます。

The Survival Game では、プレイヤーは自分の健康状態と空腹状態を把握し、地図、インベントリ、ツールに迅速にアクセスする必要があります。この情報は、彼らが意思決定を行い、生存のための行動を優先するのに役立ちます。この情報やツールが見つけにくい、または欠けている場合、生存はより困難になり、無駄にフラストレーションを引き起こします。

注意

ミニマリストで優先順位が付けられ、文脈に応じた UI であっても、プレイヤーは必要なものを見つけるのに助けが必要な場合があります。UI デザイナーは、プレイヤーの注意を引き、導くために、次のような視覚的ツールを使用できます。

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

これらのツールの使用は適度であることが重要です。明るく動く要素を過剰に使用すると、プレイヤーを圧倒し、混乱させる可能性があります。

例

Jailbreak のシーズンパス UI では、シーズンパス専用のアイコンの下に金色のストライプがあり、プレミアム報酬に注意を引き、無料のものとは視覚的に区別しています。

Dragon Adventures では、最も価値の高いコインバンドルに視覚的優先順位が与えられ、そのサイズが大きくなり、より多くのパディングで分離されて、小さなバンドルと区別されています。

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

ビジュアル言語

プレイヤーの注意を画面上の最も重要な要素に向けるだけでなく、UI デザイナーはプレイヤーが見ているものを理解するのを助けるためにビジュアル言語を開発します。ビジュアル言語は、要素の目的、状態、関連性、重要性について一目で情報を提供するための意図的で一貫したデザイン選択のセットです。この言語は、形状、色、スタイルなどのツールから構築されます。ビジュアル言語のいくつかの使用例は次のとおりです。

アイコン

アイコンは、意味や関連性を伝えるビジュアルアイデンティティを使用できます。たとえば、特定のステータスに関連するアイコンは、色のパレットや類似の形状を共有することがあり、プレイヤーがその機能を認識し理解するのを容易にします。

ボタン

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

テキスト

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

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

規約

規約は、さまざまなゲームで見られる一般的に適用されるデザイン選択です。いくつかの例は次のとおりです。

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

これらは広く使用されているため、プレイヤーは通常、これらの規約に慣れています。この親しみやすさを活用することで、インターフェースをより直感的にし、ゲーム固有の指示の必要性を減らすことができます。ターゲットジャンル内でゲームをプレイすることで、プレイヤーが認識する可能性のある規約を特定するのに役立ちます。UI デザイナーは、ゲームにより適したユニークなアプローチを選択することができますが、これらの規約を知ることで意思決定プロセスが情報に基づいたものになります。

一貫性

UI デザイナーが行う決定は、ゲーム全体で一貫して適用されるべきです。一貫性は、プレイヤーがゲームをより効率的にナビゲートできるようにし、混乱やフラストレーションを防ぎます。

ゲームにおける UI の一貫性のいくつかの例は次のとおりです。

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

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

UX

UX デザインは、プレイヤーがゲームとどのようにインタラクトし、どのように選択を示し、どのように次の選択に移行するかに関連しています。UX はしばしばユーザーインターフェース (UI) と密接に連携しますが、視覚的および情報的なデザインよりもインタラクティビティとプレイヤーの体験により重点を置いています。

プレイヤーの理解

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

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

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

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

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

これらの要因を考慮し、ターゲットプレイヤーグループ（またはグループ）を選択した後、彼らを知るために会ったり、一緒にプレイしたり、彼らの目標や好みについて学んだりして、デザイン選択をより良く情報に基づいたものにします。

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

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

• 規約
• メタファー
• フィードバック

規約

規約 は、プレイヤーが他のゲームからすでに慣れている可能性のある UX デザインや原則です。

規約の例には次のようなものがあります。

• Roblox 開発者が、アイテムがインタラクト可能であることを示すために、プレイヤーが近くに立つと表示される「E」近接プロンプト。
• プレイヤーのアバターが障害物の下をくぐったり、狭いスペースに入ったりできるようにするための「C」キー。
• ツールバーからアイテムをアバターの手に装備するための数字キー。
• 地面の円に入ることでマッチにキューを入れる。

規約は、特定の実装やデザイン選択が使いやすさのために人気を博すと確立されます。「C」をしゃがむために使用するのは、しゃがむという単語の最初の文字であり、WASD の隣に便利に配置されているため、記憶しやすいです。これは、迅速かつプレッシャーの下で簡単に実行できるインタラクションであり、近づいてくる脅威から隠れたり逃げたりするための一般的な使用ケースに理想的です。

メタファー

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

フィードバック

ゲームからプレイヤーへのコミュニケーションは フィードバック として知られています。フィードバックは、プレイヤーが取ったアクションを理解するのに役立ちます。これは、ゲームの機能を学ぶのに貢献し、機能を使用する際の満足感を高める追加の磨きを加えることができます。フィードバックの例には次のようなものがあります。

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

フィードバックが欠如しているか不十分な場合、プレイヤーは自分が何を達成したのか、効果が良かったのか悪かったのか、または使用している機能が正しく機能しているのかバグが発生しているのかを理解できないかもしれません。

フローのデザイン

プレイヤーが目標を達成するためには、複数のインタラクションが必要なことがよくあります。UX デザイナーは、プレイヤーがどのようにアクションや UI スクリーン、選択から次のものに移動するかを考慮し、これらのパスが論理的で便利であることを確認します。

たとえば、Berry Avenue RP でアバターにアイテムを装備するには、プレイヤーは次の手順を実行する必要があります。

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

これらの手順をまとめて、アバターのカスタマイズフローを表します。このフローはシンプルで明確であり、アイテムを装備するために必要な手順ができるだけ少なくなるように設計されています。プレイヤーは多くのアクションを実行したり、何をすべきかを考えたりする必要がないため、このフローは目標に到達するために必要な努力を測る 摩擦 が低いです。

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

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

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

• プレイヤーは HUD の目立つボタンを通じてアバターカスタマイズ機能にアクセスし、すぐにアイテムをアバターに装備し始めることができます。
• タブはアイテムを便利なカテゴリに分類し、検索フィールドを使用してプレイヤーがアイテムを直接検索できるようにします。
• アイテムはアバターに即座にプレビューされます。
• プレイヤーはアイテムを再度タップして選択解除するか、装備アイテムリストでタップすることでアイテムを削除できます。

デザイナーは、プレイヤーがアバターを変更する目標を達成するために必要な手順を計画し、UI をレイアウトし始めることができます。このプロセスは、プレイヤーのアクションを UI 内でナビゲートする際に視覚的に示す フローチャート を使用することで支援できます。これらの図は、見落とされた手順、手順が不明確または不便な痛点、過剰な摩擦を特定するのに役立ちます。