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

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

「AFKアリーナ」スキルアイコンのデザインがきれいだったので、デザインする際の参考になりそう

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

 

ソシャゲのUIデザイナーの業務の中で、スキルアイコンを描く、という業務があります。

正直「UIか…?」と思わなくもないのですが、言葉の定義は置いといて、現実問題としてあります(webデザイナーもアイコン作るからその流れなのかな…)

 

…で、以前は「効果が分かるようなデザイン」というのが一般的であったのですが、ゲーム性の複雑化に伴って、そういった記号的なデザインだと運営するにあたって無理が生じてきます。

※恐らくガラケーの頃は通信量の関係でデザインに多様性を持たせることが難しく、ブラウザゲーの頃はキャッシュを利用する為にパーツを効率的に扱う側面が強かったため、スキルアイコンのデザインに多様性が求められなかった、という部分があるのかもです。

 

そういった背景の中でも「AFKアリーナ」のスキルアイコンは丁寧に作られていたので紹介します。

AFKアリーナの図鑑画面のキャラ詳細画面です

「AFKアリーナ」のスキルアイコンの特徴は…

  • そのキャラクターの中での差別化
  • (シルエットが複雑になった分)使う色を抑える
  • 効果を想起させるようなデザイン
  • 右向きのデザイン

…とかかな。
効果とアイコンのビジュアルはあまり結びついておらず、個別のデザインを用意しています。

アイコンの向きは実際のモーションに合わせてだったり攻撃する方向を意識しています。

スキルアイコンの例です キャラクターがバトル中に右を向いているのでスキルアイコンも右を向いています

 

一人でデザインしている際は暗黙の中でルールを作って量産できると思いますが、チームで制作していると細かい部分でデザインのブレが生まれてしまいます。

量産する前に簡単にデザインに関する認識を合わせておくと良いかもです。

 

 

ちなみにこのアイコンの演出は…

スキルアイコンを抜粋した図です

 

こんな感じです。

スキルが発動した画面のgif画像です

正直関連がよくわからん…。 

 

紹介したい部分は以上です。
最後に他のキャラクターのスキルアイコンを紹介します。

スキルアイコンのデザインをする際の参考になると思うので、もっと見たい方はぜひプレイしてみてください!

タレンの詳細画面です

孫悟空の詳細画面です

フレイラの詳細画面です

リグビーの詳細画面です

アタリアの詳細画面です