シャドウバースのデッキ購入画面ができるまで - Cygames開発チームが実践したUI/UXデザイン

アドビ システムズは2日、クリエイター向けイベント「Adobe MAX Japan 2016」を開催した。

現地では多種多様なセミナーが行われたが、本稿ではスマートフォン向けゲームを提供するCygames(サイゲームス)の講演「スマホゲーム開発チームが実践したUI/UXデザインと効果的なパーツ制作の舞台裏」の模様をお届けする。

本セミナーで解説されたのは、同社の最新タイトル「シャドウバース」のUI/UX設計。同作はカードによるデッキバトルで、国外でもリリースしているため海外ユーザーとの対戦も可能となっている。UIデザインチームのマネージャー・中村ふじ子氏がゲームタイトルの解説を行った後、UIデザイナー・金森さえら氏が「ゲーム制作とUI/UX」に関する解説を行った。

ゲーム制作におけるUIデザイナーの役割

金森氏いわく、UIデザイナーの仕事は、大きく「使いやすさの設計」と「没入感を手伝うデザイン」の2つに分けられるという。この前提を掲げた上で、今回は「カードパック購入」の画面レイアウトを例に取って説明が進められた。

まず、同社のゲーム制作フローを「人」ベースで図示。UIデザインにおいてはプランナーが書いた仕様書をもとに、UIデザイナーがイメージを作成し、それをエンジニアが実装するという流れになる。時にはエンジニアが行う実装部分をUIデザイナーが実施することもあり、「触る部分はUIデザイナーの仕事」(金森氏)という。

設計する画面の前後の流れを確認しながら、画面の中に収める情報量を決定する。購入というアクションの性質を考えて、カードを引く時の"わくわく感"は開封演出に割り当て、カードパック購入画面では落ち着いたグリッドを採用することに。

仕様変更で破綻したレイアウトの整理

上記の方針を元にラフを切ったところ、その完成後に仕様変更が発生。変更によって増えた要素をラフに流し込んだところ見づらい画面になってしまったので、問題の切り分けをしながら、画面を整理していく。

まず、情報過多な右カラムを整理。カードパックを買う「手段」が3種、それぞれに2種類の購入ボタンという配置ルールのため、1画面中のボタンが多くなりすぎていた。そのため、この画面では「購入手段」を優先し、数量はこの次の画面で選択する流れに見直したことで、ボタンを6つから3つに減らすことができた。

次に、画面上部のカードパックを選択するパーツを見直し。過去のカードパックの常時販売を行う仕様になったため、スライダー型では情報をさばききれないと判断し却下。このパーツを左に移動させ、縦に回転するドラムロール型に変更した。ドラムロールに変えたことで、パックのリリース時系列が反映でき、カードパックが増えても見やすい。

だが、この変更によってカードパックのロゴが縮小されてしまい、何を行う画面なのか示すアイコンがなくなってしまった。そこでカードの画像の上にロゴを載せ、カードも含めて大きく表示。これがアイキャッチとなり、画面の目的が示された。