DMM.comの、一番深くておもしろいトコロ。

DMMのログイン・会員登録周りの多言語化対応

DMMのログイン・会員登録周りの多言語化対応

  • このエントリーをはてなブックマークに追加

はじめに

こんにちは。メンバーシップサービス部 アカウントサービスチームの山岸です。
日頃は、DMM会員の認証と顧客情報に関連するプロダクト(認証基盤と顧客情報盤)のバックエンドおよびフロントエンドの開発・保守を行っています。
今回は会員登録・ログインページの多言語化対応についてお話したいと思います。

目次

なぜ多言語対応をするの?

当初、海外からのアクセスに対しては英語表記のみの対応でした。
しかし、その英語は自動翻訳による低クオリティなもので、このままの翻訳内容だと海外のユーザーに気持ち良くモノを買ってもらうことができないと感じていました。
また、中華圏のユーザーは英語圏・日本国内のユーザーに比べて課金率とARPPUが低い状態であることをデータ上で確認できていました。

そんなわけで、より高い精度の英語表記と、新たに中国語(繁体字)の対応をすることになりました。

今回の目的

  • 正しい翻訳を行うことで世界中のユーザーの理解を助け、より多くの新規ユーザーにDMMのサービスを利用してもらう。
  • 中華圏のユーザー向けに中国語(繁体字)の対応をすることで、英語圏と同様の課金率・ARPPUの向上に繋げる。

対応すること

以下のような会員登録・ログイン周りのページに対し、 英語圏ユーザーには英語、中華圏ユーザーには中国語(繁体字)で正しく翻訳されたページを選択できるようにします。

f:id:dmminside:20200121102244j:plain
ログインページ・会員登録ページ

f:id:dmminside:20200121102251j:plain
SNSログイン連携ページ

f:id:dmminside:20200121102258j:plain
パスワード忘れ・メールアドレス忘れページ

また、これまでは海外からのアクセスの場合は英語・日本語の選択ができたのですが、日本国内からは日本語のみしか選択できませんでした。
日本国内にいる海外ユーザー(日本に在住している外国人ユーザーなど)に対しても言語選択ができるように改善したいと思っていたため、 今回の対応では国内外問わず、日本語・英語・中国語(繁体字)に切り替えられるようにすることにしました。

多言語化の仕組みの開発

既存の仕組みを利用するのではなく、新しく作りました。
以前は他社の翻訳ソフトウェアを利用し、自動翻訳で日本語を表示する仕組みでしたが、
今回の対応では、i18next というフレームワークを利用し、任意の文字列を扱えるようにしました。
簡単に説明すると、まず予め翻訳してもらった文言を翻訳言語ごとに辞書ファイルにします。

signup: DMMアカウントの登録
emailAddressRegister: メールアドレスだけでカンタン登録
signup: DMM account registration
emailAddressRegister: Simple registration with just an e-mail address.
signup: 註冊DMM帳號
emailAddressRegister: 使用郵件地址立即進行註冊

これを、ectなどのテンプレートエンジンから取得する仕様にしました。

<p class="capt"><%- @t('signup') %></p>
    <dl class="box"> 
      <dt><%- @t('emailAddressRegister') %></dt>
              ︙

会員登録ページはこんな感じになりました。

f:id:dmminside:20200121102304j:plainf:id:dmminside:20200121102310j:plain

新しい仕組みにしたことによって、言語ごとに HTMLレベルで細かい調整ができるようになりました。

例えば、英語にすると文章が長くなり表示崩れする箇所をきれいにしたり、
aタグのように「どうしても日本語と多言語で順序が変わるHTML」も適した表記ができるようになりました。
画像画像

他にも会員登録時に送られるメールを多言語化したり、日本語が使われている画像を差し替えたりする作業などもありました。

f:id:dmminside:20200121102327j:plainf:id:dmminside:20200121102330j:plain
(左)対応前、(右)対応後

また、文言を関数に置き換えるために、あまり手を付けることのない末端のページまでしっかりコードを見るので、 副作用的に既存コードのリファクタやフロント画面の細かい修正も行えました。

多言語対応後…

会員登録のアクセス数が多いブラウザ言語TOP5のCVRのグラフです。

パラメータは、日本国内の海外ユーザーのことも考慮して、利用している国別ではなくブラウザ言語で見ています。
そのほうがユーザーの本当に求めている言語になるからです。
画像
見てみると、12月12日のリリース後に英語(en-us)と繁体字(zh-tw)が、10〜20%台から40〜50%台までぐっと上がっていることが分かります。

翻訳言語別に細かく見ると、元々自動翻訳だった英語ページは、ブラウザ言語が英語(es-us)のCVRが格段に上がっています。
これは、英語翻訳の精度が上がったおかげでしょうか。
画像

今回の多言語化対応で、今まで離脱していた海外ユーザーにも会員登録してもらえるようになり、 より多くの新規ユーザーにDMMのサービスを利用してもらうという目的を早速達成できました。

さいごに

ログイン周りの対応だけでも必要なファイル数が多くて辛かったのですが、こうしてすぐにアクセス数の伸びを見ることができたことで手応えを感じました。 数値を取るのもいろいろと工夫が必要で大変でしたが、それもSQL力を上げる良い経験になったと思います。

アカウントサービスチームは、7月末に新しくなった石川事業所で勤務しております。
新石川事業所の雰囲気はこちらで感じてください。
メンバーシップサービス部では一緒に働く仲間を募集しています。
3196万人(2019年現在)のユーザを支える会員プラットフォームの開発、運用に興味のある方はぜひ下記募集ページをご確認ください。
dmm-corp.com