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

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

「パニシング:グレイレイヴン」バッテリー残量が少ないとホーム画面が暗くなるデザインの分析

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

 

今回は端末のバッテリー残量が少なくなった時の「パニシング:グレイレイヴン」のホーム画面の挙動を紹介します!

 

端末のバッテリー残量といった現実世界の情報を参照することにより、ゲームの中の世界とリンクしたような感覚が得られました。
ゲームへの没入感を高めるための表現を模索している方の参考になれば幸いです。

 

ホーム画面はこちらです。通常は以下のような見た目です。
室内にキャラクターが立ち、こちらを向いていますね。

f:id:appgameui:20210504032340p:image

 

省エネモードになると室内の明かりが消え、一部UIにも変化が見られます。

f:id:appgameui:20210504032345p:image

 

比較したところ、主な変更箇所は以下の通りです。

  • 蛍光灯が消える
  • 背景のモニターなどが変化する
  • 一部UIパーツのデザイン変化する

アニメーションで見ると以下のようになります。
まずは背景から…

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

 

蛍光灯がついたり消えたりしていますね。

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

 

他には画面奥にあるスクリーンの色や大きさが変化しています。

通常であれば青みがかった白で発光していますが、省エネモードになると赤くなっています。また、表示されているスクリーンの数も減り、情報量が抑えられていることが分かります。

かなり丁寧に作り込んでいることがうかがえます。

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

 

細かい部分ですが、画面左下にあるアイテムの発光色も青白い光から赤に変化していました。

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

 

背景の変化については以上です。

 

続いてUIパーツの変化も見てみます。

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

 

UIパーツとしては画面右上の「戦闘」のボタンに「節電モード」の表記が付きます。

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

 

同様に、その下の方にある「宿舎」のボタンにも「節電モード」の表記が付いています。

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

 

以上がUIパーツの変化です。

これで全てかどうかは分かりませんが「パニシング:グレイレイヴン」における省エネモード時の変化を紹介しました。

 

端末のバッテリー情報を参照し、ビジュアルに変化を付けるデザインは珍しいデザインです。

UIの評価軸としては「ユーザーの満足度」「ゲームへの没入感」が高くなることが予想できます。

 

 

また、画面全体が暗くなることによって…

  • 消費電力を抑える効果が見込める
  • 画面が見づらくなるため、充電する動機に繋がる

といった利点も考えられます。

 

世界観の表現、利便性、ユーザーの行動の誘導が考慮されたデザインなのかな、と考えます。

 

f:id:appgameui:20210504032345p:image

 

 

 

 

 

余談ですが、バッテリー残量を参照するアイディアは「デュエル・マスターズ プレイス」でも採用されていました。

f:id:appgameui:20200829171426p:image

 

 

デュエル・マスターズ プレイス」では充電中の時に
ナビキャラが「充電中です」とメッセージが表示されます。

 

こちらも興味があれば!

「デュエル・マスターズ プレイス」充電中だけに表示されるナビキャラのランダムメッセージ。そのステータスを参照する発想はなかった! - ゲームアプリのUIデザイン