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

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

「NieR Re[in]carnation / ニーア リィンカーネーション」ひし形のゲージデザインで世界観が統一されつつ進捗率も分かりやすい

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

 

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

 

今回は「NieR Re[in]carnation / ニーア リィンカーネーション」、通称「リィンカネ」から、ひし形のゲージデザインをご紹介します。

 

このデザインにより、以下の特徴があるように感じました。

  1. 進捗率が分かりやすい(認知コストの低下)
  2. ゲージの先端が光っていて目立っている(視線の誘導)

 

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

f:id:appgameui:20220702172411p:image

 

画面下部にひし形のゲージが並んでいます。

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

 

アニメーションで見るとこんな感じです。
等速でひし形のゲージが動いているのが分かりますでしょうか?

 

 

分かりやすくするために大きくします。
時計回りにゲージが溜まっていっていますね。

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

 

1:進捗率が分かりやすい

棒状のゲージと比較して進捗率が分かりやすいデザインだと感じました。
ひし形なので25%刻みで分かりやすい形状として見ることができます。

円形のゲージも同様に進捗率が分かりやすいデザインです。
「NieR Re[in]carnation / ニーア リィンカーネーション」では世界観の一貫性を担保するため、四角形をデザインに取り入れています。そのため、円形よりひし形が採用されているのだと推測します。

世界観の統一と利便性のバランスが考慮された親切なデザインだと感じます。

 

 

2:ゲージの先端が光っていて目立っている

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

ゲージの先端が若干光っており、視線が誘導されます。

動いていることで視線は誘導されますが、コントラストを高めることで更に目立たせています。

ゲージの先端部分をぼかしすぎてしまうと、ゲージの溜まり具合が分かりにくくなるため仄かに光らせているのがデザインのポイントかと思います。

細やかな部分にも配慮されたデザインだと感じます。

 

まとめ

まとめると「NieR Re[in]carnation / ニーア リィンカーネーション」のひし形のゲージデザインについて感じたことは以下の2点です。

  1. 進捗率が分かりやすい(認知コストの低下)
  2. ゲージの先端が光っていて目立っている(視線の誘導)

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

 

以上です。

ゲージをデザインする際の参考になれば幸いです。

 

 

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

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

 

© SQUARE ENIX CO., LTD. All Rights Reserved.

 


権利者さまへ

 

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

「NieR Re[in]carnation / ニーア リィンカーネーション」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。

 

画像・動画・生放送配信ガイドライン | NieR Re[in]carnation | SQUARE ENIX

 

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

【利用可能な範囲】
(1)本サービスのゲーム画像およびプレイ動画(生放送配信を含み,以下「プレイ動画等」といいます)を個人利用の目的で自身のブログやツイッターなどのミニブログなどで利用すること。

(2)プレイ動画等を「ニコニコ動画」「Youtube」等の動画共有サイトに配信すること(この配信動画のURLやサムネイルを個人利用の目的で個人のブログやツイッターなどのミニブログなどにリンクすることを含みます)。

 

ニーアリィンカーネーションのコンテンツ利用ガイドラインです。2021年2月18日施行版です

 

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

 

お問い合わせ