【DeNA TechCon 2025】 進化をとめないIRIAMのグローバル対応とUIローカライズへの挑戦

進化をとめないIRIAMのグローバル対応 とUIローカライズへの挑戦 1 © DeNA Co., Ltd.

⾃⼰紹介 森本 光祐 2006年 DeNAに⼊社。2022年9⽉よりIRIAMに出向。 グローバル展開プロジェクトを担当。 Kosuke Morimoto 松岡 徹 Toru Matsuoka ⽯井 晶規 Akinori Ishii 2 2012年 DeNAに中途⼊社。世界⼀周旅⾏を経て2018 年に再⼊社。2022年よりIRIAMに出向してクライア ントサイドの基盤システム開発を担当。家庭菜園に ハマっている。 官公庁‧ITベンチャー数社を経て、2022年8⽉に IRIAM に中途⼊社。グローバル展開プロジェクトの サーバーサイド開発を担当。 © DeNA Co., Ltd.

⽬次 1. IRIAM のグローバル対応とUIローカライズへの挑戦 2. 翻訳フローを⽀える基盤開発 3. ⽣産性向上のための翻訳⾃動化 4. まとめ 3 © DeNA Co., Ltd.

IRIAM（イリアム）とは IRIAM Culture Deckより抜粋 4 ぜひ読んでください！ © DeNA Co., Ltd.

• https://www.docswell.com/s/IRIAM/KJ48G1-2024-11-07-121852

技術スタック ※サービス名、ロゴ等のすべての商標は、各々の所有者の商標または登録商標です。 5 出典元: IRIAM Culture Deck © DeNA Co., Ltd.

IRIAM のグローバル対応と UIローカライズへの挑戦 6 © DeNA Co., Ltd.

グローバル対応の開発⽅針 ● ⽇本向けの新規の開発を並⾏して進める ○ 急成⻑のスピードを緩めるわけにはいかない ○ グローバル対応チーム以外は各担当ドメインの開発に従事 ● ローカライズ起因のプロダクトへの仕様変更は最⼩限に抑える ○ ユーザーの反応を観測しながらプロダクトを調整する ● 開発期間や⼈的リソースを最⼩限に抑える ○ 新規機能の追加、既存機能の改善も急務 7 © DeNA Co., Ltd.

UIローカライズ開始直後の状態 多⾔語化のしくみやフローも当然整備されていない ⽇本語が直書きなうえにタイムゾーンがJST固定 配置ずれ ⽂字溢れ ⽂字溢れ 8 © DeNA Co., Ltd.

対応内容 ● 可変レイアウト対応 ○ ⽂字数増加対策。英語は⽇本語の2倍⻑い。⾃動改⾏ ● ⽇付対応（複数タイムゾーン/フォーマット対応） ● 翻訳フローを⽀える基盤開発 ○ シングルバイナリでの多⾔語切替（i18nシステム） ● ⽣産性向上のための翻訳⾃動化 ○ アプリ内⽤語集/英⽂スタイルガイド対応を⾃動化 ● その他（サーバー‧管理運⽤ツール）のローカライズ 9 © DeNA Co., Ltd.

対応内容 ● 可変レイアウト対応 実装者の負担を軽減し、開発スピード を維持するための⼯夫が凝縮 ○ ⽂字数増加対策。英語は⽇本語の2倍⻑い。⾃動改⾏ ● ⽇付対応（複数タイムゾーン/フォーマット対応） ● 翻訳フローを⽀える基盤開発 ○ シングルバイナリでの多⾔語切替（i18nシステム） ● ⽣産性向上のための翻訳⾃動化 ○ アプリ内⽤語集/英⽂スタイルガイド対応を⾃動化 ● その他（サーバー‧管理運⽤ツール）のローカライズ 10 © DeNA Co., Ltd.

翻訳フローを⽀える基盤開発 11 © DeNA Co., Ltd.

IRIAMにおけるクライアント翻訳フロー IRIAMではクライアント翻訳フローを4つのステップに整理した UI実装 Unityエディタ上でUIのprefabを実装する作業 後ほど紹介するテキストコンポーネントを使って、⽇本語でUIを実装する テキストDB登録 prefabに実装された⽇本語テキストを収集して、データベースに保存する このタイミングでテキストに対してIDを付与する 翻訳 リリース 12 データベース上の⽇本語テキストを翻訳する 1つのテキストIDに対して、⽇本語と英語がそれぞれ紐づくことになる テキストデータをクライアントから参照できるようにする IRIAMではJSON形式に落としてアセットバンドルとして配信 © DeNA Co., Ltd.

テキストDBのイメージ ひとつのIDに対して⽇本語テキストと英語テキストを紐づけて管理 利⽤ファイルやヒエラルキー上のパスなど、エンジニアが⾒たときに利⽤箇所がわかる情報を記載 他にも翻訳ステータスやメモなど、いろいろな情報を管理している 13 © DeNA Co., Ltd.

IRIAMにおけるクライアント翻訳フロー整理 これまでのUI実装に加えて、翻訳対応特有の作業が追加される UI実装 テキストDB登録 翻訳 翻訳対応特有の作業部分が ⼯数を圧迫する懸念 リリース 14 © DeNA Co., Ltd.

