2021年11月13日（土）から14日（日）までの2日間、Cygames単独の技術カンファレンス「Cygames Tech Conference」が行われた。カンファレンスはCygames公式YouTubeチャンネルでLive配信され、後日アーカイブ化も予定されている。
本稿では、11月13日（土）に実施されたセミナー「ウマ娘 プリティーダービーのUI設計事例～0を1にするためにUIデザイナーが行った情報から設計へのアプローチ～」の模様をレポートしていく。
【講演者】
土肥 仁 氏
デザイナー部 インタラクションデザイナーチーム
画面制作前に行う5つの情報整理
ゲーム世界とプレイヤーとを繋ぐ役割を担う「UI」（User Interface）。ゲームシステムを分かりやすく伝えるためには、画面に表示される情報について一貫性・規則性・優先順位など工夫を持たせる必要があり、UIは特に重要な役割を占めている。
『ウマ娘 プリティーダービー』（以下、ウマ娘）のような育成シュミレーションゲームジャンルで取り扱う情報量は膨大であり、UIは複雑になってしまいがちだ。そんな問題を解決すべく、土肥氏はUIについて「必要な情報を正しく表示し、トレーナーがやりたいことを迷わず選択できるようにする」ことを目標に設定。一画面に多くの情報を表示するのではなく、必要な情報の優先順位をつけて表示することを第一に考えたそうだ。
優先順位を正しくつけるためには、情報の特徴や関係性を整理して把握する「情報整理」と、把握した内容を元に機能ごとの情報表示ルールを徹底する「情報表示のルール化」が重要だという土肥氏。画面レイアウトの制作に入る前に情報整理と情報表示のルール化を行うことで、レイアウト製作時の表示情報の選択や優先度の判断精度を上げることが期待できる。
『ウマ娘』ではゲーム内の主要コンテンツである「ウマ娘」と「レース」について情報整理を行い、それを元に情報表示ルールを決めてから画面レイアウトを組み立てることで、トレーナーを迷わせないUI制作を目指したそうだ。
続いて土肥氏により、『ウマ娘』の開発においての情報整理について、5つの工程に分けて説明が行われた。
①情報の洗い出し
種類やカテゴリなどは考慮せず、取り扱う情報をとにかく書き出していく。UIには関係ないと思われるものまで書き出して、どういった情報があるのかを把握することが重要。
②情報のグループ化
情報によっては、複数のグループにまたがる内容も。厳密に正しいグループを完成させるというよりは、大体のカテゴリにまとめることが重要。
③グループ化した情報を階層化
情報の階層化を行い、どの情報が親子関係にあるのか把握していく。例えば、一言で「適正」と言っても、「バ場への適性」や「距離への適性」など複数の情報を含んでいることが分かる。
④各情報の関連と紐付けを整理
例として、育成目標とレースの出走条件の関係に注目。『ウマ娘』の育成目標とレースの出走条件には、ファン数が設定されている。目標レースに出走するためには出走条件ファン数を満たさなければならず、条件を満たすためには他のレースに出走してファン数を増やす必要がある。
関係性が把握できると、目標レースに出走するために必要な残りファン数という情報が必要だということも明らかに。このように、ファン数という1つの情報を取っても、状況によって複数の扱い方があることが分かる。
⑤情報フロー
情報フローの工程を行うことで、情報の変化の頻度や全体の流れが把握でき、共通化する情報と独立する情報の精査にも繋がっていく。
育成目標と体力、やる気は行動を決めるときの基本的な指針であり、ファン数はウマ娘とレースの両方に関わる育成目標にとって重要な情報。基礎能力とスキルはウマ娘を強化する要素であり、育成で一番意識するポイントだ。
各種適性は、ウマ娘のバ場や距離、客室への適性を示すものでレース出走時の判断材料になる。情報整理の実施は、UI制作時の工程を効率化にも繋がったそうだ。
育成パートのUIではできる限り情報表示を共通化し、各画面で行いたいことに合わせて表示優先度を上げるようにしているという土肥氏。UI制作においては、機能ごとに重要な情報を把握したうえで取り組むことが大切だと続けた。
情報表示には「一貫性」と「柔軟性」を持たせることが重要
情報表示ルールを決める際には「一貫性を持たせること」、「柔軟性を持たせること」の2点を重視しているという土肥氏。UIに一貫性を持たせることはトレーナーを迷わせないことに繋がる。そして柔軟性を持たせることは仕様の変更や追加があった時に開発者が無理なく対応ができることに繋がっていく。
育成パートは画面を縦に分割した4つのエリアを基礎構成としているが、情報整理で把握した内容を元に、各エリアに表示する情報を決めて一貫性を持たせたという。画面上部には、育成の基本的な指針となる情報を表示。育成目標や残りターン、体力、やる気の優先度を高くして、このエリアに表示するようにした。ヘッダーとして各画面で常に表示することで意識づけが行われている。
続いて、画面中央上側は、サブ的要素を表示するエリアとして、プレイの補助となる情報を表示。ウマ娘の姿や演出関連の表示をすることも多く、育成のトップ画面ではウマ娘のクラスやアドバイスそしてウマ娘の姿を表示している。
3番の画面中央下側は、プレイの主要な情報やコマンドを表示するエリアで、プレイ中にトレーナーが一番目にする部分になる。育成トップ画面では基礎能力を常に表示するようにし、育成の主な目的となる基礎能力の成長を分かりやすくしている。また、育成の基本構造となるメインコマンドも、このエリアにまとめられている。
4番の画面下部は、フッターとして汎用的な操作のエリア。育成ではスキップ切り替えや、イベント短縮の設定、育成ログやメニューなどのメタ的な操作や情報を表示している。
4つのエリアのうち、1番のヘッダーと4番のフッターは基本的にどの画面でも表示するようにしているという。2番と3番のエリアは画面ごとに必要な情報を表示しているが、その画面での役割と優先度を考慮して決定。育成パートでは基礎構成に基づいて役割と優先度を踏まえ、画面ごとに表示する情報を検討したとのことだ。
トレーニング画面は、左側の画像は育成トップ画面、右側がトレーニング画面という構成。トレーニング画面は育成トップとの繊維が多くなるため、ヘッダーとフッターの他に基礎能力も固定で表示して育成トップ画面と共通化。基礎能力を常に表示することで、トレーニングでウマ娘を強くすることを意識づけるような工夫がされている。
イベントは育成の行動をする合間に発生するため、必然的に様々な画面との遷移が多くなってしまう。そのため、ヘッダーとフッターを固定で表示。常に育成目標や残りターン、体力、やる気を意識してもらうために表示するようにしている。
レースの選択画面はウマ娘とレース両方の情報が必要になるため、特に表示情報の選択が難しい画面だ。ヘッダーとフッターはこれまでと同様に固定で表示。基礎構成に基づき、3番のエリアにはレース選択の判断材料になるレースの情報が表示。レースの情報を全て表示すると複雑になってしまうため、ウマ娘のレースへの適性と獲得可能なファン数という、特に優先度の高い情報に絞って表示されている。
ゲーム開発が進行すると仕様の変更や追加が発生することがあるが、UIはその影響による変更回収の機械が特に多いセクションだ。この時目先の仕様変更や追加だけを優先して改修を行うと必要な情報や優先度が変わってしまい、使いづらいUIになってしまうことがある。
しかし、情報表示ルールを予め決めておくことで、表示の変更や追加がしやすくなる。ここに、情報表示ルールを決める際に柔軟性を持たせる意味が強くなってくる。
例えば開発初期の段階では、トレーニングや休みを行って毎月末にレース出走を選択するシステムがあった。そのため、育成内の行動指針として体力とやる気、強化していく要素として基礎能力やスキルが重要な情報だったという。
しかし、開発途中で育成目標という仕様が追加され、『ウマ娘』の育成を行いながら目標達成を目指すシステムへ変更に。これにより、育成内の行動指針に育成目標、強化していく要素にファン数が加わり、UIの調整や新規画面と演出の追加が必要になってしまう。そのため、育成目標は優先度を高くするという表示ルールを追加し、そのルールに基づいてヘッダーに表示するようにしたそうだ。
さらに、目標達成という大きなゴールに向かっていることを印象付けるため、目標の開始と達成を表現する新しい画面や演出を追加。重要な情報は表示優先度を上げるだけでなく、専用の演出や画面も用意して強調するようにしている。画面の基礎構成と情報表示ルールを決めていたことで、既存UIの改修や画面と演出の追加も柔軟な対応ができたとのことだ。
育成目標の追加によってUIの調整が必要になった際には、ヘッダー部分の改修と新規画面と演出の追加、既存画面のファン数表示の調整によって対応ができたという。情報表示ルールを決めていることで、仕様変更や追加があっても基本的なレイアウトは変化させずに対応することが可能になっているとのことだ。
土肥氏は最後に、「情報整理と情報表示のルール化をUI制作の工程として取り入れることが大切」だとし、「『ウマ娘』ではこれからもトレーナーを迷わせない最高のUIを目指していきます」と挨拶し、セッションのまとめとした。
情報表示ルールによって法則性を持たせ、一貫性を保つことがプレイヤーを迷わせないUI制作に繋がっていく。また、情報表示ルールを決めていることで、仕様の変更や追加にも柔軟に対応が可能になる。
画面レイアウト制作前に情報について表示するためのルールを設けておくことが、プレイヤーにも開発者にも使いやすいUI制作にも繋がっていくのだ。何気なく操作しているゲームのUIについてガラリと印象が変わるような、学びのあるセッションだった。
