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

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

「妖怪ウォッチメダルウォーズ」ボタンの形をしていないとボタンと認識されづらい?カメラに合わせて文字が濃くなり、アクティブかどうか分かるデザインになっている

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

 

 

一般的にボタンはボタンという形状をしていないとボタンと認識されません。あるいは押せると分からりません。 なので、ボタンは押せる形状でデザインする必要がある。

というのが原則ですが、今回はその例外の事例を紹介してみたいと思います。

 

ボタンの形状をしていないのに押せるように見える工夫って?

結論から言うと、カメラの角度に応じて文字の濃度が変わる仕様になっています。

文字が薄いと押せない、濃いと押せる。

という仕様になっています。 

f:id:appgameui:20190818205033g:plain

こんな感じでカメラを動かすと文字が出たり消えたりする

 

部分を抽出してみます。

f:id:appgameui:20190818205451g:plain

画面の中央から遠くなると文字が消え、画面の中央に近いと文字が表示されます。

こういった仕様になっているため、アクティブか非アクティブな情報が分かるようになっています。

 

文字が消えるのが良い仕様?

出たり消えたりしても良いの?って思われるかもしれませんが、分かりやすければOKだと思っています。

情報が取捨選択され、やるべきことが絞られるので、より分かりやすい画面になるかと思っています。
アクティブなメニューかどうか、文字が透けることによって直感的に分かりやすくなります。

また、ボタンのタップ範囲が分かりづらいデザインではあるので、こういった工夫がないと、どこからアクティブなのかが分かりづらかったのかもしれません。

まとめ

ホーム画面では情報が過多になりがちです。お手本のようなボタンばかり配置してしまうと、一見して「ボタンが多くて複雑なゲーム」に見えます。
そこで、情報をすっきり見せるためにボタンに見えないボタンというデザインを選択することも視野に入れる必要があります。

その際に「ボタンに見えないが押せるかどうかユーザーに伝わる配慮」も必要になります。その配慮のひとつとして、「妖怪ウォッチメダルウォーズ」では文字が消えたり表示されたりすることで、ボタンがアクティブかどうか示すデザインになっています。