はじめに
本記事は リンクアンドモチベーション Advent Calendar 2024 の23日目です🎄
こんにちは、リンクアンドモチベーションでフロントエンドエンジニアをしている坪井です。
この記事では、弊社の「モチベーションクラウド」を多言語対応する際に直面したUI/UX面での課題と、その解決方法を共有します。
（タイムゾーン問題については、こちらの記事をご覧ください🕰️）
なぜ、グローバル対応は難しいのか
「モチベーションクラウドの画面を多言語化対応してほしい！どの言語を入れても問題ないようにしたい！なるべく早くお願い！」
そんな依頼を受け、2024年4月にプロジェクトがスタートしました。
「翻訳を導入すれば解決するだろう！」と意気込んで対応を進めましたが、実際に画面に反映すると、様々な課題が明らかになり、最初の見積もりでは全ての対応完了までに2年かかることに。
「きええ、全然翻訳入れるだけじゃ終わんないじゃん！」
「このプロダクト、日本語しか受け付けられない仕様になってやがる！」
「一生、終わんねええ！」
理想
現実（※簡易翻訳のサンプルです）
まずは、ゴールを「複数言語に対応できるかつ、顧客が母国語で誤解せずに利用できるUI/UX」に定め、以下の課題に絞ってグローバル対応を進めることにしました。
- テキストのオーバーフロー
- 改行位置によって読めない言語が出てくる問題
- 日本語でしか通用しないUX
崩れた箇所の共通点と対策
① テキストのオーバーフロー
- 課題: 日本語よりも文字数が多い言語の場合、指定された幅や高さに収まりきらない
- 影響:
- ボタンやラベルからテキストがはみ出す
- テキストが折り返されて他のUI要素と重なる
- 対策:
- 縦並びのアクションボタンにはmin-heightを指定し、高さが柔軟に変わるように
- 横並びのアクションボタンにはmin-widthを指定し、幅が柔軟に変わるように
- ユーザーのアクションに関わらない情報は、はみ出る部分を省略表示し、ツールチップで全文を確認できるように
- 背景:
- ルールを設けることで、全ての言語に対応するデザインを作る必要がなくなり、変更量を最小限に抑えられた
- ルールを設けて削減できたコスト: 各言語ごとのデザイン調整や個別のレイアウト修正
② 改行位置によって読めない言語が出てくる問題
- 課題: タイ語やベトナム語などでは、単語の途中で改行されると意味が変わってしまう
- 影響: 意味不明なテキストのせいで、ユーザーがプロダクトを正しく操作できなくなったり、内容を正確に理解できなくなる
- 対策: スタイルを保持したまま、単語単位で改行されるように修正する
-
word-break: normal;とoverflow-wrap: anywhere;を設定。基本は単語単位で改行し、長すぎる単語の場合は強制的に改行させる - 翻訳会社にも改行位置を確認してもらい、意味の通じない箇所を防ぐ
-
③ 日本語でしか通用しないUX
-
課題: 日本語の文法や表現に依存したデザイン
- 例）※サンプル画像です
-
影響: 他言語ではUIが正しく理解されず、意図した値を登録できない
-
対策: 世界共通で利用される記法を使用する
- 例）不等号を使用して文章を式に変換
学び
完璧なグローバル対応を目指すと膨大な時間がかかります。しかし、ゴールを「顧客が母国語で誤解せずにプロダクトを利用できること」と定め、ルールを設けて対応することで、最小限のコストで迅速に多言語対応の画面をリリースできました。
今後は、プロダクトのフェーズに合わせて、ローカライズによって「各市場への適応」を進めていきたいと思います！