ゲームアプリのUIデザイン

プレイしたゲームアプリのUIデザインに関して書き残します。毎日頑張って更新!

「欅のキセキ」称号のグレードの新機軸の紹介

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。

 

大体どのソシャゲにも「称号」機能が入っている気がします。

で、レアリティが高いほど装飾過多になる傾向があるなぁ、と見ていたのですが
意外とアニメーションしている称号はなかったな、とこれ見て気付きました。

 

▼gif

欅のキセキの称号の名前、見た目、獲得条件、達成度などが表示されたダイアログです。称号部分がキラキラしています

 

見やすくするために大きくしてみました。

称号部分を拡大したgifアニメーションです。
称号の文字が隠れないようにキラキラのエフェクトが配置されています

 

動いていれば2Dでも3Dでも面白そうなことはできそう。

あんまり派手にやると並べたときにうるさくなるので程々で。

 

 

欅のキセキの称号の名前、見た目、獲得条件、達成度などが表示されたダイアログです

 

「メギド72」フリック可能を示すカーソルの位置とアニメーションは大事だよ!

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。

 

この画面、左右フリックでキャラ切り替え出来るんですが、直感的じゃないと感じました。

 

なぜなら画面の中央に目線がいってるので、<>の記号を見落とすから。

 

f:id:appgameui:20190503190355p:plain

 

他の画面はこんな感じの位置。

顔と同じ高さなので比較的目に入りやすい位置かと…。

f:id:appgameui:20190503132808p:plain

 

こっちも同様。視線が集まる位置の近くにあるので、自然と目に入りやすい。

f:id:appgameui:20190503122640p:plain

 

 

 

上にあるので視線から外れているし、認識できていなかった。
小さいので装飾の一部だと思ってたのかな。

しかもアニメーションしないので、注目も無かったです。

f:id:appgameui:20190503190355p:plain

 

まとめ

「左右フリックできる場面では画面の近くに」
「左右フリックの位置や大きさは画面によって変えない方が一貫性や統一感が生まれます」
「わずかにアニメーションしていると、画面から浮いているように見え、装飾や背景と同化せずにすみます」
「また、その際に明滅などではなく指向性のあるアニメーションだと、アフォーダンスが作用して、どのような動きをするのかの手掛かりになります」

※CSの場合だと押下時のアニメーションをすれば良いので、待機時のアニメーションは不要だと考えています。開発元を見るとCSもやられているようなので、ソーシャル慣れてなかったのかな…。

 

「メギド72」画面が止まっている状態は極力避けよう!

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。

 

リザルトなんですが、「Level UP!」の文字がキラキラしてるなり、
Expゲージの増加分がアニメーションしてるなり、


何かしら画面が動いているのが一般的だと思っていました。

 

▼gif

f:id:appgameui:20190503181528g:plain

動かず…。

 

昔のゲームだと、TV画面の焼き付きを防ぐという役割で動かしてたとか、フリーズに見えるので動かしてたとも聞いたことがあるけど、

単純に静止状態だと面白く見えないので、ゲームなら動かした方が良いと思うんよ?

 

 

まとめ

「ゲーム画面は常にどこかしら動かして欲しい!」

 

システム云々もあるけど、何より楽しそうに見せたいので。

 

「メギド72」マイページのデザインについて考えてみました

こんにちは、「アプリゲームUIデザイン」のちょこきなこです。

 

マイページのデザインの考察!

 

です!

 

メギド72 のマイページは左右フリックしてメインコンテンツを選択するデザインになっています。

f:id:appgameui:20190503170124p:plain

この形式のデザインのマイページ、苦手なんですよね…。

 

いくつか理由をあげます。


メインコンテンツを選択するのに手数がかかる
⇒フリックしなければならないのでその分の時間や手間がストレス
⇒並びの順番も覚えていない(ガイドも表示されているけどコンテンツ名と一致しないのでそれもストレス)

 

情報の一覧性に欠ける
⇒一見して時限クエストや探索が終わったことに気付けない。

 

という感じ。
手数がかかるのは百歩譲って許容するとして、情報の一覧性はデザイン側で解消できると思うので、そこは頑張って欲しかった。

 

見た目はきれいなんですけどね…。

f:id:appgameui:20190503170113p:plain

f:id:appgameui:20190503170118p:plain

f:id:appgameui:20190503170129p:plain

f:id:appgameui:20190503170135p:plain

f:id:appgameui:20190503170106p:plain

機能性ももう少し考慮して欲しかったところ。

よくあるのは、ここまで細分化せずに二つくらいに分けてしまうデザイン。

ちょっと前に紹介した「欅のキセキ」もメインコンテンツを2つに分けてましたね。

 

メギド72の場合も何かしらでグループ分けしたデザインで良い気がします。

 

 

動画もあげておきます。

youtu.be