アプリゲームUIデザイン

プレイしたアプリゲームのUIデザインに関して、書き残しておこうと思います。毎日24時に更新!

「パレットパレード」一つ一つは細かいけど、たくさん粗があるとアプリのクオリティが下がって見えるので勿体ない

こんにちは、ちょこです。

 

「パレットパレード」をプレイしていていくつか気になった部分がありました。

こういった部分がきちんと詰められるともっと良くなるのかな、と思います。

 

 

1:文字の境界線の不統一

文字の境界線が不統一で雑に作られている印象を受けました。

f:id:appgameui:20191205063917p:image

f:id:appgameui:20191205063922p:image 

f:id:appgameui:20191207182326p:plain

 

このように、画面によって境界線が異なっています。 
なんなら文字サイズ、ボタンのマージンも不統一です。

この実装はあまりにも雑です…。

 

これくらい別にいいよね、とも思いますが、数が多いとタイトルの信頼を貶めてしまいます。
それに簡単に分かる部分を放置している人が、複雑な部分にどの程度真摯に取り組めるのか、疑問に感じます。

 

それぞれ修正に必要な時間は僅かです。
それに一度修正したら二度と起きないものでもあります。

 

このまま放置しているとどれが正解か分からない状態になるので、不統一なデザインが広がり続けます。

 

ですので、修正する費用対効果が高い

分かりやすい粗は優先的に修正して欲しいなと考えています。

 

2:画像が切れている

f:id:appgameui:20191206075324p:image

ガチャ画面のボタンの一部が欠けています。 

 

f:id:appgameui:20191207175958p:plain

こちらです。

スクロールが続くことを示すために画像を隠すことは手法としてありますが、この画面の場合はスクロールの範囲がせまく、これ以上移動することが出来ません。 

つまり、項目が隠れたままになってしまっています。

 

f:id:appgameui:20191208101936g:plain

▲こんな感じでスクロール範囲が狭い

 

結果的に画像が切れているように見えます。
ガチャ画面は訴求も大事ですが信頼も大事です。

ですので、こういった細かいミスがあると信頼性が損なわれてしまうので、勿体ないなと感じます。

 

3:画像のパターンが綺麗にループしていない

f:id:appgameui:20191206075418p:image

f:id:appgameui:20191207180036p:plain

直線と違って斜めのパターンはループが難しいですよね。
見た感じ45度くらいなので変なことしなければ大丈夫に思えるけど、変なズレ方してますね。
なんとなく「画像の圧縮でこうなっちゃった」「理由が分からん」「直し方も分からん」というように見えます。

頻出する汎用画像で結構目立つ粗なので、なるべく早くに修正したほうが、なんというかユーザーのストレスにもならないと思うんですよね。

見るたびに「ズレてる…」と思われるわけで…。

 

 

4:一部ポップアップのアニメーションがズレている

f:id:appgameui:20191206081741p:image

一部ポップアップのアニメーションですが、開閉時の基準点が中央からズレていました。

 

f:id:appgameui:20191208104134g:plain

等速だとこんな感じ。結構速いけど、ポップアップが左上から開いているように見えるのが分かりますかね…?

 

 

f:id:appgameui:20191207181544g:plain

1/2速だと分かりやすいかな…。ズレている様ないないような…。

 

f:id:appgameui:20191208105100p:plain

f:id:appgameui:20191208105224p:plain

基準線を引くと伝わりやすいかな。

 基準点が中央であれば左右の基準線に対して、どちらも同じ幅だけ大きくなるはずです。

これで枠の左上が基準点となってポップアップが開いていることが分かるかと思います。

 

人間の目は結構良いので「直感的に見たときに違和感を感じる」となった時、それが錯覚であろうとなかろうとストレスに感じます。

ですので、その錯覚を補正するために調整をすることはありますが、今回の場合は実際にズレていました。

 

 

 

 

5:会話シーンのメニューアイコンのデザインがちぐはぐ

会話シーンでのメニューアイコンのデザインが気になりました。

f:id:appgameui:20191206072734p:image

 

こちらがメニューです。

f:id:appgameui:20191208110505p:plain

具体的に気になったのは

・アイコンの有無がちぐはぐ
・日本語とアルファベットの不統一

という部分です。 

たぶん、追加の仕様があってこうなったのだと思いますが、いずれにしても見づらいデザインになっています。

 

デザイナーはこうなることを予見して「なるべく英語表記を使わない」「アイコンの有無は慎重に考える」など最初の段階で十分に検討した上で、追加仕様の対応に耐えられるようにデザインをしなければなりません。大変ですが。

 

例えばこんな感じでアイコンと文字が並んでいる方が見やすいです。

f:id:appgameui:20191208174858p:plain

 

f:id:appgameui:20191208180753p:plain

 

f:id:appgameui:20191208181627p:plain

最適なメニューの並び順ってなんなんだろうな…これ。

 

 

まとめ

冷静に考えて、

・ボタンの中の文字のサイズや境界線は画面によって変えたい
・画像が切れているようにしたいので、少しだけマスクの範囲を狭くしたい
・画像がうまくループしないようにちょっとだけズラした実装にしたい
・見た目は同じだけど、ポップアップの開閉アニメーションはここだけ変更したい
・アイコンのデザインは英語と日本語を混ぜたり、アイコンの有無も変えてチグハグにしたい

…という仕様が来たらエンジニアもデザイナーも反発すると思います。

なので、実装するならちゃんと意図した通りの実装にした方が後の修正コストやプレイしていてのストレスもありません。

 

個々の実装に対するストレスは軽微なものですが、あまりに多岐に渡るとクオリティが低く見え、開発に対する信頼度も下がります。

信頼度の低いサービスはユーザーが簡単に離脱します。

正直、UIはまだまだ優先度が低く見られがちです。
それはUIに対する理解や信頼性が得られていないことも大きいと思います。

まずはこういった、しなくても良い実装をなくし、するべき実装に時間やコストを割けるようにするために、バッドUIの共有が必要なのかなと考えています。

 

 いろいろ紹介しましたが、イラストや音楽、声優さんの演技、キャラクターのストーリーなど、いずれもより魅力的に見せるためにもUIのクオリティが上げられると、今よりももっとゲームが楽しくなるのではないかな、と思いました。