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

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

「AFKアリーナ」の図鑑とスキン画面への画面遷移の事例紹介

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

 

 

今回は「AFKアリーナ」の図鑑画面とスキン画面への遷移演出を紹介します。

AFKアリーナの図鑑画面です キャラクターが表紙の書物がデザインされています

「AFKアリーナ」は汎用的なパーツを利用して画面をデザインするタイプのゲームではありません。どちらかというと、個別に画面をデザインするタイプのゲームです。

 

そういったわけで、画面遷移も汎用的な演出ではなく、中には専用にデザインされた演出があります。今回は「AFKアリーナ」の中でも個別にデザインされた画面遷移演出を2つご紹介します。

遷移演出を考える際の参考になればと思います。 

 

 

1:スキン変えの画面に遷移する時

キャラクターの見た目を変更できるスキン画面です

スキン画面への遷移演出です。着替えるのでクローゼットをモチーフにした背景になっています。

 

スキン画面に遷移する演出です

こんな感じでカーテンを遷移演出のモチーフに使っています。
よくあるモチーフですが、薄手のカーテンではなく緞帳っぽいデザインです。これにより重厚で厳かな世界観が表現されています。 

 

 

七つの大罪 光と闇の交戦」の場合は薄手のカーテン。

七つの大罪 光と闇の交戦のデザインです

こちらはキャラクターがアピールポイントなので、シルエットがあることによる理由付けはできます。

 

スキン画面の周辺はこんな感じです。 

スキン画面内で他衣装を選択した際の挙動です 特に演出はなく瞬間的にキャラの見た目が変わります

スキンを切り替える際に特に演出がないのがちょっと勿体ないかも。

 

 

2:図鑑画面に遷移する時

続いて図鑑画面への遷移演出です。

AFKアリーナの図鑑画面です

 

 

こちらは、本が開く演出とページをめくる演出です。

 図鑑画面に遷移した時の演出です

表紙がキャラクターごとにデザインされているのが素敵です!

 

中世ファンタジーだと書物は比較的よく扱われるモチーフですね。

なんだろう…魔導書とか実在するものとリンクするからかな…。
この手の演出だと「七つの大罪 光と闇の交戦」の演出が良かった記憶があります。

 

グラクロ 敗北時アドバイスの画面です 書物がデザインのモチーフになっています

 

以上「AFKアリーナ」の画面遷移演出でした!

 

個別の遷移演出をデザインする際は没入感を意識することはもちろんですが、アプリ全体を通じて強くアピールしたい部分から優先的に実装すると良いと思います。

 

画面遷移演出のデザインを考える際の参考になれば幸いです!