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

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

「崩壊3rd」3Dのカメラを使用した遷移の無い情報設計の事例

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

 

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

 

今回は「崩壊3rd」から、3Dのカメラを使用した遷移の無い情報設計の事例をご紹介します。画面遷移のないデザインはゲームの没入感を阻害せず、レスポンスも俊敏に感じます。

 

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

f:id:appgameui:20220212022636p:image

 

アニメーションで見るとこんな感じです。
学寮画面を中心に「学寮メニュー」「模様替え」のコマンドを選択した場合の挙動です。3D空間であることを利用し、カメラ演出で情報の見せ方を切り替えています。

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

 

学寮メニューを展開した場合はこちらです。
部屋単位ではなく施設全体が見えるようにカメラが引いています。

この画面では部屋の改修や増築など、施設全体に効果を及ぼすコマンドが実行できます。
施設のプレビューと実行できるコマンドが合致した画面になっていると感じます。

f:id:appgameui:20220212022642p:image

 

続いて模様替えのコマンドを実行すると、カメラがやや俯瞰になります。
家具が配置しやすいようにXZ軸が分かりやすくなるような見た目だと感じます。

家具を配置するためのUIもカメラが移動している間に画面端から瞬時に表示され、キビキビと動作しています。

f:id:appgameui:20220212022650p:image

 

このように、3Dのカメラを利用すると画面遷移をすることなく、モードを切り替えることができます。
画面遷移がないことでゲームの没入感が阻害されることがなく、情報の親子関係も直感的に理解することにも繋がると感じました。

 

 

以上です。

UIに3Dを用いる際の情報設計の参考になれば幸いです。

 

 

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

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

 


権利者さまへ

 

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

「崩壊3rd」のガイドラインを確認したところ、ゲーム実況の配信、動画投稿に関しては許諾されている旨の記載はありました。

 

ネットワークサービスにおける著作物の利用に関するガイドライン

 

主な参照箇所を抜粋します。

個人であるお客様が「崩壊学園」、「崩壊3rd」及び「原神」「未定事件簿」からキャプチャーした映像及びスクリーンショットした静止画(以下「本著作物」といいます。)を利用して創作された動画や静止画を、適切な動画や静止画の共有サイトに投稿(実況を含む)し、又は収益化することに対して、当社らは、以下の遵守事項を遵守いただいている限りにおいては、著作権侵害を主張いたしません。

 

以下は確認したガイドラインページのキャプチャです。

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

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

 

お問い合わせ