10月ぐらいにprivateなWikiに書いた記事なんですが、中々面白い差分に着目してて眠らせるには惜しい記事だったのでブログにも転載しました。
GUIのビッグバンアップデート
アップデート情報📝
— プロジェクトセカイ カラフルステージ！ feat. 初音ミク【プロセカ】 (@pj_sekai) 2023年9月27日
アプリリニューアル
ゲーム全体のUIを刷新します✨
📺番組生配信中：https://t.co/fSRJEbkW6H#プロセカもうすぐ3周年 pic.twitter.com/3fJR1cTRs5
旧GUIの雰囲気→ゲームUIブログさんの記事
ここまで一気にGUIを差し替えてるのはソシャゲだとかなり珍しい気がします。なので、旧新GUIのdiffを並べることでここ数年のソシャゲGUIの流れを観察してみようと思いました。
ちなみに筆者はそこまでプロセカをやり込んでる訳では無いです。なので見落としてるところは多々あるかなと思うのですがご容赦下さい（特にマルチ関連の機能とか手を付けてないのでそのあたりは分からない）
ポップアップ画面の枠外タップ有効化
もうこれはソシャゲのデファクトスタンダードっぽくなってますが、ポップアップが枠外のタップで閉じるようになりました。
報酬ポップアップのトースト化
トースト*1は最近よく見かけるようになった気がします。何でもかんでもトーストにすれば良いってものでは無さそうですが、ポップアップに比べると束縛が軽い気がしますね。報酬ポップアップ以外にも、幾つかのポップアップがトーストへ置き換えられてます（楽曲購入、ストーリー開放など）
メニューポップアップのサイドパネル化
ここもポップアップを潰してます。ボタンのデザインも重要なものとそうでないものが分かるよう改善されてますね。
一つ気になったところとして「クリスタルショップ」と「キャラクターアーカイブ」の配置を入れ替えてます。課金に結びつくからクリスタルショップを一番目立つ位置に置くのが当然かと思いきやそれを落としてでもキャラクターのコンテンツを上に上げて来てるんですよね。ヘッダーからもクリスタルショップには行けるので重要度は多少低かったのかもしれないですが、これには少し驚きました。
ユニット編成のメンバー選択がサイドパネル化
ここもサイドパネル化してました。画面切り替えからOverlayになってます。
これ側変えとは行かずに相当工数かかるはずなので、何故この改修を入れたか疑問に思ったのですが、ユニット編成って色んな画面から呼ばれるのでOverlayさせたかったのかなあと。あと楽曲選択→ユニット編成に入ると曲が一旦途切れてたんですよね。↓社さんのアーカイブで該当箇所あったのでペタリ。
これがサイドパネル化で曲が途切れなくなったのは、棚ぼたかもしれないし直したかったところなのかもしれないです。
シナリオ選択の背景が全画面化
これはやはり印象が大分違いますね。プロセカは音ゲーなんですが、シナリオがとても重要なゲームなのでここの印象をバッと差し替えることには苦心したのだろうなと思います。
iPadだとちょっと上下切れてる…。
←にあったユニットによるシナリオフィルタはサイドパネル化して畳まれてます。
シナリオ画面の刷新
テキストのボックスが潰されて背景に溶け込むようになってますね。文字にアウトライン付けてかなり透明度高めでも可読性を高めてます。立ち絵がより見えるようになっていい感じですね。ブルアカのメモリアルロビーでのテキスト表示に近いのかなと。
会話ログもポップアップじゃなくて全画面化してます。
（愛莉ちゃんかわいい！！）
楽曲選択がスマートフォンをモチーフに
ここは思い切った変更ですね。プロセカが初めての音ゲーってユーザーも多数居ることを考えると既存の音ゲーにデザインを寄せずにスマートフォンに寄せるのも有りな気がしますね。
逆に旧GUIに慣れた人にとっては慣れが必要かもしれないです…。
原曲へのリンク、ランダム曲選択、ボーカル変更が分かりやすいアイコンでまとめられてて、モチーフに上手く落とし込んだなと感心しました。
曲の一覧はリストとジャケットで切り替えられます。ジャケットはよりSpotifyとかに近くなる感じありますね。
各コンテンツの背景を取っ払った
旧GUIではホームから各コンテンツ（育成、メニューコンテンツなど）に行ったときにスクロールする背景を描いてたのですが、これを全廃してます。これによって各コンテンツでは街の背景が常にグロー掛かった状態で見えるようになってます。最初この差分に気付かなくて、それぐらいには自然で印象が変わるものでした。
カラバリ選択画面をボトムシート化
旧GUIでは、（衣装を選択してから）色選択画面へ→対象の色を選択→決定という手順があったのですが、これをボトムシート化することで必要な画面数が2→1に、タップ数が3→1に減ってます。素晴らしいですね。プロセカは衣装がとても重要なゲームなので、この画面の改修優先度は高かったのだと思います。
アウトゲームのパフォーマンスが悪化した？
体感出来るレベルでアウトゲームのパフォーマンスが落ちました。正直、3周年間に合わせようと無理したんだなって思います…。プロセカは10代がボリューム層で推奨端末の下限がダイレクトに響くはずなので改善を期待したいですね。
アップデート直後は↑の状況だったのですが、その後のアップデートでパフォーマンスは改善されてます。
文字周り
全体的に小さくなったなあって印象ですね。iPadだとまだ全然見れるけどスマホだとかなりしんどいサイズな気がします。ソシャゲの文字小さくなる現象なんなんでしょうね…。PCで開発してるから？それとも、プロセカは若いユーザーが多いしまあこのサイズでも行けるって判断したのかもしれないですね。
フォントはロダンNTLGを引き続き使ってて、新GUIではファミリーの中でも太めのものを積極的に取り入れてます。仮名の端がスパッと切れた感じが特徴的で、ゲームでも比較的良く見るフォントですね。
その他
大きく印象変わるところだとタイトルとか、あとはタップエフェクトなんて細かいところも全部差し替えてました。
感想
アプリのイメージの刷新には成功したのでは無いかなと思います。ユニットメンバーの進級という大掛かりな演出の為にはGUIまで手を付ける必要があったのかなと。
まだ観察が足りませんが、差分を観察することで今のソシャゲGUIがどっちに向いてるのかなあというのを少しは感じ取ることが出来ました。プロセカ特有の変数とかも多分にあってそこはもうちょっとプロセカに浸からないと見え無さそう。
筆者はエンジニアなのでエンジニアの視点から言うと、ポップアップの置き換え、画面の全部を使ったGUI、ページ遷移を感じさせない作り、このあたりは他のアプリにも見られる傾向でモデリングにも影響してくるのかなと思いました。
*1:開発チームによって呼び方は違うかもしれないです
