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

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

「Chess Rush」デザインが凝っている画面の紹介。ガチャ周りは上手にカルチャライズしてるかも

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

「Chess Rush」で凝ったUIがいくつかあるので紹介してみます。 

 

1:碁霊士画面

早速ですが、なんなんですかね「碁霊士」って…。
そんな「碁霊士」画面がこちらです。

f:id:appgameui:20200212230237p:image

  1. 報酬
  2. 循環ミッション
  3. チャレンジミッション
  4. くじ引き

以上の4つのメニューがあります。…あんまりメンタルモデルが働かない。
それぞれの画面はこんな感じ。

f:id:appgameui:20200223122225g:plain

 

で、今回紹介するのは「報酬」の中の一部UIです。

f:id:appgameui:20200212230237p:image

 

この中の一部報酬の詳細を確認しようとすると、虫眼鏡のUIが表示されます。

f:id:appgameui:20200223112645g:plain 

f:id:appgameui:20200212230116p:image

こんな感じです。ん~、凝っているけど階層が深い…!

他の画面も紹介してみます。

 

2:スーパーガチャ機

「宝さがし」の画面の下にあるものです。この画面のメニューはすべて凝っています。

  1. スーパーガチャ機
  2. 宝さがしの冒険
  3. ラッキー居酒屋

f:id:appgameui:20200221091739p:image

 

ちなみに英語で見ると…

  1. Gashapon Machine (Egg Machine)
  2. Tresure Hunt (Tresure Hunt)
  3. Lottery (Lucky House)

…と、なっていました。

f:id:appgameui:20200223120638p:plain

Gashapon Machineって通じるのかな、と気になったので調べてみましたが…

f:id:appgameui:20200223125230p:plain

 

「Gashapon Machine」で検索するとこんなイメージ

f:id:appgameui:20200223124859p:plain

▲共通認識として通用している気がする

 

「Egg Hunt」で検索するとこんなイメージ

f:id:appgameui:20200223124939p:plain

▲こっちはもっと浸透している印象

 

システム的にはともかく、楽しそうな雰囲気は伝わってきます。

日本語訳されたときに「スーパーガチャ機」という名前になっちゃうのは気になるけど…。

 

さて、そのスーパーガチャ機の画面ですが、こんな感じです。

f:id:appgameui:20200221091837p:image

アンティークなデザインがかっこいい。

 

左にあるこの数字って何かなー、ってぼーっと考えてたのですが、
恐らくレアリティと格納されている数です。

f:id:appgameui:20200223125749p:plain

▲Bランクが27個、Aランクが18個、Sランクが9個入っているという意味

 

この「54」という数字はカプセルの合計数

f:id:appgameui:20200223130017p:plain

▲27+18+9=54

おー、凝っている!
日本のソシャゲだと所謂ボックスガチャがこれに近い仕様なので、取り入れやすいかもしれません。

 

アニメーションするとこんな感じ。

f:id:appgameui:20200223115613g:plain

回転してカプセルがシャッフルするデザインが良いですね。
下の方にレアリティの高いカプセルが集中するまでぐるぐる回したくなります。

 

3:宝さがしの冒険

宝さがしの冒険の画面デザインはこんなデザインです。

f:id:appgameui:20200221092015p:image

中央付近にある、このグラフィックをタップすると報酬の詳細情報が見れます。

f:id:appgameui:20200223131001p:plain

▲キラキラしてる

 

タップすると画面端からスクロール(巻物)が表示されます。

f:id:appgameui:20200223113116g:plain

▲挙動的にはドロワーなのか…?

 

ところでなんなんだろう、この地図…。

f:id:appgameui:20200223131251p:image

 

4:ラッキー居酒屋

続いて「ラッキー居酒屋」です。

f:id:appgameui:20200221092042p:image

項目名から察するに楽し気な雰囲気は伝わりますが、ビジュアルと相まってどういう機能なのかさっぱり分かりません。

 

f:id:appgameui:20200223134449p:plain

▲なんなの

 

中身はガチャです。この人形を叩くと中からアイテムが獲得できます。

f:id:appgameui:20200223113753g:plain

 

いわゆる「ピニャータ」に模したデザインです。 

www.youtube.com

ピニャータ

 

f:id:appgameui:20200223142031g:plain

上のyoutubeの映像観て感じましたが、この「びよーん」ってなったり、何度も叩く様子とかピニャータっぽい。

っていうかピニャータです。

 

ガチャをカルチャライズしたらこうなった、というデザインの事例を見た気がします。
 

5:実績表示 

最後は「実績表示」です。

f:id:appgameui:20200223143337p:plain

 

画面下部にある「シェアボタン」を押すと…

f:id:appgameui:20200223142636p:plain

▲「シェアボタン」

 

シェア専用の画面に切り替わります。

f:id:appgameui:20200223143355p:plain

座布団に敷かれて実績のグラフィックが表示されていることが分かるかと思います。

 

アニメーション的にはこんな感じです。

f:id:appgameui:20200223143222g:plain

以上…

 

これらの画面でグラフィックが作り込まれているな、と感じました。

階層の深さに関わらず、ショップ周りや報酬など、ユーザーに価値を感じて欲しい部分を中心にデザインが作り込まれているように感じました。