アプリゲームUIデザイン

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

「パレットパレード」プロフィール画面で推しが設定しづらい。分けて設定させて欲しいという獣の叫び。

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

 

「パレットパレード」でプロフィールから手持ちのキャラクターを一人?(一体?一枚?)選ぶことが出来るのですが、ちょっと開発側の意図の解釈に悩むところがあったので検討してみます。

 

このプロフィール画面から… 

f:id:appgameui:20191205064439p:image

 

任意のキャラクターを選ぶことが出来ます。

f:id:appgameui:20191205064451p:image

キャラ選択画面に複数の同一キャラが並んでいることに気付くかと思います。

なぜ同じキャラクターが並んでいるのかと言うと、パラメーターが違うからなんですよね。

ここで設定したキャラクターはクエスト中に発生したイベントでフレンドに貸し出しされるキャラクターです。

この仕様自体はガラケーのアプリの頃から存在しているので、今更どうこう言うつもりもないのですが、プロフィールから設定できるのが良くなかったです。

 

プロフィール画面はパーソナルな情報を載せる画面です。
ですので、ここでのキャラクターの選択は推しのキャラクターをアピールする場面です。

しかし、パラメーター優先だと推しではないキャラクターを載せることになってしまい、

 

とてもつらい

 

推しにも申し訳ないし、よそ様の推しにも大変申し訳ない…。

いや、チュートリアルガチャが何度でも引き直し可能なので、事前に推しを決めていれば基本的には推しが載ることにはなるのですが

 

それでもつらい

 

大体ストーリー見てから推しを決める派だと

 

もうどうしようもない

 

ゲームシステム的に最適を選択するのであればパラメーター優先にするしかありません。つまり場合によっては推しのイラストが載せられないというジレンマ。

なぜ分けない!?

 

プロフィールに載せるキャラクターは過去に獲得したカードイラストから任意の一枚を選択させ、フレンドに貸し出しするカードは別で設定させて欲しいです…!

 

扱う情報の性質や目的が異なるので、この情報を一緒にしてしまうとユーザーが受け取る気持ち(UX)に差異が生まれてしまいます。

開発側は情報の性質とそれをユーザーにどう届けるのが最適なのか、という2つを完全に把握しないとユーザーの感情に届くようなデザインは生まれないので、とても難しい分野だなと思います。

 

ただ、この辺は割と主観的なものの見方ではあるので、どうプレゼンするのが適切なのか、という部分で難しいなと感じます。

「パレットパレード」キャラ選択時にキャラのサムネイルが赤くなる。こりゃ赤い。

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

 

「パレットパレード」のキャラ選択時に赤く塗られる実装が気になりました。

f:id:appgameui:20191205064231p:image

 

他の画面では以下のように実装されているので、統一性という意味でこちらに統一しても良かったのでは?

f:id:appgameui:20191206074350p:image

▲ほかの画面では黒い色

 

赤く塗られていると惨劇の被害者っぽいんですよね…。

ホラーだったりサスペンスなどの世界観によってはもちろんアリだとは思うのですが、「パレットパレード」は明るい雰囲気の世界観なのでちょっと合わないかも。

 

色から想起されるメンタルモデルは多様です。

今回の私の場合は「人の顔+赤く塗る=血」だったので、過去の記憶からそういったイメージを持ってしまったのかもしれません。

 

サムネイルを赤くすることは特にバットUIではありませんが、一般的にはチェックマークの視認性を高めるために、前後関係を分かりやすく示します。

ですので色を塗る場合は背面を暗くするデザインや逆に明るくするデザインが採用されがちです。

 

◆いくつか事例

f:id:appgameui:20191208173534p:plain

f:id:appgameui:20191208173709p:plain

f:id:appgameui:20191208174659p:plain

 

f:id:appgameui:20191208175549p:plain

 

f:id:appgameui:20191208181257p:plain

意外と色乗せないデザインもあるんですね。その場合は枠と一緒に運用しているっぽいのでサムネイル同士のマージンに注意が必要になりそう。

 

色が乗っていると何かしらの意図や意味が感じられるので、実装する時は気をつけたいな、と思いました。

 

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

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

 

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

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

 

 

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のクオリティが上げられると、今よりももっとゲームが楽しくなるのではないかな、と思いました。

「パレットパレード」ロード画面で絵が描ける斬新な仕様。でも秒で絵なんか描けるわけない

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

パレパレこと「パレットパレード」始めました。
衝撃的だったのがロード画面のデザインです。

f:id:appgameui:20191205064036p:image

こんなロード画面。

 

なんと絵が描けます…!

 f:id:appgameui:20191207161836g:plain

 

どんな仕様だよ、と思うかもですが世界観的には画家のキャラクターものなので、アイディアとしては違和感はありません。

 

f:id:appgameui:20191207173945p:plain

f:id:appgameui:20191207174119p:plain

 

「ロード画面で絵が描ける」という発想は間違いなく超面白いです!


ただ、アイディアとデザインが合致してない印象を受けました。

理由をいくつか書いてみます。

 

1:タイトルに戻ると白紙に戻る

仕様上仕方ないのですが、アプリを落としたり、しばらくアクセスしないでいるとタイトルに戻るのですが、描いた絵も消えます。

 

消えます…!

 

アプリの更新など、いつタイトルに戻されるのかも分からない!

仕方ないけど…!とてもじゃないけど描く気にならない…!

となると、折角実装したのに遊んでもらえない死に機能になります。

勿体ない。

 

2:ロード画面は短い方が良い

当然ですが、ロード画面は短い方が良いです。
ユーザーはロード画面を見に来ているのではなく、ゲームをしに来ているので。

 

つまり、ロード時間は短い方が良いけど、時間が短いと絵が描けない、という自縄自縛的な実装になっています。

 

どうしたいんだよ…!

 

超好意的に考えると、開発中に「ロード画面がめっちゃ長くてヤバい。」みたいな状況に陥って「ロード時間の長さを逆手に取ろう!」としたのかもですが、多分苦肉。

この仕様を実装するなら、ロード時間が長くかかりがちな大容量のデータ更新時に実装し、かつユーザーが任意のタイミングで画面から抜けれる、という実装であれば良かったのかもしれません。

 

3:急に画面が切り替わる

ロード時間が長ければまぁまぁ描けるかもしれませんが、大体は数秒なので割と中途半端な時間なんですよね。

f:id:appgameui:20191207171942g:plain

こんな一瞬だと「何描こうかな」と思ってる内に画面が切り替わります。

 

例えるなら、
流れ星を見かけてもそんなに瞬間的にお願い事浮かばない。

そんな感じです。

 

つまり、この仕様は…

1:時間を短いから描けない
2:描く時間を長くしたらストレス
3:頑張って描いても消える

となっています。

 

これを実装する理由は開発者のエゴに近いモチベーションというか、偏った遊び心というか…。面白い…個人的には超面白いんですが…!

UIデザインの視点で見ると目的と手段を取り違えたアプローチになっているように感じました。

 

面白い機能が浮かんだらやりたくなる気持ちも分かるのですが、一度冷静になり目的を再認識して「この画面で必要なことは何だろう」と振り返ることも重要だなと感じました。