Tags

閉じる

Category

閉じる

Search

Search

閉じる

2015年のゲームUI/UXを振り返る

戻る

今年は大袈裟な見出しを考えたところで8割方燃え尽きました。
お久しぶりです。デザイナーの きの です。
 

今回は【UX Tokyo Advent Calendar 2015】 の7日目としてお送りします。

 
今年も僕はゲームのUI制作の現場で働いています。
サービスではなくコンテンツの制作となるゲームの現場では、UIもUX一緒に考える機会ばかりです。
(そんな現場の様子は去年のブログをごらんください)

なので、業界関係者からは刺される覚悟で「UI/UX」という括りで今回は今年のゲームを振り返ってみたいと思います。

今年はいろんなゲームを遊んでいく中で、おっと思ったポイントを紹介します。
 
果たしてそれが来年のトレンドなのか、それとも・・・。

年越しには少し早いですが、一緒に振り返ってみましょう。 
 

1. ユーザーはデータ容量に敏感

Screen Shot 2015-10-01 at 23.04.54.png
[画像:アイドルマスターシンデレラガールズ スターライトステージ]

通信環境の変化によるものなのか、最近データのDLについての設定が増えたように感じます。
いつ・なにをDLするか、またDLしたデータを削除できるか、その辺りへの気配りを感じます。
 
最たるものはデレステでした。
ストーリー再生時にボイスデータのDLの確認が入ります。
さらに、内部ストレージにも気を配り、オプションでは曲ごとにデータ削除ができる気配りです。
残念なのは一括DLがないことぐらいですね。
 

なぜ?

パケ放題により月当たりの速度に制限がかかり、Wifi内にいる時に一気にDLしたいという欲求がありそうですね。
また、MVNOなどによる低速環境も広まってきています。
 
個人的には、ウェブサイトのようにいつか画像DLすら拒否してテキストだけで楽しんだり、ダミーの四角画像だけでゲームを遊びたいと要求する輩も出るのではと邪推します。
 
海外は日本より厳しい通信事情の国が多いそうですから、垣根が下がってきているともいえますね。
余談ですが、Marvel futurefightとか軽くてびっくりしました。
 

確認できる事例

  • アイドルマスターシンデレラガールズ スターライトステージ
  • 暗殺教室 囲い込みの時間
  • ファントムオブキル

2. 画面サイズの主戦場は一回り大きく?

Screen Shot 2015-04-08 at 14-12-20.png
[画像:リトルノア]
 
僕はiPhone6+なんですが、リトルノアを遊んでUIが妙に馴染むなと気になってました。
そして同僚(iPhone5)の一言、「これボタンちっさ」。

なぜ?

新規リリースされるスマホは、画面サイズの平均が1280x720を越えています。
iPhone5でさえ1136x640ということなので、
画面サイズは一回り大きいものを見据える必要が出てきそうです。
(データ量などとの戦いにはなりますが)

確認できる事例

  • リトルノア

3. メインの画面比率は16:9に、されど対応は続く

640.png

2014年もその傾向がありましたが、発売されるスマホの画面比率は16:9が主流となりました。
 
ただし、16:9が主流とはいえその他への対応が求められます。
どの程度の対応をするかというところでは、2015年後半でも分かれております。
参考までに後半リリースされたメジャータイトルを例にあげます。
 

妖怪ウォッチ ぷにぷに

 16:9:標準対応 / 3:2:16:9の上下を圧縮

星のドラゴンクエスト

 16:9:標準対応 / 3:2:16:9をベースに左右に背景を付け足し(一部UIはちゃんと対応)

モンスターハンター エクスプロア

 16:9:標準対応 / 3:2:標準対応
 
このような感じでした。デファスタはまだないようです。
 
ちなみに僕がUIを担当した甲子園ポケットも、2つ目の対応をとっています。
コストと対応範囲のバランスが一番コスパ高いと思ったからです。
ただし3:2の対応で、単純に背景に黒帯を付けるだけ(俗に言うレターボックス)だと、Appstoreでリジェクトをいただくことがありますのでご注意を。

