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

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

「アイドルマスター シャイニーカラーズ Song for Prism(シャニソン)」視聴条件のハードルは高いけど、ユーザーを楽しませようとする工夫が取り入れられている【OurSTREAM】

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

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


今回は「アイドルマスター シャイニーカラーズ Song for Prism」(以下「シャニソン」)からYouTubeを利用したアイドルたちの実在感を高める取り組みをご紹介します。

UIというよりUX寄りの視点です。「シャニソン」の世界観に対する没入感を高めるデザインの中に、アイドルの実在感を高めるアプローチがある、と解釈しています。

以下、概要です。

 

YouTubeに動画を残して実在感を高めている

f:id:appgameui:20240207095033p:image

「シャニソン」には『OurSTREAM』という機能があります。
これはアイドルたちの動画が定期的に配信、視聴できる機能です。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆
やっていることはよくある会話劇なのですが、見せ方がとても興味深いと感じました。
『OurSTREAM』の見せ方で特に興味深いと感じたのは以下の2点です。

  1. YouTubeアーカイブが観れる
  2. リアルタイム視聴すると限定シーンが観れる

それぞれ詳細を説明します。

 

YouTubeアーカイブが観れる

会話劇を「アイドルの配信」として表現し、実際にYouTubeに遷移するのは興味深く感じました。YouTubeで観ることで、実際に配信が行われたかのようなデザインになっているように思えます。
もしかすると他のゲームでも似たようなことはやっているかもしれませんが、自分は初めて見ました。

また、この方法であればシークバーなど配信画面専用のUIを用意する必要がなく、通常の会話劇のUIが利用できるのも上手い作り方だと感じました。

 

アーカイブは6分程度

