こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマで毎日ゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「ガーディアンテイルズ」通称「ガデテル」から、通知バッジのデザインのバリエーションについて紹介します。
該当の演出はこちらです。
画面左端に動いているものがあるのが分かりますでしょうか。
分かりやすくするために大きくしてみます。
ダイヤを抱えたキャラクターが、ダイヤを頭上高くまで掲げながら「迷宮ボタン」の上で飛び跳ねています。
これは機能的には「通知バッジ」と見なすことができます。
タップすると、このように機能が開放され、ダイヤを獲得する演出が表示されます。
分かりやすく該当箇所を抽出してみました。
ダイヤを100個獲得したことが分かるかと思います。
機能的には通知バッジではありますが、他の通知バッジと比較して強く訴求している様子がうかがえます。
ここで言うところの「他の通知バッジ」とは、例えば以下のような赤い丸で示されたデザインを指しています。
今回取り上げている目立つ通知バッジのデザインの主な特徴は以下の４つです。
- 獲得できる報酬が分かる
- ポジティブな印象を与えようとしている
- 世界観に沿ったビジュアルを採用し没入感の維持
- アニメーションをさせて、視線を誘導している
それぞれ補足します。
1：獲得できる報酬が分かる
このデザインは、通知バッジをタップすることで報酬が獲得できることを暗に伝えています。
ここで獲得できるのはダイヤです。
「ガーディアンテイルズ」におけるダイヤはゲーム内通貨の一つであり、稀少性の高いアイテムです。
そのため、ユーザーにタップしてもらうことを強く誘導し、ゲームを進行させることに繋げているのではないか、と考えます。
2：ポジティブな印象を与えようとしている
こちらのデザインですが、キャラクターが大きく喜んでいる姿にすることでユーザーにポジティブな印象を与えようとしているデザインに見えます。
ポジティブな印象を与えることで、ユーザーの不安を取り除き、見たことがないデザインであっても安心してボタンを押せる気持ちになるのかな、と思いました。
3：世界観に沿ったビジュアルを採用し没入感の維持
ゲーム中のキャラクターをデザインに取り入れることで、ゲームの世界観を邪魔しないデザインであるように感じました。
キャラクターが存在しないゲームの場合、どのようなビジュアルを取り入れるか迷うこともあるかもしれませんが「ガーディアンテイルズ」の場合はキャラクターを利用できます。
ゲームに馴染み深いキャラクターが表示されることで、ユーザーのゲームに対する没入感を低下させずにゲームを進行させているように感じました。
4：アニメーションをさせて、視線を誘導している
画面の端で小さく表示されているアニメーションですが、比較的目立っています。
恐らく、アニメーションの変化量、アニメーションのループ速度などの影響で相対的に画面内で目立つデザインになっているためだと考えられます。
この画面の中で通知バッジは３つあるのですが、パッと見て一番目立っているかと思います。
画面に表示する内容が増えるにつれ、通知バッジの数も増えてきます。通知バッジの中でも情報の優先度付けが必要になってくるのかもしれません。
そういった時に、通知バッジにアニメーションを付け、情報の優劣を付けるようなデザインにするとユーザーの行動を誘導することに成功するのかもしれません。
以上です。
通知バッジのデザインを検討する際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ガーディアンテイルズ」のガイドラインを確認したところ、ゲーム実況の配信、動画投稿に関しては許諾されている旨の記載はありました。
主な参照箇所を抜粋します。
「ガーディアンテイルズ」を利用した、ゲーム実況の配信及び動画投稿は、個人や法人など利用者の所属や営利・非営利など収益に関わらず、以下の事項に抵触しないかぎり、事前の連絡なく自由に行っていただけます。個人、非営利目的以外に商業的な利用を希望する場合は、お問い合わせフォームよりご連絡ください。
以下は確認したガイドラインページのキャプチャです。
ブログの投稿に関して具体的な記載はなかったため、念のため問い合わせをしたところ、スクリーンショットの掲載について特に制限を設けていないことを確認致しました。（メールの無断転載は禁止されていた為、内容の掲載は致しません）
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
