UI/UXの多言語化で「翻訳したらボタンからはみ出す」問題を防ぐには？翻訳会社との理想的な連携方法
解決したいこと
Webサービスやアプリを多言語化する際に、翻訳後の文字数増加によってUIが崩れる問題を防ぎたいです。
例えば、日本語では短く収まっていたボタンやメニュー、ラベルが、英語・中国語・韓国語などに翻訳した途端に長くなり、以下のような問題が発生することがあります。
- ボタン内の文字がはみ出す
- メニューの幅が足りなくなる
- スマホ表示で改行位置が不自然になる
- 文言が長すぎてCTAの意味が伝わりにくくなる
- 翻訳後にデザイナーやエンジニア側で再調整が必要になる
単に文字列を翻訳するだけでなく、UI/UXを壊さずに多言語対応するためには、開発側と翻訳会社がどのように連携すればよいのか知りたいです。
発生している問題・エラー
日本語では問題なかったUIが、翻訳後に崩れる
例：
「送信」→「Submit」
「お問い合わせ」→「Contact Us」
「会員登録する」→「Create an Account」
「見積もりを依頼する」→「Request a Quotation」
翻訳後の文字数が増え、ボタン幅やカード内テキスト、ナビゲーションメニューに収まらない。
特に以下のような箇所で問題が起きやすいです。
例）
・ボタン
・グローバルナビ
・フォームのラベル
・エラーメッセージ
・モーダル内の説明文
・スマホ表示のCTA
・管理画面のメニュー
該当するソースコード
<button class="primary-button">
見積もりを依頼する
</button>
.primary-button {
width: 160px;
height: 48px;
font-size: 14px;
white-space: nowrap;
}
翻訳後：
<button class="primary-button">
Request a Quotation
</button>
この場合、日本語では収まっていた文言が、英語では横幅を超えてしまう可能性があります。
日本語：
見積もりを依頼する
英語：
Request a Quotation
想定される問題：
・ボタンから文字がはみ出す
・無理に縮小表示されて読みづらい
・スマホ表示でレイアウトが崩れる
自分で試したこと
以下のような対応を検討しました。
・ボタン幅を広げる
・font-sizeを小さくする
・CSSで折り返しを許可する
・翻訳文を短くする
・省略表示にする
・アイコンのみの表示にする
ただし、単純にCSSだけで対応すると、言語ごとに不自然な表示になったり、ユーザーに伝えたい意味が弱くなったりすることがあります。
そこで、翻訳会社と連携する場合は、翻訳依頼の段階で以下の情報を共有するとよいと考えました。
・文言が表示される画面のスクリーンショット
・ボタンやラベルなど、UI上の使用箇所
・最大文字数の目安
・ターゲットユーザー
・文体の希望
・フォーマル／カジュアルのトーン
・省略してよい情報、必ず残したい情報
・実装後の表示確認の有無
特に、DTPやWebサイト翻訳に対応している翻訳会社であれば、単なる直訳ではなく、画面上で自然に見える表現への調整も相談できます。
例えば、以下のように依頼すると、翻訳後の手戻りを減らしやすくなります。
この文言はボタン内に表示します。
横幅が限られているため、英語で20文字以内を目安にしてください。
意味を大きく変えない範囲で、自然で短い表現を希望します。
翻訳会社側にUI上の制約を伝えることで、以下のような提案を受けやすくなります。
「Request a Quotation」
↓
「Get a Quote」
「Create an Account」
↓
「Sign Up」
「Contact Us」
↓
「Contact」
英語・中国語・韓国語など、対象言語によって文字数や自然な表現は異なります。
そのため、多言語化を前提としたUIでは、翻訳対象の言語ごとに「短くても意味が伝わる表現」を検討することが重要です（「英語翻訳」は https://www.fukudai-trans.jp/service/lang/english/ 、「中国語翻訳」は https://www.fukudai-trans.jp/service/lang/chinese/ 、「韓国語翻訳」は https://www.fukudai-trans.jp/service/lang/korean/ より引用）。
結果として、エンジニア側で翻訳後にレイアウト崩れを修正する作業を減らせる可能性があります。
UI/UXの多言語化では、翻訳を開発の最後にまとめて依頼するのではなく、設計・デザイン・実装の早い段階から翻訳会社に相談することが重要だと感じました。
