投稿する
マガジン
著者：アソバース編集部公開：更新：約8分で読めます

ゲームの画面を英語化するとレイアウトが崩れる問題

遊びをつくる

執筆にClaudeを使用しています。

折りたたみ紙が広がる枠で、言語による文字量に対応する画面設計を表したイラスト。
記事のテーマをもとに制作したAI生成イラスト。

日本語で完成していたゲーム画面を英語に切り替えた途端、ボタンからテキストがはみ出す、UIが縦に間延びする、アイコンと文字が重なる——こうした現象は、多言語対応をしようとしたほぼすべての開発者が最初に直面する壁です。 原因はシンプルで、日本語と英語では同じ意味の文字列でも文字数が大きく異なります。「攻撃」は2文字ですが "Attack" は6文字です。「設定」は2文字、"Settings" は8文字です。もともと日本語の短さに合わせてサイズを固定していたUI要素は、英語文字列が入った瞬間に破綻します。 この記事では、崩れの原因を種類別に整理し、HTMLとCSSで対処する具体的な手順を示します。「英語にも対応したい」という段階でも、「すでに崩れてしまった」という段階でも、どちらでも使える内容です。

この記事の目次
  1. なぜ英語化でレイアウトが崩れるのか
  2. 固定サイズをやめる：min-width と min-height への切り替え
  3. テキストの折り返しと省略の判断基準
  4. フォントの扱いと行高さの調整
  5. 翻訳テキストを組み込む前にやっておく構造チェック
  6. 次の行動

なぜ英語化でレイアウトが崩れるのか

崩れのパターンは大きく三種類に分けられます。

①幅の固定によるはみ出し：width: 80px のように幅を固定したボタンや枠に、英語の長い文字列を流し込むとテキストが枠外に出ます。日本語では収まっていた幅が英語では足りなくなるのが原因です。

②高さの固定による折り返し詰まり：height: 40px のように高さを固定した領域で英語テキストが2行に折り返すと、下の行が見切れます。日本語は文字幅が均一なので折り返しの予測がしやすいですが、英語はプロポーショナルフォントを使うとさらに予測がずれます。

③フォントサイズとアルファベットの縦伸び：日本語フォントと英語フォントでは「同じフォントサイズでも実際の文字の高さ（アセンダー・ディセンダー）」が異なります。英語フォントは上下に余白が少ないため、line-heightの設定によっては文字が詰まって読みにくくなります。

この三種類のどれが起きているかを先に特定すると、対処が速くなります。ブラウザの開発者ツールで要素を選択し、Computed タブで実際の幅・高さ・overflow の状態を確認するのが最初のステップです。

固定サイズをやめる：min-width と min-height への切り替え

最も効果が高い対策は、width と height の固定値を min-width と min-height に置き換えることです。

css
/* 修正前 */
.button {
  width: 80px;
  height: 36px;
}

/* 修正後 */
.button {
  min-width: 80px;
  min-height: 36px;
  padding: 6px 16px;
}

min-width を指定すると、テキストが短い場合は最小幅を保ちつつ、長くなれば自動で広がります。padding を左右に設定することで、文字列の長さに関わらずボタン内の余白が一定に保たれます。

ただし「すべてのボタンを同じ幅に揃えたい」デザインの場合は、親要素のコンテナで幅を管理する方法が適しています。ボタン自体に width: 100% を設定し、ボタンを並べるコンテナ側で grid-template-columns や flex-basis を使って列幅を決めると、中身の文字列が変わっても揃いが崩れません。

テキストの折り返しと省略の判断基準

英語化したときに折り返しをどう扱うかは、UIの種類によって方針を変えます。

折り返しを許容する場面：説明文、ツールチップ、ダイアログ内のメッセージなど、高さが可変でよい要素。white-space: normal（デフォルト）のまま、min-height で最低限の高さだけ確保します。

折り返しを禁止して省略する場面：ナビゲーションのタブ、ステータスバーのラベルなど、レイアウト全体に影響する幅固定の要素。

css
.tab-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

text-overflow: ellipsis を有効にするには overflow: hidden と white-space: nowrap の三点セットが必要です。この設定で文字列が長くなると "Sett…" のように末尾が省略されます。ただし省略された文字は読めなくなるため、重要な情報のあるラベルには title 属性でフルテキストを持たせ、ホバー時に表示できるようにしておくと親切です。

どちらにするか迷うときの判断基準は「そのテキストが省略されたとき、プレイヤーは意味を理解できるか」です。「攻撃」→ "Att…" では意味が通じません。その場合は折り返しを許容してボタンを縦に広げるか、英語側で短い言い換えを用意する（"ATK" など）のが現実的です。

フォントの扱いと行高さの調整

英語フォントと日本語フォントを混在させると、line-height の見た目が変わります。特に Canvas を使ったゲームで ctx.fillText() でテキストを描画している場合、フォントファミリーを変えただけで文字の縦位置がずれて枠からはみ出すことがあります。

Canvasでの対処は、テキスト描画前に ctx.measureText(text) で文字列の実際の幅を取得し、描画位置を動的に計算する方法が基本です。

javascript
const text = "Settings";
const metrics = ctx.measureText(text);
const x = (canvasWidth - metrics.width) / 2; // 中央揃え
ctx.fillText(text, x, y);

HTMLベースのUIでは、英語フォントを Google Fonts などからロードした場合、フォントが読み込まれる前に描画が走るとシステムフォントにフォールバックして幅が変わることがあります。document.fonts.ready を待ってからUIを描画する処理を加えると、ちらつきと崩れの両方を防げます。

また、英語フォントは日本語と比べてディセンダー（g, y, p などの下に伸びる部分）の分だけ行の下に余白が必要になります。日本語テキストに合わせた line-height: 1.4 は英語で窮屈に見えることがあるので、1.5 から 1.6 を起点に調整するのが無難です。

翻訳テキストを組み込む前にやっておく構造チェック

英語テキストをゲームに流し込む前に、次の点をCSSとHTMLで確認しておくと手戻りが減ります。

  1. すべての固定幅・固定高さの洗い出し：開発者ツールの Elements パネルで width: height: の固定値を持つUI要素を特定します。px指定の幅は一覧化しておくと後で管理しやすくなります。
  1. 英語の長い文字列でのストレステスト：実際の翻訳テキストが届く前でも、"MMMMMM" や "Settings and Options" のような長めの仮文字列をUIに入れてみます。破綻する箇所が事前に分かります。
  1. overflow: visible の罠を確認：overflow をデフォルト（visible）のままにしていると、はみ出したテキストが他のUI要素の上に乗って見えてしまいます。UIコンポーネント単位で overflow: hidden か overflow: auto を明示する習慣をつけると、崩れが他の要素に波及しません。
  1. フレックスボックスの flex-shrink 確認：フレックスコンテナ内のアイテムはデフォルトで flex-shrink: 1（収縮可）です。英語テキストが長くなったときにアイコンや隣の要素が意図せず縮むことがあるため、縮んでほしくない要素には flex-shrink: 0 を指定します。

次の行動

手元のゲームUIで固定 width と height を使っている要素を一つ選び、min-width と min-height に置き換えて英語の長い仮テキストを入れてみてください。崩れが出た場所から順に対処することで、全体の修正範囲が自然と絞られます。多言語対応を前提に作ったHTMLゲームはZIPファイルやHTMLファイルのままアソバースに投稿・公開できるため、修正のたびに動作確認できる環境として活用してみてください。

マガジン一覧に戻る