レイアウトのワイヤーフレーム

レイアウトのワイヤーフレームは、さまざまなワークフローでUIを通じて伝えたい情報の構造と流れを設計するプロセスです。このチュートリアルの重要なステップでは、UI要素の配置を反復し、問題点を発見し、プレイヤーの体験を改善することができます。これにより、ゲームに適さない問題のあるデザインに時間とリソースを投資する前に、効果的なデザインを確保できます。

サンプルレーザータグゲーム .rbxlファイルを参照として、このユーザーインターフェースカリキュラムのセクションでは、画面上のUI要素を構造化する方法を示します。これには以下のガイダンスが含まれます：

• プレイヤーがゲームで成功するために必要な機能や情報に直感的に導くためのUIの視覚的階層を計画すること。
• 基本的な形状を使用してUI要素をブロックし、RobloxのコアUIおよびタッチコントロールと並行してUI要素の構成を確認すること。
• プレイヤーが目標を達成するために必要なアクションを考慮したユーザーフローを開発すること。

このセクションを完了すると、アートスタイルとワイヤーフレームを尊重したUIをStudioで構築および構成する方法を学びます。

視覚的階層を計画する

視覚的階層は、UI要素を重要度の順に強調する組織構造です。ゲームのさまざまなワークフローのために視覚的階層を計画することは重要です。なぜなら、プレイヤーが目標を達成するための成功を確保するからです。これは、目標が瞬時に変わるファーストパーソンシューティングゲームの迅速なゲームプレイに特に必要です。

効果的な視覚的階層は、プレイヤーがワークフローを完了するために必要な機能や情報を、画面上で自然に見る場所に応じて導きます。たとえば、サンプルレーザータグゲームの視覚的階層は、プレイヤーがマップをナビゲートし、敵チームのプレイヤーをタグ付けする際に、次のUI要素のカテゴリを通じてプレイヤーを導く必要があります：

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

これらのカテゴリが最終デザインで画面上に配置される位置は、それぞれの重要度を強調します：

• 最初のカテゴリは上部に近く、ゲームに勝つための最も重要なUI要素を含んでいます。
• 2番目のカテゴリは中央に近く、3D空間でのアクションにプレイヤーの注意を引く焦点として機能し、ゲームプレイにおいて最も重要です。
• 3番目のカテゴリは側面に近く、プレイヤーはゲームプレイから注意を逸らすことなくこの周辺情報を読むことができます。

一部のゲームジャンルでは、ワークフロー中にプレイヤーにとって重要な情報の唯一のカテゴリを一度に表示するだけで済みます。しかし、ファーストパーソンシューティングゲームでは、プレイヤーは成功するために必要な情報を提供する複数のカテゴリのUI要素を同時に見る必要があります。たとえば、チームのスコア、ブラスターのクールダウン時間、ラウンドからタグ付けされたかどうかなどです。

自分のゲームのワークフローのために視覚的階層を計画する際には、次の点を考慮してください：

• 異なるカテゴリのUI要素を画面全体でグループ化すると、プレイヤーは必要な情報をどこで探せばよいかわからなくなります。プレイヤーがゲームをナビゲートできるようにするために、同じカテゴリのUI要素を一緒にグループ化してください。
• 一度に画面上にカテゴリが多すぎると、プレイヤーはどの情報に注意を払うべきかわからなくなる可能性があります。プレイヤーを混乱させないために、異なるワークフローに応じてUI要素を文脈的に表示してください。
• 同様に、カテゴリごとにUI要素が多すぎると、アクションやプロセスを完了する方法を理解するのを妨げる可能性があります。このため、理想的なインタラクションの順序に視覚的な強調を提供するためにアートスタイルを使用することが重要です。

サンプルレーザータグゲームの視覚的階層の完全なレビューについては、次の表を参照してください：

UI要素をブロックする

視覚的階層を考慮したら、基本的な形状を使用して個々のUI要素をブロックし、カスタムUIレイアウトの構成をRobloxのコアUIと複数のデバイスで確認できます。このプロセスにより、プレイヤーがゲームにアクセスするために使用できるすべての画面サイズで効果的なデザインに修正が必要な場所を確認できます。たとえば、モバイル、タブレット、ラップトップ、テレビ画面などです。

始める前に、RobloxのコアUIを考慮しながら、カスタムUI要素に利用可能な画面スペースを把握する必要があります。たとえば、デフォルトでは、Robloxはすべてのゲームで次のUI要素を表示します：

• ゲーム内のプレイヤーのリスト。
• キャラクターのヘルスバー。
• キャラクターのバックパック。
• チャットウィンドウ。
• キャプチャボタン。
• キャラクターエモートのポップアップメニュー。

これらの要素の中で、ゲームのゲームプレイ要件を満たさないものは無効にすることができ、カスタムUIのための画面スペースを節約できます。たとえば、サンプルレーザータグゲームでは、プレイヤーが単一のブラスターを選択する能力しかないため、バックパックは必要ありません。しかし、プレイヤーが同時に複数のブラスターを選択できる場合、ゲームはこのコアUIを無効にして、プレイヤーがリスポーンする際にブラスターセレクターのためのスペースを常に確保し、インベントリから選択するための別の場所を提供できます。

