AC音ゲー選曲画面のUIの話

これは designing plus nine Adevent Calender 1日目の記事です。

こんにちは。
法学部のテスト時期が意外と近い事に気付いてかなり焦っているエアバス(@airbus_P)です。

今回はデザインサークルのアドベントカレンダーという事で、僕の趣味であるアーケード音楽ゲーム(音ゲー)のUI(ユーザーインターフェース)デザインについて書きます。

UI面での音ゲーの特徴

音ゲーのUIの特徴として

• 操作デバイスが特殊
• 各メニューに制限時間がある

という点が挙げられます。

例えばKONAMIのSOUND VOLTEXというゲームではこんな感じのデバイスで操作します。

(画像はPC版用の公式コントローラー。 コナミスタイルより引用)

つまみと6つのボタンを使うのは音楽ゲームとしては楽しいですが、これを使ったプレイ前後のUI設計はかなり大変そうです。
ただ、DanceDanceRevolutionやGITADORAではプレイ時には使わない十字キーを設けてメニュー操作用にしているので、全機種それでいいのでは？という気もするところ。(↓のツイートの画像参照。画面下左右に十字ボタンと決定ボタンが二つずつある)

【アミューズ新機種情報】

✨神々しい輝き…✨#ダンスダンスレボリューション 20周年筐体❗#DDRA20 本日より稼働です❗❗👏#金筐体 なら一足早く新バージョンをプレイできますよ✨
懐かしの楽曲も復活でファン大歓喜😍

是非踏みに来て下さいね🎵#黄金のDDR #ダンレボ#ラウワン #大宮店 pic.twitter.com/9XbiTIjPm4

— ラウンドワン大宮店 (@r1_omiya) March 26, 2019

さらに音ゲーUIの大変な点が、各メニューに制限時間が設けられている点。メーカー・ゲームセンター側としては1回のプレイ時間が短い方が回転率が上がり、利益も大きくなるので選曲やプレイ結果などの各画面には制限時間が設けられています。

ビジネスとしては仕方が無いのですが、結構な回数プレイしているゲームでも曲を探したり、設定を変えたりするのに手間取っていると時間が迫って焦ったり、最悪時間切れで意図しない曲をプレーすることになったりします。
初めてプレーする人ならなおさら大変でしょう。
そのためUIには直感的にすぐ操作できることが求められます。

以上を踏まえると音ゲーのUI設計は中々大変そうですね。
今回は全ての音ゲーに存在し、また初回プレーの人から上級者まで全員が操作することになる選曲画面のUIについて比べてみます。

SOUND VOLTEX(ボルテ)

どんなゲーム？

動画見れば大体分かるよね？

選曲画面

操作デバイスの形状は既出の写真や動画を参照のこと。 基本操作は

• 決定: 中央奥の青いSTARTボタン
• カーソル移動: 右側のつまみ
• 難易度変更: 左側のつまみ
• 1階層上の楽曲フォルダに移動: 左手前のオレンジのFX-Lボタン
• ソート項目変更: 右手前のオレンジのFX-Rボタン
• オプション変更: 両FXボタンを同時押し

となっています。

ボルテでは楽曲が階層化されたフォルダで管理されています。

また難易度やオプションについてはモーダルウィンドウ上で設定する形で、楽曲を選んだあとに変更することもできます。 ]

UIの良い点

まずハード面から。
つまみを回すとカーソルが動くのは割と直感に近い動きで、分かりやすそうです。
また決定ボタンが離れて配置されているのは、誤操作のリスクを避けることができる良い設計に思えます。

画面に目を移すと、まず画面下部にコントローラを模した操作説明が常に表示されているのは評価できます。
操作デバイスが特殊な形をしているのでボタンの名前だけ書かれてもわかりませんよね。

次に注目したいのがフォルダ機能です。この機能は今年2月末にアップデートされた新バージョンで大きく変更が加えられました。
↓の画像は2バージョン前の操作説明なのですが、以前はフォルダ用のメニューが新たにモーダルに開く形になっていました。

フォルダ移動をモーダルウィンドウでやるのも、一度に受け取る情報量を減らす意味では良い気はします。しかし、そのトリガーがFXボタンなのは分かりづらそうです。今回の変更は初心者にも分かりやすく階層構造を示した点でナイスなのでは？

もう一つ、今作での大きな変更点に難易度・オプション設定のタイミングがあります。
これまでは楽曲を確定する前に左つまみで難易度を変えたり、両FXボタンを押してオプションを変える必要があったのですが、今作では楽曲選択後にそれらを変更することが可能になりました。
これによって難易度変更やオプション設定を忘れることを避けられるだけでなく、間違った曲を選んだ場合にはキャンセルして楽曲選択に戻れるようになりました。便利。

