アートスタイルを選ぶ

アートスタイルを選ぶことは、UI要素の美的方向性を計画するプロセスです。デザインプロセスをアートスタイルで始めることは重要です。なぜなら、アートスタイルはあなたのUIがプレイヤーに何をすべきか直感的に伝えるための視覚的なルールを提供してくれるからです。

サンプルレーザータグ体験 .rbxlファイルを参考に、このユーザーインターフェースのカリキュラムセクションでは、体験のジャンルに応じてUI要素を設計するための意味のある決定を下す方法を示しています。以下のガイダンスが含まれています。

• あなたの体験を通じてプレイヤーに伝えたいことに応じて必要なUI要素を特定する。
• ターゲットオーディエンスにとって直感的であるジャンル特有のカラー規則を強化するカラーテーマを選択する。
• どの画面サイズでも簡単に解読できるシンプルなアイコンのアウトラインを作成する。
• プレイヤーのワークフローの可能性に合わせたボタンの順序を確立する。
• ターゲットデバイスでの可読性を確保するテキストシステムを決定する。

このセクションを完了した後、あなたは体験内のUIを通じてプレイヤーに伝えたい情報の構造と流れを設計する方法を学ぶことができます。

UI要素を特定する

UIのアートスタイルを選ぶ最初のステップは、オーディエンスに伝えたいさまざまな情報のタイプに応じて必要なUI要素を特定することです。この作業をデザインプロセスの最初に行うことは重要です。なぜなら、UI要素をその機能目的に基づいて分類し、プレイヤーが各UI要素と相互作用する場所や時間に応じて意味的な決定を下し、体験内でUI要素を再利用する計画を立てることができるからです。

ゲームプレイの要件に必要なUI要素をブレインストーミングする方法は多くありますが、まずプレイヤーが体験に参加したときに知る必要があることを思い描くことをお勧めします。たとえば、プレイヤーがサンプルのレーザータグ体験を開いたとき、彼らは次のような質問を自問するかもしれません。

• 体験の目標は何ですか？
• 自分のチームのメンバーは誰ですか？
• チームの得点をどのように追跡しますか？
• ブラスターをどのように選択しますか？
• ブラスターがレーザーを発射する場所はどこですか？
• モバイルデバイスでは、ブラスターをどのように発射しますか？
• レーザーを発射した後、再度発射できるのはいつですか？
• ラウンドが開始するのはいつですか？
• ブラスターで誰かをうまくタグしたかどうかはどうやってわかりますか？
• 敵チームに成功裏にタグ付けされたかどうかはどうやってわかりますか？

これらの質問を使用して、プレイヤーが成功するために知っておくべき情報を理解することで、サンプルのレーザータグ体験のUIニーズを次の3つのカテゴリに分けることができます：

1. 体験の目的に関する情報。
2. ブラスターに関する情報。
3. プレイヤーの状態に関する情報。

体験の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ボタンは主要インタラクションのすぐ下に配置されています。

あり得ないことですが、プレイヤーはブラスターのボタンを選択してどのブラスターを使用したいかを伝えることができることを知らないかもしれません。この状況を助けるために、プレイヤーは選択肢をサイクルするために利用できる2つの矢印の三次ボタンを使用できます。これらのボタンは微妙で、主要および二次インタラクションの要素よりもはるかに小さいですが、行動をする際に必要な指示があるプレイヤーにとっては認知可能です。

これらの主要、二次、三次のインタラクションを異なるインタラクションの順序に配置した場合、たとえばSELECTボタンを左矢印ボタンと入れ替えた場合、プレイヤーは選択肢のシーケンスについて明確な方向性を持たないでしょう。このため、ボタン順序の視覚的強調に加えて、効果的なワークフローは、プレイヤーが情報をスキャンする方向に応じて決定の理想的な順序へと導く視覚的階層に従います。たとえば、上から下、左から右です。

自分の体験のワークフローのインタラクションの順序を確立する際は、以下の点を考慮してください。