なぜ?

興味深いのは、対応状況とゲームの動作速度などが連動して見えたことです。
(4Sでは、ぷにぷにはかなりカクつき、モンハンはスムーズに動作する)
ゲーム自体に求めるスペックがあり、それに合わせてどれだけUIの対応をするかという考え方もあるかもしれません。
 
 
すみません、タブレットがメインとなる4:3は調べませんでした。
タブレットは4:3から16:9とさらに大変な状況がまだ続きますね。

確認できる事例

  • 妖怪ウォッチ ぷにぷに
  • 星のドラゴンクエスト
  • モンスターハンター エクスプロア
  • 甲子園ポケット
ちなみにこの比率の源流をたどる記事がGigazineに出てまして、
大変おもしろかったのでついでに紹介します。

4. マイページのあり方の変化

Screen Shot 2015-08-19 at 23-05-06.png
[画像:ぼくとドラゴン]

従来のリストからクエストを選んでというタイプとは違い、
ぼくとドラゴンでは放置系ゲームのようにマイページで簡単なクエストを行えるゲームデザインとなっていました。

アプリを開くとすぐにやることがあるというのは、わかりやすい体験です。

確認できる事例

  • ぼくとドラゴン

5. 多彩なローディング画面

2015-02-15 01.44.26.png
[画像:城とドラゴン]

ハースストーンのように、ローディング中にジョークを挟むのはWebからのお約束ですが、それ以外にも楽しませる仕掛けが増えてきました。
 
デレステでは1コマ漫画をローディング中にランダムに1枚表示します。
それだけなら既にあるアイデアですが、
表示されたコマをコレクションとして集めるというお楽しみに繋げる点が新しかったです。
 
城ドラは進軍前のローディングでは自分が選んだキャラたちが装備もそのままに出てきて、
自分のキャラたちが進軍している状況をよりわかりやすく伝えてくれます。

なぜ?

さっきの通信速度を逆手に取ると、通信中もいかに楽しんでもらうかという視点に繋がるかもしれません。
ゲームの使い方の説明もいいですが、長く遊んでもらうユーザーにとって何が楽しんでもらえるのか、考えてみるチャンスに思えました。

確認できる事例

  • 城とドラゴン
  • ハースストーン
  • アイドルマスターシンデレラガールズ スターライトステージ

6. タイムライン風会話UI

Screen Shot 2015-10-08 at 12.48.21.png Screen Shot 2015-10-26 at 21.01.03.png
[左画像:モンスターハンター  /  右画像:終わりのセラフ]

これは白猫が発端なので2014年ではあるのですが、参考にしたアプリが今年ボツボツと出始めました。
ゲームの開発は長いので、トレンドの広がり方もやはり半年ぐらいのズレが出るのでしょうか。 
比べてみると細かい挙動に違いがあり、それぞれの機能の役割を意識できるのでおもしろいです。

なぜ?

そもそもはよそ見をすることが多いスマホでは見逃しやすいので、会話にログ機能をつけるアプリは多かったです。
ログボタンを押す > ログを表示 という形はノベルゲームなどでは一般的な形ですが、テキストだけの表示で淡々としています。
頻繁に過去の会話を見るとしたらそれも楽しくしよう、そんな意図があるのではないでしょうか。

確認できる事例

  • 白猫プロジェクト
  • モンスターハンター エクスプロア
  • 終わりのセラフ BLOODY BLADES

7. ゲーム内外でのムービーの活用が増えた

 
Screen Shot 2015-11-02 at 21.46.40.png
[画像:Quick Boy(枠内のゲーム画面は自動再生される)]
 
ゲーム実況は言うまでもなく、プロモーションでの動画採用も増えましたね。
App storeも縦画面の動画に対応したのではかどります。
(ただし動画でリジェクトをいただきたくないので、とても慎重)

