アートスタイルの選択は、UI要素の美的方向性を計画するプロセスです。アートスタイルでデザインプロセスを始めることは重要です。なぜなら、アートスタイルは、プレイヤーがゲーム内で何をできるかについての情報を直感的に提供するための視覚的な基本ルールを提供するからです。
サンプルレーザータグゲーム .rbxlファイルを参照しながら、このユーザーインターフェースカリキュラムのセクションでは、ゲームのジャンルに応じてUI要素をデザインする方法についての重要な決定を行う方法を示します。具体的には以下のガイダンスが含まれます：
- プレイヤーに伝えたい情報に応じて必要なUI要素を特定すること。
- 観客に直感的なジャンル特有の色の慣習を強化するカラーテーマを選択すること。
- どの画面サイズでも簡単に解読できるシンプルなアイコンをアウトラインすること。
- 異なるプレイヤーのワークフローの可能性に応じたボタンの順序を確立すること。
- 対象デバイスでの可読性を確保するテキストシステムを決定すること。
このセクションを完了すると、ゲーム内のUIを通じてプレイヤーに伝えたい情報の構造と流れをデザインする方法を学びます。
UI要素を特定する
UIのアートスタイルを選択する最初のステップは、観客に伝えたいさまざまな情報のタイプに応じて必要なUI要素を特定することです。デザインプロセスの初めにこの作業を行うことは重要です。なぜなら、UI要素をその機能的目的によって分類し、プレイヤーが各UI要素とどのように相互作用するかに応じて意味的な決定を行い、ゲーム全体でUI要素を再利用できる場所を計画することができるからです。
ゲームプレイの要件に必要なUI要素をブレインストーミングする方法は多くありますが、プレイヤーがゲームに参加した瞬間に知っておくべきことを想像することから始めることをお勧めします。たとえば、プレイヤーがサンプルレーザータグゲームを開いたとき、次のような質問を自問するかもしれません：
- ゲームの目標は何ですか？
- 自分のチームが誰かをどうやって知ることができますか？
- チームのポイントをどうやって追跡しますか？
- ブラスターをどうやって選択しますか？
- ブラスターがレーザーをどこに発射するかをどうやって知りますか？
- モバイルデバイスを使用している場合、ブラスターをどうやって発射しますか？
- レーザーを発射した後、いつ再度発射できますか？
- ラウンドが始まるときはどうやって知りますか？
- ブラスターで誰かを成功裏にタグ付けしたときはどうやって知りますか？
- 敵チームが自分を成功裏にタグ付けしたときはどうやって知りますか？
これらの質問を使用して、プレイヤーが成功するために知っておくべき情報を理解することで、サンプルレーザータグゲームのUIニーズを次の3つのカテゴリに分類できます：
- ゲームの目的に関する情報。
- ブラスターに関する情報。
- プレイヤーの状態に関する情報。
ゲームのUIニーズをカテゴリに分けることは有益です。なぜなら、各グループに基づいてアートスタイルを形成し、各カテゴリがプレイヤーに教える必要がある情報を強化できるからです。たとえば、UIがプレイヤーにキャラクターの健康状態に関するアクションを伝えたい場合、UI要素が緑色やプラスアイコンを優先するアートスタイルを選択するかもしれません。
ゲームのUIニーズをカテゴリに分けた後、各カテゴリの要件を満たすために必要なUI要素のリストを作成できます。例として、サンプルレーザータグゲームは、前述のプレイヤーの質問リストに対処するために次のUI要素の表を使用しています。このチュートリアルを進めるにつれて、UIカリキュラムはこのリストを参照し、各UI要素のカテゴリに関連する主要なデザイン決定を強調します。
| カテゴリ | UI要素 |
|---|---|
| ゲームの目的に関する情報 |
|
| ブラスターに関する情報 |
|
| プレイヤーの状態に関する情報 |
|
ゲームのUI要素のリストができたので、次は各UI要素のグループに対してスタイリスティックおよび意味的な選択を行うことができます。最初はカラーテーマから始めましょう。
カラーテーマを選択する
カラーテーマ、またはカラーパレットは、ゲーム内で一貫して適用されるメッセージを伝える色の選択です。たとえば、何かが選択可能であることを示すために明るい色を使用することなどです。UI要素にカラーテーマを適用することは重要です。特にゲームのジャンル内で色の慣習に依存する場合、プレイヤーが最小限の努力でUIを迅速に理解できるようにするからです。
環境アートカリキュラムでは、レーザータグ環境の各半分が、各チームのそれぞれのスポーンゾーンの近くのマップの領域を区別するために、上からの視点で色分けされています：ミントはマップの左側に集まるチームのため、カーネーションピンクはマップの右側に集まるチームのためです。これらの特定の色は、補色であるため、互いに良く対比し、プレイヤーが周囲を簡単にスキャンし、建物内でどの方向を向いていても自分を見失わないようにするのに役立ちます。
サンプルレーザータグゲームは、この同じカラーテーマをUIに使用して、各チームに関連する情報を強調しています。たとえば、3D空間内の各プレイヤーのチームインジケーターや、画面にオーバーレイされるチームポイントトラッカーなどです。この一貫性は、プレイヤーがファーストパーソンシューティングゲームの高速なゲームプレイ中にゲームの目的に関する情報を迅速に理解できるように助けます。特に、プレイヤーが環境を移動しながら迅速な決定を下す必要があるためです。
自分のゲームのカラーテーマを選択する際は、次の点を考慮してください：
- カラーテーマの強さは、プレイヤーが各色とその機能との間で迅速なメンタルアソシエーションを行うのを助けることに依存します。この理由から、カラーテーマを制限して、プレイヤーにUI要素と関連付けたい重要な情報のみを強調します。
- 色盲のプレイヤーがカラーテーマのメッセージを理解できるようにするために、UI要素を区別するために色だけに依存しないでください。代わりに、色をアイコン、形状、アニメーションと組み合わせて、すべてのプレイヤーに効果的にコミュニケーションできるようにします。
- UIが美的に魅力的であるよりも可読性が重要です。この理由から、シンプルなUIを優先し、3D世界の明るい要素と暗い要素の両方で読みやすい色を使用します。
最後のポイントのガイダンスを強調するために、サンプルレーザータグゲームは、2D画面にオーバーレイされるほぼすべてのUI要素に対して中立的な黒と白の色を使用しています。黒と白は互いに良く対比し、画面の残りの部分が色とりどりの3D環境を表示している中でも読みやすいです。
シンプルなアイコンをアウトラインする
アイコンは、ゲーム内のアクション、オブジェクト、または概念を表すシンボルです。シンプルで直感的なアイコンをアウトラインすることは重要です。なぜなら、最終的な結果がプレイヤーに何ができるか、またUIを通じて何を伝えたいかをテキストを使用せずに簡単に認識できるようにするからです。これは、特に観客がモバイルデバイスの小さな画面を使用してゲームにアクセスする場合にさらに重要です。
シンプルなアイコンは、理想的には3D要素とは異なるスタイルを持ちながら、ゲームの全体的な世界を補完します。たとえば、環境アートカリキュラムの最終環境では、モジュラーおよびプロップ3Dアセットが、柔らかい角を持つ長方形の形状を利用したクリーンでハイテクなアートスタイルを持っています。床に沿った面取りパネルから天井のほぼ円形の窓まで、鋭いエッジは含まれていません。
このアートスタイルを補完しつつ、ユニークさを保つために、このチュートリアルで後で作成するすべてのUI要素は、未来的な美学と丸い角を持ち、環境内の3Dアセットの形状言語と一致しません。これにより、各アイコンの意味が2Dおよび3D空間内の他の情報と区別されます。
この概念を示すために、サンプルレーザータグゲームのクロスヘアと、モバイルデバイスでブラスターを発射するためのボタンの2つの画像を見てください。両方のアイコンは、全体的な世界と調和する柔らかい角を持っていますが、六角形と円形の形状が、プレイヤーがゲーム内でアイコンと関連付けることができるものからそれらを区別します。
自分のゲームのためにシンプルなアイコンをアウトラインする際は、次の点を考慮してください：
- シンプルなアイコンは、小さくても可読性があります。この理由から、アイコンの詳細を制限し、モバイルデバイスの画面で認識できなくなる可能性のある詳細を避けます。
- アイコンは、プレイヤーの言語に関係なくメッセージを伝えることができるため、強力です。プレイヤーがUIを理解するのに影響を与えない限り、不要なテキストをアイコンに置き換えて、ローカリゼーションの取り組みを改善します。
- 同じジャンルの多くのゲームは、強さを表す剣のアイコンや、魔法を表すビーカーなど、スタイル的に似たアイコンを使用します。ゲームのジャンル内の象徴性を受け入れ、プレイヤーが追加のガイダンスなしでアイコンを理解できるようにします。
自分のゲームのジャンル内で一般的なアイコンのタイプがわからない場合は、Game UI Databaseをチェックしてください。この無料のリソースツールは、デザインプロセス中に参照できるさまざまなジャンルの数百のゲームのスクリーンショットを含んでいます。
インタラクションの順序を確立する
インタラクションの順序は、プレイヤーがUIと相互作用できる順序です。画面上に複数のインタラクティブなUI要素があることが多いため、プレイヤーがさまざまなワークフローをナビゲートする際に意思決定を助けるために直感的なインタラクションの順序を確立することが重要です。
ワークフローには通常、3種類のインタラクションがあります：
- 主要インタラクション – プレイヤーが最も行う可能性の高いアクション。
- 二次インタラクション – プレイヤーが主要アクションの代替として行う可能性のあるアクション。
- 三次インタラクション – プレイヤーが最も行う可能性の低いアクション。
各インタラクションタイプは、プレイヤーがアクションを実行する可能性に応じて異なるレベルの視覚的強調を持たなければなりません。この概念を示すために、サンプルレーザータグゲームのブラスターを選択するワークフローのインタラクションの順序の画像を見てください。ここで、Aは主要インタラクション、Bは二次インタラクション、Cは三次インタラクションを表します。
このワークフローでは、プレイヤーが最も行う可能性の高いアクションは、2種類のブラスターの間で選択することです。そのため、ブラスターのボタンはデザイン内の他のインタラクティブな要素よりもはるかに大きくなっています。この視覚的強調のレベルは、プレイヤーの注意を引き、全体のUI要素の中央に目を引きます。プレイヤーが決定を下した後、ワークフローの論理的な次のステップは、選択を確認してラウンドを開始することです。この理由から、SELECTボタンは主要インタラクションのすぐ下に配置されています。
プレイヤーは、どのブラスターを使用したいかを伝えるためにブラスターのボタンの1つを選択できることを知らない可能性もあります。この状況を助けるために、プレイヤーが選択肢をサイクルするために利用できる2つの矢印の三次ボタンがあります。これらのボタンは控えめで、主要および二次インタラクションの要素よりもはるかに小さいですが、アクションを実行できる方向を必要とするプレイヤーには認識可能です。
これらの主要、二次、三次のインタラクションを異なるインタラクションの順序に配置すると、たとえばSELECTボタンと左矢印ボタンを入れ替えると、プレイヤーは選択の順序について明確な指示を持たなくなります。この理由から、ボタンの順序の視覚的強調に加えて、効果的なワークフローは、プレイヤーが情報をスキャンする際に従う理想的な決定の順序をガイドする視覚的階層に従います。たとえば、上から下、左から右などです。
自分のゲームのワークフローのインタラクションの順序を確立する際は、次の点を考慮してください：
- プレイヤーは、アクションを実行するためにUIと相互作用できるタイミングを明確に理解する必要があります。この理由から、インタラクティブなUI要素に対して少なくとも1つの視覚的フィードバックの形式を提供することをお勧めします。たとえば、フォーカスされているときにアウトラインを表示したり、ボタンのサイズ、色、アニメーションを変更したりします。
- インタラクティブなUI要素のラベルが曖昧であったり、同じワークフロー内で似ている場合、プレイヤーはアクションやプロセスを完了する方法を誤解する可能性があります。悪いプレイヤー体験を避けるために、ラベルを明確で簡潔、かつ互いに異なるものにしてください。
- インタラクティブなUI要素が大きすぎると、画面上の他の重要な情報から気を散らす可能性があります。逆に、小さすぎると読みづらくなったり、選択が難しくなったりします。特にモバイルデバイスで近接している場合は、さまざまな画面サイズでインタラクティブなUI要素のサイズを確認することが重要です。
スタジオでの実装では、UIAspectRatioConstraintオブジェクトを使用して、プレイヤーがゲームにアクセスするデバイスに関係なくUI要素が特定のアスペクト比を維持する方法を学びます。この技術は、デザインプロセスを容易にするだけでなく、Webコンテンツアクセシビリティガイドラインのタッチターゲットサイズと間隔の推奨事項を満たすのにも役立ちます。これは、モバイルデバイスのインタラクティブなUI要素のためのタッチゾーンを少なくとも9x9mmにすることを意味します。
テキストシステムを決定する
テキストシステムは、UI内のすべての単語に関するフォントとスタイルのルールのセットです。たとえば、「常にヘッダーを太字にする」や「健康ステータスを参照する際に緑色のフォントを使用する」などです。デザインプロセスの初期にテキストシステムを決定することで、プレイヤーが必要な情報を探す際に期待できる構造を一貫して適用できるようになります。
テキストシステムは、ゲームのジャンルや3D世界の要件によって異なる場合がありますが、すべてのテキストシステムが従うべき最も重要なルールは、すべてのUIテキストが明確で読みやすいことを保証することです。このルールをテキストシステムに関連するすべての決定の基礎として使用することで、プレイヤーがUIを読む際のアクセシビリティとユーザー体験を改善できます。考慮すべき要素には、次のようなものがあります：
- プレイヤーがゲームにアクセスするために使用するデバイス。
- プレイヤーがローカライズされたテキストを読む言語。
- 画面上のテキストの背後にある可能性のある背景。
たとえば、プレイヤーがタグ付けされたときの画面応答デザインは、プレイヤーのデバイスに応じて小さいまたは大きいフォントサイズにスケールし、英語のテキストの両側に長い翻訳のための十分なスペースを含み、プレイヤーが背景の色に関係なくテキストを読むことができるようにコントラストのある背景を含んでいます。
自分のゲームのためにテキストシステムを決定する際は、次の点を考慮してください：
- テキストが背景のノイズと混ざると読みづらくなります。UIの可読性を向上させるために、コントラストのある色の上にテキストを表示するか、ストロークを使用してください。
- 異なるデバイスに合わせてテキストをスケールしないと、テキストが多すぎてスペースを占有したり、プレイヤーの画面で小さくて判読不可能になったりします。テキストの不一致をキャッチするために、デザインプロセス中に複数のデバイスでデザインをテストしてください。
- 言葉は、他の言語にローカライズすると元のデザインを超えて拡張する可能性があります。デザインの構成を改善するために、テキストが画面上で占める最大のスペースを参照してください。
- 一部のフォントはゲームの美学に合うかもしれませんが、大量に読むには難しい場合があります。この理由から、スタイライズされたテキストは控えめに使用し、タイトルやアラートテキストなどに使用します。
UIのアートスタイルの計画ができたら、次のチュートリアルのセクションに進んで、さまざまなプレイヤーワークフロー内の各要素のレイアウトをワイヤーフレーム化する方法を学ぶことができます。