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

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

「ヒプノシスマイク-A.R.B-」ロード中にぐるぐる回るレコードをよく見ると細部の拘りが感じられるアニメーション演出だった

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

 

今回のテーマは「世界観への没入のためのビジュアルの作り込みについて」です。

 

没入感が得られるということは余計なストレスが無いということでもあります。

そういった面でUIにも関係があると考えます。

紹介するタイトルは前回に続き「ヒプノシスマイク-A.R.B-」です!

f:id:appgameui:20200908234527p:image

 

 

早速ですが、作り込みがされている画面の一例を紹介します。

こちらはロード画面です。画面遷移演出を兼ねたデザインになっています。

f:id:appgameui:20200906221143p:image

 

動かすとこんな感じです。


ロード中はこのようにレコードが回転するのですが、微妙に歪んだアニメーションで実装されています。

ああああああああ

▲よく見ると円周の軌道が動いている

 

最初は、中心軸で回ってないのかな?と思ったけど
レコードの仕様上そっちじゃないような気がしたので、レコードのメイキング動画見てました。

www.youtube.com

 

こうやって作っているんですね!

察するに軌道が動く理由は…

  • 余分な外周を削り取る時の精度の可能性
  • Y軸方向の微妙な歪み
  • 経年劣化による歪み
  • 演出上の表現(デフォルメ)

なのかな…
いずれにしてもレコードが回転している動画を見ると、確かに若干の歪みがあるように見えます。

(詳しい人がいたら教えて欲しいです)

 

ヒプノシスマイク-A.R.B-」の世界においてレコードは汎用性の高い、それでいて象徴的なモチーフの一つです。

f:id:appgameui:20200909091316p:image

▲タイトルロゴにもマイクと共に描かれています。

 

f:id:appgameui:20200911092751p:image

▲楽曲選択画面にも使用されています(背景左)

 

f:id:appgameui:20200911093131p:image

▲ロード画面にも(画面右下)

 

このようにレコードはゲーム中に所々登場しているモチーフです。
出来るだけ丁寧に扱うように心掛けた結果、実物をよく観察し、先に紹介したアニメーションの様に細かな拘りも取り入れるようになっていったのかな、と感じられました。

 

以上「世界観への没入のためのビジュアルの作り込みについて」でした。

神は細部に宿るというように、こういった細かい部分にこそ没入感の秘訣が隠されているのかもしれません。

グラフィックを綺麗に作ることも大切ですが、アニメーションを含めた上で綺麗だけではない細部への拘りを感じられるデザインがあると、ユーザーの没入感も高いのかなと思ったので紹介させていただきました。

現実に存在するモチーフを扱う際のご参考までに。