英語の文字幅を前提に画面を作る：日本語より長くなる言葉

先に押さえる：文字数ではなく幅で考える

日本語の全角文字は、等幅に近い扱いで1文字が同じ幅を取ります。一方、英語は文字ごとに幅が違い、「i」や「l」は細く、「m」や「w」は太くなります。さらに英語は空白のところで折り返すので、長い単語が1つあると、その単語の途中では折り返されず、枠からはみ出します。

つまり「文字数が増えたかどうか」では判断できません。見るべきものは次の3つです。

• 同じフォント・同じ大きさで並べたときの、表示される幅
• ボタンのように折り返したくない場所と、説明文のように折り返してよい場所の区別
• 長い単語が1語で枠を超えないか

おおむね、短い日本語ラベルは英語にすると幅が増える傾向があり、長い日本語の文は英語にするとさらに長くなる傾向があります。ただし例外も多く、「戻す」に対する「Undo」のように、幅がほとんど変わらない語もあります。傾向は目安にとどめ、実際の値はこのあと自分で測ります。

もう一つ、フォントの違いも幅に影響します。日本語を表示するフォントと英語を表示するフォントが別になる環境では、同じ「16px」でも見た目の幅が変わります。測定は、実際にゲームで使うフォント指定で行うのが原則です。

手順1：自分のラベルの幅を測る

最初に、ゲーム内に出てくる文言を洗い出して一覧にします。ボタン、メニュー、見出し、状態表示、確認ダイアログの文言が対象です。数が多ければ、まず「横幅が決まっている場所」に出る文言だけで構いません。ボタン、タブ、ヘッダーの題名、ステータスの小さな表示です。

次に、日本語と英語の組を、下の測定ページに書き込みます。ここに並べたラベルは測り方を示すための例です。自分のゲームの文言に置き換えてください。

1. 次のコードを measure.html という名前で保存します。
2. pairs の中身を、自分のゲームの「日本語, 英語」の組に書き換えます。
3. ブラウザで開き、表の「比」の列を見ます。
4. ゲーム本体と同じフォント・大きさ（下のコードの 16px system-ui の部分）に合わせて、もう一度測ります。

