こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「ブレイブリーデフォルト ブリリアントライツ」、通称「BDBL」から、UIアニメーションを利用した認知の助けの事例をご紹介します。
具体的にはスクロール可能な方向と同じ方向のアニメーションを利用することで、ユーザーにスクロールすることと向きを伝えているデザインです。
該当の画面はこちらです。
こちらは所持アイテムのリストです。
サムネイルの登場するアニメーションをよく見ると、登場時に若干下から上に移動しながら登場しています。
分かりやすいように1/3程度の速度で再生してみます。
登場演出時、サムネイルが僅かに下から上に動いているのが分かりますでしょうか。
これにより、上下に動かせる情報群であることがユーザーに伝わりやすくなります
一応、仮にアニメーションがなくても、この情報群が上下にスクロールができることは分かります。
例えば、スクロールバーを表示されていることで、スクロールできることを伝えています。
また、画面下部でサムネイルが切れ、情報が隠れていることもスクロールできることを伝えるデザインにもなっています。
しかし、アニメーションがあることで、より自然にスクロールできることが伝わるようにデザインされていると感じます。
他の画面も見てみます。
こちらは所謂キャラクター図鑑の画面です。
この画面は左右にスクロールすることができます。
UIアニメーションが一瞬なのでスローにしてみました。
登場時にキャラクターのサムネイルが右から左に動いている点、画像が左から順番に表示されている点などから、視線が左から右に誘導されるかと思います。
また、登場時に動かすことで、見ている側も「これは動かせるものである」という第一印象を与えたいのかと推測します。
最後にストーリーのリスト表示のアニメーションも紹介します。
こちらも上下にスクロールできるリストですが、今まで紹介した場面同様に登場時にリストが下から上に移動しています。
これによりスクロールできるリストであることが伝わりやすくなっているかと思います。
まとめ
まとめると「ブレイブリーデフォルト ブリリアントライツ」のUIアニメーションを利用した認知の助けの事例について感じたことは以下の３点です。
- 実際に動かせる方向と、登場時のアニメーションの方向を一致させることで、動かせる方向を理解させている
- 登場時にパーツが動くことで、ユーザーに対して「これは動かせるものである」と伝えている
- 移動アニメーションだけではなくアルファアニメーションを利用して、視線を誘導している
他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。
以上です。
UIパーツのアニメーションを取り入れる際の参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
© SQUARE ENIX CO., LTD. All Rights Reserved.
記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「ブレイブリーデフォルト ブリリアントライツ」のガイドラインを確認したところ、公式HPにて、SNSやwebサイトへのゲーム画像の投稿は許諾されている旨の記載がありました。
GUIDELINE |【公式】ブレイブリーデフォルト ブリリアントライツ (BRAVELY DEFAULT BRILLIANT LIGHTS) | SQUARE ENIX
主な参照箇所を抜粋します。
【利用いただけるもの】
本ガイドラインに従い利用いただけるもの（以下「利用対象」といいます）は、以下のとおりです。
- 以下に記載の本ソフトの公式サイトおよび当社が運営する以下のサイト内に掲載されているテキスト・情報・画像・動画
https://www.jp.square-enix.com/bdbl_SP/- 本ソフト内に表示されるテキスト、ゲーム中で撮影されたスクリーンショット、およびゲーム内で撮影された動画
【利用条件】
- 掲載・配信に際して、以下の権利表記を表示してください。
© SQUARE ENIX CO., LTD. All Rights Reserved.
記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
