「スマホゲーム開発チームが実践したUI/UXデザインと効果的なパーツ制作の舞台裏」Adobe MAX Japan 2016 セッションレポート

スマートフォンやタブレットの普及に伴い、UI/UXデザインの重要性がますます高まっています。Webサイトやアプリなど、どのサービスもユーザーにとって「わかりやすく」「迷わない」構造になっていることは、継続してサービスを利用してもらうための重要な要素です。

株式会社Cygames の中村ふじ子氏と金森さえら氏によるセッション「スマホゲーム開発チームが実践したUI/UXデザインと効果的なパーツ制作の舞台裏」では、スマホゲーム「Shadowverse」の企画から画面設計、最終デザインまでの変遷や、ゲーム内で実際に使用される装飾文字の作り方など、効果的なパーツ制作の秘訣を紹介しつつ、UI/UXデザインの考え方や設計について独自の思想を伝えていただきました。特にシステムやキャラクターに目が行きがちなゲームのデザイン制作の現場において、ユーザー目線の軸となるUI/UXデザインはどのようにして考えられ、制作されるのでしょうか。

f34_1
https://blogs.adobe.com/creativestation/files/2016/10/f34_1.jpg

使いやすさの設計

実際に制作されたカードパック購入画面を例に、プランニングから実装までの流れは

  1. プランナーが構想する
  2. プランナーとデザイナーの間で認識合わせを行う
  3. デザイナーが絵を創る
  4. エンジニアが実装する

と、UI/UXデザインやゲームが特別なわけではなく、どのデザインの世界でも同じです。

プランナーからの言葉を受け、言葉を見える形に表現し、レイアウトへ変換していくのは特別な作業ではありませんが、制作が進み修正を繰り返す上で迷いが生じ手が止まることは誰にでもよくあります。
そんな時の解決のヒントは

と、これもUI/UXデザインやゲームに限らずいえることです。「ユーザーに楽しく遊んでもらえるように」UI/UXの基本はいつもユーザー体験の向上であることに変わりありません。
f34_2
https://blogs.adobe.com/creativestation/files/2016/10/f34_2.jpg

没入感を手伝うデザイン

良いとされるゲームのデザインは、パーツの一部を見るだけでどのゲームかわかるような工夫が施されており、ユーザーの「あそび」を手助けするという役割を持って作られています。例えば、初めてそのゲームをする人にとって、そのゲームを楽しく遊ぶための操作の手助けになっていること、そのための必然性を持ったデザインであることです。すべてのパーツが目立つための要素を取り入れる必要はなく、ゲーム全体の情報量を考えた上でパーツのプラスマイナスを考慮することが重要です。

ゲームパーツ制作のポイント

f34_3
https://blogs.adobe.com/creativestation/files/2016/10/f34_3.jpg

UI作り込みの実演

セッションの後半では、Adobe MAXにちなんでMAXのロゴを「Shadowverse」っぽく金属をモチーフにした加工をしてみせる、Photoshopを使ったUIパーツの作り込みの実演がありました。どの効果を乗せるとどうなるのか、before/afterの丁寧な説明が印象的でした。白黒で描いたベースに色をつける場合、1色だけだと味気なく見えてしまうので、下塗り用と2色を重ね合わせることで発色がよくなり、より深みが出るといったテクニックなど、すぐに取り入れたい技術を駆使されていました。
下塗りの色はゲーム「Shadowverse」全体で統一されており、このような「見えないけれど揃っている部分」があることが全体の統一感をより一層強くさせるポイントになっているそうです。

f34_4
https://blogs.adobe.com/creativestation/files/2016/10/f34_4.jpg

このセッションで紹介された「Shadowverse」のMac版が9月15日にリリースされました。詳しくは、Shadowverse公式ホームページにて掲載されています。

登壇者のプロフィール

中村ふじ子 氏
株式会社Cygames
大学を卒業後、ゲーム会社や講師経験を経て、2012年4月より株式会社Cygamesへ入社。
CygamesではUIデザインチームのマネージャーとして、メンバーの育成、UIデザイン監修業務に従事。
https://www.cygames.co.jp/