<!doctype html>
<meta charset="utf-8">
<style>
 body{font:16px system-ui,sans-serif;padding:16px}
 table{border-collapse:collapse}
 td,th{border:1px solid #888;padding:4px 8px;text-align:right}
 td:first-child,td:nth-child(2){text-align:left}
</style>
<table id="t"><tr><th>日本語<th>English<th>日本語幅<th>英語幅<th>比</tr></table>
<script>
const pairs=[["戻す","Undo"],["ヒント","Hint"],["一時停止","Pause"],
 ["投了","Resign"],["続ける","Continue"],
 ["招待リンクをコピー","Copy invite link"]];
const c=document.createElement("canvas").getContext("2d");
c.font="16px system-ui,sans-serif";
for(const [ja,en] of pairs){
 const a=c.measureText(ja).width, b=c.measureText(en).width;
 const r=document.createElement("tr");
 r.innerHTML=`<td>${ja}<td>${en}<td>${a.toFixed(1)}<td>${b.toFixed(1)}<td>${(b/a).toFixed(2)}`;
 document.getElementById("t").append(r);
}
</script>

記録の取り方は次のとおりです。

• 単位はピクセルで、表に出る数値をそのまま写します。
• 測定は、使うフォントごとに1回ずつ行います。端末で表示が変わる可能性があるため、手元のパソコンとスマートフォンの2か所で測れると確実です。
• 「比」が1より大きい行は、英語のほうが幅を取る語です。比が大きい順に並べ替えて、上位の語を「要注意リスト」にします。

結果の読み方も決めておきます。比がほぼ1の語は、特別な対応なしで済む可能性が高いです。比が明らかに大きい語は、次の手順で伸びる前提の枠に入れます。ここで出る数値は、フォントや環境で変わります。他人の測定値を借りず、自分の環境で出た値だけを根拠にしてください。

手順2：枠を「伸びる前提」で組み直す

要注意リストができたら、固定幅になっている場所を探します。典型的なのは、ボタンに width: 80px のような固定値を指定している箇所です。日本語の2文字がぴったり収まる幅に合わせていると、英語では確実に窮屈になります。

1. 固定の width を、min-inline-size（最低限の幅）に置き換えます。これで日本語では最低幅に収まり、英語では内容に合わせて広がります。
2. ボタンが並ぶ行は flex-wrap: wrap にして、収まらなければ次の行へ送ります。
3. ボタン内の文字が長くなっても枠を超えないように、overflow-wrap を指定します。
4. 見出しや題名は、折り返してもよい前提で高さを固定しません。

.toolbar{display:flex;flex-wrap:wrap;gap:.5em}
.btn{
  min-inline-size:5em;
  padding:.5em 1em;
  line-height:1.3;
  white-space:normal;
  overflow-wrap:anywhere;
}
.title{min-width:0;overflow-wrap:break-word}

overflow-wrap: anywhere は、はみ出しそうな長い単語を途中で折ることを許すための保険です。普段は単語の途中で折れないので、見た目への影響は最小限にとどまります。

注意したいのは、高さの固定です。height: 40px のように縦も固定していると、折り返した2行目が枠の外へ出ます。縦は min-block-size に変えるか、padding と line-height だけで決めます。

ゲーム画面がキャンバス（<canvas>）に文字を描く作りの場合は、CSSの wrap が効きません。描く前に measureText で幅を測り、枠に収まらなければ文字を小さくするか、描く行を分ける処理を自分で書く必要があります。手順1の測定がそのまま使えます。

手順3：長めの文字列で、先に壊してみる

英訳がまだ手元にない段階でも、レイアウトの余裕は確かめられます。表示用の文字列を機械的に長くして、画面が崩れる場所を先に洗い出す方法です。

1. 文言を一か所の関数（例：t("undo")）から取り出す作りにします。直接文字列を書き散らしていると、この確認ができません。
2. テスト用のモードを一つ作り、すべての文言を「元の文字列＋余計な文字」にして返します。
3. そのモードで、すべての画面を一巡します。

const TEST_LONG = true;               // 確認時だけ true
const t = (s) => TEST_LONG ? s + " ····" : s;

付け足す量は、手順1で測った比の最大値を目安に決めます。「だいたい1.5倍」と思うなら、元の文字列の半分ほどを足します。日本語のまま長くするだけでも、固定幅の枠がどこにあるかは見つかります。

この方法は、本物の英訳の代わりにはなりません。単語の切れ目や長い単語の有無は、実際の英文でないと分からないためです。あくまで「枠が伸びる作りになっているか」の確認と考えてください。

手順4：実際に英語へ切り替えて確かめる

英語の文言が用意できたら、切り替えて画面を一巡します。確認する項目を決めておくと、見落としが減ります。

1. 英語に切り替え、メニュー、プレイ中、結果表示、確認ダイアログの順に開きます。
2. 各画面で、文字が枠から出ていないか、他の要素に重なっていないかを見ます。
3. ブラウザの幅を狭くします。スマートフォンの縦持ちを想定した幅で、ボタン行が折り返すかを見ます。
4. ブラウザの拡大（文字や画面の拡大）をかけて、同じ確認をします。
5. プレイの途中で言語を切り替え、進行が失われないかを見ます。
6. 日本語に戻して、元の見た目が崩れていないかを見ます。

記録は、画面ごとに「問題なし／はみ出し／重なり／折り返しで高さが崩れた」のどれかを書き、問題のある行にはその文言も添えます。これを1周で終えず、直したあとにもう1周します。直した箇所が別の箇所を崩すことがあるためです。

手がかりとして、アソバースの公式作品の作り方を参考にできます。公式作品13本は、サイトの日本語／英語設定に合わせて表示を切り替え、言語変更とプレイ画面の拡大で進行を保つ設計になっています。さらに「WAVE / WAVE」は、狭い画面ではステップが横スクロールになります。幅が足りないときに無理に詰めず、スクロールという逃げ道を用意する考え方です。実際にどの画面がどう変わるかは、作品を開き、言語を切り替えて、自分の目で確かめてください。

自作ゲームを公開する場合は、一つ区別が必要です。アソバースでは、作者が入力した作品名や紹介文は表示切り替えで書き換わりません。サイトの言語設定は、ゲームの中の文言まで自動では翻訳しません。英語で遊べるようにするなら、ゲームの内側に言語の切り替えを持たせるのが基本です。ゲームがサイトの言語設定を受け取れるかどうかは、確認済みの範囲にないため、現在の案内で確認してください。

判断基準とよくある失敗

直すかどうかに迷ったときは、次の基準で決めます。

• 枠から文字が出る、判断：必ず直す。枠を伸ばすか、折り返しを許す
• 折り返して2行になるが読める、判断：高さが固定されていなければ許容する
• 重要なボタンが画面外へ出る、判断：必ず直す。行の折り返しかスクロールを入れる
• 文言そのものが長すぎる、判断：レイアウトではなく、短い言い換えを検討する

よくある失敗は次のとおりです。

• 英訳を一語ずつ対応させて、長い名詞句をボタンに入れる。ボタンでは動詞一語か、短い名詞に言い換えると収まりやすくなります。
• 日本語の見た目に合わせた固定幅を、あとから変えようとして一部だけ直し、揃わなくなる。幅の方針は最初に一か所で決めます。
• 数字や単位を、文章に埋め込んで翻訳する。順序が変わる言語もあるため、数字の部分は別の要素に切り出すと扱いやすくなります。
• 文字を小さくして押し込み、読みづらくなる。縮小は最後の手段にします。
• 自分の端末だけで確認し、他の端末で崩れる。フォントが違うと幅も変わります。

文言を短くする工夫も、レイアウトと同じくらい効きます。「招待リンクをコピー」のような長いラベルは、状況が明らかなら「コピー」だけでも通じることがあります。ただし、短くしすぎて意味が曖昧になっては本末転倒です。短くするか、場所を広げるかは、測った幅と画面の余裕を見て決めてください。

次の行動

まず、自分のゲームの操作ボタンを5〜10個選び、手順1の測定ページで日本語と英語の幅を測ってみてください。比の大きい上位3つが、最初に直す場所です。固定幅の指定を伸びる前提に置き換えたら、狭い幅と拡大表示の両方で英語表示を確認します。