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

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

「レッド:プライドオブエデン」猫モチーフのデザインがあちこちに。UIパーツに遊び心を取り入れたい際の参考に

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

 

「レッド:プライドオブエデン」では【猫】がキーワードのタイトルです。
したがって猫がモチーフのUIパーツが多く見られます。

世界観に寄せたデザインの作り込みの事例として、いくつか紹介します。

レッド:プライドオブエデンのホーム画面です。明るい森の背景の中に少女のグラフィックと複数のボタンが表示されています

 

1:タップを促す指のマーク 

タップを促す指も猫の手になっています。
大体はプレイヤーの指をイメージしたデザインか、汎用的なデザインになっていることがほとんどです。

レッド:プライドオブエデンのホーム画面のgifアニメーションです。少女のグラフィックがポーズを付けながら動いています

レッド:プライドオブエデンのホーム画面下部にあるボタンのgifアニメーションです。猫の手がボタンを押すように指し示しています

かわいい。
手首のスナップが入っており、開発の拘りがうかがい知れます。 

 

2:通知マーク

他にも通知を示すマークも猫の肉球スタンプでした。

レッド:プライドオブエデンのホーム画面にある手帳ボタンです。通知マークが肉球を模したデザインになっています

多くは赤い丸かな…。
たまに緑や青も見かけますが、肉球のマークは初めて見たかも!

 

3:スライダーのパーツ

オプションのスライダーのボタンにも肉球のデザインが施されていました。

レッド:プライドオブエデンのオプション画面です。ゲーム設定が行えます

レッド:プライドオブエデンのオプション画面にあるスライダーを拡大した画像です。スライダーを動かす部分が肉球になっています

結構細かい部分…。
ここはシステム寄りの汎用デザインでも良かった気がするけど、システムっぽい画面になるのが嫌だったのかな…?

 

 

4:詳細を見るアイコン 

キャラクターの詳細を見るためのアイコンも猫のモチーフが取り入れられていました。

レッド:プライドオブエデンの衣装変更画面です。画面左側にキャラクターのプレビュー、画面右側に衣装切り替え、画面下部はキャラクター切り替えのボタンが並んでいます

 

こちらです。猫の虫眼鏡。

レッド:プライドオブエデンの衣装変更画面の左上に表示されている立ち絵を見るアイコンです

アイコンというか専用のアイテムのデザインにも見えました。
記号的ではなく、しっかりと描き込んでしまうとそのデザインの意味を考えてしまい、認知コストが上がるのかな…。

あるいは、階層的にかなり奥の方に独自のデザインのアイコンがあるので変に目立っちゃうのかも…?

特徴的なデザインは強調したい場所に配置する方が、ユーザーも特別なデザインであると認識しやすいのかな、と思います。

 

以上です。

世界観を取り入れることも忘れずにいたいな、と感じました。
デザインに遊び心が欲しいな、と思った際の参考までに。