カカリアスタジオ、『あんスタ！！』シリーズのUIアップデートにおける開発ワークフローの効率化手法をZennにて公開

Happy Elements カカリアスタジオは2025年11月20日（木）、「あんさんぶるスターズ！！10周年UIアップデートで導入したコード自動生成とプレビュー機能」と題した記事をZennにて公開しました。

本記事では、同社が運営するスマートフォン向けゲーム『あんさんぶるスターズ！！（以下、『あんスタ！！』）』シリーズで実施されたUIアップデートについて、技術情報を紹介しています。

（画像はブログ記事のZennページより引用）

Happy Elements カカリアスタジオ（以下、カカリアスタジオ）が運営する『あんスタ！！』シリーズでは、10周年を機に大規模なUIアップデートが実施されました。

同作は『あんさんぶるスターズ！！Basic』と『あんさんぶるスターズ！！Music』という2種のアプリで共通のUIを使用していますが、各アプリ固有のコンポーネントのアタッチや、エンジニアによるスクリプト作成・アサインが完了するまで、デザイナーが動作確認を行えないという課題がありました。

 

『あんスタ！！』シリーズにおける従来のUI開発ワークフロー（画像は記事本文のスクリーンショット）

この課題を解決するため、カカリアスタジオは「UIコード自動生成」と「プレビュー機能」を軸とした新しいワークフローを導入しました。

新しいワークフローでは、デザイナーがプレハブ上にUI要素を配置し、エディター拡張からコード生成を実行すると、UI参照のアサインや基本的なイベント購読を含む自動生成コードと、エンジニアがロジックを記述する手動編集用コードの2つが出力されます。

コードの自動生成を行う専用のエディター拡張ウィンドウ（画像は記事本文より引用）

また、デザイナーの作業効率を向上させたのが、プレビュー機能です。UIの状態を定義する「ViewState」に「Serializable」属性を付与することで、Unityのインスペクターからプレビュー用のデータを直接入力できるようにしました。

これにより、デザイナーは再生モードを実行するだけで、UIの動作を実機に近い環境で即座に確認できます。「通常時」「エラー時」といった複数の状態パターンを設定し、切り替えて確認することも可能です。

エンジニアを待たずにインスペクターから直接編集が可能（画像は記事本文より引用）

UI要素の制作後、共通リポジトリで管理されているUIを各アプリに同期する際、「EsBasic」や「EsMusic」といったタグを付与することで、不要なオブジェクトやフォルダを自動で削除する仕組みを構築しています。これにより、同じプレハブを使いながら、それぞれのアプリに最適化された状態で出力されるようになりました。

改善後ののUI開発ワークフロー（画像は記事本文のスクリーンショット）

カカリアスタジオは、これらの仕組みの導入により、動作確認までの時間を大幅に短縮できたという開発上のメリットを強調しています。

詳細は、ブログ記事本文をご確認ください。