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

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

「プロジェクトセカイ カラフルステージ! feat.初音ミク」バーチャルライブの臨場感が凄かった!

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

 

「プロジェクトセカイ カラフルステージ! feat.初音ミク」のバーチャルライブに感動しました!

 

これすごいです!

 

ビジュアルや没入感も素晴らしいのですが、ここではUIデザインについて書いてみます。

ああああああああ

 

バーチャルライブとは?

まず、バーチャルライブについて簡単に説明します。
サポートページによると以下の通り説明されています。

 

バーチャルライブとはなんですか?


バーチャルライブとは他のプレイヤーと、リアルタイムで参加するライブです。

プレイヤーはアバターとしてセカイのライブを鑑賞、応援することができます。

バーチャルライブは開催スケジュールが決められています。

スケジュールは[ライブ]>[バーチャルライブ]のライブバナー右のスケジュールアイコンから確認できます。

バーチャルライブには入場できる人数に制限があります。

制限を超えるプレイヤーが参加したバーチャルライブは参加することができません。

 

なお、バーチャルライブでは楽曲が決まっているため、楽曲を選択することはできません。

 

f:id:appgameui:20201102093619p:image

 

…と、こんな感じの仕様になっているようです。

 

文字で説明するより画面を見ていただいた方が雰囲気伝わるかもです。

こちらはライブのトークタイムです。
キャラクター同士の掛け合いが楽しい!

ああああああああ

 

こちらはライブ中の画面です。
このイベントの時は2曲演奏されました。

ああああああああ 

 

こんな感じです。曲が変わると舞台背景やキャラクターも変わっています。

ああああああああ

 

以上がバーチャルライブについてです。
雰囲気が伝わりましたでしょうか?

 

良かったところ

続いて、このバーチャルライブの良かったところです。

 

チャットスタンプを吹き出しに見立てて、ライブ会場に表示するデザインが良かったです!

 

こちらの画面をご覧ください。

ああああああああ

画面中に多くの吹き出しが表示されているのが分かるかと思います。
これらがチャットスタンプです。

 

バーチャルライブ中にはこのようにライブ中にスタンプを送ることができます。

ああああああああ

スタンプはステージ上をはじめ、ライブ会場内に表示されます。

 

この「バーチャルライブ中にチャットスタンプを吹き出しに見立てて送ることが出来る」

というデザインが良いと感じました。

f:id:appgameui:20201031164455p:image

この「吹き出しのデザイン」を用いることによって、まるでその場に他のユーザーが存在するような錯覚を覚えます。 

 

機能的にはチャットなのですが、ライブ会場に表示するだけで、全く違うものになっています!

 

gifだと聞こえないですが開演前の会場のざわざわ感も環境BGMとして聞こえます。

 

ああああああああ

▲ざわざわわ

 

ああああああああ

その環境BGMとチャットスタンプもとてもマッチしているデザインだと感じました。

 

このUIの凄いところ

このUIの良いところをもう少しだけアピールさせてください!

 

同じチャット機能でも、チャット枠やフィールド上に表示するのではなく、3D空間上にあるライブ会場に吹き出しで表示することにより、今までとは異なるユーザー体験を与えています。

 

この、既存の機能と新しい見せ方を組み合わせて実現している点がUIとして素晴らしいな、と感じました。

 

所謂「枯れた技術の水平思考」の事例に該当すると感じました。

こういうアプローチのデザインがあると嬉しくなります。

 

ライブ感も良かった

ライブ感も良かったです!

 

ステージ上に表示されるスタンプ、メッセージ、画面上空に飛び交う流星のようなエフェクトなど、ライブ会場を大きく賑わせています。

ああああああああ

自身の行動がステージ上に反映されるので、ライブに参加している感じがより一層強く感じられました。

 

 

カメラの移動だけではなく、観客としてある程度自由に動けることにより、ライブに参加しているように感じられました。

ああああああああ

▲ライブ会場を歩き回れます 

 

以上です。

整理すると…

  1. 3D空間上にスタンプを吹き出しで表示するデザイン
  2.  ステージ上にスタンプやメッセージ、エフェクトを送るデザイン
  3. ライブ会場内を歩き回れるデザイン

 

 

などが良いと感じました。

 

余談ですが、音響についても天井が高い建物にいるようなエフェクトがかけられており、没入感、臨場感が素晴らしかったです!

 

 

▼参考資料

 

ゲーマーズブレイン -UXと神経科学におけるゲームデザインの原則-

【Amazon.co.jp限定】初音ミクシンフォニー ~Miku Symphony2020 オーケストラライブBlu-ray (クリアファイル付)

【Amazon.co.jp限定】初音ミク「マジカルミライ 2019」 [2Blu-ray 豪華ブック] (初回限定盤) (Amazon.co.jp限定予約購入特典 : マジカルミライライブフォトカレンダー 付)

 

 


権利者さまへ

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

「プロジェクトセカイ カラフルステージ! feat.初音ミク」のガイドラインを確認したところ、ゲーム内で使用されている画像やスクリーンショット画像はWebサイトやSNSへ投稿しても良い旨の文章がありました。

 

NEWS | プロジェクトセカイ カラフルステージ! feat.初音ミク

 

SNS動画共有サイトでの動画投稿または配信でのコンテンツ利用に関して

・本プロジェクトを取り扱った内容の静止画または動画について
本プロジェクトを取り扱った内容の静止画または動画をSNS、動画共有サービスへ投稿することについては、以下の禁止事項に抵触しない限りは問題ございません。

ストーリーの投稿または配信に関する禁止事項

開催中のイベントストーリー1話分や、サイドストーリーの内容がまるまるわかるような投稿は、未だストーリーを読んでいない方々に対して予告なく内容を伝えてしまうネタバレ行為に該当してしまい、楽しむ機会が損なわれてしまうため禁止しております。
以下に投稿または配信に関する基準を記載いたします。

■投稿または配信OK
チュートリアル
・メインストーリー(オープニングを含む)
・開催終了したイベントストーリー

■投稿または配信NG
・開催中のイベントストーリー
・サイドストーリー(前編、後編)
・その他のストーリー
※感想、及び感想に動画やスクリーンショットを添付しての投稿(目安として、動画であれば4〜5タップ程度、スクリーンショットであれば1ツイートに4枚程度)であれば問題ございません)
また、分割して大量の動画やスクリーンショットを投稿するなど、ゲームをプレイしなくても結果的に投稿または配信NGの内容がわかるようなものは問題が生じますので、ご注意ください。

 

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

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

 

お問い合わせ