翻訳フローを⽀える基盤の⼯夫ポイント 国内向けの開発⼯程を極⼒変えないことを⽬指して⼯夫した UI実装 ⼯夫① テキストコンポーネント拡張 TextMeshProをそのまま置換できる 多⾔語対応コンポーネントを開発 テキストDB登録 翻訳 ⼯夫② ひたすら⾃動化 追加の作業⼯程を最⼩限に抑えて 負担を減らすためひたすら⾃動化 リリース 15 © DeNA Co., Ltd.

⼯夫① テキストコンポーネント拡張 ● TextMeshProを拡張したIriamTextMeshProを開発 ○ TextMeshProの使⽤感そのままに乗り換えられる⼯夫 ○ テキストIDを⾃動的に付与する ○ 設定⾔語のテキスト/フォントに切り替える、などなど... ○ とりあえず使っていれば、よしなに多⾔語対応をサポート ● 時間をかけて少しずつプロジェクトに反映 ○ QA⼯数を圧迫しない程度の分量 ○ 置換作業⾃体はスクリプト化して省⼒対応 16 © DeNA Co., Ltd.

⼯夫② ひたすら⾃動化 ツール化 テキストDB登録 ⾃動 翻訳 ⾃動 リリース 17 Unityエディタ上に実装されたツール UI実装とDBのテキスト差分を表⽰ 差分を確認して登録ボタンを押す DB更新トリガーで動く⾃動翻訳システム ➔ 次のパートで掘り下げて紹介 開発環境に対して⾃動反映 デザインチェックやQA検証を実施 本番環境へは管理画⾯を操作 © DeNA Co., Ltd.

翻訳フロー基盤の全体像 Unity Editor上の作業 ④翻訳⽂⾔登録 翻訳システム ① テキストID発⾏ Prefab IriamTextMeshPro テキスト収集 & DB登録 ツール IriamTextMeshPro Prefab IriamTextMeshPro Prefab IriamTextMeshPro テキストDB ②テキスト収集 クライアントアプリケーションでの利⽤ 18 ③DB登録 ⾔語データ⽣成と デプロイ ⑤リリース ランタイム⽤ ⾔語データ © DeNA Co., Ltd.

翻訳フロー基盤まとめ 翻訳対応特有の作業がエンジニアの⼯数を圧迫するところだったが... 1. 拡張コンポーネントによって、開発者体験をほぼ維持できた 2. ⾃動化によって、追加の作業にかかる負担を軽減できた 国内向けの新機能開発を諦めない 多⾔語対応の基盤が整った 19 © DeNA Co., Ltd.

⽣産性向上のための翻訳⾃動化 20 © DeNA Co., Ltd.

翻訳⾃動化 (1) モチベーション UI実装 ⾃動化する以前の翻訳作業⼿順 1. DBから翻訳対象を探す (⼿動) テキストDB登録 翻 訳 対 応 特 有 の 作 業 3. 翻訳結果をDBに反映 (⼿動) 翻訳 リリース 21 2. 翻訳 ⼿作業が残っている... この作業も⾃動化したい！ © DeNA Co., Ltd.

翻訳⾃動化 (2) ⾃動翻訳に関する要件 ● アプリ内⽤語集に則った表現を使うこと ○ 例) 「ラジオ配信」 ⇒ 「Audio Stream」(x Radio Stream) ● 英⽂スタイルガイドに則った英⽂にすること ○ 例) 例⽰は e.g. 形式。Ex. ex. e.x. は不適切。 ⇒ 検証の結果、翻訳ツールとして LLM を選定。 最新のアプリ内⽤語集/スタイルガイドの内容をもとに 翻訳指⽰プロンプトを動的⽣成することで要件を満たす。 22 © DeNA Co., Ltd.

翻訳⾃動化 (3) 翻訳システムの運⽤に関する要件 ● チームの誰でも⾃動翻訳システムをメンテナンスできること ● 既存の開発フローを⼤きく変更しないこと ● 翻訳の品質やデザイン影響の確認がスムーズにできること ⇒ 要件を満たす LLM サービスとして VertexAI を選定 既に開発で使⽤している GitHubActions / Go を選定 翻訳はテキストDBに反映、品質確認フローを確⽴ 23 © DeNA Co., Ltd.

翻訳⾃動化 (4) 処理の流れ ① Unity からテキスト追加 1 6 テキストDB 品質‧デザイン の確認フローへ ② テキスト追加で GitHubActions をキック ③ アプリ内⽤語集/スタイルガイドを取得 ④ プロンプトに変換し VertexAI に翻訳指⽰ 2 ⑤ 翻訳結果をテキスト DB に反映 5 ⑥ 変更を検知して開発環境リリース GitHub Actions 3 Google Spread Sheet (⽤語集/英⽂ルール) 24 4 VertexAI © DeNA Co., Ltd.

翻訳⾃動化 (5) プロンプトの⼯夫 ● 出⼒形式の指定 ○ JSON配列の例を明記 ○ スキーマを指定 ● ⽤語リストと英⽂スタイルガイド 25 © DeNA Co., Ltd.

まとめ ● IRIAM のグローバル進出においては、ローカライズ対応を進めつつ機 能開発のスピードを落とさないというチャレンジがあった。 ● クライアント開発フローの翻訳⼯程を⾃動化するために、まず翻訳テ キストを⾃動同期/リリースするクライアント基盤づくりを⾏った。 ● テキストを⾃動翻訳するシステムも構築した。 ⇒ 開発速度を落とさない翻訳システムが完成 26 © DeNA Co., Ltd.