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

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

「少女歌劇 レヴュースタァライト -Re LIVE-」演劇舞台の演出がたくさん取り入れられていた!バトル演出の紹介

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

 

「少女歌劇 レヴュースタァライト -Re LIVE-」のバトル周りで世界観を演出するデザインがいくつかあったので紹介します。

UIでも世界観を表現する演出やデザインを考えることがあるかと思うので、その参考になれば幸いです。 

f:id:appgameui:20201008101709p:image

 「少女歌劇 レヴュースタァライト -Re LIVE-」では主に以下の部分が世界観を表現していると感じました。

  1. バトル開始時の「開演」という文字
  2. バトル開始時の画面遷移演出で幕が開く演出がある
  3. キャラクターの足元の影の落ち方
  4. キャラクターがフォーカスされている時にスポットライトが当たる演出
  5. バトル終了時の画面遷移演出で幕が降りる演出がある

 などです。順番に見ていきたいと思います。

 

 

1:バトル開始時の「開演」という文字

まず最初にバトル開始時の「開演」という文字が表示されるのが、世界観を表していると感じました。

ああああああああ

 

流れで見るとこんな感じです。

ああああああああ

最近だと「UXライティング」という言葉が流行ってきています。これがUXライティングに該当するのか分かりませんが、少なからずUIの要素が含まれていると感じたので紹介させていただきました。

 

2:バトル開始時の画面遷移演出で幕が開く演出がある

先程の「開幕」とタイミング的にはほぼ同じなのですが、幕が開く演出でバトル画面に遷移しました。

ああああああああ

 

流れで見るとこのような演出です。

ああああああああ 

  1. 幕が開ける
  2. ライトが動く
  3. キャラクターがシルエットで浮かび上がる
  4. 舞台上が明るくなり、キャラクターが見えるようになる

という流れですね。

この演出により、舞台上で戦っていることが強調されています。

 

3:キャラクターの足元の影の落ち方

先程のライトに関係するのですが、足元に落ちている影が特徴的です。

ああああああああ

 

この部分です。

ああああああああ

舞台上では他方向からライトが当てられています。それを表現するため、このような特徴的なな影の落とし方をしているのだと推測します。

この辺りはUIデザイナーが指示したり、作成することは少ないとは思いますが、世界観を表現するための工夫として紹介させていただきました。

 

4:キャラクターがフォーカスされている時にスポットライトが当たる演出

4つ目はスポットライトを使った演出です。

ああああああああ


「少女歌劇 レヴュースタァライト -Re LIVE-」では、バトル中にスキルを発動させるとこのように該当キャラにスポットライトが当たる演出が入ります。

ああああああああ

これもゲームの設定を活かした独自の演出です。

 

 

5:バトル終了時の画面遷移演出で幕が閉じる演出がある

最後はバトルが終わった後の演出です。

ああああああああ

 

幕が閉じる演出があるのですが、開始時の幕とはデザインが異なり、飾りが付いたデザインになっているのが特徴的です。

ああああああああ

推測するに…

  1. 速やかに次の画面に遷移させたかった
  2. 幕が上から閉じる演出だと、上から素早く落ちてくるように見える
  3. 左右から閉じる幕の方が移動距離が長い分、演出をきちんと見せることができる

 

  1. キャラクターを見せたかった
  2. 左右から閉じる方が最後までキャラクターを見せることができる

といった理由が推測できます。

 

以上です。

繰り返しになりますが

  1. バトル開始時の「開演」という文字
  2. バトル開始時の画面遷移演出で幕が開く演出がある
  3. キャラクターの足元の影の落ち方
  4. キャラクターがフォーカスされている時にスポットライトが当たる演出
  5. バトル終了時の画面遷移演出で幕が降りる演出がある

といった部分で世界観が表現されていると感じました。

総じてみると、

文字やグラフィックなど、画面の情報量が極端に少なく、世界観を強く訴求してもノイズにならない場面

で表現されているようです。

UIが世界観を盛り上げるための演出をデザインすることも珍しくありません。
デザインを考える際の参考になれば幸いです。

 

 

少女☆歌劇 レヴュースタァライト -Re LIVE- ビジュアルブック

はじめてのUIデザイン 改訂版

図解舞台美術の基礎知識 (舞台技術入門新シリーズ (4))