こんにちは！ちょこです！
このブログでは「ゲームのUIを見てみよう！」というテーマでゲームを紹介しています。少しでもゲームのUIに興味を持ってくれる方が増えると嬉しいです。
今回は「ブラック・サージナイト」の商品紹介の画面デザインを紹介します！
該当の画面はこちらです。
画面左側に商品を切り替えるタブがあり、右側に商品のプレビューが表示されています。
タブを切り替えると、このように商品のプレビューが変化します。
商品のプレビュー画面をよく見ると、スライドパズルのように正方形のパネルが組み合わさって訴求画像を構成しています。
見やすくするためにパネル部分を大きくしました！
現実世界だと、複数のモニターで一つのグラフィックを構築しているイメージになるのかもしれません。
見た感じ、正方形を個別に画像出力しているのではなく、アイテムごとに出力し、白く点滅させることでそれっぽく見せているように見えます。
個別に画像を分けても良いのかもしれませんが、管理する画像の数が多くなってしまうため、どのように実装するのかは判断が分かれるところかもしれません。
この画面や演出を見て、レイアウトだけではなく、切り替えアニメーションにも新しさを感じました。 新奇性のあるデザインの事例として共有いたします。
デザインを構成している要素を整理すると、以下のような形でしょうか。
- デジタル的な見せ方
- 目立たせたい商品を大きく表示している
- デザインと親和性が高い切り替えアニメーションの実装
これらの結果、今までない新しいデザインの提案がされていると感じます。
以上です。
ショップ画面では商品を魅力的に見せる方向でデザインされていることが多くあります。
その際、静止画という発想ではなく、アニメーションや演出を加味したデザインを採用することで他のゲームとの差別化が図れるのかもしれません。
既存のゲームにない新しい表現を模索する際の参考になれば幸いです。
