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

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

「ビーナスイレブンびびっど!」ショップ画面がめっちゃ可愛いデザインだったのでご紹介!

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

 

「ビーナスイレブンびびっど!」のショップがめっちゃ可愛かったので紹介です!

f:id:appgameui:20200517181150p:image

値札が貼ってあるのが凄く良いですね!

個人的にはこういう汎用パーツを使わないデザインの方針は「世界観没入型」と呼んでいます。
反対に汎用パーツで構成されたデザインは「システム型」と呼んでます。

丁度「スキューモーフィズム」と「フラットデザイン」の関係に近いのかもしれません。

 

 

f:id:appgameui:20200519083851p:plain

▲「アイドルマスター ミリオンライブ! シアターデイズ」のデザイン。汎用パーツで構成されています。

 

多くのショップ画面は「商品がリストになって並んでいるだけ」というデザインが多いように感じます。そこにゲームらしい遊び心がうまく肉付けされていると感じました。

 

パーツの汎用性やユーザーの学習コストを考えると反対意見もあがりそうですが、現実世界にあるデザインを活かしているので学習コストは低く抑えられます。

パーツの汎用性に関しては読み込み時間やデザインの保守性とのトレードオフになりますが、他のタブを見る限り上手くコントロールできているようでした。

 

他のタブのデザインも紹介してみます。

f:id:appgameui:20200518081240p:image

▲「週間リセット商品」タブ

 

f:id:appgameui:20200518081257p:image

▲「期間パス」タブ

 

f:id:appgameui:20200518081313p:image

▲「お得なセット」タブ

 

f:id:appgameui:20200518081318p:image

▲「SDユニフォーム」タブ

プレビューボタンがあります。
この辺は実際のショップにはないのですが、サムネイルを押すとアイテムの詳細情報が表示されるので、大きな問題はないのかな、と思います。

 

f:id:appgameui:20200518081340p:image

▲「日替わり商品」タブ

 

このように個別のアイテムだろうとセットアイテムだろうと、VIPパスのような商品だろうとショップ内のデザインは統一されていました。

ここまで対応できるのはかなり強固なデザインじゃなかろうか…。

 

引き続き他の画面を紹介していきます! 

 

f:id:appgameui:20200518081445p:image

▲アイテムの説明ダイアログ。恐らくここ専用。

 

f:id:appgameui:20200518081451p:image

▲VIP特典の情報

 

f:id:appgameui:20200518081511p:image

▲購入確認ダイアログ。レシートっぽいデザイン

 

 

f:id:appgameui:20200518081516p:image

▲売り切れ時。テープが貼られました

 

f:id:appgameui:20200519082340g:plain

▲購入の流れで見るとこんな感じです。

 

全部購入して再度画面に入り直すと、今度は売り切れではなく閉店の表示になってました。

f:id:appgameui:20200518082700p:image

▲看板だけが表示されるデザイン

 

以上、ショップデザインの紹介でした。
独自のデザインがあると新奇性が目を引き、訴求につながると考えられます。

 

今回紹介した「ビーナスイレブンびびっど!」の場合もゲーム内で特に訴求したい画面だったのかな、と感じました。

 

訴求したい画面がある際のご参考までに!