UIのダメな点

真っ先に思いつくのがソート機能。
FX-Rボタンを押す度に曲名順→アーティスト名順→レベル順→配信日順→…と無限ループするのですが、一回でも押しすぎるとまたはじめからやり直しになります。

実はこのクソ仕様、今作のUI変更による改悪で生まれたものなのが性質が悪いところです。

前作までは下記のようにモーダルなウィンドウが開き、つまみでソート方法を選べていました。

そこはそのままで良くない？

もう一つ、気になるのが一画面の情報量。
別の難易度のジャケットのサムネイル画像や、未選択のソート項目などは表示する必要性をあまり感じません。(ボルテでは同じ曲でも難易度別にジャケット画像が異なる場合がある)
またクリアランクやクリアメダル(プレイ履歴のような物)は画面上部の楽曲詳細のみに絞る方が、情報がすっきりしそうです。(クリアメダルはDDRや弐寺のように色だけで表現する手もありそう)

まとめ

ボルテについてはハードが特殊な形状なのもあり、UIがかなり劣悪な印象があったのですが、改めて考えるとVIVID WAVEへのアップデートで割と改善が行われているようです。
リザルト画面の情報設計や、ソート機能の仕様変更など大丈夫か？という変更点も見られますが、今後の改善に期待したいところです。

Dance Dance Revolution (DDR)

どんなゲーム？

下から流れてくる矢印と同じ方向のパネルを踏む。
見た目で分かりやすいので普段音ゲーをしない人(外国人観光客など)が試しにやってみることも多い印象です。

筐体はざっくりと大きなディスプレイ部と足で踏むパネル部で構成されています。
ディスプレイの下に十字・決定ボタンやテンキーがついていて、楽曲プレイ中以外はこちらを操作します。

source: 4Gamers

なお筐体には複数のバージョンがあり、ボタンの配置に違いがあります。
例えば上の金色の筐体では十字キーの横に決定ボタンがあるのに対し、下の黒い筐体(X筐体)では十字キーの中心に決定ボタンがあります。

By Chester - https://www.flickr.com/photos/chesterbr/16691519165/, CC BY 2.0, Link

選曲画面

基本操作は

• 決定：決定ボタン
• カーソル移動：十字キー or フォルダを選択して決定ボタン
• フォルダを閉じる：上下同時押し
• オプション設定：決定ボタン長押し or テンキーの9

となっています。

DDRではカテゴリ>フォルダ>楽曲の三階層で楽曲が管理されています。

難易度選択は楽曲を選んだあとで行います。

また各画面で決定ボタンを長押しするとオプション設定画面に入ることができます。

UIの良い点

まず十字+決定ボタンによる操作が直感的に分かりやすいです。
特に説明を読まずとも大抵の人は迷わず操作できるのではないでしょうか。

また画面が大きいこともあって、余白をしっかり取り、画面あたりの情報量を抑えられているように感じます。
クリアランプ(フルコンボなどの達成状況)をジャケットの外枠の色で表しているのも、ボルテと比べるとスマートです。

カテゴリ・フォルダ構造もカテゴリ・フォルダの各メニューの形状が楽曲と異なるため、階層性が分かりやすくなっています。

UIのダメな点

ハード面で扱いづらく感じるのが、筐体の世代によりボタンの配置が異なる点。
特に前掲の金筐体とそれ以前では決定ボタンの位置が異なるため、右ボタンと間違えて決定ボタンを押してしまうこともありそうです。

DDR金筐体は決定ボタンの位置が従来と異なっており、昨日は4クレ中3回は誤爆した

— みずふー🍆 (@mizuff_k) March 24, 2019

このハード上の難点を一層嫌な物にしているのが、楽曲選択をキャンセルできないソフト面の仕様です。一度難易度選択に入ってしまうと他の曲を選ぶことはできないので、間違って決定ボタンを押してしまうと知らない曲・やりたくない曲で遊ぶことになります。
この仕様どうにかなりませんかね…。

また各フォルダ内での並び順が変えられないのも気になる点。
DDRは他の機種と比べると曲数が少ない(気がする)のでそこまで気になりませんが、それでもハイスコア順やクリアランプ順に並んでくれれば便利な場合もあるはず。
なんとなく痒いところに手が届かない感じがします。

まとめ

