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

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

「咲うアルスノトリア」UIを透かすことで、奥行き感・賑やかさ・圧迫感の無さなどに繋がってるリザルト画面のデザイン

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

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

 

今回は「咲うアルスノトリア」、(以下、アルスノ)から圧迫感を抑えたクエストのリザルト画面を紹介します。

 

圧迫感が抑えられたリザルト画面

f:id:appgameui:20230323003354p:image

©NITRO PLUS/GOOD SMILE COMPANY, Inc.

「アルスノ」のリザルト画面は一部のUIパーツを半透明にして、画面の圧迫感を抑えたデザインになっていました。UIを半透明にすることで背面のキャラがうっすら表示され、画面が賑やかに見えます。

リザルト画面におけるキャラのグラフィックは必要不可欠な情報ではありませんが、ゲームにとって「楽しそうに見える」「賑やかに見える」というのは重要な要素であり、キャラのグラフィックはそれらの要素を満たすために、大きく貢献できると考えています。

 

手前の画像を透かすことで空間に奥行きが生まれる

f:id:appgameui:20230324230621p:image

©NITRO PLUS/GOOD SMILE COMPANY, Inc.

画面をよく見ると、画面の情報量が増えて賑やかに見える、というのは色数や要素だけの話ではないのかもしれません。
一種の錯覚ですが、手前のUIを透けさせることでキャラが奥にあるように見えます。
奥行きが生まれることで、空間としての情報量も増えています。

例えばキャラにドロップシャドウを付けても奥行きが生まれると思いますが、「アルスノ」ではドロップシャドウを用いていません。
ドロップシャドウを付けるとその分情報量が増えてしまうため、できるだけシンプルに他の方法で奥行きを表現する手法を模索したのかもしれません。

 

すべてのUIが半透明になっているわけではない

f:id:appgameui:20230324230642p:image

©NITRO PLUS/GOOD SMILE COMPANY, Inc.

リザルト画面の中でも不透明のUIもあります。

上の画像はプレイヤーの獲得した経験値、達成したミッションなどの情報が表示されている場面です。獲得した報酬などと異なり情報量が固定であるため、表示領域も変わりません。表示領域が変わらないため、キャラをどの程度表示するかもコントロールしやすくなっています。

その結果、UIを透かさなくても遠近感が表現されたデザインを採用することができたのかもしれません

 

 

以上です。
圧迫感のないリザルト画面のデザインを検討する際の参考になれば幸いです。

 

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

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

 

----------------------------------------
ニトロプラスの許可の上でニトロプラスの著作物を引用しております。これらは他への転載を禁じます。
----------------------------------------

 


権利者さまへ

 

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

「咲うアルスノトリア」のガイドラインを確認したところ、以下の記載がありました。

ニトロプラスでは、商業目的ではない個人のサイトに限り、テキスト・画像を転載することを認めております。

著作物転載ガイドライン|ニトロプラス NITRO PLUS

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

咲うアルスノトリアのコンテンツ利用ガイドラインです。2023年1月4日更新版です

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

 

お問い合わせ