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

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

「ガール・カフェ・ガン」フィルタ機能のデザインがとても分かりやすかった。色覚多様性にも対応できているデザインは珍しい

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

 

「ガール・カフェ・ガン」のフィルタ機能が良かったので紹介させてください。

ガールカフェガンのおすすめのパーティ編成を行う際、何を優先して編成を行うか設定するダイアログです



色覚多様性対応もバッチリ

どこが良かったのか、ですが「色覚多様性への配慮が出来ている」という部分です。
属性の色だけでなく文字が書いてあるデザインです。かなり珍しい…!


PhotoshopのP型(1型)のフィルタを掛けた見た目だと以下のような見た目でした。

ガールカフェガンのおすすめのパーティ編成を行う際、何を優先して編成を行うか設定するダイアログです。PhotoshopのP型フィルタを有効にして視認性を確認しています


 より分かりやすくするために部分的に拡大してみます。

キャラクターの属性アイコンの部分だけ切り取った画像です。画像はP型のフィルタをかけています

 

属性マークの下に文字が書いてあるのですごく分かりやすいデザインです。 

アイコンだけだと分かりづらいので文字を併記することをオススメしていますが、実装されている例はあまり見かけません。

ガルカフェの実装だと色覚多様性対応としては十分ではないかなと思います

 

相性表示も分かりやすい

キャラクターの属性アイコンの部分だけ切り取った画像です。この画像はPhotoshopのフィルタをかけていない画像です

色覚多様性の対応に目が行きがちですが、相性表示もバッチリできています。

ソシャゲの属性の相性はそれぞれ違うのでいちいち覚えていません。
スペースは必要になるのですが、とても分かりやすいです。

 

実装するかどうかはゲームによりますが、アイディアの幅としては面白いデザインなんじゃないかな、と思います。

 

なんでこのアイディアが浮かばなかったんだろう…。 悔しい。

 

スクロールすることが分かりづらかった

記事の最初に掲載した画像と同じ画像です。ガールカフェガンのおすすめのパーティ編成を行う際、何を優先して編成を行うか設定するダイアログです

全体的によく出来たデザインだと思いましたが、分かりづらかった部分もありました。

静止画だと伝わりづらいかもしれませんが、実はスクロール可能なんですよね。

上で紹介したガールカフェガンのおすすめのパーティ編成を行う際、何を優先して編成を行うか設定するダイアログをスクロールさせたgifです

このように下の方まで項目があります。
あまりにもキリの良いところで切れているので気付きづらく感じました。

 

対応方法としては…

下に項目があるように少し隠したり…

ガールカフェガンの所持キャラ画面です。キャラのサムネイルが少しだけ隠れており、その先に情報があることが暗に伝わります

 

アニメーションを用いて視線を誘導するのも有効です

ガールカフェガンの所持キャラ画面に遷移した時の演出です。サムネイルが順番に表示され、画面外にも情報が続くことが伝わります




フィルタのデザインを考える際の参考までに

ガールカフェガンのおすすめのパーティ編成を行う際、何を優先して編成を行うか設定するダイアログですフィルタのデザインは大きく変わり映えしなかったので、知らず知らずのうちに思考停止になりがちなのかもしれません。

ソシャゲのフィルタは情報量が多く、複雑化し続けているので一度マインドセットをリセットして要件をまとめた後にデザインするのもアリなのかな、と思いました。

以上、デザインのご参考までに。