月日は白代の過客とやら、久しぶりに起動したアプリがサービス終了になっていて嘆いています。あゝ諸行無常かな。思い入れと思い出は比例し、喜怒哀楽あらゆる感情を受け入れる包容力を育てていきましょう。

今回は前回の続きで下記の3作品のホーム画面のデザインを比較していきたいと思います。

アイドリッシュセブン                      　　　(http://idolish7.com/)

あんさんぶるスターズmusic               　　 (https://ensemble-stars.jp/)

うたの☆プリンスさまっ♪　Shining Live    (https://www.utapri-shining-live.com/)

前回はこちら

乙女向けリズムゲームのUI・UXデザインを比較してみた⓵タイトル画面編

（https://cxbottle.com/users/idearahppy/1uZeSK1a0GtX0N2bvq8a）

【ホーム画面のUI・UXデザインを比較してみた】

さて、ホーム画面で今回確認するのはそれぞれのデザインについてです。

ホームでは様々なコンテンツへと誘導する役割があり、それらの情報はシンプルでかつ分かりやすくする必要があります。アクションボタンが乱雑に配置されていたり、ごちゃごちゃしているとユーザーにとっては不便でしかありませんからね。

基本的に人は左から右、上から下へ情報を見る傾向があります。例えば受験合格番号は上から下に見たり、ものさしは左から右へと数値が大きくなっていきますよね。

一説ではメンタルナンバーラインというものがありますが、これらの細かい説明はひとまず置いといて、それぞれのデザインを検討していきましょう。

　　　　　　　　　　　　　　告知

まず、ユーザー達はアイドル達に会いに来ている訳であり、どの作品もホーム画面中心にはアイドルが配置されていますね。彼らは視覚的に目の保養というだけでなく、イベントの案内や特定の反応をしてくれ聴覚的にナビゲートしてくれます。また、あんスタとうたプリに関してはLive 2Dを用いているためアイドル達が動きます。それにより実際にその場に存在しているかのような臨場感があり、彼らの世界に没入しやすいと考えられます。

背景においては図と地の関係性を押さえておき不協和を生まないようなデザインがされていますね（それぞれ背景変更を出来るので意図的に狙ったデザインも可能です。背景についてはまた別の機会にでも）。

次に告知バナーを画面上に設定することで細かい通達メニューを開く手間を省略し、現在どのような状況かを知らせたり、イベント画面へと誘導していることが分かりますね。

それぞれのボタンに関してはただ文字だけを置いたデザインではなく、例えば「ライブ」は音符マーク、「ストーリー」のボタンは本のデザインがなされているように、それぞれに対応した設定がなされています。それによりボタンを押すとどこへ誘導されるか視覚的に把握しやすくなっていますね。

ゲーム内容は、いずれも主にライフを使用してライブをプレイし、経験値を稼ぐことでプレイヤーランクが上がるという設定が成されています。そのため両者の関係性は高くなっています。

ゲーム内通貨はガチャや体力回復にも使われる重要なアイテムとなっています。プレイヤーランクとライフ、通貨は重要度・意味関連の高い一つのセットとして、画面上部に配置し、視覚的に分かりやすいデザインがされていますね。

また、アイナナとうたプリに関してはデイリー、ウィークリー等のミッションが導入されており達成することで一定の報酬が獲得できます。それによりプレイの継時的利用が見込めますね。他に画面下位にアクションボタンが重要度の高い順に左から右へ一つのセットとして設定されており、コンパクトに収めていますね。

それぞれアイドル達を迎える方法、所謂ガチャと呼ばれるものですが、アイナナがオーディション、あんスタがスカウト、うたプリが撮影となっており、それぞれの作品の雰囲気に合わせて表現が変えられており面白いですね。

個別に見ていくとアイナナではホームのアイドルはフルネームでありイメージカラーアイコン及びイメージシンボルが設定されていますね。（七瀬陸のイメージカラーは赤でイメージシンボルはダブルシャープ‐半音2つ上の音を弾く意味を表します。

また「ラビットホール」という独自の機能が設定されおり、ぷちななと呼ばれる小さくなったアイドル達を設置しおしゃべりしたりアイドル達を並べてライブ鑑賞することが出来ます。

あんスタではホームアイドル変更ボタンが画面に導入されており、スムーズに変更することが出来ます。これは個人的には便利な機能でアイナナとかにも導入されると気軽に変更できるのですが笑

「ライブ」と「オフィス」に関して形態や色彩が異なったデザインとなっています。そのため、これらの二つが他のアクションボタンよりアクションより重要度が高いことが分かりますね。また、「オフィス」という機能が導入されておりアイドル達にお仕事をしてもらったり、オフィス内を好きなようにレイアウトすることが出来ます。

うたプリでは「アイドル」と「レッスン」という項目を設定することでアイドル達との交流かカードの育成を行うことが可能となっています。

【お知らせバナーのUIUXデザインを比較】

お知らせバナーはイベントやメンテナンスなどユーザーに向けて様々な情報の伝達が行われます。いずれも情報の重要度や新鮮度が高い順に上から並べられており、それぞれ独自的なデザインがなされていますね。

しかしながらアイナナでは特に広告画面がスペースをとっており、情報を確認するのにスクロールの手間がかかることがUX改善の課題点とされます。他の2作品では内容ごとに検索エリアが導入されており、気になる情報について検索しやすくなっています。そのため高さを調整し簡潔にすることが特にアイナナにおいてはUXの改善点として挙げられますね。

今回はそれぞれのホーム画面のデザインを検討していきましたがいかがでしょうか？ホーム画面はまさしくユーザーにとって「家」としての役割がありますので家が散らかっていたり、ボロボロだと住みにくいですよね。例えばニトリのコーディネートカタログのように整ったデザインを提供しつつ、ある程度ユーザーが手入れ・デザインできるぐらいがホーム機能に求められているものではないでしょうか。

リリース順ではあんスタが一番新しいため個人的にはUI・UXデザインが分かりやすいです。

次回は誘導先のコンテンツ‐ライブプレイやストーリーなどのUI・UX比較を行っていきたいと思います。メインであるプレイ画面編やストーリー編を検討する前にまだまだ着目すべき項目があり、如何に作品が作りこまれているかが分かりますね。

作品独自の機能については別の機会に個別的に深堀りを行っていければと思います。

よければ下記のサイトも覗いていってくださいね。

次回：可及的速やかに

アイドリッシュセブン                      　　　(http://idolish7.com/)

あんさんぶるスターズmusic               　　 (https://ensemble-stars.jp/)

うたの☆プリンスさまっ♪　Shining Live    (https://www.utapri-shining-live.com/)

【CVR向上を検討している方へ】

【CX BOTTLE】を運営しているビーンズでは直帰率改善やLPOに使える具体的でCVRを改善する確度の高い施策を毎月提案する事業を行っています。

初回の打ち合わせでは無料でサンプルの提案を受けとれますので試しに利用してみてはいかがでしょうか。

ビーンズ：https://leango.co.jp/beans