こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「アイドルマスター SideM GROWING STARS」（以下、サイスタ）から、画面遷移時のUIパーツのアニメーションのルールを紹介します！
UIパーツの左右移動によって先に進むように見せる演出
アニメーションのパターンは大きく分けて２パターンあります。
まずはUIパーツが左右に移動することで先に進む、前に戻る印象を演出しているデザインです。
ストーリー画面では任意のストーリーを選択し、先に進むとUIパーツが画面右から登場します。前の画面を戻ろうとすると、反対に画面左からUIパーツが登場します。
拡縮を活かして先に進むように見せる演出
もうひとつは拡大縮小を利用して先に進む、手前に戻る演出です。
ショップ画面では先の画面に進むとUIパーツが拡大しながらフェードアウトします。
前の画面に戻ると、反対にフェードインしながら拡大表示から等倍表示されています。
画面遷移アニメーションにルールがあるから分かりやすい
大きく分けるとUIパーツの移動、または拡縮によって画面が先に進むか、あるいは前に戻るかの演出がなされていました。
このように「サイスタ」の画面遷移のアニメーションには一定の一貫性があり、且つそれが現実世界にも当てはめやすい演出であるため、何が起きているのか直感的に分かりやすいデザインだと感じました。
以上です。
画面遷移のアニメーションをデザインする際の参考になれば幸いです
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「アイドルマスター SideM GROWING STARS」のガイドラインを確認したところ、公式HPにて、ゲーム実況が許諾されている旨の記載がありました。
ガイドラインによると、ゲーム実況とは静止画をインターネット上で共有することも含まれています。
当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。
ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
