こんにちは、ちょこです。
今回は「乃木坂46リズムフェスティバル」のメインコマンドの画面を紹介してみます。
まずはメイン画面を紹介してみます。
ホーム画面
ホーム画面です。
アイドルの写真と背景の色数で辛うじてビジュアルの要素も多分にありますが、やはり情報が多い…。
アイドルの面積がもう少し大きかったら印象も変わるのですが、横画面だとこうなりがちですかね。
ガチャ画面
ガチャ画面は全体的に若干広告みたいな感じになっているけど、画像自体はビジュアル寄りかも。
ショップ画面
ショップ画面です。これはこれで、推しのアイドルを引き立てつつ、画面が地味にならず、且つうるさくもならない程度にデザインされているのかな、と思います。
カード画面
カード画面もショップ画面同様にアイドルが最も目立ち、画面に彩りを添えています。
ショップ画面、カード画面は基本的にアイドルを目立たせるためにビジュアル控えめで、情報の配置を中心に画面を構成しています。
よく見ると緑のトーンが画面によって異なっているけど、明るい方は画面から浮いているのできっとミス…。
楽曲選択画面
さて、楽曲選択画面がこちらです。
このアプリの中で一番見るべき画面かな、と思っています。
写真がふんだんに使われていて「これからLIVEするぞー!!」って空気が伝わってくるようです。
情報が多いのでレイアウトがビジュアルではなくシステムに寄りがちですが、ここまで情報が多いとビジュアル寄りにしたところで画面が荒れるだけかも。
ちょっと前にプレイしたテニラビはこんな感じ。
比べてみると分かるのですが、テニラビの方が情報量少なめですね。
イベントの導線だったり、他メニューに遷移するボタンが無いのが差分ですかね。
そうなってくると、なんで乃木フェスは画面に情報が収まってるのかな、と考えてみたのですが、乃木フェスの方が奥行きまで使って情報を構成している分、収まっているのかも。
平面で構成しているとX軸とY軸だけで画面をまとめようとしがちになるのですが、Z軸も上手く使うと表現の幅が広がりますよね。
画面遷移について
最後に各画面のデザインだけではなく遷移にも触れておきます。見た目の綺麗さだけではなく触り心地も重要な要素です。
以下、各画面の遷移gifです。
見てわかる通り、ロードが無くて快適です！
遷移時に読み込みがあると没入感がぶつ切りになるので、読み込みがないのはとても大事です。
UIデザイナーが直接的に関われる部分ではないですが、メモリに置く画像をなるべく効率よく構成するように常に意識しておくだけで、後半の最適化の際に苦労しなくて済むはず。
余談ですが、遷移時の画面は真っ黒なのはちょっと気になりました。メインカラーに黒は無いので没入感に欠けるのが勿体ないなという印象です。背景と同じくらいの白の方がノイズにならないのかな、と思いました。
乃木フェスは全体的にきれいにまとまっているので、考察しやすいデザインかも。
