コンソール開発ガイド

200M+のXbox と PlayStation プレイヤーで、コンソールはより多くのユーザーを引き付ける機会を提供します。通常のデバイスと比較して、コントローラーとコンソールの 10 フィートの UI エクスペリエンスの設計には、コンソールでのエクスペリエンスが成功するのを助けるために従う必要のあるいくつかの特別なガイドラインがあります。

コンソール向けに設計されたエクスペリエンスは、スムーズなリリースとコンソールから削除されるリスクを最小限に抑えるために、コンテンツ成熟度情報を提供する必要があります。

コントローラーの設計

コンソールエクスペリエンスは、入力コントローラーを介してユーザからコマンドを受け取り、スムーズなインタラクションのために特別なデザインが必要です。

UIを簡素化する

次のものを適用して、コンソールの UI デザインを簡素化します：

アクセシブルなナビゲーション制御 : 基本線ナビゲーション、4方向を含む、選択して戻る、コンソール上でユーザーがコンテンツにアクセスし、相互作用する方法を制操作します。これらの基本的なナビゲーションコントロールを使用して、ユーザーがすべての UI 要素にアクセスできるようにして、簡単にエクスペリエンスのすべてのインタラクティブな部分にアクセスできます。
デフォルトコントローラーナビゲーション：ユーザーがバーチャルカーソルを有効にしてUIメニューにアクセスできるものの、すべてのユーザーがプロセスに精通しているわけではないので、ユーザーがバーチャルカーソルを有効にする必要がないように、UIのコントローラーナビゲーションをデフォルトオプションとしてサポートする必要があります。
最小限のコントローラー入力複雑さ：タップ可能またはクリック可能な入力方法とは異なり、コンソールユーザーは一度に1つのボタンを押してナビゲートし、他のデバイスで移動するアクションは、コントローラーで追加の移動が必要になる可能性があります。エクスペリエンスのキーアクションがアクセスするのに数移動しかかからないことを確認してください。
チャットウィンドウなし : デフォルトのインエクスペリエンステキストチャットシステムを使用するか、レガシーのチャットシステムをカスタムチャットシステムとしてフォークしても、コンソールエクスペリエンスのチャットウィンドウを無効にします。

コントローラーは、コンソールと VR だけでなく、デスクトップやモバイルデバイスなどのデバイスでも利用可能であり、必要な移動数を最小限に抑えると、PlayStation と Xbox 以外のすべてのデバイスと入力タイプの UI が向上する可能性があります。

追加の制御を追加する

モバイルやデスクトップとは異なり、コンソールではナビゲーションが常に順次で行われるため、ユーザーは他のデバイスと同じくらい早く遠くの要素間をジャンプすることはできません。ナビゲーションの速度を向上させるには、エッセンシャルなインエクスペリエンスアクションの追加ボタンとショートカットを考えてください。

動的なボタンアイコンを容納する

経験がより多くのプラットフォームに拡大するにつれて、異なるデバイスに一致するボタンアイコンを表示することを忘れないでください。UserInputService には、これを達成できる 2つのメソッドがあります:

UserInputService:GetStringForKeyCode() は、米国のクエリキーコードをコンソールキーボードレイアウトに変換できます。カスタムアセットをボタンアイコンとして表示して、エクスペリエンスの外見と感触に合わせるのに役立ちます。次の例では、カスタムアセットをマップする方法を示します Enum.KeyCode.ButtonA :

カスタムアセットのマッピング
local UserInputService = game:GetService("UserInputService")
local imageLabel = script.Parent
local key = Enum.KeyCode.ButtonA

local mappings = {
    ButtonA = "rbxasset://BUTTON_A_ASSET", -- 望むボタンAアセットで置換
    ButtonCross = "rbxasset://BUTTON_CROSS_ASSET" -- 望ましい ButtonCross アセットに置き換える
}

local mappedKey = UserInputService:GetStringForKeyCode(key)
local image = mappings[mappedKey]

imageLabel.Image = image

UserInputService:GetImageForKeyCode() は、要求されたキーコードの Roblox デフォルトアイコンを、マッピングの Enum.KeyCode.ButtonA の次の例のように、簡単にドロップイン交換として返します：

デフォルトアイコンのマッピング
local UserInputService = game:GetService("UserInputService")
local imageLabel = script.Parent
local key = Enum.KeyCode.ButtonA

local mappedIcon = UserInputService:GetImageForKeyCode(key)
imageLabel.Image = mappedIcon

ハプティックフィードバックを提供

コントローラーのユニークな利点の 1つは、コントローラーを物理的に振動させて、ユーザーのタッチ感覚をエンゲージすることで、ハプティックフィードバックを提供できることです。HapticService を使用して、ユーザーの没入を高め、有用なフィードバックを提供できます。ハプティックフィードバックでより没入感を得られる例には、次のものがあります：

爆発や衝突などの物理的にドラマチックなイベント。
ドアベルのリングや新しい顧客がショップに入るなど、ユーザーの注意が必要なイベント。
リストの端にスクロールするか、無効なボタンをクリックするなどの UI アクション通知。

HapticService はまた、コントローラー内の個々のモーターを制御して、振動の強度と時間を個別に設定し、アクションがフィードバックをトリガーする方法の一貫性を維持できるように、異なる目的のために異なる振動を設定できます。ユーザーが恒久的な振動を不快で煩わしいと感じる可能性があるため、ハプティクスを注意深く設計し、過度の使用を避けましょう。

10ft の経験のためにビルドする

コンソールでは、ユーザーは通常、画面から 10 フィート離れて座っています。1.5x のスケールファクターでは、UIが快適でナビゲートしやすく、ナビゲーションバーみやすいフォントであることが保証されます。

テレビの安全エリアを考慮する

An example illustration showing the dimensions of the TV-safe and unsafe zone. — 青い領域はテレビ-安全でない領域を表します。

歴史的および技術的な制限により、すべてのテレビが画面の端に完全にコンテンツを表示できないため、重要なエクスペリエンス要素がさまざまなテレビで表示されるようにするために、TV に安全な領域に UI 要素を配置します。

動的にサイズが変更される UI を実装する

相対的なサイズと相対的な位置を使用して、UIを実装して、すべてをフレームのパーセンテージとして測定します。スケールファクターをすべての UI サイズに組み込むには：

最初に低解像度で開発します。
相対位置と UISizeConstraint を使用して、UIをスケールする。
出力特性に基づいてスケーリング GuiService:IsTenFootInterface() 。
コントローラーはすべての種類のデバイスで利用可能であることを覚えておき、GuiService:IsTenFootInterface() を使用してコントローラー入力を推測しないでください。
UI が拡大するにつれて画面上の混乱を減少するために ScrollingFrame を実装

進捗的な開示を適応する

進捗的な開示は、高度なまたは使用頻度の低い機能をセカンダリ画面に遅延します。UI を片付けて使いやすくする最良の方法の 1つです。コンソールのユーザー体験では、デスクトップのようにすべてを1つの画面に配置するのではなく、ユーザーが画面に出入りすることがより一般的で、より速いことがあります。

デスクトップまたはモバイルインターフェイスとは異なり、通常は静音され、微妙なハプティックフィードバックに依存するインタラクションではない、コンソールインタラクションを向上させるためにサウンド効果を追加できます。ユーザーがコントローラーを使用してUIをナビゲートするとき、サウンド効果を組み込んで、選択を確認したり、シグナルメニューを移動したりして、全体のエクスペリエンスを向上させることを検討してください。