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

らぴ
567

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

今回は前回の続きで下記の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

記事スコア: 567

らぴの他の記事も読む

  • 世界的人気ゲーム「クラロワ」から見るCX事例

    皆さんは「クラロワ」というゲームをご存知でしょうか?「クラロワ」は「クラッシュ・ロワイヤル」の略称でありフィンランドのゲーム会社・Supercellが開発・運営している世界的人気アクションゲームとなっており、世界で1億以上のユーザーがいます。クラロワ公式サイト 続きを読む

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

    昨今の世界情勢と言えば陰鬱で暗い日々が続きますね。コロナに財政、人間関係のしがらみまで、現実世界は辛いことが多くありませんか?そんな日々だからこそ、老若男女、乙女も乙男も腐女子も腐男子も皆さん揃って、非日常の世界へ飛び込み、充実感と光を与えてくれる「アイドル」 続きを読む

  • ノムリッシュ翻訳サイトのUI・UXデザインを検討してみた⓶翻訳機能編

    さてさて今回は前回のファーストビュー編から続いてサイトのメインである翻訳機能について検討していきます。どのような機能か楽しみですね。ではでは☆彡racing-lagoon.info(https://racing-lagoon.info/)前回はこちらファースト 続きを読む

  • EFOに役立つ各企業EF事例 【フード領域】ピザ屋の入力フォーム編🍕

    お疲れ様です。今日で緊急事態宣言が解除され自粛生活も少しは改善されると思われますが、まだまだ気を緩めずにいきたいですね。さて、昨今の自粛生活に伴いデリバリーサービスの需要は高まっています。今回はそのようなデリバリーサービスの入力フォームを比較検討していきたいと 続きを読む

  • EFOに役立つ各企業EF事例 【フード領域】お持ち帰り寿司のフォーム編🍣

    お疲れ様です。青嵐日和につきヤンチャ風が様々なモノを運んできます🍂さて今回は寿司屋のウェブ注文可能のお持ち帰り入力フォームを比較検討していきたいと思います。フォームの比較検討を行うことでそれぞれのデザインを参考し、より良いフォーム作成、CVR改善につながると 続きを読む

  • EFOに役立つ各企業EF事例 【フード領域】デリバリーサービス入力フォーム編🏍

    お疲れ様です。昨今では緊急事態宣言が解除されつつあり人混みもチラホラと見えてきています(通勤・通学時のは人口密度は相変わらずですが笑)。さて、時代の影響もありデリバリーサービスの需要は高まっています。コミュ障・出不精の私にとってはサクッと頼むことができ、急な訪 続きを読む

  • ノムリッシュ翻訳サイトのUI・UXデザインを検討してみた ➀ファーストビュー編

    …やぁ、ここであったが百年目だね…今回はノムリッシュ秘されし真実と生きる元老院のUIUX錬成を検討していく…まるで異界<ビヨンド>にある虚の中でのようによ(訳こんにちは。今回はノムリッシュ翻訳サイトのUIUXデザインを検討していきます。)ノムリッシュ語の由来は 続きを読む

  • 補足:陰鬱な日々にさよなら!? ペット業界のUI・UXデザインを比較してみた🐶🐱

    ぼんそわーるm(__)m今回は前回の補足でペットショップの問い合わせフォームの比較を行っていきたいと思います。フォームの比較検討を行うことでそれぞれのデザインを参考し、より良いフォーム作成、CVR改善につながると考えられます。扱うサイト様ペットン(https: 続きを読む

  • 陰鬱な日々にさよなら!? ペット業界のUI・UXデザインを比較してみた🐶🐱

    ぐ~てんだ~、いかがお過ごしでしょうか自粛生活が続いており陰鬱ムードが続きますね。そんな日々だからこそ、家庭内で寄り添ってくれるパートナーとしてペット市場が注目されてきています。さて今回はそのようなペットショップのPCデザインを比較していきたいと思います。PC 続きを読む

  • EFOに役立つ各企業EF事例 【フード領域】バーガー店のフォーム編🍔

    ご無沙汰しております。「いただきます」という言葉は英語だと該当する言葉がなく、訳するなら「Let's eat」ぐらいになるそうです。食べ物に感謝する姿勢は様々ですが、日本特有のこのアイデンティティは大事にしていきたいですね。さて今回はバーガー店のフォームを比較 続きを読む

  • EFO(入力フォーム最適化)に役立つ各企業EF・EFOツール事例まとめ

    お疲れ様です。人生は選択の繰り返しと言いますが、皆さんは最適な選択を行えていますか?サイト運営においてEF(入力フォーム)のデザインというものはCVRに強く影響があり、どの企業においても最適化、EFOを行うために工夫されています。今回はそのようなEFO事例につ 続きを読む

  • EFOに役立つ各企業EFOツール トライアル可能EFOツール編

    お疲れ様です。CVR改善にあたってEFO(入力フォーム最適化)は避けては通れない道です。今回はEFO改善に用いられるEFOツールのうち、無料を含めトライアル可能ツール一覧についてまとめていきます。トライアルツールは期間が短く、機能制限などの傾向があるため期待し 続きを読む

  • EFOに役立つ各企業EF事例 【フード領域】ファミレスのフォーム編🍴

    さて今回はファミレスのスマホ版のメニュー及び検索フォームを比較検討を行っていきます。飲食店ではどのようにメニューを表示するか、見せ方次第で売り上げも変わってきます。フォームの比較検討を行うことでそれぞれのデザインを参考し、より良いフォーム作成、CVR改善につな 続きを読む

  • 初心者でもできる簡単サイト形成-WordPressを用いて

    昨今ではウェブマーケティングへの関心も高まってきており、様々なプロダクトが広まっています。アフィリエイトサイトを作成したり、フリーランスで様々な活動を行っている方も少なくはないと思われます。サイト運営の際、CVRなどに関するトラブルや問題が生じた時【CX BO 続きを読む