自己紹介
皆さんこんにちは。 Wright Flyer Studios 1部 Artグループ UI UXチームの長崎です。
現在、グリーでスマートフォン向けNativeゲーム開発におけるUIデザインを担当しています。
これまで、ソーシャルゲーム（Web/Native）だけでなく、コンシューマゲーム、アーケードゲーム、PCゲームなどのUIデザインにも携わってきました。
ジャンルとしては、アクション・RPG・アドベンチャー・スポーツ・ホラー・知育など、ほぼ全ての分野でUIデザイン経験があり、ゲーム業界15年目を迎えています。今回は、スマートフォン向けWebゲームとNativeゲームの違いと、それぞれで目指すべき価値について書かせていただきます。
WebゲームとNativeゲーム違いをざっくりと説明
まず、Webゲーム/Nativeゲームとはそもそもどのような物かについて、簡単ではありますがご説明します。
Webゲームとは、インターネットのWebページを閲覧するように、タップやキー操作を実行した際、画面が遷移する度にサーバーと通信し進行するゲームの事を言います。
弊社のプロダクトでは、「探検ドリランド」「釣り★スタ」などが例に挙がります。
Webゲームの特徴としては、新施策や改修など、ゲームデータを大きく更新する場合でも、大容量の通信を行う必要がないので、アップデート内容を開発側でリリースした直後にお客様が遊べる点にあります。
また、制作の特徴としては、画面が遷移する度に通信が入り待機時間が発生するので、読み込み時間を減らす為に、例えばイラストを限定した色数で作画したり、表示物の数やデータ量を抑えた中でデザインするなどといった、作業難易度の高さが挙がります。
対してNativeゲームとは大まかに、アプリインストール時にビジュアルアセットやプログラムの大半を端末にインストールしてから進行するゲームの事を指します。
弊社のプロダクトでは、「消滅都市」が代表的です。
Nativeゲームの特徴としては、アプリインストール時にゲーム進行に必要な大半のアセットが端末に入った状態からゲームがスタートするので、通信や読み込み時間がWebゲームと比較して少なく、画面遷移がスムーズです。（ただし、初回ダウンロード時やアップデート時にダウンロードに時間がかかります）
また、制作の特徴としては、端末性能の向上により、ポリゴン描画やタップエフェクト表示、動的なUIアニメーションなど、Webアプリよりも高度なビジュアル表現が可能な為、画面のレイアウトだけでなく、演出的な発想もデザイナーに求められます。
Webゲーム・Nativeゲーム それぞれのUIデザインで目指す価値
Webゲーム/NatveゲームのUIデザインを経験した中で、それぞれが目指すUIデザインの価値観も微妙に異なります。
Webゲームでは、タップや画面が遷移する度発生する待機ストレスを減らすために、表示する画像自体のデータ量を抑えつつ「いかにお客様を遊んでいただきたい遷移に最短で導くか」をデザインで目指しています。
例えば海賊王国コロンブスでは、メインコンテンツを「クエスト」としてお客様に楽しんでいただく必要があるので、下図の様にレイアウトやボタンの大きさ、形状や質感の改修でファーストビューの範囲内で主導線への認知が高まるよう見直しました。
「海賊王国コロンブスUI改修の推移（左から右へ）」
一方Nativeゲームでは先述の通り、大容量のデザインアセットをインストールしてからゲームを開始することができるので、Webゲームよりデータの容量的な制約の枷が少ない中で、リッチなグラフィック表現が可能です。
一見開発する上ではビジュアル面での表現の幅が広がり、良い事ばかりに見えますが、お客様の立場として現状リリースされている様々なNativeアプリを遊んでいただくとわかるように、
・画面上のボタンをタップした際の挙動が、サウンドやエフェクト効果により気持ち良く感じられる
・メニューの出現⇒待機⇒退出でのアニメーションが快適に動きわかりやすい
・UIを構成するオーナメント（装飾）やイラストが、色数豊かに緻密に描かれている
・UI上で再生されているエフェクト表現が美しい
など、表現の自由度が高い分、「情報認知に加えて人間の情動にも訴えかけるようなビジュアル演出」を目指さなくてはなりません。
上記のテーマを目指したNativeゲームのUIデザインの一例として、消滅都市のホーム画面を下図に挙げさせていただきます。
消滅都市では、Nativeゲームで実現できる表現について細かくこだわって制作していまして、
例えば下記画像の矢印部分に、雪のようなエフェクト（ゲーム内では「波動」と呼びます）を流し、画面に荒廃した世界観への没入効果と動的演出によるリッチ感を高めています。
また、画面左下円部分の告知導線であるスマホのアイコンについては、新着があると震えるアニメーションが再生され、あたかも現実世界で誰かから着信を受けているような臨場感を与えています。
さらに、ウィンドウやモーダルの出現・退出時には、異なるサウンドが再生されるなど、なにげない操作に対しても、心地良さや・双方向性を追及しています。
上記で述べた通り、NativeゲームでのUIデザインは、表現の幅は広がって良いのですが、開発者からすると、演出面での発想もビジュアルと同時に検討する必要があるので、難易度が高いことがおわかりいただけるかと思います。
いろいろやってきたけども、大切な事は同じだった
これまでコンシューマーゲーム・ソーシャルゲームの(Web/Native)のUIデザインに長年携わってきた中で共通して言える事は主に二つです。
１） 「対比の制御」が大事
２） 「没入感」が大事
１）「対比の制御」について
良いユーザーインタフェースとは、「視覚だけで機能や遷移の重要度が理解できる事」だと考えています。
例えばゲームを開始しても、画面の情報量が多く整理されていない状態では、「このゲームは何をして遊べばいいの？どこを押せばいいの？」と片っ端からボタンをタップしながら機能を確認していては、うんざりしてしまいますよね。
出来る事ならタップせずとも目視だけで一番楽しい体験が出来そうな導線を知りたい。私がゲームを遊ぶ側だとしたらそう思います。
では目視でUIを解りやすく、主導線を目立たせるためにはどのような事を意識すれば良いのでしょうか？
私自身としては「人間の視覚の癖を理解する事」だと考えています。
あたりまえですが、人間は物を見るときに、見たもの全ての情報を、同時に認識しているわけではなく、例えば
「派手な服を着ている人は、群衆の中ですぐに見つかる」
「月の表面の複雑な模様よりも、まず丸い形状である事が目立つ」
「エクセル表で赤く太い文字に目が行く」
といったように、ぱっと見の目立つ要素を優先して認識する癖があります。
言い換えれば、目立つ対象と目立たない対象とを瞬時に比較・優先度付けをして、効率的に多くの視覚的な情報を得るために、頭の中で都合よく解釈しているのです。
ゲームのUI画面を見る際も同様で、ぱっと見大きくて鮮やかで点滅しているボタンは注意を引き、小さな文字の解説文章などは目に入りません。
上記の例からも、UIをデザインする上では、
「目立つものを他と比べて先に認識しようとする人間の視覚の癖」
を理解し、その性質を踏まえてビジュアル設計を行う事が重要なのです。
下図では、「14」というボタンを目立たせるために、色・形・大きさ・隙間・ドロップシャドウ・質感に対比を付け、目立ち方の検証をしています。
「UI上のボタンをビジュアル対比によって目立たせた例」
①「14」が目立っているが、タップが可能な「ボタン」として認識しずらい。
②「14」はタップできそうな見た目にはなっているが、他のボタンと色や明度が似ている為、目立っておらず、「ボタン」としても認識しずらい。
③「14」が目立っているが、カレンダーの祝日のようなビジュアルなので、瞬時に「ボタン」とは認識しずらい。
④「14」が目立ち、且つボタンとして十分認識できる。
結果的に、色や形・大きさ・質感・隙間の間隔に対比を付けた④番が一番目立ち、且つボタンとして押せるものだという事が伝わりやすくなりました。
④の例で示したような「一番先に目に入り、押下できるという事が解りやすいボタン」と「主導線」を紐づけてることができれば、
「目視だけで機能や遷移の重要度が理解しやすいUIビジュアル」を制作する事ができます。
ただし、多くの遷移を持つソーシャルゲームでは、一つの導線だけを目立たせるだけでは不十分で、
ボタン・フォント・モーダル・背景・キャラクター・サムネイル・ヘッダー・バナーなどの、複数の要素に対して視覚的な序列が付くように見え方のコントラスト（対比）を制御して初めて「理解しやすく遊びやすいUI」を設計すること出来るのです。
また、「ただ目立たせて見え方に順序があればそれで良い」という事ではなく、ゲームのビジュアルコンセプトに合った目立たせ方になっているかを演出も含めてデザインしなければならないので、
長年経験を積んだ今でも、ひとつのゲームのUIデザインを完成させる為には、見た目の調整や改善に苦労が絶えません。
２）「没入感」について
先に述べた「対比の制御」は、あくまで「情報を解りやすく伝える」為の手段であり、それだけでは良いUI設計を行う上で完全とは言えません。
「ゲーム」というエンターテイメント媒体のビジュアルをデザインする上では、
「まるでゲームの世界に入り込んだと錯覚するような演出を通じて、いかにお客様に没入してもらうか」を考え、画面内で表現することが重要です。
下図は「聖戦ケルベロス」の「継承画面」と、「継承画面をワイヤーフレーム化した画面」になります。
左図はタブのボタンの装飾や、キャラクターの表情・背景の緻密で美しい描きこみにより、「まるで中世ダークファンタジーの世界に入り込んだような没入感、ワクワク感」をビジュアルから感じることができます。
一方、右図ワイヤーフレームからは、ゲームの世界観やテイストを表す要素が一切排除されているので、どのような世界観でゲームが展開されるかが理解できず、印象に残りづらいUIとなってしまっています。
「聖戦ケルベロス 製品版UIデザイン（左）とワイヤーフレーム（右）の比較」
どちらのビジュアルでゲームを遊びたいと思いますか？
どちらのビジュアルがゲームとして没頭できそうですか？
もちろん左のビジュアルですよね。
人々はゲームという娯楽に、「爽快感」や「非日常」「新しい体験」など、現実世界では成し得ることのできない楽しさやワクワクドキドキ感を期待しています。
上記のケルベロスの例からも、ゲームに没入するという観点において、
ビジュアル、特にゲーム中の多くの画面を占有するUIデザインは品質を左右する重要度の高い要素であることが、お分かりいただけるのではないでしょうか。
まとめ
■WebゲームのUIデザインは、最短の遷移で遊べるようにデータ量やファーストビューに収めるレイアウトで工夫する事が大事
■NativeゲームのUIデザインは、情報認知のしやすさに加えて、人間の情動にも訴えかけるようなビジュアル演出や心地良さを実装することが大事
■ゲームのUIデザインは「対比」を制御して、目視だけで機能や遷移の重要度が理解できる事が大事
■ゲームのUIデザインはゲームの世界に入り込んだと錯覚するような、作画やビジュアル演出を通じて、お客様に「没入」してもらうかが大事
おわりに
最後まで読んでいただき誠にありがとうございました。
UI/UXチームのメンバーとして、制作や若手デザイナーの育成に取り組んでおり、日々苦労の連続ですが、好きなゲーム作りに没頭できる毎日を楽しんでいます。
※UIデザイナーを絶賛募集中です！
我こそはと思う方は、お気軽に弊社採用サイトにてエントリー頂けると幸いです。
多くのお客様から愛され ワクワクできるようなゲームを共に造ろうではありませんか！
