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

画面の中でひとつしか行動できないとしたら？

今回の解説だけを聞くと、全体の画面がすんなりまとまっていったようにも感じてしまう。だが、当然ながら壁にぶち当たることもあったという。

そんな時、金森氏は「ユーザーが画面の中でひとつしか行動できないとしたら？」という問いを自らに投げかけることで、本当に必要な要素を選び出すことができたそうだ。これは、同氏がこの職に就く前、広告業界で身を置いていた時に「コンセプトをひとことで表現する」という課題を幾度も投げかけられたことが、現在のUI設計の現場でも活きている。

もし、ユーザーが画面の中でひとつしか行動できないとしたら？

さらに、プランナーに画面設計の意図を逐次共有することも大切だと付け加えた。UI設計の途中段階はブラックボックスになりやすいため、何を考えてデザインした画面なのか伝えることが重要になるという。

終盤には画面を構成するパーツについての解説が行われた。ボタン類は使い回しが効くようグレーベースで作り、フィルタの反映で色変更が可能な設計にしておき、フィルタを共通化してパーツごとに質感がばらつかないよう配慮されている。また、プレイ環境によって画面サイズが異なるマルチスクリーン時代のため、デバイスによってはボタンの表示領域が小さくなることを受け、タップ領域はパーツの面積よりも広く取っている。


ポップアップ表示のルール	ボタンのカラーバリエーション

その他、同タイトルは海外展開しているためローカライズもされているが、実は海外版から作ってフォントのみ変更し、日本向けに「逆輸入」しているのだとも語った。「日本ユーザーは"かっこいい"に寛容」なため、こうした運用で問題なく進行できているとのこと。


キャラクターや背景を元に、UIパーツ素材に落とし込んだ例。こうした展開を行ったことで、デザイナー職以外からも「草のパーツで」という指定が可能になった	英語版向けに詰めたデザインを、フォントだけ差し替えて日本に「逆輸入」

締めくくりには、「Adobe MAX Japan 2016」のロゴマークに「シャドウバース」らしいテクスチャや色を反映したデモンストレーションを実施。形は操作せず、ドロップシャドウやテクスチャによってゲームの世界観が反映されたビジュアルに変わったこと、そのレイヤー構成をすべて公開していたことが、会場の注目を集めていた。