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

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

「マジカミ」画面遷移が多くてゲームの没入感が阻害されると感じたときは遷移アニメーションに規則性とバリエーションがあると良さそう!

こんにちは!ちょこです! 

 

「マジカミ」の画面遷移が変化に富んでいて、自然と心地よいテンポになっていると感じたので紹介します! ロードが多いのを逆手に取ってる感じ。

f:id:appgameui:20200615054209p:image

いくつかパターンがある。

 

 

1:親階層に遷移

f:id:appgameui:20200617001342p:plain

機能が切り替わるような場面では上から下に流れます。

 f:id:appgameui:20200621151911g:plain

 

2:親階層から子階層に遷移

f:id:appgameui:20200617001259p:plain

画面が進む場合は右から左へ。戻る場合は反対に左から右に画面が流れます。

 

f:id:appgameui:20200621151556g:plain

▲進む場合

 

f:id:appgameui:20200621151632g:plain

▲戻る場合

 

 

3:異なる空間に遷移

f:id:appgameui:20200617001451p:plain

ガチャやバトル、ストーリーなど、大きめのロードが入るような画面に遷移する時は画面の中央に視線がいくような演出になります。
 

f:id:appgameui:20200621152806g:plain

▲ガチャ画面に遷移する時

 

4:ADVパート専用 

f:id:appgameui:20200615054209p:image

アドベンチャーパートは可愛い星型のマスクデザインになっています。

 

f:id:appgameui:20200621152055g:plain

 

 

以上です。

最近のゲームアプリでは画面遷移時にロードを挟むことは少なくなってきましたが、どうしても必要な場面もあります。

そういった場合、ロード画面にバリエーションをもたせるなど、ユーザーの没入感を阻害しないように様々な工夫や趣向を凝らすことがあります。

f:id:appgameui:20190611232958p:plain

七つの大罪グランドクロス

 

「マジカミ」の場合は遷移アニメーションのバリエーションに加えて、使用方法に関しても管理されています。

規則性のある変化によって、心地よいリズムやテンポが生まれています。

 

ソシャゲでこの仕様を成立させるためには、かなり画面の構成に気を使わなければいけないので、運用して機能追加をするようなサービスには向いてないと考えていたのですが、意外となんとかなるものなんですね!

もし、ロード画面が頻繁に挟まってゲームへの没入感が阻害されると感じた場合、闇雲にバリエーションを増やすのではなく、画面の遷移のルールに則って演出を考えてみるのも良いかもしれません。

UIでは没入感に関しても意識しているので、紹介してみました。

没入感の阻害に関して悩んでいる時のご参考までに!