こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「アイドルマスター シャイニーカラーズ Song for Prism」（以下「シャニソン」）からモバイル端末とその中に含まれている機能のビジュアルデザインをご紹介します。ここ数年、モバイル端末を模したメニューは頻繁に見かける印象です。実装したい機能と世界観を含めたビジュアルとの相性が良いのかな…
以下、概要です。
モバイル端末を模した画面デザイン
「シャニソン」ではモバイル端末を模したメニューがあり、メニューの中には以下の４つの機能が格納されています。
- Twesta
- CHAIN
- 電話
- OurSTREAM
各機能は基本的にはアイドルの魅力を訴求、あるいはコミュニケーションを補助し、実在感を高めるような役割があります。
また、それぞれ機能は役割が連想できる名前、または配色を意識しているように感じます。
起動演出があると実在感を感じる
メニューの遷移アニメーションも凝っており、端末を起動している様子が表現されています。アニメーションで見るとこんな感じです。
一瞬アプリアイコンが表示されず壁紙のみの画面が表示され、その後、端末が近づきアプリアイコンが表示されています。
実際の端末でも起動演出があるためか、この演出が無いとなんとなく落ち着かない気はします。
また、演出中は戻るボタンなどのナビゲーションのUIが表示されていない点も、操作不可であることが分かりやすいように工夫されている点だと感じました。
各アプリの作り込みを紹介
メニューを開くと表示される機能は全部で４つです。
- Twesta
- CHAIN
- 電話
- OurSTREAM
それぞれ専用のアイコン、画面などが用意され、ビジュアルデザインにおいても丁寧に作られていました。それぞれ紹介します。
Twesta（XとInstagram風アプリ）
TwestaはXとInstagramと足したようなアプリです。
アイドルたちがテキストや写真で活動状況を投稿しています。
アイドルの投稿に対して、他のアイドルからコメントが付くのもリアリティが表現されているように感じました。
専用のロゴを用意したり…
投稿に対してお気に入りを付けられるようにするなど、アプリの実在感を高めています。
また、お気に入りを付ける際のマイクロアニメーションも細かく丁寧に付けられています。こういった細部に手を入れるとそれっぽさが増すと感じています。
全体をアニメーションで見るとこんな感じです。
CHAIN（LINE風アプリ）
CHAINはLINEのようなチャットアプリです。
アイドルたちからメッセージが送られプレイヤーと会話しているような体験、アイドル同士のやりとりを提供します。
こういった機能を用意する際にほぼ必ずあるのはキャラクターごとのプロフィール画面です。「シャニソン」でもアイドルごとに背景、壁紙、紹介文などが用意され、非常に手が込んでいます。アイコンに何を設定するのか、紹介文は何が書かれているかなど、アイドルの個性を表現するために有効なデザインだと思います。
アニメーションで見るとこんな感じです。
電話
電話はそのままですね。アイドルの声が聴ける機能です。
まじめに考えると、通話ができない時点で電話という定義に含まれるか微妙なところというか、仕組みだけ見ると会話パートです。
ただ、通話時のこもった音声を再現し、画面も通話風の見た目になっていたら、電話と表現してもそこまで違和感を感じないかと思います。
特に音声は思わず耳元で聞きたくなります。
アニメーションで見るとこんな感じです。
OurSTREAM（YouTube風アプリ）
OurSTREAMはアイドルが配信する機能です。
いわゆる動画配信プラットフォームを模したデザインになっています。
ちなみに「視聴チェック」ボタンを押すと、YouTubeに遷移し動画が観れます。
ゲーム内で動画が完結するのではなく、実際に存在するサービスを使うことでアイドルの実在感が高められていると感じました。
アニメーションで見るとこんな感じです（YouTubeへの遷移は省略しています）
閉じる、戻る、他のアプリに切り替える場合は端末の外を操作する操作性には疑問
一方、よく分からなかったのは操作性です。
画面内を進む場合は端末の中を操作すれば良いのですが、戻る場合は端末の外を操作します。
前の階層に戻るときは左下、他のアプリケーションのショートカットは右下、メニュー全体を閉じたいときは右上…とナビゲーションが散っています。
端末の内と外を行ったり来たりするため、没入感を下げるだけではなく、直感的な操作感にもならないような…？
もしかするとナビゲーションの一貫性の担保と、端末を模したデザインは一部トレードオフになるのかも…？
あまり気にしたことはなかったのですが、今後モバイル端末を模したメニューがあった場合、ナビゲーションにも意識を向けたいと思いました。
以上です。
モバイル端末を模したメニューや機能をデザインするの参考になれば幸いです。
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「アイドルマスター シャイニーカラーズ Song for Prism」のガイドラインを確認したところ、以下の記載がありました。
当社では、ゲーム実況を、「ご自身がゲームを遊んだ動画や静止画をファンコミュニティ等とインターネット上でご共有いただくもの」と捉えています。 例えば、「ご自身によるゲームプレイ映像に、皆様の声や姿、アバターなどを重ねた動画又は配信をデジタルプラットフォーム（Youtube,Twitch,ニコニコ動画等。以下、単にプラットフォームといいます）上で共有すること」のみならず、「スクリーンショットやプレイ動画の切り抜きをインターネット上で共有すること」等も含みます。
【「アイドルマスター」シリーズ】「ゲーム実況ポリシー」の変更に関するお知らせ | 【公式】アイドルマスター ポータル（アイマス）
ゲーム実況ポリシー | バンダイナムコエンターテインメント公式サイト
これによりゲーム画面のスクリーンショットのブログの利用についてはガイドラインに従った前提で許可されている認識でおります。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
