「『プロジェクトセカイ カラフルステージ！ feat. 初音ミク』UI全面リニューアルの対応事例とそれを支えたタスクフォースチーム」講演レポート

　「プロセカ」こと「プロジェクトセカイ カラフルステージ！ feat. 初音ミク」（iOS / Android）が2023年9月に3周年を迎え，ユーザーインタフェース（以下，UI）も全面リニューアルされたのは記憶に新しい（関連記事）。3年間作り続けられた200画面を刷新する裏には，大きな苦労があったという。


　ゲーム開発者に向けたオンラインカンファレンス「CyberAgent Game Conference」では，「『プロジェクトセカイ カラフルステージ！ feat. 初音ミク』UI全面リニューアルの対応事例とそれを支えたタスクフォースチーム」と題した講演が行われ，リニューアルの大変さや，異なる職種の相互理解，そして忌憚なく意見をいえる環境の大切さが語られた。

“銀の弾丸”が存在しない中，通常サービスを続けながら，200画面，300ダイアログすべてを刷新

　講演では，Colorful Paletteのクライアントエンジニアである本間純平氏がUIリニューアルについて，これを支えたタスクフォース「UI夢を語る会」について，同じくクライアントエンジニアの小林大峰氏が語っている。

Colorful Paletteのクライアントエンジニアである本間純平氏（写真左）と，同じくクライアントエンジニアの小林大峰氏（写真右）

　前述の通りプロセカは3年間サービスが続いており，UIの全面リニューアルを実現するうえでは「多すぎる画面数」「過去の技術的負債」「止まらない運用開発」といった課題があったという。



●「多すぎる画面数」：無駄なところにコストを掛けず，共通化や自動変換で対応する
　画面数は約200，固有ダイアログ数も300以上と物量が多いうえ，UIアニメーションも刷新しつつ，非推奨とされるUnityのテキストコンポーネントをTextMeshProに置き換えていく作業もやらなければならなかったという。当初UIリニューアルに携わるのはわずか2名だったので，人を増やすことを前提に新たなアプローチが考えられていった。物量に対しては，無駄なところにコストを掛けないよう共通化や自動化が進められた。

　また，UIアニメーションはアニメーション班に編集環境を渡してレギュレーションに沿った作業を進められるようにしていった。プロセカでは画面のprefabの編集やアニメーションの組み込みをエンジニアが行うことも多いため，UIアニメーションの作業がアニメーション班だけで完結するのであれば，省力化としての効果も大きいという判断であったという。TextMeshProへの置き換えは半自動化が採用されているが，これは単なる置換では漏れを確認するのが大変であるということで，ボタン1つで置き換えができる環境が構築された。


●「過去の技術的負債」：ルールを決めること，守ることは大事
　本間氏がいう「過去の技術的負債」とは，開発が進むうえで複雑化していった画面やコードのこと。楽曲関連ひとつ取っても，さまざまなモードのそれぞれで異なるデータを表示しており，シナリオシーンでも度重なる修正でコードが肥大化。さらには，あちこちに一時コードが点在していたという。こうした状況は，動くからOKとして見過ごされやすいものの，将来のアップデートに足かせとなりかねないことから，“お掃除”をする決断が下された。

　複雑化したコードは可能な限りリファクタリングし，複雑な処理はユーティリティとして切り出す。設計思想自体もMVCモデル（Model：処理部分，View：表示部分，Controller：入力部分を分割するという考え方。変更や修正が容易になる）に寄せたものとし，コメントを書くことを心がける……というように“お掃除”が進められていった。現状問題なく動いているコードをリファクタリングするのは「本当に怖い作業だった」と本間氏。この作業で氏が得たのは，「ルールを決めること，守ることは大事」であるいう学びであるという。「とりあえず動くということで書いたコードは，必ず負債になる」と聴衆に向けて警告した。


●「止まらない運用開発」：
　UIリニューアルや複雑化したコードの“お掃除”はそれだけで大変な仕事だ。しかし“お掃除”のためにサービスは止められない。そして，通常のサービスやアップデートといった運用を続けるうえでは，プレイヤーの意見を汲んだリアルタイムな改修が行われる。つまり，本間氏が進めるUIリニューアルとは別ラインで，サービス提供やアップデートの実施といった運用が行われていたということだ。

　そして，本間氏がUIリニューアルの作業をひとまず終えた画面に対しても，後から運用側（通常サービス）で改修が加わることがある。もちろん，こうした改修もUIリニューアル側に反映しなければならない。これはプレイヤーの意見を汲んだ結果であるため，予想は不可能。こうした作業について本間氏は「本当に大変だった」と当時を振り返る。

