化猫の生態Loading▲ホーム技術備忘録デザインアプリ画面のデザイン時に注意すべきことMENU2019/05/10アプリ画面のデザイン時に注意すべきことゲームアプリのデザインを散々してきたので、無駄なくスムーズにプロジェクトを進める方法は概ね分かってきたつもりです。そのうえでデザイナーがまず最低限留意しておくべき「アプリ画面のデザイン時に注意すべきこと」をまとめていこうと思います。はじめから気を付けておけば余計な遠回りをしなくて済みます。くじAtlasサイズと切り分け方を常に意識しよう画面は動くものだという前提を忘れるな色に頼るな、文字を減らせ迷ったらパクればいいじゃんその情報、本当に必要?Atlasサイズと切り分け方を常に意識しようゲームアプリを開発する場合、デザイナーにとって最も気を遣う部分がやはり画像。ゲームの表現がリッチになればなるほど、UIのクオリティも求められるようになるのですが、その分画像容量も肥大化していきます。画面クオリティを維持しつつ、容量を圧迫しないデザイン設計が必要になってくるわけです。アプリサイズを抑える最も単純な方法は、デザインを使いまわすこと不慣れなデザイナーは画面ごとに個別のデザインをしてしまうので、画面数に比例してAtlasが増えていきます。初めから、使いまわせるパターン化できるデザインをパーツとして用意しておいて、各画面に使いまわしていけばAtlas数を抑えることができます。どの画面においてもおかしくならないパーツであることが前提なので、初期のデザイン設計が非常に重要になります。文言の表現統一など、デザイン意外の要素も考慮する必要があるため、あらかじめプランナーやエンジニアと意思統一しておく必要もあります。プロジェクト次第ですが僕の場合、Atlasサイズは1024×1024までで、1画面に2枚までと決めています。Atlasサイズが大きいとメモリの消費が激しくなり、最悪落ちます。<パーツの切り出し方ひとつで容量削減は大きく変わりますUnityにはナインパッチという画像の一部分を引き延ばしたり、繰り返したりできる機能があるのでこれらをうまく使いながら画面を作っていきます。デザイン段階でどこを伸ばすか?を考えてデザインすることがとても重要です。repeatもメモリの消費が大きくなるので多用しないほうがいいでしょう画面は動くものだという前提を忘れるなゲームの画面はWEBや紙のように静止した状態ではなく、絶えずどこかが動いているものです。いうことはよくある現象。ユーザーの操作によって変化するものや反応するものも多いので、ものが動いた結果の画面も想像しながらデザインをしないといけません。ユーザーの操作によって出現したパーツが、重要な情報を隠してしまうとか画面が切り替わったときのトランジションだとかアプリの画面デザイナーには2Dデザイン以外のアニメや空間把握の知識が求められるのも事実です。これらをうまく利用することで、静止画面にはできないリッチな表現や狭い空間の中には本来入りきらない情報量を収めることも可能になったりします。ユーザーの操作によって表示される隠された情報や、エフェクトによる視線誘導など、ユーザーにとって有益な情報をより効果的に見せるといった手法もあるわけです。多用しすぎると視線が定まらず、ただのノイズになってしまうのでご注意を。表示の優先度が同じ情報なら、人間の目は動いているものに視線が誘導されるものです。それが複数になってくると視線が定まりません。色に頼るな、文字を減らせ日本人って色に対する感覚が他国の人に比べて敏感らしいです。虹色というと7色ってイメージですが、アメリカでは6色らしいし、ドイツでは5色に見えるそうです。色彩感覚には個人差もあるので、人によって色の見え方は変わります。属性だったり、状態異常だったりを色分けで表現するゲームって非常に多いですが、人によってその見わけがつかない場合があるということです。色の違いによって判別させるのではなく、トーンの差や形の違いで差別化を図るのがユニバーサルデザインの考え方です。日本のゲームは文字による説明も非常に多いです。以前、漫画家をしていた時に何かの本で読んだのですが、人間が直感視で認識できる文字数はせいぜい20字程度(8文字x3行)だそうです。見なければ意味を理解できないようなものはデザインとは呼べません。(ただの読み物です)それに、海外で展開を考えているサービスならなおさら文字に頼るべきではありません。文字数や表現が変わってしまうためレイアウトが崩れるし、利用者のすべてが文字に対してリテラシーの高い人ばかりではないからです。文字による説明が無くても理解できるような画面作りがこれからの正しいデザインの在り方だと思います。迷ったらパクればいいじゃん国産のガチャスキームのソーシャルゲームはゲームサイクルがみんな一緒です。極端な話–パズドラやモンストの焼き直しでしかありません。スキームであるが故のジレンマみたいなものですが、詳しいことは後日解説します。以前「パズドラもモンストも一緒だ」と発言したら、プランナーにゲキギレされまして。違いが理解できませんでした・・・やりたいことはみんな一緒よほど独創性のある企画でない限り、すでに他のアプリでやっている施策内容が殆どです。そのため、全く新しい表現のUIを作るのは難しいでしょう。想像できないので最終的にはどこかで見たことのあるようなUIに落ち着いていくのが関の山です。いう機能がほしいと言い出したら、まずは既存アプリの同じ機能のUIをサンプルに見せて方向性を固めるのが手っ取り早いです。その情報、本当に必要?UIを語るとき、みんな言うのが「使いやすさ」という言葉。色弱な人にとっては色での判別が難しいし、目の悪い人は細かいものが見えない。右利き、左利きで使い勝手も変わってくる。「使いやすさ」なんてことを言っている時点で論点がずれてると思うんですよ。何がいいUIなのか?僕はこう考えます。何かをしようとした瞬間に目的の機能にきちんと誘導できるかが重要だと思います。必要な個所に必要な情報を。余計な情報は排除する。表示の優先順位をつけて視線の流れを作る。見せたいものは何なのか?常にこれを意識して画面作りを行うだけで自然と「使いやすい」UIが出来上がってくるんだと思います。ここがヘンだよSG業界6デザイナーから見るデキるプランナーとダメなプランナーのたった一つの違いやっぱりみんな好きだよね。>>Amazon.co.jp123RFお名前.comG@ckUIUXデザイナー、テクニカルアーティスト、イラストレーター、漫画家。アパレルブランド『OKickrrmuy』を運営。