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

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

Cygames UIデザインチーム UIデザイナー・金森さえら氏(左)、マネージャー・中村ふじ子氏(右)

本講演は受講者の撮影やSNSによる情報拡散が禁止されるなど、「Adobe MAX Japan 2016」セミナーの中でも厳しいレギュレーションとなっていた(※プレス向け撮影は許可されていた)

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

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

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

開発チームの組織図

完成版の「カードパック購入」画面

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

今回中心的に語られたのは、プランナーの作成した仕様から、UIデザイナーがレイアウトを組む部分

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

満たすべき条件を踏まえ、前後の行動とセットでUIデザインを考えていく

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

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

仕様変更前にレイアウトを組んだため、追加要素を入れ込んだところ見づらくなってしまった

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

購入数の選択を次の画面に送ったことで、画面がかなりすっきりした。購入の意思決定と数量選択の順番は、既存のショッピングサイトを参考に設定。ユーザーに不要な選択をさせないように、ユーザーが実行できない選択肢はボタンを暗い色にする

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

スライダー型では多種の選択肢が見えづらい(左)ので、ドラムロールに変更(右)。変更によって画面で行える機能が見えにくくなったため(中)、カードパックのロゴマークを画像にかぶせ、大きく表示した

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

さらにボタンまわりの空白も詰め、一番押される可能性の高いボタンのカラーを目立つものに変更した

before/after

こうしたプロセスを経てから、本番の画面構成を見るとまた見え方が変わってくる

さらに、購入フローが買うモノによってばらつかないよう、全体を見渡して流れを統一した