高速周回が迷わずできる！ 「ウマ娘」UI設計の根幹とは

情報整理と5つの作業

　情報整理のメリットは、情報の特徴や関係性の把握。都度必要な情報の確認をスキップできるため、制作の効率化に繋がる。情報表示のルール化は一貫性と柔軟性がポイントで、一貫性では法則性を利用しトレーナーを迷わせず、柔軟性では仕様変更や仕様追加に対応できることが利点だ。

　「ウマ娘」の育成パートを情報整理した結果、ウマ娘とレースの情報を優先すべきと判断された。ウマ娘だけに絞って情報を見てみると、キャラクターの名前やビジュアルだけでなく、性格やプロフィール、馬場適性、基礎能力、各種パラメーター、強化情報などなど膨大で、ひとつのレースについてもレース名や出走条件、レース自体の情報などウマ娘本体並に情報が多い。

　そこで行なわれたのが次の5つの作業だ。洗い出しとグループ化、階層化、関連・紐づき、情報フローになる。それぞれ見ていくと、洗い出しはターゲットにどんな情報があるか書き出すこと。グループ化は洗い出した情報をタイプごとのグループに分けていく。階層化はグループ化を経た情報の親子関係の整理。関連・紐づきは、それぞれの情報の関係性の理解、情報フローはゲーム内において選択した際の情報変化の把握になる。上記を踏まえてスライドを見てみよう。

これがウマ娘本体が持つ情報

こちらはひとつのレースが持つ情報

洗い出し過程。ここでは純粋に書き出しが実行される

グループ化では、たとえばスタータスには基礎能力、距離適性、脚質適性といったようにグループ化が進む

階層化はより詳細なグループ化ともいえるが、基礎能力にはスピード、スタミナ、パワー、根性、賢さが……といった具合に分けていく

関連・紐づけ。例としてファン数が取りあげられた。ファン数はウマ娘では現在のファン数、出走条件のファン数、レースでは出走条件にファン数、獲得できるファン数がある

ファン数に着目すると、目標のために必要な残りファン数という要素が見えてくる

情報フロー。ゲームプレイがしばらく進むとなんとなく把握していることと考えてみるとニュアンスをつかみやすいハズ

情報整理がされた一部

　上記の工程を経て、育成パートで重要な情報の精査が済み、次に触れる情報表示のルール化に繋がっていく。

情報表示のルール化で情報の表示位置や優先度を決める

　情報表示のルール化は、情報整理によって得られた情報の特徴や関連性をベースに、情報の表示位置や優先度などを決めていく工程だ。重視されたのは一貫性と柔軟性。繰り返しとなるが、一貫性は法則を持たせて操作を迷わせないこと、柔軟性は仕様変更や追加に対応できることになる。

　「ウマ娘」の育成トップ画面は上からヘッダー、サブ情報、メイン情報、フッターに分けられている。ヘッダーにはターン数や育成目標、やる気など育成全体に関わる情報が並び、サブ情報は3Dキャラクターやアドバイスコメント、メイン情報は基礎能力の値やメインコマンド、そしてフッターにはスキップ切替やログ、メニューなどへのアクセスとなっている。

　ほぼ固定されている要素はヘッダーとフッターで、画面に応じて情報が細かく変化していく要素はサブ情報とメイン情報となる。また表示位置については、スマートフォンでの操作が前提になっており、ちょうど指がくる位置にメイン情報といった具合だ。

　育成トップ画面からトレーニング画面への遷移を見てみると、ヘッダーとフッター、メイン情報の基礎能力パラメーターが固定されているのがわかる。このとき基礎能力をつねに表示することで、ウマ娘を強くすることを意識づけるとともに、トレーナーが操作すべきことを明確にしている。

　また情報フローの視点に戻ると、たとえば「スピード」を選択した際にはパラメーターがどれだけ上昇するかといった情報の表示がある。育成パートを繰り返す際などに、迷うことなく高速にプレイを進められるような配慮だ。

リザルト画面ではヘッダーとフッターは固定

　育成からレースに進んだ場合はどうだろう。情報に違いはあれど、育成トップ画面と同じ構造となっているのがわかる。もちろん、レース選択画面で重要になるのはレースに関する情報であるため、メイン情報には距離や馬場といった情報が優先されるほか、獲得可能なファン数などが優先的に表示される。

柔軟性：基本的なレイアウトそのままに要素の追加/変更/削除ができる

　情報表示のルール化によるもうひとつのメリットである柔軟性については、開発途中の仕様変更が事例に挙げられた。初期の仕様では毎月末にレースに出走という流れだったが、仕様変更があり、育成目標に変更された。仕様変更に沿うだけの情報追加ではもともと重要な情報の表示に影響が出てしまう。このとき、情報表示ルールがあると表示の変更や追加、または削除がやりやすいというわけだ。

仕様変更や追加要素をとりあえず追加したようなイメージ

左が初期の育成の流れ、右が仕様変更後の育成の流れになる

　情報表示ルールに基づく対応しては、まずヘッダーに育成目標が追加された。下記スライドでは変更前のヘッダーを確認でき、たづなさんがヘッダーからサブ情報に移動しているのもわかる。また育成目標の開始と達成の画面が追加され、動機付けがより明確になった。

　育成目標の種類にはいくつかあるが、これも情報整理をしてみるとファン数の影響が大きいとわかる。たとえば、特定のレースに出走とある場合、出走条件にファン数が絡んでくる。それに応じてファン数の表示優先度をアップして、いまのゲーム画面と演出に着地するまでの流れが解説された。

育成目標の種類を見ていくと、ファン数が確実に絡んでくる

レース選択画面。仕様変更後は獲得できるファン数だけに絞られた

レースリザルトでお馴染みのピラミッドも追加され、ファン数の重要性を強調した

　こうした解説を経て、最後に表示されたスライドは「画面ごとの仕様だけを考えてレイアウトした場合」、「情報表示ルールを決めてレイアウトした場合」のふたつだ。ここに「ウマ娘」のゲーム画面も並べてみると、情報整理→情報表示のルール化の工程が効果的に機能していることがわかる。あらためてゲーム画面を眺めることで、トレーナーを迷わせない最高のUIを目指す意志が見えてくるのではないだろうか。