← 記事一覧に戻る
テクノロジー

多言語対応で壊れるのは翻訳以外の場所

多言語対応で壊れるのは翻訳以外の場所

「多言語対応は、最後に文言を翻訳すれば終わり」。そう考えて進めたプロジェクトほど、リリース直前に英語版のボタンからはみ出す文字、ドイツ語で折り返して崩れる表、入力できない名前といったバグが一気に出てきます。原因は翻訳の質ではなく、要件定義の時点で「どこまで対応するか」を決めていないことです。この記事では、翻訳以外で壊れる場所を要件の段階で洗い出すチェックリストを紹介します。

なぜ「後から翻訳」で崩れるのか

画面や処理は、作った人の言語を前提に組まれます。日本語で設計すると、短い文言・語順が固定された文・単数と複数の区別がない表現が当たり前になります。後から別の言語を流し込むと、その前提が一斉に崩れます。翻訳者は文言を訳せても、ボタンの幅や変数の埋め込み方は直せません。だからこそ、これは翻訳の工程ではなく要件定義の工程で決めておく話です。

要件定義で決めておく5つの項目

1. 文字長の伸び率

日本語から英語にすると、文字数はおおむね2〜3倍に伸びます。ドイツ語やフランス語ではさらに長くなります。「保存」は「Save」で済んでも、「下書きとして保存」は「Save as draft」になり、ボタンが2行に折れます。

  • 想定する最長の言語と、伸び率の目安(例: 日本語の3倍)を決める
  • ボタン・タブ・表の見出しなど、幅が固定される部品を一覧にする
  • 収まらないときの扱い(折り返す/省略して全文を別の場所で示す)を決める

2. 語順と変数の埋め込み

文字列をつなぎ合わせて文を作ると、語順の違う言語で破綻します。

// 失敗例: 語順が日本語に固定される
const msg = user + "さんが" + count + "件のバグを報告しました";

// 改善例: 文全体を1つの翻訳キーにし、変数は名前付きで渡す
t("reported", { user, count });
// ja: "{user}さんが{count}件のバグを報告しました"
// en: "{user} reported {count} bugs"

要件としては「文の断片を連結しない。文単位で翻訳キーを持つ」と書いておきます。

3. 複数形

日本語は「1件」も「3件」も同じ形ですが、英語は「1 bug / 3 bugs」と変わります。言語によっては複数形が3種類以上あります。Intl.PluralRules や ICU メッセージ形式のように、複数形を扱える仕組みを使うことを要件にしておくと、「1 bugs」のような表示を防げます。

4. 氏名・住所・日付・数値の形式

  • 氏名: 「姓」「名」の2欄必須にすると、名だけの人や長い名前の人が登録できない
  • 住所: 郵便番号を7桁の数字に限ると、海外の利用者が入力できない
  • 日付・数値: 「2026/10/07」「1,000.5」の書き方は地域で違う。表示は Intl.DateTimeFormat などに任せ、保存は形式をそろえる
  • 入力文字: 絵文字・アクセント記号・右から左に書く文字を受け付けるかを決める

5. 未翻訳時のフォールバック

新しい文言を追加したのに片方の言語だけ訳し忘れると、画面に「dashboard.title」のようなキーがそのまま出ます。どの言語に戻すか、未翻訳をどう検知するかを先に決めます。

  • 未翻訳時に表示する言語(例: 英語)を決める
  • 翻訳ファイルのキーが言語間で一致しているかを CI で検査する

決めずに進めて起きた崩れの例

  • 英語版で「Delete」ボタンの隣の「Cancel all scheduled jobs」が折り返し、2つのボタンの高さがずれて押し間違いが起きた
  • 通知文を連結で作っていたため、英語版で「3 件 bugs」のような言語の混ざった文が出た
  • 氏名欄の文字数上限を日本語の感覚で10文字にしており、海外の利用者がフルネームを登録できなかった

どれも実装後に1つずつ見つけて直すと手間がかかりますが、要件の段階で決めていれば最初から起きない種類のバグです。

すぐ使えるチェックリスト

  • 対応言語と、最も長くなる言語の伸び率を決めたか
  • 幅が固定される部品の一覧を作ったか
  • 文字列の連結を禁止し、文単位の翻訳キーにする方針を決めたか
  • 複数形を扱える仕組みを使うことを決めたか
  • 氏名・住所・日付・数値の入力と表示の形式を決めたか
  • 未翻訳時に戻す言語と、検知の方法を決めたか

実装前のデザイン確認では、仮の英語の文言を流し込んだ画面を一度見ておくと、伸び率の問題を早く見つけられます。

Bugoon での実践

多言語の崩れは、作った人が普段使わない言語の画面で起きるため、開発者自身では気づきにくいバグです。Bugoon のウィジェットをサイトに埋め込んでおけば、英語版を使う QA 担当や利用者が、崩れた画面をスクリーンショットとアノテーションで指し示して報告できます。報告には表示言語や画面サイズが自動で記録されるので、「どの言語の、どの幅で崩れたか」を聞き返さずに再現できます。集まった報告は GitHub Issue 連携やカンバンボードで整理でき、MCP サーバーを通じて Claude Code や Cursor に修正を任せることもできます。

チームのバグ報告を、もっとスムーズに。

Bugoon は無料で始められます。サイトにタグを 1 行追加するだけで、QA と開発の往復がなくなります。

無料で始める