Loadingloading
Visualworks-G G@ck
  1. ホーム
  2. 技術備忘録
  3. アプリ画面のデザイン時に注意すべきこと

化猫の生態

表紙-デザイン

アプリ画面のデザイン時に注意すべきこと

ゲームアプリのデザインを散々してきたので、無駄なくスムーズにプロジェクトを進める方法は概ね分かってきたつもりです。
そのうえでデザイナーがまず最低限留意しておくべき「アプリ画面のデザイン時に注意すべきこと」をまとめていこうと思います。
はじめから気を付けておけば余計な遠回りをしなくて済みます。

もくじ

Atlasサイズと切り分け方を常に意識しよう

ゲームアプリを開発する場合、デザイナーにとって最も気を遣う部分がやはり画像。
ゲームの表現がリッチになればなるほど、UIのクオリティも求められるようになるのですが、その分画像容量も肥大化していきます。
画面クオリティを維持しつつ、容量を圧迫しないデザイン設計が必要になってくるわけです。

アプリサイズを抑える最も単純な方法は、デザインを使いまわすこと

不慣れなデザイナーは画面ごとに個別のデザインをしてしまうので、画面数に比例してAtlasが増えていきます。
初めから、使いまわせるパターン化できるデザインをパーツとして用意しておいて、各画面に使いまわしていけばAtlas数を抑えることができます。 UIparts しかし、どの画面においてもおかしくならないパーツであることが前提なので、初期のデザイン設計が非常に重要になります。 modal 文言の表現統一など、デザイン意外の要素も考慮する必要があるため、あらかじめプランナーやエンジニアと意思統一しておく必要もあります。

プロジェクト次第ですが僕の場合、Atlasサイズは1024×1024までで、1画面に2枚までと決めています。
Atlasサイズが大きいとメモリの消費が激しくなり、最悪落ちます。
> Atlasサイズを小さくするテクニック <

パーツの切り出し方ひとつで容量削減は大きく変わります

Unityにはナインパッチという画像の一部分を引き延ばしたり、繰り返したりできる機能があるのでこれらをうまく使いながら画面を作っていきます。 ninepatch デザイン段階でどこを伸ばすか?を考えてデザインすることがとても重要です。
repeatもメモリの消費が大きくなるので多用しないほうがいいでしょう


画面は動くものだという前提を忘れるな

ゲームの画面はWEBや紙のように静止した状態ではなく、絶えずどこかが動いているものです。
そのため単純に見た目だけを整えてもゲームの画面に当て込むと、なんだかしっくりこない ということはよくある現象。

また、ユーザーの操作によって変化するものや反応するものも多いので、ものが動いた結果の画面も想像しながらデザインをしないといけません。
ユーザーの操作によって出現したパーツが、重要な情報を隠してしまうとか covertap 画面が切り替わったときのトランジションだとか result アプリの画面デザイナーには2Dデザイン以外のアニメや空間把握の知識が求められるのも事実です。

ただ、これらをうまく利用することで、静止画面にはできないリッチな表現や狭い空間の中には本来入りきらない情報量を収めることも可能になったりします。
ユーザーの操作によって表示される隠された情報や、エフェクトによる視線誘導など、ユーザーにとって有益な情報をより効果的に見せるといった手法もあるわけです。

ただ、あまり多用しすぎると視線が定まらず、ただのノイズになってしまうのでご注意を。 NOIS 表示の優先度が同じ情報なら、人間の目は動いているものに視線が誘導されるものです。
しかしそれが複数になってくると視線が定まりません。

色に頼るな、文字を減らせ

日本人って色に対する感覚が他国の人に比べて敏感らしいです。
虹色というと7色ってイメージですが、アメリカでは6色らしいし、ドイツでは5色に見えるそうです。
虹 国による色の違いまとめ → 虹は7色じゃない ←
色彩感覚には個人差もあるので、人によって色の見え方は変わります。

属性だったり、状態異常だったりを色分けで表現するゲームって非常に多いですが、人によってその見わけがつかない場合があるということです。 color 色の違いによって判別させるのではなく、トーンの差や形の違いで差別化を図るのがユニバーサルデザインの考え方です。

日本のゲームは文字による説明も非常に多いです。
以前、漫画家をしていた時に何かの本で読んだのですが、人間が直感視で認識できる文字数はせいぜい20字程度(8文字x3行)だそうです。 fukidashi よくよく見なければ意味を理解できないようなものはデザインとは呼べません。(ただの読み物です)
それに、海外で展開を考えているサービスならなおさら文字に頼るべきではありません。
文字数や表現が変わってしまうためレイアウトが崩れるし、利用者のすべてが文字に対してリテラシーの高い人ばかりではないからです。

文字による説明が無くても理解できるような画面作りがこれからの正しいデザインの在り方だと思います。


迷ったらパクればいいじゃん

国産のガチャスキームのソーシャルゲームはゲームサイクルがみんな一緒です。 ゲームサイクル 箱庭やシュミュレーションといったジャンルが違うものは別として、
各々のゲームで付加価値的な独自機能を打ち出して差別化を図ってはいるものの、
極端な話–パズドラやモンストの焼き直しでしかありません。
ガチャスキームであるが故のジレンマみたいなものですが、詳しいことは後日解説します。
以前「パズドラもモンストも一緒だ」と発言したら、プランナーにゲキギレされまして。。
3時間滔々と説明されましたが、結局–プロジェクトメンバーみんな 違いが理解できませんでした・・・

やりたいことはみんな一緒

よほど独創性のある企画でない限り、すでに他のアプリでやっている施策内容が殆どです。
そのため、全く新しい表現のUIを作るのは難しいでしょう。

どんなにデザイナーが頭を悩ませて、奇を衒ったUIデザインにしてみたところで、デザイナー職以外の人はそれがどんな風に画面に組み込まれるのか、どんな操作感なのか が想像できないので最終的にはどこかで見たことのあるようなUIに落ち着いていくのが関の山です。

こういう機能がほしいと言い出したら、まずは既存アプリの同じ機能のUIをサンプルに見せて方向性を固めるのが手っ取り早いです。


その情報、本当に必要?

UIを語るとき、みんな言うのが「使いやすさ」という言葉。
でも、この使いやすさって誰基準なんですかね?

極端な話、使いやすさなんて個人差でしかなくて、
直感的なUIが好きな人もいれば、数値大好きでゴチャついてるのが好きな人もいるし、
色弱な人にとっては色での判別が難しいし、目の悪い人は細かいものが見えない。
右利き、左利きで使い勝手も変わってくる。

だから「使いやすさ」なんてことを言っている時点で論点がずれてると思うんですよ。

じゃあ何がいいUIなのか?
僕はこう考えます。
「必然性」

ユーザーにとっての使いやすさは、
何かをしようとした瞬間に目的の機能にきちんと誘導できるか
が重要だと思います。

必要な個所に必要な情報を。余計な情報は排除する。
表示の優先順位をつけて視線の流れを作る。
視線誘導

その画面に本当に必要な情報なのか? 一番見せたいものは何なのか?
常にこれを意識して画面作りを行うだけで自然と「使いやすい」UIが出来上がってくるんだと思います。。

PVアクセスランキング にほんブログ村

ARCHIVES