ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「フェスティバトル」タッチ操作とコントローラー操作に対応しているUIの事例紹介

こんにちは!ちょこです!

このブログでは「ゲームUIを見てみよう!」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです!


今回は「フェスティバトル」(以下「フェスバ」)から操作するデバイスごとのUIの違いについてご紹介します。最近はコントローラーでも遊べるスマホゲームが増えてきた印象があります。ゲームによって対応の方法はさまざまなので気になり、調べています。

以下、目次です。
今回は長いので、目次だけでも大まかな情報は得られるようにしています。気になった項目だけ参照するのが効率的かと考えます。

対戦中のUIは重点的に対応

結論から書くと、「フェスバ」はコントローラーでも遊べますが、対戦中のみ重点的に対応しており、ゲーム全体を通じて快適にプレイできるかという視点で見ると、やや疑問に感じる方針を採られている印象を受けました。
対戦中に絞って対応している理由は恐らく、ソシャゲのように頻繁に更新するゲームの場合、新規機能の実装やそれに伴う各所調整コストが高くなりがちなので、あらかじめ対応範囲を絞ったのかもしれません。

以下、それぞれ補足します。

 

対戦中は通常攻撃ボタンの表示差分がある

対戦中のUIは以下の通りです。画面右下に攻撃やスキルなどのメインコマンドがまとめられています。

タッチ操作 コントローラー操作
f:id:appgameui:20241003230621p:image©COLOPL, Inc. ©MIXI f:id:appgameui:20241003230748p:image©COLOPL, Inc. ©MIXI
f:id:appgameui:20241003230719p:image©COLOPL, Inc. ©MIXI f:id:appgameui:20241003230712p:image©COLOPL, Inc. ©MIXI

▲ボタンのアイコンが表示される


UIのレイアウトは大きく変わっていませんが、コントローラー操作の場合、通常攻撃ボタンが新しく表示されているのが分かります。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI
▲コントローラーでプレイすると通常攻撃のボタンが表示される

 

 

エモートUIでは選択中の項目に枠が表示される

エモートのUIは以下の通りです。

コントローラー操作時をよく見ると選択中のボタンには枠取りがされています。枠が付くことでどの項目が選択中なのか分かりやすくなっています。

タッチ操作 コントローラー操作

f:id:appgameui:20241003234444p:image©COLOPL, Inc. ©MIXI

◆◆◆◆◆◆◆◆◆◆◆◆◆◆©COLOPL, Inc. ©MIXI

f:id:appgameui:20241003234539p:image©COLOPL, Inc. ©MIXI

◆◆◆◆◆◆◆◆◆◆◆◆◆◆©COLOPL, Inc. ©MIXI

 

見やすくするために該当の箇所をトリミングします。

タッチ操作 コントローラー操作

◆◆◆◆◆◆◆◆◆◆◆◆◆◆©COLOPL, Inc. ©MIXI

◆◆◆◆◆◆◆◆◆◆◆◆◆◆©COLOPL, Inc. ©MIXI

◆◆◆◆◆◆◆◆◆◆◆◆◆◆©COLOPL, Inc. ©MIXI ◆◆◆◆◆◆◆◆◆◆◆◆◆◆©COLOPL, Inc. ©MIXI

▲選択中の項目には枠が付いている

 

対戦中以外の画面は自由に動くカーソルを使って操作する

対戦中以外のUIは以下の通りです。横画面の例として対戦終了時の画面を取り上げます。

タッチ操作 コントローラー
f:id:appgameui:20240914204522p:image©COLOPL, Inc. ©MIXI f:id:appgameui:20240914204520p:image©COLOPL, Inc. ©MIXI

▲コントローラーで操作するとカーソルが表示される

 

対戦中以外のUIは以下の挙動で統一されているようです。

  1. 画面内にカーソルを表示する
  2. コントローラーの左スティックでカーソルを自由に動かせる
  3. カーソルとボタンを重ねた状態で決定ボタンを押すと、ボタンを押したことになる

という感じです。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI
▲画面内を自由に動かせるカーソルが表示される

 

このようなカーソルを表示するデザインを採用する場合、以下のメリットが考えられます。

  • 画面上に表示されるボタンにキー(コントローラーやキーボードの物理ボタン)を割り当てなくて済む
  • 画面上のボタンの数が変わってもキーの割り当てに影響がない
  • 割り当てられているキーを覚えなくても良く、学習コストが抑えられる

…などでしょうか。
「フェスバ」の場合、カーソルの動きが等速で且つゆっくりであったため、マウス操作と比較してカーソルの動きに戸惑う人もいるかもしれません。

カーソルがゆっくりだと小さいボタンを正確に押せるため、カーソルの速度が速ければ良い、という話ではないのすが、バランスを取るのは難しそうだと感じました。

 

コントローラーのタイプに合わせて表示するボタンアイコンが切り替わる

コントローラーの入力規格には、一般的にXboxタイプ(Xinput)と PSタイプ(DirectInput)があります。見た限り「フェスバ」が認識するコントローラーもこの2種類だと思われます。
そして、コントローラーの種類に応じて表示されるUIにも変化が見られます。

DirectInput、Xinput方式とは?

