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

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

「ココッパドール(ココドル)」衣装はデータではなくキャラクターが着るもの!という意識があると自然とショップ画面のデザインも変わってくるんだ

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

 

「ココッパドール(ココドル)」衣装セットのサムネイルが雑誌の表紙風で可愛かったです!

f:id:appgameui:20200629224853p:image

▲TOP画面。雑誌風でかわいい

 

f:id:appgameui:20200629224920p:image

▲ひとつ潜った画面。着せ替え人形でかわいい

 

衣装を魅力的に見せようとしているのが良いな、と思いました!

 

この辺りは知ってか知らずかメンタルモデルを意識しているように感じます。

トップ画面では全身が見えませんが、そこでは衣装の魅力を伝えるだけに留めて一階層潜った画面で衣装の詳細を伝えるようにしています。

f:id:appgameui:20200701233154g:plain

▲動きで見るとこんな感じです

 

良いですね、こういう見せ方。

 

ゲーム中のキャラクターの見た目を変更する仕様は多く見かけます。

ちょっと前に紹介した「アークナイツ」もそうでしたが、衣装をデータとしてではなく、ファッションとして捉えています。

そうすることによってデザイナー側も情報をどうレイアウトするかではなく、衣装をどうディスプレイするか、という意識に変わります。

 f:id:appgameui:20200211185545g:plain

▲アークナイツ 

 

f:id:appgameui:20200211191115g:plain

七つの大罪-グランドクロス-

 

f:id:appgameui:20200702000006g:plain
▲新テニスの王子様 ライジングビート。同じ制服でもキャラごとにビューを変える拘り

 

この辺りは、かなりはっきりとコンセプトが分かれています。

衣装に力を入れたいのであれば、ただ並べるだけではなく、衣装の魅力が十分に伝わるような画面を意識する必要があります。

 

f:id:appgameui:20200701233154g:plain

ショップ画面のデザインの参考になれば幸いです!

 

「ココッパドール(ココドル)」縦にスワイプするカルーセルは衣装を魅せるための工夫!

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

 

「ココッパドール(ココドル)」のホーム画面のバナーが縦にスワイプする操作で斬新だったので紹介します!

f:id:appgameui:20200630233436p:plain


挙動を見るとこんな感じです!

f:id:appgameui:20200630232953g:plain

縦にスライドするバナーは初めて見ました!

 

どんな意図があるの?

デザインの意図ですが、よくある横スライドのバナーデザインを採用すると、足元が必ず隠れてしまう、という問題があります。

それを解決するためにこのようなデザインに至ったのだと推測します。

f:id:appgameui:20200630233719p:plain

▲足元までしっかり見えます

衣装が見えることが大事

なぜそこまでするのかですが、このゲームにおいて最も重要な情報はキャラクターの衣装であり、ユーザーもそれをモチベーションとしてゲームをプレイしていることが考えられます。

 

実際、ゲームスキームも衣装を集めることがメインサイクルですし、SNSを覗いてみても衣装のキャプチャがほとんどです。(他のゲームはガチャ結果や高難易度のクエストをクリアした時とか、そういったものが多いように感じます)

何を見せたいのかがハッキリしていて良いですね!

 

情報の優先度決めはUIデザインの基本的なところであります。

ユーザーが見たいものを見せる姿勢は素晴らしいなと感じました。

 

操作性と訴求に関して

変わったデザインなので操作性に関しても少し触れておきます。
縦持ちの場合、横にスライドする操作より、縦にスライドする方が指に負担はかかりません。ですので、操作性に関しては特に懸念はないように感じました。

 

デメリットをあげておくと、テキストがほぼ入りません

f:id:appgameui:20200630234812p:plain

▲ガチャの訴求としてはこれくらい

 

f:id:appgameui:20200630234625p:plain
▲これぐらいの文言なら入る

 

f:id:appgameui:20200630234730p:plain

▲頑張った縦書き

ですので、文字で訴求できる情報量はかなり限られたものになります。
可能な限りビジュアルで表現するのが良いのかな、と感じました。

 

縦カルーセルを採用するかどうかは別にして、かなり珍しい例ですが見せたい情報によっては選択肢のひとつになるのかな、と感じたので紹介させていただきました。

いやー…このデザインの発想は自分にはなかったので大変参考になりました。

 

「スタートリガー」ホーム画面から装備を選択して強化できるので手数が少し減る設計になっている

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

「スタートリガー」のホーム画面で、装備の強化の導線が配置されていたので紹介します!

f:id:appgameui:20200627152903p:image

 

こちらです!

f:id:appgameui:20200628132611p:plain

ホーム画面で直接装備が並んでいるのは初めて見たかも。

確かにソシャゲの主な遊び方のサイクルとしては、バトル⇒強化⇒バトル⇒…というサイクルが考えられます。

通常は、装備⇒任意のアイテムを選択⇒強化コマンドを実行

という流れです。そこを一手省いて、装備⇒任意のアイテムを選択⇒強化コマンドを実行、としているのは効率的であり、斬新だと感じました。

 

f:id:appgameui:20200628200341g:plain

▲ホーム画面から装備強化までの遷移

 

また、ホーム画面で装備のビジュアルが見えることによって、ユーザーの関心をひきつけたり、変化を楽しむことができます。 

パーティを組むなどしてキャラクターが複数いる場合には適応できないなど、どこでも使える手法ではないのですが、情報を構造化して考えていると中々出ないアイディアだな、と感じたので事例の一つとして紹介してみます。

 

 

「スタートリガー」どこからでもチャットにアクセス出来るのは良いけど、もう少し制限しても良かったのでは…

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

「スタートリガー」をプレイしていて、情報の優先度について気になったので書いてみます。 

f:id:appgameui:20200627153158p:imageこの画面の左側にある吹き出し…。
この吹き出しが割と常に最上面に表示されます。

 

f:id:appgameui:20200627153858p:image

▲ガチャを選択する画面でも…

 

f:id:appgameui:20200627153206p:image

▲ガチャを引く画面でも…

 

f:id:appgameui:20200628194409p:plain

▲容赦ない

 

最前面に表示されるだけではなく、下図のような表示のされ方をされると「SHOP」と関連性があるように見えてしまいます。

f:id:appgameui:20200628124909p:plain

▲「SHOP」の附属的な情報に見えてしまう

 

同じ画面の「ミッション」の吹き出しはミッションに関係ある情報として、吹き出しのデザインを採用している

f:id:appgameui:20200628125145p:plain

▲「ミッション」のボタンに使われている吹き出し。こちらは情報に関連がある

 

f:id:appgameui:20200628125202p:plain

▲全体を見てみるとこんな感じ 

 

どうしてこういった実装になっているかを想像するのですが、察するにこの吹き出しの機能がチャットだから、という事情が考えられます。

 

f:id:appgameui:20200628194748g:plain

吹き出しをタップするとチャットが開きます

 

チャットという機能の性質上、ある程度どの画面でも機能にアクセスさせたい、という要望があります。ホーム画面だけでしかやりとりできないのも不自由ですよね。

 

ですので、見た目の不自由さよりも「どこでもアクセスできる」という利便性を採ったのかな、と考えられます。

 

チャットのUIを入れようと思っても「スタートリガー」の場合はそういったUIを組み入れるスペースがありません。
きちんと入れようと思っても、全ての画面に渡って表示させたいのであればかなりの範囲での大改修が行われることが必須です。

どこでもチャットにアクセスできるのはある意味効率的ではあるのですが、UIのグラフィック、世界観への没入感に対してこだわりが見れたタイトルなだけに勿体ないな、と感じてしまいました。