「ブレイブリーデフォルトブリリアントライツ」UIの見た目とアニメーションを一致させることでゲームの没入感を高めている

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

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

今回は「ブレイブリーデフォルトブリリアントライツ」、通称「BDBL」から、ビジュアルに合わせたUIアニメーションをご紹介します。

ゲームにスキューモーフィズムデザインを取り入れるメリットの中には世界観の表現があげられます。見た目に合わせたアニメーションを取り入れることでより没入感を高められます。

該当の画面はこちらです。
いくつかありますがこちらは所持アイテムのリストです。タブを切り替えるとページをめくるアニメーションが再生されます。

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

アニメーションで見るとこんな感じです。
タブは画面上部、中央よりやや右側に表示されています。
ボタンの位置が左手で操作しやすい位置であるためか、右から左にめくるアニメーションが採用されています。

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

ショップ画面でもページをめくるアニメーションが採用されていました。
こちらはタブの位置が右揃えになっているため、左から右にページをめくるアニメーションが採用されています。

どちらもタップしている指とページがめくれるアニメーションの向きが一致しているため、違和感なくゲームに集中できます。

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

他の画面でも似たようなアニメーションが採用されていますが、ちょっと思想が異なっているのかもしれません。

以下は装備アイテムを強化する画面です。
画面左にタブが上下に並んでいます。
こちらは本ではなくバインダーに紙を留めているデザインです。

タブが上下に並んでいるせいか、下から上にめくるアニメーションが採用されています。レイアウトとアニメーションが連携し、没入感を高めている例だと感じました。

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

まとめ

まとめると「ブレイブリーデフォルトブリリアントライツ」の見た目とアニメーションを合わせたデザインについて感じたことは以下の３点です。

ビジュアルに合わせたアニメーションを採用することでゲームの世界観の没入感を高めている（没入感アップ）
左右に並ぶボタンを操作する時は左右にアニメーションが流れ、上下に並ぶボタンを操作する時は上下にアニメーションさせることで、指の操作と視線の流れが一致し、違和感を感じさせない（没入感アップ）
操作する指に合わせてアニメーションの向きを柔軟に変えている（没入感アップ）

他にも気付いた点があれば、コメント欄にて教えていただけると嬉しいです。

以上です。

UIパーツのアニメーションを取り入れる際の参考になれば幸いです。

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

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

権利者さまへ

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

「ブレイブリーデフォルトブリリアントライツ」のガイドラインを確認したところ、公式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.
記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。