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

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

「妖怪ウォッチワールド」IPのアイコンデザインの暗黙知とボタンのデザインを横断的に見てみました。

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

 

妖怪ウォッチワールド」にて、IPとしての暗黙知が守られている箇所と守られていない箇所があったので気になりました。

 

 

メニューアイコンについて

ざっくり言うと、メニューのアイコンなどは暗黙知が守られていて、汎用的なボタンの色は守られていないようです。

以下が妖怪ウォッチワールドのメニューです。

f:id:appgameui:20191019224328p:plain

 

以下は以前まとめたものですが、他のタイトルのデザインが共通しているメニューアイコンです。

f:id:appgameui:20191005163845p:plain

「妖怪ウォッチぷにぷに」ターゲットを明確に意識し、ユーザーの学習コストを抑えるメニューのデザイン - アプリゲームUIデザイン

 

これを見ると「もちもの」「せってい」「タイトルへ」などのデザインは同じモチーフを使っていることが分かります。

 

ただ、「ミッション」のことを「クエスト」としたり、「せってい」ではなく「その他」などされており、今回は学習コストを下げるという意図は感じられませんでした。

 

汎用的なUIパーツ(ボタン)について

メニューアイコンの次に汎用的なUIパーツのボタンに注目してみました。

なるべく、選択肢がフラットな情報として扱われる場所で見てみました。

 

妖怪ウォッチワールドの場合

「いいえ」が青、「はい」が赤です。

f:id:appgameui:20191014180701p:image

 

妖怪ウォッチぷにぷにの場合

「とじる」が紫、「けってい」が黄色です。

f:id:appgameui:20191014224825p:plain

 

妖怪三国志の場合

「キャンセル」が紫、「OK」が黄色です。

f:id:appgameui:20191014224955p:plain

 

妖怪ウォッチゲラポリズムの場合

二色使われていますが、今回はベースカラーで定義します。
「やめる」は紫。「けってい」は赤と橙の間くらい。身近な色だと人参かな。

f:id:appgameui:20191014224857p:plain

 

 

妖怪ウォッチメダルウォーズの場合

「キャンセル」が赤。「OK」が青でした。
妖怪ウォッチワールドと逆なんですね…。

f:id:appgameui:20191014224727p:plain

 

 

まとめると以下のようになりますね。 

f:id:appgameui:20191016231106p:plain

 

うーん、興味深い。

ボタンの色が統一されてそうでされていないのは、ボタンの色を決めたプロセスであったり、情報の優先度がそれぞれ違うからなのかな…。

 

特に「妖怪ウォッチワールド」と「妖怪ウォッチメダルウォーズ 」でポジティブとネガティブの色が入れ替わっているのは面白いなと思いました。