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

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

「リバース:1999」神秘術のアイコンはエフェクトや演出をもとにした分かりやすいデザイン/配色や構図も整理されている

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

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


今回は「リバース:1999」から神秘術のアイコンデザインの工夫をご紹介します。
「リバース:1999」では神秘術という攻撃方法があります。アイコンでデザインの差別化がされていたため、様々な攻撃方法や効果が直感的に伝えられていると感じました。


以下、概要です。

 

エフェクトを基にしてそれぞれ区別しやすいデザイン

「リバース:1999」の神秘術のアイコンはエフェクトや演出を基にしたデザインになっていました。

例えば上図のように雷雲から雷を落とし、敵を攻撃するような神秘術の場合、アイコンに雷雲、雷、呼び出すための魔導書などが描かれています。

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

情報量はかなり多いのですが、色、構図、情報の優劣などをシンプルにまとめ、神秘術を選ぶ際に迷いにくいデザインになっていると感じました。

多くのデザインバリエーションが求められる場合、神秘術の効果を拠り所にするよりも、演出などの見た目を拠り所にするデザインに着地しがちな気はします。

 

長押しで効果が確認できる

f:id:appgameui:20231126131852p:image

「リバース:1999」では神秘術のアイコン長押しをすると、効果が確認できるバルーンが表示されます。
すぐに効果を確認できるため、効果を覚えずに戦闘に臨んでもその場で戦略を立てることが可能です。

 

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

特に「リバース:1999」では神秘術はレベルによって効果値が変化するため、学習コストは高めだと感じました。簡単に効果が確認できると学習コストを下げられるため、便利な機能だと感じました。

 

合成するときはアニメーションをさせて目立たせる

同レベルで同じ神秘術同士が隣り合うと神秘術がレベルアップします。
こちらがアニメーションです。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆

レベルアップした際、神秘術のアイコンが一瞬止まりブルブルと震える演出が入ります。この演出によりユーザーの注意が向き、何が起きたのか理解する時間が生まれています


見やすいように少し大きくします。
2つのアイコンがブルブルと震え、重なった後、回転して1枚のアイコンに置き換わっています。

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

 

有利不利を表示して分かりやすく

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

「リバース:1999」の神秘術アイコンデザインの工夫の中に、敵との相性を表示している点が挙げられます。
よく見ると、選択している敵に対して相性が良い神秘術の場合、アイコンの右上に「有利」と表示されています。

必要な情報をアイコン付近にまとめ視線が散らないように工夫されていると感じました。

 

必殺技はシルエットを変えて差別化

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

 

神秘術の必殺技のアイコンの場合、通常の神秘術のアイコンは他のアイコンと比較して目立たせていました。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆

具体的には以下の3点です。

  1. 他のアイコンより大きく表示させる
  2. シルエットを変える
  3. アニメーションさせている

情報量を増やしつつ、パッと見の特別感は感じられるかな、と思いました。

 

以上です。
攻撃方法のアイコンをデザインする際の参考になれば幸いです。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
「リバース:1999」のガイドラインを確認したところ、以下の記載がありました。

ガイドラインを遵守していただければ、当社の許諾を得ていただく必要はございません。

第4条 許容される派生品創作活動の範囲

ガイドラインに反しない範囲で、派生品創作活動を行ってください。
法人格のない個人または団体が行うことができる非営利目的による利用の例は、以下のとおりです。

(1) イラスト、マンガ、ガレージキット、人形などの3D作品の制作、展示、配布
(2) 同人誌及び同人グッズ(電子版を含む)の制作、展示、頒布及び公開
(3) コスプレ衣装の制作、展示、販売
(4) コスプレ写真・映像のウェブ上での配信、展示、放映、発表
(5) ゲームのプレイ動画の投稿、配信(生放送を含む)、及びスクリーンショット等の画像の投稿
(6) 公式作品の画像を個人プロフィールページの背景やアイコンなどに使用すること

リバース:1999 公式サイト

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

リバース1999のコンテンツ利用ガイドラインです。2023年10月25日更新版です

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

 

お問い合わせ