またゲーム内でも操作方法を動画で紹介したり、スキルなどのビジュアルエフェクトを事前にムービーで見せるものも出てきました。 
静止画だけでなく、動きで見せる面白さがよりユーザーに伝わりやすくなってきています。
 

確認できる事例(動画で操作を紹介)

  • 白猫プロジェクト
  • モンスターハンター エクスプロア
  • バトルガール

確認できる事例(ムービーでプレビューを見せる)

  • Quick Boy
  • Wind Soul

8. ようやくゲームUIの本が出た

一般的なUIはあんなに本が出るのに、ゲームのUIについては全く情報がでない不思議。
ゲームグラフィックス2015のUIカテゴリはあの分厚さでわずか4-5p。。。
本以外でも情報が少ないので、僕はとても気になります。みなさんどうやって勉強したりしてるのでしょうか。
ですが、ついに専門書が夏に出ました。
他の開発者の制作データやエピソードが見れるのは超レアなんで、楽しく読めます。
 

売れるゲームのUI/UX 制作現場の舞台裏

 
実は僕のチームもでています。別に宣伝じゃないですよ!
 

最後に小ネタ

数字の区切りにカンマの代わりにスペースを使う

2015-02-07 21.34.57.png
[画像:城とドラゴン]

数字の桁数をわかりやすくするためにカンマを入れるのですが、ちょっと見た目重くなるのですよね。
それに比べるとわかりやすさは多少減りますが、見た目は重くならないこのアイデアはカジュアルな雰囲気のゲームには合っています。

スライドカウンター

Screen Shot 2015-09-16 at 8-30-00.png
[画像:キングダムハーツ アンチェインドキー]

大雑把にかつ大きく値を動かしたい時に重宝します。
昔のゲームで言うところの上下キーで10の桁を動かすやつの感じですね。

人気シリーズのスマホゲーム化続く。

  • スパロボ
  • FF
  • ドラクエ
  • パワプロ
  • キングダムハーツ
  • モンハン
  • プロスピ
  • ぷよぷよ
  • 妖怪ウォッチ
  • ポケットモンスター(ポケとる スマホ版)
  • ブレスオブファイア(予定)

こう並ぶとスマホシフトを実感できます。
もちろん、正式なシリーズに繋がるものもあればそうでないものもありますが。

妖怪ウォッチやポケとるなんかは、遊び方がパズルに変わりつつも、元のゲームのコンセプトと繋がっており安心感がありました。

パワプロやモンハンは元のゲームをスマホで実現するために、UIや機能の削り方を見て取れました。

スパロボは、僕(ら)がスパロボに求めているものは何かが再確認できました。

コンシュマーゲームのブランドをどうスマホに持っていくか、
という点ではそれぞれとても参考になります。

 

ペーストボタン

Screen-Shot-2015-04-03-at-14-24-55.png
[両画像:妖怪ウォッチ ぷにぷに]

ありそうでなかった、ペーストボタンです。
長押しをする手間がなくなるだけで、こんなに快適に思えるとは・・・!
実は個人的には今年イチオシの機能でした。
これは同じような操作をする全てのゲームに入れて欲しい...!

スマートウォッチのゲームは発展途上

LIFELINEは素晴らしい体験でした。
ですが、あれ以外の答えはまだ見えていません。
ウォッチでゲームをすることが必要なのか、話はそこからかもしれません

国内ゲームでもVIP制度が

Screen Shot 2015-11-11 at 16.21.12.png Screen Shot 2015-11-11 at 17.18.05.png
[両画像:妖怪ウォッチ ぷにぷに]

海外では当たり前の感ある課金額により優遇が受けられるVIP制度が、国内大手メーカーからも始まりました。
 


 

いかがでしたでしょうか。
百聞は一見にしかず、取り上げたゲームを遊んでみてください!

今年のトピック、みなさんの意見もお聞かせください。

それでは良いお年を!