ゲームはUI/UXのかたまりだ。大量の数値をやりとりするRPGのバトルシステムは、その好例だ。デッキ構築✕ローグライクなカードバトルRPG『Slay the Spire』は、そのための良いテキストを示してくれる。

UI/UXによって変わる人の行動

首都圏在住の読者であれば、東京地下鉄（東京メトロ）と都営地下鉄を日常的に使用しているだろう。その時、路線マークに注意して欲しい。路線毎に異なる色とアルファベットの記号が入っているはずだ。

しかし、東京メトロが発足する2004年までは、このマークが異なっていた。路線の色は同じでも、記号が抜けていたのだ。そのため千代田線と南北線のように、色が似ている路線では混同しやすかった（両線は溜池山王駅に乗り入れている）。また、たとえ色が違っていても、しばしば混乱の種になった。

引用元：https://www.tokyometro.jp/ginza/topics/20180622_179.html

これが2005年のサインシステムの見直しにより、色と路線記号が併記されたことで視認性が高まった。バリアフリー化の促進と訪日外国人むけの施策だったが、これにともない複数の路線が乗り入れている駅で、平均滞在時間がぐっと減少したとされる。それだけ人が道に迷わなくなったのだ。このように、ちょっとしたUIの変更であっても、人の行動を大きく改善できる。

このとき、適当にUIを変更するのではなく、特定の目的をもって（＝特定の体験＝User Experienceを提供するために）UIをデザインする必要があるのは、いうまでもない。このUIとUXの関係をデザイン用語でUI/UXと呼ぶ。UIがあってUXがあるのではない。UXのためにUIがあるのだ。この点を間違えないことが重要である。

ゲームはUI/UXの集合体

長々とこうした説明を記したのも、ゲームはUI/UXの集合体だからだ。すでに何度も本連載で説明しているように、ゲームはプレイヤーとゲーム機との情報の循環で進行する。そこで境界線にあたるのが、入力UIであるコントローラーと、出力UIであるビジュアル・サウンド・振動だ。

中でもビジュアルUIは大きな役割を占め、この出来不出来がゲームの完成度を大きく左右する。体力やスコア情報などのHUD（Head Up Display）だけでなく、キャラクター・背景・エフェクトなど、画面に表示されるビジュアルはすべてUIだとみなせる。

これが顕著にみられるのがRPGのバトルシーンだ。RPGのバトルは、ひらたくいえばランダム要素が加味された数値のやりとりを、味方と敵とでやりあっているだけにすぎない。

そのため、遊びやすいゲームを作るためには、この数値の視認性を高めることが必要だ。そのうえで、ヒット・ダメージ・魔法攻撃などの各種エフェクトや、キャラクターのモーションを追加するなどして、ゲームを盛り上げていくのだ。

デッキ構築✕ローグライクなカードバトルRPG『Slay the Spire』は、こうしたゲームUI/UXを語る上で格好のテキストだ。

本作は「早期アクセス」ゲームで、3体のキャラクターから1体を選んで、バトルを延々と繰り返すだけ。3種類のマップを攻略すればゲームクリアで、やり込み要素も乏しい。にもかかわらず、高い評価を受けているのは、バトル画面におけるUI/UXがしっかりとデザインされているからに他ならない。

ゲームの展開

はじめにキャラクターを戦士・暗殺者・オートマトンから選ぶ

全体マップで次に進むエリアを選択する。後戻りはできない

エネミーエリアではバトルが始まる。山札から1ターンにつき5枚ずつカードが配られ、エナジーの範囲内でカードを消費し、アクションを行う。エナジーも1ターンにつき3点ずつ回復する

バトルに勝利するとカードが3枚表示され、そのうち1枚を入手できる。カードを追加しなくてもいい。なお、バトル中に撤退することはできない

商人エリアに止まるとカードやアイテムの売買ができる。不要なカードを売却することもできる

イベントエリアでは、キャラクターと会話をしたり、特別なアイテムを入手できるチャンスが生まれたりと、さまざまなイベントが発生する

休息エリアでは休息してヒットポイントを回復するか、カードのアップグレードができる

