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

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

「テラウォーズ」ショップバナーの事例紹介。分かりやすさを大事にしよう。

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

 

 

今回は「テラウォーズ 」のショップのバナーデザインについて書いてみたいと思います。ちょっと見た感じ分かりづらく感じたんですよね… 

 

 

早速ショップ画面の訴求画像を見てみます。

f:id:appgameui:20190702235442p:image

ぱっと見のショップのちぐはぐ感…。

 

 

ポップアップを開くとこんな感じです。

f:id:appgameui:20190702235451p:image

先ほどの賑やかさとは変わって、落ち着いたデザインになっています。

 

 

 

ショップの下の方はこんな感じ。

f:id:appgameui:20190702235557p:image

f:id:appgameui:20190702235610p:image

色数、フォントの種類の多さなど、情報量が多く、他画面の世界観から外れてしまっているように見えます。

「これも世界観です」と言ってしまうことも可能ですが、厳しい…。

 

見てて思ったのですが、
これ…、オススメだけあとで強引に追加してないかな。

 

あとから追加するのは文脈として自然というか、むしろ先にオススメの項は作れないから良いんですが…。
オススメのところだけ、妙にデザインが不時着しています。

 

やりたいことは分からなくはないけど、結果的にまとまってない感。

仮説を交えつつ、具体的にまとまっていないと感じた部分を見ていきたいと思います。

 

 

1:文言

文言がまとまっていないのが気になりました。

f:id:appgameui:20190704065227p:image

気になったのは以下の文言です。

「ガチャ0回が10回に」

f:id:appgameui:20190811150904p:plain



解釈すると、

「通常の購入レートだと有償分のエナジー40個で、ガチャを引ける回数に換算すると0回ですが、960個の無償分のエナジーが付いてくるので、合算するとエナジーが1000個になります。
これをガチャが引ける回数に換算すると10回引けることになります。」

 

…ということだと思うのですが、訴求文言としては些か難解。
お得感が直感的に伝わりづらいです。

 

 

じゃあ文字数を減らせないか、ということで減らしてみたものの「ガチャ0回が10回に」だと、

1回限定のガチャを引いて、残り回数が0回になったガチャの回数を10回にしてくれるのか?

 

とも解釈可能です。

もちろんガチャの仕様や前後の文脈から判断して、最終的にそう理解されることはありませんが、ソシャゲに慣れていない人の方が圧倒的に多いです。

 

また、慣れていたとしても、文言だけを見て頭の中で瞬間的に複数の選択肢が浮かびます。その取捨選択の判断の回数を減らした方がストレスになりません。

 

例えば「半額!」とかは生活していてもよく見かけるので、そう言った文言を利用するとかです。

 

2:丁寧に言葉を選ぶ

次に「無償をサービス」という言葉も丁寧さに欠けています。

f:id:appgameui:20190811151335p:plain

商品購入画面なので「無償エナジー」と丁寧に言葉を選ぶ必要があります。
もう一つあります、以下の画面にて… 

f:id:appgameui:20190704070423p:image

エナジー7,500」とあるのですが、他で「個」が付いているので、不統一にする必要は無いかなと思いました。

f:id:appgameui:20190811151412p:plain

このようにフォーマルさに欠け、情報の信頼性が下がっているように感じました。

賑やかさも必要な場面ではありますが、金銭が絡む画面ですので、最低限の丁寧さも必要な画面です。

 

 

3:レイアウト

3つめはレイアウトのルールが守られていないことです。

アイコンと数字の位置が離れすぎている、他の画面とレイアウトが違うので、直感的に理解できなくなってしまいます。

f:id:appgameui:20190811153150p:plain

情報が整理されていないと受け取り側の解釈に差が生まれます。

 

例えばこちらは購入して瞬時に獲得できるエナジーです。

f:id:appgameui:20190811153559p:plain

 

それに対してこちらは30日間ログインして獲得できる最大値です。

f:id:appgameui:20190811153653p:plain

なので、通常は「最大3800」などユーザーが誤解しないようにテキストを添えます。

 

一応、下の方に※で記載はありますが、情報が整理されていないので、やはり分かりづらいですし、気付きづらい…。

f:id:appgameui:20190811153842p:plain

という具合に、フラットデザインでどう訴求するか、という以前に基本的なデザインの粗のようなものが目立ちました。

 

そうなってくると、ショップのデザインの意図がどの程度考えられたものなのか、疑問が生まれてきます。

 

 

 

例えば、バナーにフォントを多数使っていますが、仮に意図したデザインとして、その意図をどこまで考えれば良いのか、です。

 

f:id:appgameui:20190704092923p:image

 

 例えば価格の表記のフォントですが、バナーによって変えています。

f:id:appgameui:20190811154314p:plain

 

商品名のフォントも同様です。

f:id:appgameui:20190811154516p:plain

作業していて通常はこうなりません。
恐らく販売している商品のカテゴリによって意図してデザインを変えたのだとは思うのですが、先ほどの粗を考慮すると必然性が不明というか…なんとなくであったり、手癖でデザインした可能性もでてきてしまいます。
(なぜその部分のフォントだけ変えた?とか…)

 

4:色

色は部分的には分らなくもないけど…。
例えば以下の素材は価格の高さによって色を使い分けしているのだと思われます。

f:id:appgameui:20190811154607p:plain

以上です。

 

このように分かりづらさがある画像やデザインです。
その原因は主に、情報が整理できておらず、レイアウトが不統一になっていること。必要な情報が分かりやすいところに表示されていないことがあるのかなと思っています。

特に金銭に絡む画面に関してはユーザーに分かりやすく誠実なデザインをすべきだと思います。まずは分かりやすいサービス内容。少し複雑であれば分かりやすくする工夫が必要かなと思います。

分かりづらいとリスクに感じ手を出しづらい心理が働くので、金銭が絡む画面に関しては分かりやすさも大事にしたいな、と思いました。