• プレイヤーは、実行アクションのためにあなたのUIと相互に作用できるときについて明確に理解する必要があります。この理由から、インタラクタブルなUI要素に対して少なくとも一つの視覚的フィードバックを提供することが推奨されます。たとえば、焦点が合ったときに外枠を表示したり、ボタンのサイズ、色、アニメーションを変更したりします。
• インタラクタブルなUI要素のラベルがあいまいであるか、同じワークフロー内で類似していると、プレイヤーはアクションまたはプロセスを完了する方法を誤解することがあります。悪化したプレイヤー体験を避けるために、明確で簡潔で、異なるラベルを作成してください。
• インタラクティブなUI要素が大きすぎる場合、画面上の他の重要な情報から目をそらす可能性があります。逆に、あまりにも小さすぎると、特にモバイルデバイス上で近接している場合には、読みづらくなったり選択が難しくなります。このため、さまざまな画面サイズでインタラクタブルなUI要素のサイズを確認することが不可欠です。

Studioで実装では、UIAspectRatioConstraintオブジェクトを使用して、プレイヤーがあなたの体験にアクセスする際にUI要素が特定のアスペクト比を維持することを確保する方法を学ぶことができます。この技術はデザインプロセスを容易にするだけでなく、インタラクティブなUI要素のタッチゾーンをモバイルデバイスで少なくとも9x9 mmになるようにするためにWebコンテンツアクセシビリティガイドラインのタッチターゲットサイズおよび間隔の推奨を満たすのにも役立ちます。

テキストシステムを決定する

テキストシステムは、UI内の単語に関するフォントやスタイルのルールのセットです。たとえば、「常にヘッダーを太字にする」や「健康統計を参照する際に緑色のフォントを使用する」といったルールです。デザインプロセスの初期にテキストシステムを決定することは、プレイヤーが必要な情報を探す際に何を期待できるかを一貫して適用できる構造を持つことを可能にします。

体験のジャンルや3Dの世界の要求に応じてテキストシステムは異なる場合がありますが、すべてのテキストシステムが遵守すべき最も重要なルールは、すべてのUIテキストが明確で読みやすいことを確保することです。このルールをすべてのテキストシステムに関連する決定の基礎として使用することにより、プレイヤーがUIを読むためのアクセシビリティとユーザー体験を改善することができます。プレイヤーがテキストと相互作用するさまざまな方法を考慮することが重要です。たとえば：

• プレイヤーがあなたの体験にアクセスするために使用するデバイス。
• プレイヤーがローカライズされたテキストを読む言語。
• 画面上のテキストの背後にある可能性のある背景。

たとえば、プレイヤーがタグアウトされたときの応答画面デザインは、プレイヤーのデバイスに応じて小さなフォントサイズまたは大きなフォントサイズにスケールされ、英語のテキストの両側に長い翻訳に対して十分な余白を確保し、プレイヤーが背景の色が何であれテキストを読めるように対照的な背景を含んでいます。

自分の体験のためのテキストシステムを決定する際は、以下の点を考慮してください。

• テキストが背景のノイズに溶け込むと、読みづらくなります。UIの可読性を向上させるために、対照的な色の上にテキストを表示するか、ストロークを使用してください。
• テキストを異なるデバイスに合わせてスケールしない場合、テキストは画面上で過剰にスペースを占めるか、または小さすぎて読み取れないものになります。テキストに不一致がないか確信するために、デザインプロセスの間に複数のデバイスでテストしてください。
• テキストを他の言語にローカライズした場合、言葉は元のデザインを超えて拡張する可能性があります。デザインの構成を改善するために、テキストが画面上で占める最大のスペースを確認してください。
• 一部のフォントは体験の美的感覚に合うかもしれませんが、大量に使用すると読みづらくなることがあります。この理由から、スタイライズされたテキストはタイトルやアラートテキストなどに限って使用してください。

UIのアートスタイルの計画ができたら、チュートリアルの次のセクションに進み、さまざまなプレイヤーのワークフローの各要素のレイアウトをワイヤーフレーム化する方法を学習できます。