Xboxタイプのコントローラー PSタイプのコントローラー
◆◆◆◆◆◆◆◆◆◆◆◆◆◆©COLOPL, Inc. ©MIXI f:id:appgameui:20241003234512p:image©COLOPL, Inc. ©MIXI
f:id:appgameui:20241003230712p:image©COLOPL, Inc. ©MIXI

◆◆◆◆◆◆◆◆◆◆◆◆◆◆©COLOPL, Inc. ©MIXI

▲認識するコントローラーのタイプによってUIも若干変化する

 

具体的にはボタンなどに割り当てられた各種アイコンが変化しています。

タッチ操作 コントローラー

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI

Xboxらしいアイコン、PSらしいアイコンに変わる

 

画面説明画像はタッチ操作時の画像を使用

画面説明画像はデバイスが変わってもタッチ操作時の画像を使用しています。
コントローラーで遊ぶユーザーから見た場合、正確な見た目ではなくなりますが、多くの人が見た時に理解可能な範疇だと判断したのかもしれません。

実際、これについて不満に感じるユーザーの意見は見かけませんでした。対応を検討していたとしても、優先度は低いのかもしれません。

f:id:appgameui:20240920101240p:image
©COLOPL, Inc. ©MIXI

▲説明画像はタッチ操作版の画像が採用されていた

 

バイスは設定画面から手動で切り替える

入力デバイスは設定画面で切り替えられます。
自動で切り替わるゲームと手動で切り替えるゲームがあるように思えるのですが、判断が分かれる理由はちょっと分からず…。

なんとなく手動で切り替える方が都合が良いことがある気はしているのですが…事情を知っている方がいたら教えていただけると幸いです。

f:id:appgameui:20241003234456p:image
©COLOPL, Inc. ©MIXI

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI

 

コントローラー操作中でもタッチ操作できるのが便利

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI

コントローラーでプレイしてもタッチ操作が可能です。
対戦中はコントローラ操作、対戦が終わったらそのままタッチ操作に移行できる点は便利に感じました。

 

バーチャルパッドはコントローラー操作時でも表示される

意外だったのはバーチャルパッドのUIです。
コントローラー操作時には不要なはずのUIですが、表示されています。

不要な情報が残っているという視点で見ると最適であるかは疑問ですが、
先に述べた通り、コントローラーで操作していても画面をタップしたら即座にタッチ操作に切り替わる、という実装になっているのが関係しているのかもしれません。

f:id:appgameui:20241008231855p:image
©COLOPL, Inc. ©MIXI
▲コントローラーのUIとバーチャルパッドのUIが同時に表示されている

 

(おまけ)キーの割り当て紹介

最後に「フェスバ」のキーの割り当てを紹介します。ゲームジャンルによってある程度の傾向はあると思いますが、改めて確認してみます。
設定画面を見ると以下の3つに分類されています。

  1. バトル
  2. アシスト
  3. チャットパレット

バトルのキー割り当て

f:id:appgameui:20241003234512p:image
©COLOPL, Inc. ©MIXI

 

f:id:appgameui:20241003234500p:image
©COLOPL, Inc. ©MIXI

コマンド 対応キー(PSタイプ)
通常攻撃
ACTスキル L1
ULTスキル L2
ドロースキル1 R1
ドロースキル2 R2
ドロースキル入れ替え Lスティック押し込み
スキルキャンセル
移動アクション ×
インタラク ⬜︎
ギミックアクション
ターゲット切り替え
ミニマップ STARE
チャットパレットを開く

 

アシストのキー割り当て

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI

コマンド 対応キー(PSタイプ)
アシスト1選択/設置
アシスト2選択/設置
アシスト3選択/設置 ×
復活アシスト選択/設置 ⬜︎
アシストキャンセル R2
アシスト回転 R1
ズームイン L1
ズームアウト L2

 

チャットパレットのキー割り当て

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
©COLOPL, Inc. ©MIXI

コマンド 対応キー(PSタイプ)
選択肢上/左移動
選肢下/右移動
パレット入れ替え
切り替え/決定
閉じる

 

以上です。
タッチ操作、コントローラー操作に対応する際の参考になれば幸いです。

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

 


権利者さまへ

以下はコンテンツ利用に関する認識の説明です。

「フェスティバトル」のガイドラインを確認したところ、ゲーム画面の投稿がブログに利用可能な旨が書かれていました。

主な参照箇所を抜粋します。

個人のお客様による『フェスティバトル』をプレイする動画(以下、ゲーム内BGMも含むものとし、「プレイ動画」といいます。)の、投稿、配信(以下、生放送を含むものとし、投稿と配信をあわせて「投稿等」といいます。)およびプレイ画面のスクリーンショット等の画像(以下、「プレイ画像」といいます。)の投稿等については、本ガイドラインを遵守してなされている場合に限り、当社らより著作権侵害を主張いたしません。

  1. YouTube等の外部プラットフォームで『フェスティバトル』のクローズドβテストにおけるプレイ動画やプレイ画像の投稿等を行う際は、「※画面はクローズドβテストにおけるものです。」と概要欄に表記すること(概要欄がないプラットフォームの場合には、プレイ動画やプレイ画像と同時に確認できる位置に表記してください。)
  2. プレイ動画やプレイ画像の投稿等にあたっては、以下の著作権表示を行うこと
    「©COLOPL, Inc. ©MIXI

配信ガイドライン | フェスティバトル

フェスティバトルのコンテンツ利用ガイドラインです。2024年10月3日確認版です

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