こんにちは！ちょこです！
このブログでは「ゲームUIを見てみよう！」というテーマでゲームUIを紹介しています。少しでもゲームUIに興味を持ってくれる方が増えると嬉しいです！
今回は「アイドリッシュセブン（アイナナ）」の階層を間取りツールで俯瞰的に見てみる、といったことをやってみました。
画面の階層や導線を可視化してゲーム全体の構成を俯瞰的に見て、何かつかめないかな、と考えています。
全体図としてはこんな感じです。色分けされているのが主な機能です。
７年目を迎えたゲームにしてはそこまで複雑にはなっていない印象です。
全体の所感としては以下です。
- ストーリー関連の画面の導線はスッキリ
- メンバー画面は機能が多く、導線が複雑
- ホール画面はメインコンテンツでは無いが、意外と奥まで画面が続いている
特にホール画面は複雑でした。
ホール画面は部屋をカスタムできたり、他のユーザーにお披露目する画面です。
ガーデニング要素に近い遊び方ができます。
多機能でこれひとつで別のゲームが成立してしまうくらい、ボリュームがあります。
やれることは多く、主な例をあげると
- 家具の購入、配置
- SDキャラの配置
- ライブモードでキャラが踊る
- 他のユーザーのホールを見に行く
- フレンド申請をする
などがあります。
また、独自のルールになるためか、他画面では見られないUIパーツもあります。
ボリュームが多く、既存のレイアウトのルールも適用しづらいとなれば、設計難度はかなり高いと感じました。
では、それぞれの画面を見ていきます！
タイトル画面
タイトル画面で選べるメニューは以下の４項目でした。
- アカウント削除
- お問い合わせ
- 引き継ぎ
- キャッシュ削除
ホーム画面まではログインボーナス、お知らせなどを経由して遷移します。
間取りで見るとこんな感じです。
玄関から入って左手に小部屋が４つ、リビングに行くまでの廊下に扉が３つある感じです。
こう見ると、余計な扉は取っ払ってすぐにリビングに直通したくなります。
（当日２回目のアクセスであれば扉は無くなり、リビングに直通になる）
ホーム画面
ホーム画面は広く、様々な機能にアクセスできます。
ざっくり主な機能を紹介すると以下の12機能が挙げられます。
- LIVE
- STORY
- MEMBER
- AUDITION
- SHOP
- HALL
- WORK
- MENU
- MAIL/アイドルフォルダ
- INFO
- 曜日レッスン
- マネージャーフォン
間取りで見るとこんな感じです。
選択肢が多い分、どの機能にアクセスするのが良いのか、優先度を示して
例えば、「アイナナ」の場合は通知バッジや訴求文言をボタンの近くに表示させ、ユーザーがアクセスする動機を作り出しています。
３Dで見ると広さが際立ちますね。
導線や付随する情報量が多い分、情報設計とその後のレイアウトが重要になってくる画面だと感じました。
LIVE画面
LIVE画面は「アイドリッシュセブン」のメインコンテンツのひとつです。
プレイする楽曲を選択して、クリアやハイスコアを目指します。
間取りで見るとこんな感じです。
基本は一本道で、終点に到達したらスタート地点に戻る設計です。
如何に快適に周回させることができるかが重要であるため、リトライやブースト機能などの機能が充実しています。
周回のしやすさを目指している点においてはガチャと似ており、リトライやブースト機能はガチャで言うところの「もう一回引く」「10連続で引く」にあたります。
そういった意味では、LIVE画面にある機能や導線は、ガチャにあるものをLIVE画面用にカスタマイズした結果と言えるのかもしれません。
STORY画面
ストーリー画面は読みたいストーリーを探す画面です。
メインストーリー、イベントストーリーなど多岐に渡ってカテゴライズされています。
間取りで見るとこんな感じです。
階層はある程度深いのですが、それと同時に情報は並列に並んでおり、それぞれの行き来がしやすくなっています。
また、シームレスに画面遷移するため、操作が軽快に感じました。
俯瞰して見るとこんな感じです。
MEMBER画面
メンバー画面です。
ボタンにたくさんの色が使われていますね。
主に
- ユニット編成
- メンバーの強化
- メンバーとのお別れ
などが行えます。
間取りで見るとこんな感じです。
部屋の数は多いものの、いくつかは強化方法のバリエーションです。
運用していくと強化方法は多様化しますが、根本的には何かしらのリソースを消費するだけなので、似たような導線で学習コストは低めです。
俯瞰で見るとこんな感じです。細かい部屋が多いんですよねー…。
（部屋の真ん中に看板立っていますが無視してください）
AUDITION画面
オーディション画面はいわゆるガチャ画面です。
ガチャ画面はどのゲームでも似たような導線になっています。
LIVE画面と同様に終点まで行ったらスタート地点に戻る設計です。
導線の内訳としては見た感じ以下の要素で構成されているように見えました。
- 基本サイクル
- 訴求情報
- 法律・ガイドラインで定められた情報
改めて見ると、ショップ画面と似たような要素で構成されています。
どちらも商品購入ページなので、要素が似るのは当然ですが、ガチャは訴求情報の割合が大きく、見た目も変わっているため、見落としていたのかもしれません。
間取りで見るとこんな感じです。
リザルトまでいくと最初の画面に戻ってくる流れです。
３Dで俯瞰して部屋を見るとこんな感じです。
情報量が多い割にはシンプルな構造になっています。
WORK画面
WORK画面では、アイドルに任意の仕事をさせ、一定時間後に経験値などの報酬を獲得させることができます。
メインは報酬の受け取りで、ミッション画面やプレゼント画面のようにシンプルに目的を達成する設計です。
間取りはこんな感じです。
合ってるか不安になるくらいシンプルな間取りです。
長居せず、ちょっと入ったらすぐに退室します。
俯瞰で見るとこんな感じ。
やることがシンプルで全体が把握しやすい！
SHOP画面
ショップ画面です。
見せ方としては遷移直後に商品が並んでいないデザインです。
商品のラインナップは見せていますが、商品のビジュアルや値段を見せていないため、訴求としては比較的控えめな気がしました。
間取りで見るとこんな感じです。
色んな情報にアクセス出来るのでこちらも幅が広くなっています。
特にイベント報酬画面まで繋がっているのが興味深いです。交換所と繋げているんですね。イベント報酬画面の先まで進むとちょっと奥深くなりそうなので、手前で省略しています。
３Dで見るとこんな感じです。比較的
HALL画面
ホール画面！
メインの遊び方ではないのですが、導線設計はかなり難しい。
これひとつでゲームができるほどのボリュームに感じました。
ホール画面のメインメニューは以下の５つです。
- ホールライブ（SDキャラが音楽に合わせて踊る）
- セット（ライブセットのカスタム）
- ホールショップ（セットするアイテムの購入）
- バクステ（メンバーの配置、衣装）
- フレンド訪問（他フレンドの画面を見る）
厄介なのは、それぞれの機能が独立しており、流用ができないためです。
例えば、強化機能であれば比較的レイアウトや設計は流用しやすい部類に入りますが、ホール画面の各機能はそういった流用ができません。
そのため、規模は小さいながらも多機能であるため、各機能を結び付け、包括的なまとめられる設計スキルが必要になってきます。
UIパーツもこの画面専用のデザインになっており、パーツの流用がしづらかった痕跡がうかがえます。
間取りで見るとこんな感じです。
ホールショップなど、多少奥行きを省略している機能もありますが、横に広く展開してます。
こういった幅の広さから多機能であることが伺えます。
こっちは３Dの俯瞰図です。色んな部屋がありますね。
MENU画面
メニュー画面はメイン以外の機能が詰まった画面です。
それぞれの機能の先には個別に設計がなされていますが、複雑になってしまうのでここではアクセスできる機能の紹介に留めます。
「アイドリッシュセブン」のメニュー項目には重要度や優先度が定められていないため、どの機能も並列に扱う設計になっています。
ボタンのサイズやアイコンの有無などで違いを出し、優劣をつけているアプリもあります。
間取りで見るとこんな感じです。
入口は小さいですが、奥まで部屋が続いています。
情報が並列なので単調で無機質な印象を受けました。
小部屋が並んでいるとなんだかトイレみたいですね。
今回はここまでです！
クエストやイベントなどやってないところもありますが、気になる方はぜひゲームをプレイして観察してみてください！
このブログではこのようにゲームUIついて簡単にまとめて紹介しています。
他のゲームUIも紹介しているので、もし良かったら他の記事も見て行っていただけると嬉しいです。
権利者さまへ
以下はコンテンツ利用に関する認識の説明です。
「アイドリッシュセブン」のガイドラインを確認したところ、公式HPにて、ゲーム画像をブログに投稿することは許諾されている旨の記載がありました。
【2022.01.12追記】「アイドリッシュセブン」コンテンツ利用ガイドライン - 【公式】アイドリッシュセブン
主な参照箇所を抜粋します。
（１）画像について
・コンテンツ内で使用している一次創作物は、過度の加工等を行わない限り、WebブログやSNSなどで私的利用範囲での掲載をいただいても問題ございません。
ただし、シナリオの過度なネタバレに繋がるものや、掲載の結果アイドリッシュセブンのイメージを逸脱・誤認させる、またアイドリッシュセブンのイメージを損なうことがないようご配慮ください。
イベントストーリー
過度なネタバレ(シナリオを丸ごと含む画像や動画配信など)は禁止といたします。
ラビチャ、RabiTV
ラビチャ、RabiTVについては過度なネタバレ(シナリオを丸ごと含む画像や動画配信など)はお控えください。ただし、以下の範囲内に限り、ラビチャ、RabiTVの感想をSNS等で発信・発言いただけるものとします。
その場合は、ラビチャ、RabiTVの特性や未読の方へのご配慮をお願いいたします。・感想を伝えることを目的とした発信が前提で、以下の掲載枚数に収まっていること
ラビチャ：通常画面表示で4枚まで、もしくは全画面表示で1枚まで
RabiTV：通常画面表示で4枚まで、ログ表示での掲載は禁止※既定の枚数以内の場合でも、おおまかな内容がわかるような掲載は禁止いたします。
※動画の公開は禁止いたします。
画像利用、記事の内容について問題がありましたら、お手数ですがご連絡ください。
速やかに対応いたします。
