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

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

「ドラゴンクエストタクト」サムネイルのデザインで困ってる人に届け!モンスターのサムネイルの重心が偏ってたけど動きが表現されているのでとても良いデザインになってた話

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

 

ドラゴンクエストタクト」のモンスターのサムネイルのデザインで工夫されていた部分があったので紹介します。

f:id:appgameui:20200803085637p:image

 

モンスターのサムネイルはこのようなデザインです。

ああああああああ



全体的に動きのあるデザインだな、と感じていました。
動きがあると感じたのは以下の3点です。

  • 重心が安定していない
  • 表情が豊か
  • 奥行きがある

…といった点です。

(シャドーみたいなモンスターは奥行きも何もないけど…)

f:id:appgameui:20200806084429j:image

▲平面なので奥行き表現がしづらいシャドー。がおー。

 

重心を安定させていないメリット

さて、今回注目したいデザインは

重心が安定していない

という点です!

改めて見てみると、モンスターの重心が右に寄っていることに気づくかと思います。

ああああああああ

▲顔の重心がこの辺になっている

 

このデザインのメリットですが、以下の2点をあげます。

 

  • 上に情報が乗っても顔グラフィック部分が隠れない
  • バトル中のUIでサムネイルを重ねた時にもモンスターを識別しやすくなっている

 

 「サムネイルを重ねた時にもモンスターを識別しやすくなっている」ってどういうこと?と思われると思うので、実例を紹介します。

f:id:appgameui:20200804090606p:image

 

 

ここですね!

ああああああああ

そうか、

 

重心が偏っているとバランス悪く見えるのが普通なのですが、動きを出すというデザインであれば成立するんだ!

 

というのは個人的には発見でした。

2Dイラストを使うタイプのサムネイルデザインだと成立させづらいかもですが、3Dのモデルを使えるのであればデザインとしての汎用性は高そう。

 

サムネイルのデザインって単純なだけにごまかしが効きません。

小さい面積にいろいろな情報をまとめることが求められるので担当デザイナーのスキルが求められます。

ドラゴンクエストタクト」のデザインはとてもよくまとまっていると感じたので紹介させていただきました!

サムネイルのデザインをする際にデザインの発想として参考になればと思います。

 

 

 

 

動画・生配信・画像投稿に関するガイドライン | ドラゴンクエストタクト 公式プロモーションサイト | SQUARE ENIX

このページで利用している株式会社スクウェア・エニックスを代表とする共同著作者が権利を所有する画像の転載・配布は禁止いたします。
© ARMOR PROJECT/BIRD STUDIO/SQUARE ENIX All Rights Reserved.