アバター画像で唯一無二のデザインを作りたい！REALITYカードファクトリーにおけるUnity製アプリとWeb技術を使ったデザイン生成

GREE Tech Conference 2025で発表された資料です。
https://techcon.gree.jp/2025/session/Short-Session-4

Transcript

1. アバター画像で唯一無二のデザインを作りたい！ REALITYカードファクトリーにおける Unity製アプリとWeb技術を使ったデザイン生成 REALITY株式会社 ソフトウェアエンジニア 戛山 英高
2. 戛山 英高 / Fogrex REALITY株式会社 Platform事業本部 2025年にグリーホールディングス株式会社に新卒 入社。主にUnityを使った開発を行っています。 ソフトウェアエンジニア 2
3. 目次・アジェンダ • REALITYカードファクトリー • カードデザインの生成 • REALITYの機能をWebから利用 • カードの描画 3
4. REALITYカードファクトリー 4
5. ⾃分好みのアバターで ライブ配信 REALITY（リアリティ）は、 誰でもスマホ１台でアバターの姿になり、 顔出しナシでライブ配信、ゲームやチャットなど コミュニケーションを楽しむことができるアプリです。
6. REALITY CON 2025 IN TOKYO "REALITY史上最大級"のオフラインイベントが 池袋サンシャインシティにて開催！ 6 会場の様子(公式Xより引用)
7. REALITY カードファクトリー REALITY CON 2025の1ブース REALITYのアバターを使ったオリジナルカードがその場で作れる！ 7 ブースのイメージ動画 （公式Xより引用）
8. カードデザインの生成 8
9. カードデザインをユーザーごとに生成 9 生成されるカード
10. カードデザインをユーザーごとに生成 10 生成されるカード カードのベースデザイン カラーリング 活動ログ
11. カードデザインをユーザーごとに生成 11 生成されるカード アバター画像 カードのベースデザイン カラーリング 活動ログ
12. REALITYのアバター表示事情 前提: REALITYのアバター表示はUnityで作られている 12
13. REALITYのアバター表示事情 前提: REALITYのアバター表示はUnityで作られている - REALITYのアバターデータ - 身体/着用アイテムパラメータのJSON - 一般的な3Dモデルフォーマットではない → Unity上でレンダリングする必要がある 13
14. 実際のカードファクトリー技術構成 14 Web技術をベースに、WebGLビルドしたREALITYをライブラリ的に使う REALITYサーバー カードファクトリー サーバー カスタムREALITYアプリ カードファクトリー カードデータ 取得 アバターデータ 取得
15. REALITYの機能をWebから利用 15
16. REALITYのUaaL (Unity as a Library) 利用 16 - Swift(iOS)/Kotlin(Android) からUnity機能を呼び出す - アプリ「REALITY」を創る技術 ~Unity編~｜REALITY株式会社 iOSの画面構成図
17. REALITYのUaaL (Unity as a Library) 利用 17 - Swift(iOS)/Kotlin(Android) からUnity機能を呼び出す - アプリ「REALITY」を創る技術 ~Unity編~｜REALITY株式会社 - REALITY WebGLビルドのライブラリ的利用 - Unityのライセンス費用に向き合う Now In REALITY Tech #153｜REALITY株式会社 → REALITYはWebGLビルドを利用しやすい環境がある
18. なぜWeb技術をベースに作るのか？ REALITY CON ブース関連の開発は、本業と並行した短期開発 - 効率的に開発を進めたい - 柔軟な仕様・デザイン変更が発生する 18 ユーザーの操作画面デザイン(一部)
19. なぜWeb技術をベースに作るのか？ REALITY CON ブース関連の開発は、本業と並行した短期開発 - 効率的に開発を進めたい - 柔軟な仕様・デザイン変更が発生する Web技術を活用すると... - AIによるコーディングアシストの恩恵を受けやすい - ホットリロードがベースのWeb開発環境はイテレーションが回しやすい → UI描画はWebフロント、アバター描画はREALITYのWebGLビルドの分業 19
20. カードファクトリー技術構成（おさらい） 20 REALITYサーバー カードファクトリー サーバー カスタムREALITYアプリ カードファクトリー カードデータ 提供 アバターデータ 取得
21. カードの描画 21
22. カードを構成する要素（おさらい） 22 生成されるカード アバター画像 カードのベースデザイン カラーリング 活動ログ
23. フロントエンド カード描画 カード描画の技術構成（詳細） 23 REALITY 本番サーバー サーバー REALITY WebGLビルド UI SDK アバター情報 ユーザー プロフィール カラーテーマ 抽出 カード情報 アバター画像
24. WebGLビルドを用いたアバター画像描画 - REALITYで用意されているSDKを介してフロント↔REALITYで通信 - Unityの画面はユーザーから隠し、純粋にライブラリとして利用 24 REALITY WebGLビルド SDK Webフロント カード描画処理 撮影要求 アバター画像 (Base64形式) 撮影要求 アバター画像 (Base64形式) JavaScript Interface
25. FigmaデザインをAIでコードに落とし込む - カードデザインをFigmaからPixi.jsコードに変換 - デザイン修正の高速化 → AIによるコーディングアシストをフル活用 25 // HP テキスト (194:2053) - x=44, y=0, width=56, height=50 const hpTextStyle = new PIXI.TextStyle ({ fontFamily : '"Noto Sans JP", Arial, sans-serif' , fontSize : 40, fontWeight : '900' , // Black fill: parseInt (cardInfo .theme .TEXT.replace ('#', '0x')), align : 'left' }); const hpText = new PIXI.Text({ text: 'HP', style : hpTextStyle , resolution : TEXT_RESOLUTION }); hpText .x = 44; hpText .y = 0; // 垂直中央揃え hpText .y = (height - hpText .height ) / 2; + 5分で修正して動作確認
26. 無事REALITY CONでブースの運営を行いました 26 カードの実物 ブースのイメージ動画 （公式Xより引用）
27. Web技術とWebGLビルドの活用で デザインの生成を効率的に実装した話 27