DDRは十字・決定ボタンに大画面と恵まれたハードを活かして分かりやすいUIを実現しているようです。ただソフト面では歴史を感じる気の利かない部分があり、どうにかならんかなあという思いです。
選曲画面以外ではゲームスタート時に必ず表示言語を選択させたり、e-amusement pass無しでのプレー時には「ポップス」「洋楽」などジャンル別フォルダがデフォルトで選択されるあたりは、しっかり客層を理解している感じがとても良いです。

チュウニズム (チュウニ)

どんなゲーム？

横一列に並んだタッチパネルと手の上下位置を認識するセンサーを使い、流れてくるノーツに合わせてパネルをタップしたりフリックしたり、手を上下に振ったりするゲーム。ボルテ・DDRがコナミのゲームなのに対し、こちらはセガが作っています。

▽画面の下から手前に伸びているのがタッチパネル、横の壁で紫に光っているのがセンサー部

選曲画面

操作は画面下部に表示されている「選択」「レベル+」などのガイドの真下にあるタッチパネルを触れることで行います。

選曲画面最上段は楽曲のカテゴリとなっており、「ジャンル切替」のエリアをタップしたあと左右に移動させることができます。
画面中段には各カテゴリに含まれる楽曲が横一列に並び、「◀左」「右▶」の直下をタップしてカーソルを移動します。
難易度変更もこの画面で「レベル+」「レベル-」のエリアを押すことで行います。

楽曲選択後には店内対戦やキャラクター、オプションを変えることができます。

UIの良い点

使用するハードはタッチパネルだけなので、かなりシンプルと言えます。入力領域の幅を画面ごとに変えられるのはタッチパネルの強みですね。

ディスプレイを見ると、下部ガイドの色分けについても、ある項目の設定に入るにはオレンジ、確定する場合は赤のような法則性が見られます。
また上部に上位階層のカテゴリを置き、画面中央にカーソルがフォーカスしているオブジェクトを拡大して置くのは現在のカテゴリ・選択中のオブジェクトが分かりやすく、よく考えられているように感じます。

オプション設定の画像1枚目では、左への移動ができない事を

• 中央のオブジェクト左方の◀を非表示に
• 下部ガイドの「◀左」をグレーアウト

することで示しています。このように無効な操作を教えてくれるのも嬉しい配慮です。

UIの悪い点

（正直そこまで思いつかなかったので些細な指摘です）

難易度変更のガイドが「レベル+」となっているのは、レベルが「BASIC」など難易度を指すのか、「12+」などの楽曲のレベルを指すのかが不明瞭で戸惑いを感じる点です。（後者を指す用法が一般的な気がする）

レベル別カテゴリがアクティブな時にはカテゴリ自体が移動する（例：「LEVEL 10」から「LEVEL 10+」にカテゴリが変わる）のに対し、その他のカテゴリでは楽曲の難易度が変わる（例：POPS&ANIME カテゴリ内の曲全ての難易度が「BASIC」から「ADVANCE」に上がる）というように異なる動作をしているため、それぞれで文言を変えた方がより適格なテキストに思えます。
(オンゲキのように全ジャンル・レベルのカテゴリを常に表示し、楽曲選択後に難易度を決定するのも一つの解決策でしょう。)

もう一点は「戻る」の扱いです。オプション画面を見ると右端に「戻る」が割り当てられているのが分かります。しかしその一方が「曲選択へ戻る」つまりキャンセル操作なのに対して、もう一方は「決定して戻る」つまり確定して終了する操作となっています。
これ分かりにくくないですか？

オプション設定の関係上場所が共通なのはまだ理解できますが、「戻る」という文言まで共通化させるのは避けた方が良いように感じます。
例えば「決定して戻る」を「確定」にテキストを変えたり、「決定して戻る」から選択機能を廃して両方を１つ前の画面に「戻る」動作とするのは検討しても良さそうです。

まとめ

チュウニズムではハード自体が直感的な上に、色によるルールが上手く使われていて初心者でも操作にあまり迷わず遊べそうな印象を受けました。
一方で難易度を変えたり、キャラクターのスキルを気にし始めるような段階の中級者に対してはやや説明不足で不親切な印象を受けます。（キャラクターの設定について公式ページに説明無いとか）
他機種に目を向けると、maimaiやオンゲキといった他のSEGA製ゲームとUIの共通性が高いのもかなり好印象でした。KONAMIも電子マネーや多機種連動企画などで囲い込みを図るのなら、UIの共通化も頑張って欲しいところです。

終わりに

アドベントカレンダー初日の記事にしようと思ったらIIDXまで書けなかったのですぐに加筆します。今が23:57なので取り敢えず公開しますが、めちゃくちゃ急いで書いたので雑でも許してください。