サウザンドメモリーズUIの秘密
サウザウンドメモリーズというスマホゲームのUIのお話ですが、なかなか面白いです。

ゲームって一般的なアプリケーションと違って世界観を大事にするので、本来はOSなどが用意しているであろうボタンなども使わないです。汎用的なものを使えば使うほどゲームに対する没入感は失なわれてしまうことになります。 当たり前のことなんですが、これすら出来ていないゲームは既に差がついていると思います。

 画面遷移に関して。
これも基本ですが、本当に大切です。 これは一般的に全て仕様として出されるところでこれがわからないとUI設計すら出来ないです。この情報の共有はまず間違いなく一番大事なところなので変更があった際にはすぐに伝わるような状態にしておくのが理想です。

 Photoshopからコードへ、jsxの使用による効率化、pngの軽量化。ここらへんも基本的に同じようなことをどのゲームでもやっています。ただし、このやり方だけでは色々と問題があります。問題をまとめます。
  • Photoshop上で全てレイアウトを完結させている
  • ゲーム中に調整させるのが難しい
  • 実機ごとの差異を吸収できない 
上から順に解説を。

■Photoshop上で全てレイアウトを完結させている 
 本来であればメリットだと思いますが、Photoshopでは確実に限界があります。また汎用性に非常に乏しいです。デザイナーからすれば楽だと思いますが、この方法は場合によっては口数の削減よりも面倒な手順すら増えている可能性もあります。まぁ面倒なことをしないという場合はこれでもいいかもしれません。ここはPhotoshopよりも専用ツールを使った方が素直に様々なことが出来ていいと思います。

■ゲーム中に調整させるのが難しい
インゲーム中に調整することを考えられていません。実際の画面をみて「ここはこうした方がいいんじゃない?」ということがあった時、すぐにトライアンドエラーが出来るというのは非常に重要です。 ゲーム中に編集モードの切り替えが出来たり、スクリプトを書き換えるだけで編集出来るようにすると、触りながらこうしてみようという具合に調整できるので、かなり有効です。

■ 実機ごとの差異を吸収できない
上のPhotoshopと関連しますが、スマホって解像度が多々あって、それに応じたUIデザインをしなくてはなりません。Photoshopで調整した場合、4:3と16:9のアスペクト比に対応するのが非常に困難です。特にAndroidは端末ごとに全く違うので、 アスペクトによってダイナミックに調整できるようにしないと、上下に謎の枠が出来たりしてダサいだけでなく、画面が狭く感じてしまいます。UI設計の段階からダイナミックに位置が変動するように仕組みを作る必要があります。実際これが出来ている2Dゲームは少ないですね。特に日本のスマホゲームは。

残りの部分は特筆する部分がないので、解説しませんが割りと当然なことだったりすることが日本ではあまり共有化されていないので、 そういった意味ではこういう資料は貴重ですね。公開してくれたアカツキさんには頭が下がります。

こういったゲームのUIやUXというのは海外では散々資料化されています。 最後に個人的にお勧めな書籍を紹介しておきますね。