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

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

「ドラッグ王子とマトリ姫」チェックマークのデザインがハートマークになっていて華やか

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

 

このブログでは「ゲームUIを見てみよう!」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです。

 

今回は「ドラッグ王子とマトリ姫」、通称「マトリ姫」のシナリオのフィルタ画面を紹介します。

 

該当の画面はこちらです!

f:id:appgameui:20211108135218p:image

 

よく見るとチェックマークがハートマークになっています。
通常は「✓」とかのデザインであるため、UIのパーツとしてはちょっと特殊なデザインになっています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

アニメーションで見るとこんな感じですね。
キャラクター、季節、時間軸といった各項目でハートマークの色も変えており、とても華やかな見た目になっているかと思います。

ゲームの世界観をビジュアルで表現しているデザインだと感じました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

ただ、よく見るとチェックボックスの挙動とラジオボタンの挙動が混在していることにも気付きます。
キャラクターの項目は複数項目にチェックマークが入り、チェックボックスの挙動になっています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

一方、季節の項目は春夏秋冬、任意の1つの項目にしかチェックマークが付けられません。これはチェックボックスではなく、ラジオボタンの挙動になっています。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

 

時間軸の項目も同様の挙動になっていました。

◆◆◆◆◆◆◆◆◆◆◆◆◆◆

チェックボックスラジオボタンの挙動が混在しているケースはしばしば見かけますが、ユーザーが操作を誤認識してしまうため、あまり推奨できるデザインではありません。

基本的には挙動が予測できるような見た目にすることも大切かなと思います。

 

以上です。

フィルタのチェックボックスのUIパーツにおいて、世界観を表現するデザインの参考になれば幸いです。

 

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。

他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 

当ページは株式会社coly「ドラッグ王子とマトリ姫」の画像を利用しております 該当画像の転載・配布等は禁止しております。
©coly

 


権利者さまへ

以下はコンテンツ利用に関する認識の説明です。

「ドラッグ王子とマトリ姫」のガイドラインを確認したところ、ゲーム内で使用されている画像やスクリーンショット画像はWebサイトやSNSへ投稿しても良い旨の文章がありました。

 

コンテンツガイドライン | 株式会社coly

1)画像について

  • ゲーム内で使用されている画像やスクリーンショット画像はWebサイトやSNSへ投稿いただいても構いません。
  • 非営利目的でしたら当社ゲームを題材としたWebサイトをご制作頂いても構いません。
  • ゲーム内で使用されている画像の過度なリサイズや編集、加工はご遠慮いただきますようお願い致します。

当ゲームを題材としてウェブサイトの公開をされる場合や公式の情報を出す際には必ず下記のようにコピーライトの明記をお願い致します。

 

これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。

画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。

 

お問い合わせ