　そこで本間氏は，運用側で追加する処理やアセットを取り込みやすくするため，1機能1ブランチでの開発を運用側に徹底してもらい，機能のロジック部分をUtilityやサービスとして別ファイル化し，新しい機能はできるだけ小さい単位でPrefabとして管理するといった取り組みを進めていった。これにより，レイアウトを変えても処理を使い回せるようになり，UIが変わっても画像ファイルを変えるだけでそのまま動かせる，といった改善があったという。ただ，Prefabのコンフリクトはほぼ解決不可能だったため，発生した際は作り直しが行われたそうだ。

　UIリニューアルの作業において「“銀の弾丸（特定の問題をたちどころに解決する特効薬的なもの）”はなく，地道な効率化や愚直な作業を続けた期間であった」と本間氏は振り返る。そのうえでは「優先度を付けて取捨選択を行い，ものごとを現実的な範囲に収めるのも大切であった」と，氏は自身の取り組みを総括する。運用と並行でUIリニューアルを進めた経験から学ぶところも大きく，「チームで意見を言い合いながらモノを作っていくことは本当に楽しかった」と語った。

デザイナーがUnityを学ぶ勉強会が，自発的なレベルアップにつながっていく

　こうしたUIリニューアルを支えたタスクフォースが，小林氏の携わる「UI夢を語る会」だ。UIのクオリティを上げるという目標に向け，「楽しみながら活動しよう」という思いを込めたネーミングであり，「エンジニアとデザイナーの共通認識を増やしていく」取り組みが進められたという。

　これまでのプロセカでは，新たなUIを実装するにあたり，UIデザイナーとエンジニアがやりとりをしつつ進めていた。具体的には，まずUIデザイナーが企画書をベースにカンプ（デザイン見本）を作り，エンジニアがこれを確認して実装。エンジニアはQA（Quality Assurance：品質保証）を経て修正を行い，修正内容についてUIデザイナーに確認を取るという流れであった。デザインと修正のそれぞれを職種の異なる別人が担当するため，「カンプで使われているパーツと，実際に渡された素材が違う」などのトラブルが発生。開発期間が短いときなどは数ピクセル単位のズレなら許容する空気になっていたという。

　こうした状況からUIデザイナーからは，「UIデザイナー側で修正ができないか」という声も上がる。エンジニア側も，修正をUIデザイナーに確認してもらうプロセスが負担になっていたため，「こういっていただけたのは，とても嬉しかった」（小林氏）という。UIデザイナーが自分で修正できれば，エンジニアが介在する必要が無くなり，ワークフローはかなり改善される。理想としては，UIデザイナーがUnityを学んで自分で修正を行えるようになり，エンジニアはPhotoshopを学んでUIデザイナーの意図を察することができるようになることだが，今回はUIデザイナーに向けたUnity講座が行われている。


　ゼロから画面を作ってアプリに実装する，というのはさすがにハードルが高いことから，まずは既存画面の修正を週1回1時間で進められた。参加者たちも楽しみながら学習を進め，作業が1時間で収まらない場合は自主的に時間外の取り組みも行われた。こうして完成した画面はチャットに投稿され，お互いに褒め合う流れもできたそうだ。

　小林氏いわく，ゆっくりとしたペースであり「UIリニューアルに間に合えばいいね」という空気感ではあったものの，実際にはUIリニューアルにおいて画像の差し替えや位置調整といった修正をUIデザイナーのみで行えるようになったという。バグ修正のスピードも向上し，エンジニアも含めた旧ワークフローと比較すると，その速度は約3倍だというから充分な成果だ。また，この取り組みでUIデザイナーとエンジニアの相互理解も進んだのに加え，UIデザイナー側からの提案も増え，業務全体のレベルアップにつながっていったという。



　こうした活動ができたのも，「メンバーの皆が自分の考えを伝えられる環境があってこそのことだ」と小林氏は語る。近年，組織における心理的安全性の大切さが指摘されることは多い。「UI夢を語る会」の取り組みや，自発的な提案によるレベルアップも，こうした心理的安全性があってのこと。講演された個々の事例はもちろんのこと，プロセカチームのモチベーションの高さも印象的な講演だった。

「プロジェクトセカイカラフルステージ！ feat. 初音ミク」
（C）SEGA/（C）CP/（C）CFM

4Gamerの「CyberAgent Game Conference 2024」記事一覧ページ