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

『プロジェクトセカイ カラフルステージ！ feat. 初音ミク』は2023年9月で3周年を迎えました。
3周年当日には、キャラクターが年齢を重ね「進級」したりアプリ全体のUIのリニューアルを行うなど、リリース後最大規模のアップデートを行いました。
本セッションでは、UIリニューアルをどのようにして開発してきたのか、またUIリニューアルという大きなアップデートを支えたタスクフォースである「UI夢を語る会」の取り組みについて紹介します。

https://cagc.cyberagent.co.jp/2024/session/index.html?id=j4tzizfr8p

© SEGA/© CP/© CFM
Copyright © CyberAgent, Inc.

Transcript

1. 『プロジェクトセカイ カラフルステージ！ feat. 初音ミク』 UI全面リニューアルの対応事例と それを支えたタスクフォースチームの紹介 1 プロジェクトセカイ カラフルステージ！ feat. 初音ミク 本間 純平 小林 大峰 クライアントエンジニア クライアントエンジニア
2. プロジェクトセカイ カラフルステージ！ feat. 初音ミク 2 ユーザー数 1000万人超 X（旧Twitter） フォロワー数 200万人 公式YouTube チャンネル 登録者数 156万人 • 『初音ミク』と『人間』が織りなす新しい 物語・新しい展開 • 2D･3D･Live2D−− それぞれ描かれる魅力的な キャラクターたち • VOCALOID曲を中心に有名楽曲を多数収録した リズムゲーム • 数多の著名クリエイターから提供される楽曲・ クリエイティブ 魅力的なキャラクター（シナリオ・イラスト）× リズムゲーム
3. UIリニューアルとは？
4. 4 『プロジェクトセカイ カラフルステージ！ feat. 初音ミク』(以降、プロジェクトセカイ) の 3周年アップデートにて行われた施策の一つ。 ゲーム内の全ての画面のUIをリニューアルさせる。 (レイアウトや挙動の刷新、及びそれらに使われている画像素材の作り直し) UIリニューアルとは？ Old New Renewal！
5. 5 大きく勝手は変わらないが、UIデザインが変わる UIリニューアルとは？
6. UIリニューアルの目的
7. UIリニューアルの目的 7 リリースから3年が経ったプロジェクトセカイのUIを、 古さを感じさせないUIにアップデートする
8. UIリニューアルの課題
9. 9 UIリニューアルの課題 1. 多すぎる画面数 2. 過去の技術的負債 3. 止まらない運用開発
10. 10 UIリニューアルの課題 1. 多すぎる画面数 2. 過去の技術的負債 3. 止まらない運用開発
11. UIリニューアルの課題 / 多すぎる画面数 11 • 画面数約200画面 • 固有ダイアログ数300以上 • UIアニメーションの刷新 おまけにTextをTextMeshProに総替え 　　　　　　　　　　
12. UIリニューアルの課題 / 多すぎる画面数 12 • 画面数約200画面 • 固有ダイアログ数300以上 • UIアニメーションの刷新 おまけにTextをTextMeshProに総替え 　　　　　　　　　　
13. UIリニューアルの課題 / 多すぎる画面数 13 Q. ひとりで100画面くらい対応できればいけるか...？ (当初二人）
14. UIリニューアルの課題 / 多すぎる画面数 14 A. さすがに厳しい.... ので、各課題に対するアプローチを考えていく
15. UIリニューアルの課題 / 多すぎる画面数 15 課題に対するアプローチ • 画面数約200画面 / 固有ダイアログ数300以上 → • UIアニメーションの刷新 →
16. UIリニューアルの課題 / 多すぎる画面数 16 課題に対するアプローチ • 画面数約200画面 / 固有ダイアログ数300以上 → 共通化や自動化など工夫をしながらひたすら頑張る！ • UIアニメーションの刷新 → UIが変わればアニメーションも当然変わる。アニメーション班に 　 制作環境とレギュレーションをお渡ししてお任せする
17. UIリニューアルの課題 / 多すぎる画面数 17 課題に対するアプローチ TextをTextMeshProに総替え 　→
18. UIリニューアルの課題 / 多すぎる画面数 18 課題に対するアプローチ TextをTextMeshProに総替え 　→ 効率化できるよう、テキストの拡張を作成し、置き換え作業を簡単に ワンクリックで置き換え！ と、言う拡張
19. UIリニューアルの課題 / 多すぎる画面数 19 やらなくてはいけない物量は変わらない とにかく無駄な所にコストをかけないように、 共通化や自動変換を最大限行う
20. 20 UIリニューアルの課題 1. 多すぎる画面数 2. 過去の技術的負債 3. 止まらない運用開発
21. UIリニューアルの課題 / 過去の技術的負債 21 • 読解が難しくなってしまった楽曲選択画面 • コールバック地獄で進行するゲームリザルト • 複雑なシナリオシーンのコード • 混在する非同期処理（CoroutineやUniTask）
22. UIリニューアルの課題 / 過去の技術的負債 22 • 読解が難しくなってしまった楽曲選択画面 • コールバック地獄で進行するゲームリザルト • 複雑なシナリオシーンのコード • 混在する非同期処理（CoroutineやUniTask） さらに、３年間の運用の中で、改修によって生まれた一時コードが点在
23. 23 これからも向き合って行かなくてはいけないものなので、お掃除しましょう！ UIリニューアルの課題 / 過去の技術的負債
24. UIリニューアルの課題 / 過去の技術的負債 24 課題に対するアプローチ • 可読性が低く、複雑になりすぎているコードは可能な限りリファクタリングを行う • チームに馴染みのありそうな MVCモデル の設計に思想を統一し、なるべく寄せていく • 非同期処理を UniTaskのasync/awaitに統一 する • １画面上で状態が切り替わる場合は、ステートマシンで管理 (極小単位の物は除く) • 言わずもがなだが、コメントは書く
25. UIリニューアルの課題 / 過去の技術的負債 25 ルールを決めること、守ることはとても大事。 プロジェクトが大きくなるにつれて大変になる！
26. 26 UIリニューアルの課題 1. 多すぎる画面数 2. 過去の技術的負債 3. 止まらない運用開発
27. UIリニューアルの課題 / 止まらない運用開発 27 運用開発とは、定常的なアップデートのための開発のこと。 アップデートを1年止めるわけにはいかないため、平行しながらUIリニューアルの 作業を進める必要があった
28. 28 アップデート内容は、ユーザーの皆様の声によって決まることも多々あるため、 既にリニューアルを終えた画面に改修が入った場合、再度リニューアルを行っていく UIリニューアルの課題 / 止まらない運用開発 リニューアル 再度リニューアル 機能改修/追加 UIリニューアル チーム 運用開発 チーム
29. UIリニューアルの課題 / 止まらない運用開発 29 課題に対するアプローチ アップデートで追加する処理やアセットは、とにかく取り込みやすいようにする！ 1. 1機能1ブランチでの開発を運用開発側に徹底する 2. 機能のロジック部分は極力Utilityやサービスとして外に逃がす 3. 追加する画面のアセットは、小さい単位でUIパーツとして管理する
30. UIリニューアルの課題 / 止まらない運用開発 30 最大の敵はPrefabファイルのコンフリクト
31. 31 UIリニューアルの課題 1. 多すぎる画面数 2. 過去の技術的負債 3. 止まらない運用開発
32. 32 UIリニューアルの課題 銀の弾丸はなかった。 1. 多すぎる画面数 2. 過去の技術的負債 3. 止まらない運用開発
33. その他の課題 33 作業を進めるにつれて、他にもたくさんの課題があった。 ユーザーの皆様の意見や需要に合わせ、想定よりも大きく変更があったり、 社内レビューのフィードバックの量は多く、既に刷新の終わった画面を何度も 刷新を行った。 見えていなかった作業も段階が進むにつれて見えるようなっていく。
34. その他の課題 34 作業を進めるにつれて、他にもたくさんの課題があった。 ユーザーの皆様の意見や需要に合わせ、想定よりも大きく変更があったり、 社内レビューのフィードバックの量は多く、既に刷新の終わった画面を何度も 刷新を行った。 見えていなかった作業も段階が進むにつれて見えるようなっていく。 メンバー全員のやりたい！を実現するのはとても大変。 優先度付けと取捨選択はとても大事！
35. UIリニューアルを終えて 35 やりきれた部分とやりきれなかった部分が残る結果となった。 今後のアップデートで順次対応していきたい。 運用開発と平行でUIを全面リニューアルする事例が少なかったので、 今回のリニューアルを終えての学びは自分にとっても、 チームにとっても非常に多かった。
36. UIリニューアルを終えて 36 やりきれた部分とやりきれなかった部分が残る結果となった。 今後のアップデートで順次対応していきたい。 運用開発と平行でUIを全面リニューアルする事例が少なかったので、 今回のリニューアルを終えての学びは自分にとっても、 チームにとっても非常に多かった。 何より、チームで意見を言い合いながら モノを作っていくことは本当に楽しい
37. 37 大変だったUIリニューアルを助けるべく、 立ち上がってくれたタスクフォースチームがありました。
38. 38 UI夢を語る会
39. 39 ということで後半の小林君とバトンタッチです
40. 40 UI夢を語る会について
41. UI夢を語る会とは？ 41
42. UI夢を語る会とは？ 42 「Colorful Paletteが作るUIのクオリティをアップさせて、 他社の作品を上回るレベルのものを生み出せるようにしたい」 という目標を達成するために集まった会
43. 活動開始まで 43
44. 今までのワークフロー 44 アプリ画面の カンプ アプリ画面 1. 作成 2. カンプを 確認して実装 3. QAでの 不具合/修正 4. 修正内容が 問題ないか確認 UIデザイナー エンジニア 確認
45. 45 「もしかして、UIデザイナー側で修正できたりしませんか？」 ？
46. もしもUIデザイナーがUnityを触れたら 46 アプリ画面の カンプ アプリ画面 1. 作成 2. 作ったカンプ に沿って実装 3. QAでの 不具合/修正 UIデザイナー
47. 47 というわけで雑談から始めてみました。 「もしかして、UIデザイナー側で修正できたりしませんか？」
48. 48 雑談で出た現状の問題点 • UIの修正をエンジニアが行ってUIデザイナーさんが確認する流れを改善したい • ワークフローの改善をしたい • 同じ見た目の画面なのに違うデザインパーツが使われている • そもそもカンプ画像と実際の画面に違いが出てしまっている etc.
49. 49 改善案 • 「良いカンプ画像」について話し合う ◦ どういう情報を伝えることができればエンジニアは UIを綺麗に組みやすいか etc.
50. 50 改善案 • UIデザイナーさんがUnity学ぶ & エンジニアがPhotoshop学ぶ ◦ 両者の共通認識分野を広げる ◦ 適材適所で、UI修正をUIデザイナーができるような状態が理想 • 「良いカンプ画像」について話し合う ◦ どういう情報を伝えることができればエンジニアは UIを綺麗に組みやすいか etc.
51. 51 改善案 • UIデザイナーさんがUnity学ぶ & エンジニアがPhotoshop学ぶ ◦ 両者の共通認識分野を広げる ◦ 適材適所で、UI修正をUIデザイナーができるような状態が理想 • 「良いカンプ画像」について話し合う ◦ どういう情報を伝えることができればエンジニアは UIを綺麗に組みやすいか etc.
52. 52 「UIデザイナーがUnityを触れるようになりたい」を叶える
53. 53 活動内容
54. 54 実行したこと 「UIデザイナーがUnity触れるようになりたい 」を叶える • 既存画面の修正をエンジニアと一緒に作業しながら行って、 GitとUnityを使ったワークフローを覚える。 • 週一　18:00 ~ 19:00の時間を使ってゆっくり進める • 約半年間でUIデザイナーさんが、1から修正・コミット・PRマージまで 自分でできる状態を目指し、 UIリニューアルの実務に組み込めるようにする • 機能修正とかは含めず、 UI位置修正が出来るようになる UIリニューアルに間に合ったら最高だね！　という夢を掲げてスタートする
55. 活動の流れ 55 10月 • 活動開始 12月 〜 • 基礎を覚える 2月 〜 4月 • uPaletteの勉強 • UIリニューアルの作成済み画面を模写してみる • 実務に組み込む 6月 〜 8月
56. 56 GitHubとSourceTreeの使い方を覚える
57. 57 Unityの基礎を覚える
58. 58 簡単な画面を模写してみる
59. 59 簡単な画面を模写してみる
60. 60 uPalette勉強会
61. 61 やってみて • 実際にUIリニューアルのBU期間に間に合わせることができた ◦ 画像の差し替えや位置調整などを UIデザイナーさんだけで行うことができた ◦ エンジニアが対応するときの 約3倍の速度でバグを潰せた • 新規画面のベース作りを UIデザイナーさんだけで行うことができた • 両者の共通認識を広げることができた ◦ なぜカンプと違いが起きてしまうか、などを知ることができた • UIデザイナーさんの「やってみたい」を増やすことができた ◦ UIアニメーションやエフェクト表現などの提案が増えた
62. まとめ • UIリニューアルで全ての画面の UIのリニューアルを行った ◦ 全ての画面を限られた時間で変更していくには工夫が必要だった ▪ 共通化や自動変換を最大限行う ▪ 取捨選択を行う ▪ ルールを決めること、守ることがとても重要 • UI夢を語る会によってUIデザイナーさんがUnityを触れるようになった ◦ UIリニューアルチームを助けることができた ◦ 今後のワークフローの改善に繋げることができた
63. 63 ご静聴ありがとうございました。