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

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

「妖怪ウォッチメダルウォーズ 」タップ範囲は最低限の大きささえ 確保していばOK?サイズ感ではなく押しづらければNG

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

 

妖怪ウォッチメダルウォーズ 」にてタップしづらいと感じた部分があったので、なぜそう思ったのか考えてみました。

 

タップしづらい箇所はどこ?

まずタップしづらいと感じた場所はクエストを選択し、バトルに遷移する場面です。

f:id:appgameui:20190801084331p:image

 

タップしづらい理由は?

じゃあ、どうしてタップしづらいと感じたのかですが、ほかの画面だと帯全体がタップ範囲になっているんですよね。

 

f:id:appgameui:20190820091646p:image

f:id:appgameui:20190820091726p:image

f:id:appgameui:20190820091734p:image

f:id:appgameui:20190820091801p:image

これらは枠全体が押せる挙動です。

同じようなデザインなので、枠全体が押せると思い込んでしまい、結果的にボタンしか押せないと、ボタンのサイズが小さくてタップしづらいと感じました。

また、同じようにボタンが並ぶリストもあるのですが、ここは個別のボタンを押さないので、実際にはタップしづらいと感じることが少ないです。

f:id:appgameui:20190821093009p:image

 

 

どうすれば良いのか?

ではどうすれば良いのか、考えてみます。

単純に帯まで含めた方が押しやすくてストレスがありません。できればそれがベストなのですが「GO→」のデザインはおそらく冒険周りのデザインと一貫性を持たせる意図があると推測されます。

f:id:appgameui:20190821132842p:image

f:id:appgameui:20190821132847p:image

f:id:appgameui:20190821133418p:image

こんな感じで「GO→」は冒険に遷移する表現として一貫しています。ですので、このデザインを変えずに一貫性を保つのであればクエストのリストのデザインを踏襲し、枠を外したデザインにする、という案があります。

 

まとめ

今回の場合はボタンが押しづらいと感じたことが発端ですが、押しづらいと感じた原因はボタンのサイズだけではなく、押せそうな見た目と、そう思わせたメンタルモデルにも原因があるかと思いました。

ですので、安易にボタンの判定を大きくしてしまうとデザインの一貫性が保てなくなってしまいます。こういったときに前後の画面のデザインなどを考慮して提案できるようになると良いな、とおもいました。