RobloxのコアUIに加えて、Robloxのデフォルトのタッチコントロールに必要な画面スペースも考慮する必要があります。たとえば、プレイヤーがモバイルデバイスを使用してゲームにアクセスすると、画面の左下隅に仮想スティックが表示され、右下隅にジャンプボタンが表示されます。これにより、プレイヤーはキーボードやコントローラーにアクセスできない場合でも、ゲームをナビゲートできます。

RobloxのコアUI要素とゲームプレイに必要な要素、タッチコントロールの可能性を考慮することで、すべてのデバイスに適応する1つのデザインでカスタムUI要素をブロックできます。これは、ゲームを更新する際にUIの別バージョンを維持する必要がないことを意味します。

この方法を示すために、サンプルレーザータグゲームがモバイルデバイスとPCデバイスの両方のカスタムUI要素をどのようにブロックしているかを示す次の2つの画像を確認してください。両方の画像には以下が含まれます：

• カスタムUIを表す基本的な形状。これにより、最終デザインに達する前にデザインが簡単にいくつかの反復を経ることができます。
• 情報を目立たせるためのグレースケールの色付け。これにより、カラフルな背景環境の気を散らすことなく情報を追いやすくなります。
• チャットウィンドウとアクティブプレイヤーのリストのオープン状態を表示し、画面上でどれだけのスペースを占めるかを確認します。
• PCデバイスには必要ない場合でも、モバイルコントロールのためのスペース。

このようにレイアウトを設計し、同時に画面上に存在できるUI要素の数を考慮することで、プレイヤーのデバイスやワークフローに応じたすべての潜在的なレイアウトに対して将来にわたって対応できます。

レイアウトのUI要素をブロックする際には、次の点を考慮してください：

• UIをブロックする場所や方法は、レイアウトの構成に影響を与える可能性があります。RobloxのコアUIと並行してカスタムUI要素の量とサイズのバランスと対称性を目指してください。
• 一部のモバイルやタブレットデバイスの画面の下隅から遠くにあるUIと対話することは、不快または不可能です。親指の自然な休息位置の近くにインタラクティブな要素を配置してください。
• プレイヤーが環境をナビゲートする際、3D空間が画面上のUIから気を散らす可能性があります。さまざまな背景に対してレイアウトをテストし、画面上のUI要素が明確で読みやすいことを確認してください。

ユーザーフローを開発する

ユーザーフローは、プレイヤーがゲーム内でタスクを完了するために取ることができるパスの集合です。たとえば、武器を選択したり、アイテムを購入したり、キャラクターを回復させたりすることです。ユーザーフローは通常、プレイヤーがタスクを開始することを期待する場所から始まり、タスクの最後にプレイヤーが達成する最終アクションや成果で終わります。さらに、効果的なユーザーフローは、プレイヤーが自分自身で同じ目標を達成するために取りたい異常なパスも考慮します。

次のフローチャートは、プレイヤーがサンプルレーザータグゲームに入ってプレイするユーザーフローを示しています。プレイヤーがゲームを開くと、ロビーに参加します。ラウンドがまだ進行中でない場合、ラウンドループが始まるまで待ちます。そうでない場合、現在ゲームをプレイしているチームに参加します。終了条件が満たされていない場合（たとえば、時間制限に達するか、チームごとに10人のプレイヤーをタグ付けするなど）、プレイヤーはブラスターを選択し、敵チームにタグ付けされるか、タグ付けされるか、アリーナ内で新しいブラスターを装備するか、タグ付けされた後にリスポーンします。プレイヤーが終了条件を満たすと、ラウンドを終了し、再びロビーに参加します。

プレイヤーがゲーム内でできるすべてのことに対してユーザーフローを開発することは重要です。これにより、プレイヤーがタスクを完了する場所や方法を評価し、独自のパスをたどる人々のためにどこで痛点を軽減できるかを予測できます。たとえば、サンプルレーザータグゲームの追加のユーザーフローを開発する場合、プレイヤーが次のような場合はどうなりますか？

• 終了条件が満たされる前にラウンドを終了する？
• チームに参加している間にゲームを離れる？
• ラウンドの途中で電話がかかってくる？
• ラウンドへの接続を15秒未満失う？

プレイヤーがタスクを完了する際に取る可能性のあるすべてのアクションやシナリオを視覚化することで、UI要素のレイアウトが彼らの体験にどのように悪影響を与えるかをよりよく判断し、Studioでデザインを実装する前に調整を行うことができます。タスクが直感的で、目立たず、便利であれば、プレイヤーはゲームに多くの時間を費やし、後日戻ってくる可能性が高くなります。

自分のゲームのためにユーザーフローを開発する際には、次の点を考慮してください：

• プレイヤーにゲーム内で何をしてほしいかと、プレイヤーが何をしたいかは全く異なる場合があります。複数のタイプのプレイヤーでレイアウトをテストすることが最善です。これにより、プレイヤーが目標を達成するために取りたいパスを理解できます。
• フローチャートは、図内で同時に複数のシナリオをキャプチャしようとすると、読みづらくなり、効果が薄れる可能性があります。各タスクに焦点を当てるために、フローチャートは一度に1つの主要なタスクに制限してください。
• インタラクションパターンは、プレイヤーがタッチコントロール、ゲームパッド、またはコンピュータマウスを使用してゲームと対話するかどうかによって異なります。複数のデバイス向けに設計している場合は、各デバイスのために独自のユーザーフローを開発し、痛点を特定し、ワークフローを簡素化してください。

ワイヤーフレームのデザインが最終決定したら、Studioに移動してUIを実現する時が来ました。