大量の情報をどのようにプレイヤーに伝えるか

本作の特徴はバトルシステムがトレーディングカードゲームのシステムを流用している点だ。そのためキャラクターの成長は「強力なカードを収集する」ことと、「使いやすいデッキを構築すること」になる。

もっとも、本作ではバトルやイベントなどでカードが増える機会は多いが、カードを減らす手段は少ない。商人に「お金を払って」引き取ってもらうしかないのだ。いわゆるデッキの圧縮ができない点がポイントになる。そのため、むやみにカードを増やすのではなく、適切なバランスを保ってデッキを構築していくことが求められる。

こうした理由から、本作でゲームをうまく進めるコツは、とにかく何回もプレイすることにつきる。その過程でカードの特性やデッキのバランスなどを、次第に理解していくのだ。つまり、遊び込めば遊び込むほど味が出てくる、スルメのようなゲームだといえる。

ただし、この手のゲームには大きな問題点がある。「間口が狭く、奥が深い」ゲームになりがちな点だ。きちんとプレイヤーをハマらせるには、「間口が広く、奥が深い」ゲームにする必要がある。そのため多くのゲームでは、チュートリアルを重視しがちだ。しかし、チュートリアルが好きなプレイヤーは少ない。これが多くのゲームデザイナーにとって、頭が痛い問題となる。

エネミーにカーソルを合わせると、次のターンに何ダメージを与えてくるかがわかる。ブロック値を上げるとダメージを減殺できる

キャラクターの周囲には3つまでオーブを展開できる。オーブは毎ターン、自動的にエネミーにダメージを与えるものなど、さまざまな種類がある。マウスカーソルをあわせると効果がわかる

もちろん本作でもチュートリアルは用意されているが、必要最小限におさえられている。その上で本作は、ポップアップウィンドウを徹底的に活用する作戦に出た。画面上のさまざまな地点にカーソルをあわせてもらい、そこで詳細な説明を表示させるやり方だ。

このやり方が優れているのは、ゲーム中にカーソルを移動させることで、無意識のうちにさまざまな説明文が目に飛び込んでくる点だ。カーソルを外せば、説明文もさっと消える。これによってプレイヤーに、大量の情報を押しつけがましくなく、適切なタイミングで提供することに成功しているのだ。

簡単なようにみえて、これを一つずつ丁寧にやりきることは存外難しい。大量のテキストが必要になるからだ。この「おもてなし」マインドが、本作の間口をぐっと広げることに貢献している。

もっとも、まだまだやりようはある。画面をパッと見ただけでは、敵味方の強さや、優勢度がわかりにくいのだ。本作において重要なパラメータに、敵味方の攻撃力と防御力があるが、いずれも数値が小さくわかりにくい。また「弱体化」など、キャラクターの状態変異を伴う効果も多いが、今どんな状態にあるのか、これまた一目でわかりにくい。

そこで単にアイコンを表示するだけでなく、キャラクターの周囲を色つきのエフェクトで囲う、BGMやSEを変える、キャラクターの待機＆攻撃モーションを変えるなど、さまざまなアイディアが考えられる。これにより工数が一気に増えることになるが、こうした点を細かく作り込むことが、ゲームの完成度を上げることにつながる。

あくまで一般論だが、ゲームのUI/UXはベタベタな方が好まれる。プレイヤーの情報認識レベルには、人によって大きな差異があるからだ。もっとも、やりすぎると画面がゴチャゴチャしてしまい、視認性が下がる。何ごともバランスが重要で、この点でお手本になるのが任天堂のゲーム群だ。今後のアップデートで、さらに遊びやすいゲームになることを期待している。

© 2017 - 2019 MegaCrit, LLC.

■関連リンク
Steam『Slay the Spire』販売ページ
https://store.steampowered.com/app/646570/Slay_the_Spire/
Mega Crit Games公式サイト
https://www.megacrit.com/
銀座線リニューアル情報サイト「お客様を正しく目的地に導く「案内標識」進化の歴史【銀座線デザイン探訪】」
https://www.tokyometro.jp/ginza/topics/20180622_179.html