ゲーム内のサムネイルでは配信時間は20分と表記されていますが、実際の動画は6分程度です。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲ゲーム内のサムネイルでは20分と表記されています

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
YouTubeを確認すると6分26秒でした(YouTube

2024/3/1時点で4人のアイドルが配信しており、それぞれの配信時間は以下の通りです。

  1. 櫻木 真乃(5分41秒)
  2. 風野 灯織(6分26秒)
  3. 八宮 めぐる(6分19秒)
  4. 月岡 恋鐘(6分29秒)

この4人の平均配信時間を計算したところ約6分14秒でした。
配信としてみると短いと感じるかもしれませんが、以下の要素を考慮すると6分はもっと観たいと思わせられる適度な長さなのかもしれません。

  • ユーザーの集中力が持続する長さ
  • ユーザーの可処分時間に対する配慮
  • 会話劇として見たら十分なボリューム
  • 『OurSTREAM』は「シャニソン」のメインコンテンツではない

もしかしたら将来的に6分を大幅に超える配信もあるかもしれませんが、今のところの所感はこんな感じです。

 

リアルタイム視聴すると限定シーンが観れる

f:id:appgameui:20240226100415p:image

記事の冒頭で少し触れた通り『OurSTREAM』にはアーカイブに残らないリアルタイム限定シーンが観れます。個人的にはこれがアイドルの実在感を高める上で、非常に興味深いデザインだと感じました。

図にするとこんな感じです。

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

文字でまとめるとこんな感じです。

  1. リアルタイム限定配信はアーカイブに残らない(2024/2末時点)
  2. リアルタイムに観てると配信開始前、配信終了後のシーンが観れる
  3. 配信中はプロデューサー視点のカメラに切り替えられる

リアルタイム限定シーンは通常配信のシーンと合わせて10分程度です。時間帯も夕方で個人的には視聴条件はかなり厳しいものの、プレミア感があるように感じました。
よくプレイするユーザーはこの機能に当然気付いていると思いますが、カジュアルにプレイしているユーザーの中には、もしかすると気付いていないユーザーもいるのかも…?

 

配信前後の流れ

配信前後の流れを簡単に紹介します。
全体的にアイドルの実在感や、ゲームの没入感を高める軸があるように感じました。

1:事前にお知らせで予告

f:id:appgameui:20240226132203p:image
f:id:appgameui:20240226132158p:image

配信する4日ほど前にゲーム内外で配信を予告するお知らせが掲載されていました。
配信後はこのお知らせは削除されるので、ちょっとだけ気付きにくいかもしれません。

 

2:配信中は専用バナーを表示して訴求

配信が始まると画面右上に配信中専用バナーが表示されます。
f:id:appgameui:20240226232914p:image
▲「シャニソン」のホーム画面

アニメーションで見るとこんな感じです。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆

よく見るとバナーがキラキラと光っています。画面内でアニメーションしているバナーはここだけです。
見やすくするためにバナー部分だけ大きくします。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲ON AIRの文字が強調されたアニメーション

 

バナーを表示する際に工夫していると感じた点は以下の4点です。

  1. アニメーションをさせて、視線を誘導している
  2. 普段表示されていない場所に表示させて、違和感を利用し印象に残しやすくしている
  3. 画面の隅に配置し、視線を留めやすくしている
  4. バナーの中でも特に「ON AIR」の情報を強調している

 

バナーをタップすると、『OurSTREAM』の画面が表示されます。
アプリらしい画面になっています。
f:id:appgameui:20240226232340p:image

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

「ON AIR」の表示や「立ち会う」のボタンがあり、実際に配信中だと実感できます。

ボタンのラベルも「立ち会う」といったプロデューサー視点の文言を使用し、世界観の没入感をより高めていると感じました。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆

 

3:リアルタイムで配信前のアイドルの様子が見れる

リアルタイム視聴の一番の特徴は、配信前の様子をプロデューサー視点で見れる点だと思います。
アイドルによって変わると思いますが、オペレーションの確認、配信に対する意気込みなど、アイドルの実在感が高まり、一層応援したいという気持ちを強めてくれる仕組みだと感じました。
f:id:appgameui:20240226233107p:image

f:id:appgameui:20240226233300p:image

こういった配信の一般的な収録風景は知りませんが、スタジオとかブースではなく、普段使っている事務所とノートPCを使って配信しています。

アニメーションで見るとこんな感じです。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲配信前のオペレーションを確認中

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲プロデューサーに初配信の意気込みを語る場面

 

◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲準備ができ、配信を始める場面

配信の裏側が見れることで、こういうところで配信してるのか、と世界観に対する理解が深められます。舞台裏が見れるという意味では、アイマス文化との親和性はかなり高いように思えました。

 

4:配信中は視点の切り替えが可能

こちらは配信開始直後の画面です。
すぐに始まるのではなく、待機中の画面を表示しているのも配信らしさを演出していると感じました。
f:id:appgameui:20240226233546p:image

 

配信が始まったら、画面右下の「視聴チェック」「チェックをやめる」のボタンで視点の切り替えが可能です。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲配信中は視点が切り替え可能

 

また、細かいUIの話になりますが、配信視聴では画面左上に「LIVE」と表示されています。小さなUIですが、リアルタイム感を演出する丁寧なUIだと感じました。
f:id:appgameui:20240226232351p:image

分かりやすいように大きくします。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲LIVE中と分かるUI

 

5:配信後にアイドルの感想が聞ける

こちらは配信終了直後の画面です。
配信が終了した旨がアナウンスされています。
f:id:appgameui:20240226233508p:image

ただ、プロデューサー視点では、配信終了後も少しだけアイドルの様子を見ることができます。ここでは配信の感想を述べています。
アニメーションで見るとこんな感じです。
◆◆◆◆◆◆◆◆◆◆◆◆◆◆
▲配信終了後の様子

このように、事前に告知した上で配信当日は配信画面に誘導、配信中は限定シーンを視聴可能にしプレミア感を演出しています。

今のところ、リアルタイム限定シーンは見逃すと見る術がないため、一部ユーザーからは後から視聴できる術を求める要望があります。
今後、仕様変更などがあるかもしれませんが、いずれにしても興味深い取り組みに感じました。

以上です。
世界観の没入感やキャラクターの実在感を高める施策の参考になれば幸いです。

 

このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。

 


権利者さまへ

以下はコンテンツ利用に関する認識の説明です。
アイドルマスター シャイニーカラーズ Song for Prism」のガイドラインを確認したところ、以下の記載がありました。

当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。 例えば、「ご自身によるゲームプレイ映像に、皆様の声や姿、アバターなどを重ねた動画又は配信をデジタルプラットフォーム(Youtube,Twitch,ニコニコ動画等。以下、単にプラットフォームといいます)上で共有すること」のみならず、「スクリーンショットやプレイ動画の切り抜きをインターネット上で共有すること」等も含みます。

【「アイドルマスター」シリーズ】「ゲーム実況ポリシー」の変更に関するお知らせ | 【公式】アイドルマスター ポータル(アイマス)

ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト

 

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

バンダイナムコエンターテインメントゲーム実況ポリシーです。アイドルマスター シャイニーカラーズ Song for Prismにも適用されています。2022年1月26日制定版です

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

 

お問い合わせ