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

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

「あんさんぶるガールズ!! ~Memories~」上下左右にスクロールできるシナリオ選択画面の操作性が素晴らしい件

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

 

横画面のデザインで、シナリオ選択画面のデザインの参考事例を紹介します。

 

今回事例紹介するタイトルはあんさんぶるガールズ!! ~Memories~」です!

f:id:appgameui:20200902001336p:image

このタイトルはすでにサービスが終了した「あんさんぶるガールズ!!」のアドベンチャーパートだけいつでも見れるように編集したタイトルです。

 

主な画面としてはシナリオ選択画面と、アドベンチャーパートの画面のみです。

f:id:appgameui:20200831093833p:image

▲シナリオ選択画面

 

f:id:appgameui:20200902090917p:image

▲アドベンチャーパートの画面

 

収録されているシナリオの数は非常に多いです。横画面の場合は縦画面と比較して一度に表示できるシナリオの数も限られます。

また、スクロールする距離も短いため、シナリオを選択しようとした際に手数がかかります。

ああああああああ
▲スクロールする距離が短いので選ぶのに手数かかかる

 

そこで「あんさんぶるガールズ!! ~Memories~」の場合は左右にスクロールバーを配置しています!

f:id:appgameui:20200902001429j:image

 

これにより一度にスクロールできる距離が伸びて、シナリオを選択するまでの手数を少なくすることが可能です。

 

ああああああああ

 

またスクロールバーから吹き出しが表示されるデザインはソシャゲでは初めて見た!かも!

いわゆる動画のシークバーと同じ効果が得られると期待

 

左側で項目が上下で並んでいるので、スクロールバーもそのように並べがちです。

ああああああああ

そういった常識を考え直して新たにどちらにもスクロールできるデザインにする発想が凄いです。

また、リリース順、時系列順に並べることが出来、情報も整理されています。

f:id:appgameui:20200902001534j:image

f:id:appgameui:20200902001536j:image

 

改めて整理すると

  • 左右のスクロールバーを設置することにより、シナリオを選択するまでの手数を少なくすることができる
  • 左右上下、どちらにもスクロールできる
  • 時系列順、イベント開催順など、並べ方が変えられる

などが特徴として挙げられます。  

以上です。
図鑑やライブラリ的なものがあるゲームの操作性向上の参考になれば幸いです。