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

レイアウトのワイヤーフレーミングは、さまざまなワークフローを通じてコミュニケーションしたい情報の構造と流れを設計するプロセスです。このチュートリアルの重要なステップにより、UI要素の配置を反復し、痛点を発見し、問題があるデザインに時間とリソースを投資する前に、プレイヤーの体験を向上させることができます。

サンプルレーザータグ体験 .rbxlファイルを参照しながら、このユーザーインターフェースのカリキュラムのセクションでは、画面上のUI要素をどのように構成するかについて、以下のガイダンスを含めて説明します。

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

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

視覚的階層を計画する

視覚的階層は、重要性の順序によってUI要素を強調する組織構造です。あなたの体験のさまざまなワークフローに対して視覚的階層を計画することは重要です。なぜなら、それがプレイヤーを成功に導くための基盤を作り、目標が瞬時に変わるファーストパーソンシューター体験の迅速なゲームプレイに特に必要だからです。

効果的な視覚的階層は、プレイヤーが自然に画面でワークフローを完了するために必要な機能や情報を取得できるように導きます。たとえば、サンプルレーザータグ体験の視覚的階層は、プレイヤーがマップを移動し、敵チームのプレイヤーにタグを付ける際に次のUI要素のカテゴリを導く必要があります：

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

これらのカテゴリが最終デザインで画面上に配置される位置は、その重要性の順序を際立たせます：

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

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

自分の体験のワークフローに対する視覚的階層を計画するときは、以下を考慮してください：

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

サンプルレーザータグ体験の視覚的階層を完全にレビューするために、以下の表を参照してください。

UI要素をブロックする

視覚的階層が頭に入ったので、基本的な形状を使用して個々のUI要素をブロックし、RobloxのコアUIと並行してカスタム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でデザインを実装する前に調整を行うことができます。タスクが直感的で目立たず便利であると、プレイヤーはあなたの体験に時間を費やし、将来的に戻ってくる可能性が高くなります。

自分の体験に対してユーザーフローを開発する際には、以下を考慮してください：

• プレイヤーに体験内でしてほしいことと、プレイヤーが実際にしたいことは完全に異なる場合があります。ですので、さまざまなタイプのプレイヤーでレイアウトをテストすることが最善です。彼らが目標を達成するために取りたい経路を理解できます。
• フローチャートは、同時に複数のシナリオを図にキャプチャしようとすると、読みづらく効果的でなくなる場合があります。各タスクに焦点を当てるために、フローチャートを一度に一つの主なタスクに制限してください。
• プレイヤーがタッチコントロール、ゲームパッド、またはコンピュータのマウスを使用してあなたの体験に相互作用するかに応じて、相互作用パターンが異なります。複数のデバイス向けにデザインしている場合は、各デバイスごとにユニークなユーザーフローを開発することで、問題点を特定し、ワークフローを簡素化できます。

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