英語にすると長くなる言葉、短くなる言葉：ゲームUIの翻訳

長くなる言葉、短くなる言葉は一方向ではない

日本語は一文字に多くの情報が入るため、文字数は少なくなりがちです。一方で、日本語の文字は全角で、一文字ずつがほぼ同じ幅を取ります。英語は文字ごとに幅が違う比例幅フォントで表示されることが一般的です。「文字数」と「画面上の幅」は別の量なので、文字数が少ないから幅も小さいとは限りません。

傾向として、名詞一語のラベルは英語のほうが短く収まりやすく、動詞を含む短い句や説明文は英語のほうが長くなりやすいと言われます。ただし、これは一般的な傾向にすぎません。訳語の選び方、フォント、文脈で逆転します。

次の表は、翻訳の一例を並べたものです。日本語の語は、公式作品の機能名として確認済みのものに近い言葉を選んでいます。ただし、英訳は説明のための例です。実際のボタン文言や英訳は作品ごとに異なる可能性があるので、作品を開いて確かめてください。

• ヒント、英語の一例：Hint、見る点：短い名詞。枠に余裕が出るか
• 投了、英語の一例：Resign、見る点：漢字二字が英字六字になる。幅の比較が必要
• 一時停止、英語の一例：Pause、見る点：四字が五字。幅は測らないと分からない
• 一手戻す、英語の一例：Undo move、見る点：二語になり、空白も入る
• 聴き直し、英語の一例：Listen again、見る点：英語のほうが明らかに長くなりやすい
• 招待リンクをコピー、英語の一例：Copy invite link、見る点：語数は増えるが、文字幅は近くなることもある

表から読み取れるのは、「英語は長い」という単純な話ではありません。名詞は英語のほうが短くなりやすく、動作を表す句は長くなりやすいという、ばらつきです。ばらつきがある以上、最も長くなる言葉だけを基準に枠を決めるか、枠のほうが言葉に合わせて伸びるようにするかを選ぶことになります。

設計で吸収する方法

文字幅の差を吸収する方法は、大きく五つに整理できます。どれも多言語UIの一般的な考え方です。アソバースの公式作品については、確認済みの範囲から「設計から読み取れること」だけを添えます。

1. 幅を固定しない

ボタンの幅を「何ピクセル」と決めると、その幅に収まる言葉しか入りません。最小幅を決めたうえで、中身に合わせて伸びるようにし、左右の余白は文字の外側に取ります。固定の高さも同じ問題を起こします。折り返しが起きる前提なら、高さも内容に合わせて伸びるほうが安全です。

2. 折り返しを許す

二語以上の句は、折り返して二行になる可能性があります。二行になっても隣の要素と重ならないように、周囲に余白を取っておきます。一行に収めるために文字を縮め続けると、今度は読みにくくなります。縮小は最後の手段と考えるのが無難です。

3. 溢れた分を逃がす

幅が足りないときに、内容を切らずにスクロールで見せる方法もあります。「WAVE / WAVE」は、狭い画面ではステップが横スクロールになるという仕様が確認されています。これは言語対応のために作られたとは限らず、理由は確認済み事項にありません。ただ、幅が足りないときに要素を削らず逃がす設計は、文字幅の変動にも通じる考え方です。

4. 文字だけに頼らない

意味を文字だけで伝えると、言葉が伸び縮みしたときに画面全体が影響を受けます。色、形、アイコンを併用すれば、ラベルが多少変わっても意味は保たれます。「灯りのチェス」には駒の動き方ガイドがあります。ガイドの具体的な見せ方は確認済み事項にないため、文字と図のどちらで説明しているかは作品を開いて確かめてください。

5. 切り替わる部分と切り替わらない部分を分けて考える

アソバースの日本語・英語の表示切り替えでは、作者が入力した作品名や紹介文は書き換えられません。サイトのUIは切り替わり、作者の文章はそのまま残ります。長さの予測がつかない領域（作者の文章）と、翻訳で長さが動く領域（UI）が同じ画面に並ぶということです。作者の文章が日本語のまま英語UIの隣に出ても、レイアウトが破綻しないようにしておく必要があります。

自分で測る手順：文字幅の比較

ここからは、読者が自分で行う実験の設計書です。この記事では結果を示しません。測った値は、読者の環境のフォントによって変わります。

問い

「自分が気になるラベルのうち、英語表示にしたとき、日本語表示のときの枠に収まらなくなるものはどれか」を確かめます。

準備するもの

• ブラウザ（普段使っているもの）
• 比較したい日本語と英語のラベルの組（5〜10組）
• 次のHTMLを保存した一つのファイル

<!doctype html>
<meta charset="utf-8">
<body>
<textarea id="t" rows="6" cols="50">ヒント | Hint
一手戻す | Undo move
投了 | Resign</textarea>
<p>枠の幅(px): <input id="w" type="number" value="120">
フォント: <input id="f" value="16px sans-serif"></p>
<button id="go">測る</button>
<pre id="out"></pre>
<script>
const ctx = document.createElement("canvas").getContext("2d");
document.getElementById("go").onclick = () => {
  const w = +document.getElementById("w").value;
  const pad = 24; // 左右の余白の合計(仮)
  ctx.font = document.getElementById("f").value;
  const lines = document.getElementById("t").value.split("\n");
  let o = "";
  for (const l of lines) {
    const [ja, en] = l.split("|").map(s => s.trim());
    if (!en) continue;
    const a = ctx.measureText(ja).width;
    const b = ctx.measureText(en).width;
    const ok = x => x + pad <= w ? "収まる" : "はみ出す";
    o += `${ja}: ${a.toFixed(0)}px (${ok(a)}) / `
      + `${en}: ${b.toFixed(0)}px (${ok(b)})\n`;
  }
  document.getElementById("out").textContent = o;
};
</script>
</body>

このコードは、日本語と英語の文字列をそれぞれ描画したときの横幅を測り、指定した枠に余白を足して収まるかを判定します。サーバーも外部ライブラリも使いません。

手順

1. テキスト欄に「日本語 | 英語」の形で、ラベルの組を一行ずつ書きます。
2. 枠の幅を、確かめたいボタンに近い値にします。分からなければ数通り試します。
3. フォント欄は、ゲームの文字に近い見た目のものにします。ブラウザ既定のままだと、日本語のフォントが代替のものになる場合があります。
4. 「測る」を押し、各行の幅と判定を書き留めます。
5. 枠の幅を変えて、判定が入れ替わる境目を探します。

記録の取り方

次の項目を一組ずつ表にします。

• ラベルの組（日本語・英語）
• 日本語の幅、英語の幅
• 判定が入れ替わる枠の幅
• 使ったフォントと文字サイズ

同じ条件で二、三回測り、値が安定しているかも確認します。フォントの読み込みが遅れると、測定のたびにずれることがあります。

結果の読み方

• 英語のほうが幅が大きい組が多いなら、枠を英語基準で作るか、折り返しを許す設計が必要になります。
• 日本語のほうが大きい組が多いなら、日本語基準の枠で足りる可能性が高くなります。
• 組によってばらつくなら、固定幅を避ける理由がそのまま裏づけられたことになります。

「どの程度の余裕を持たせるか」は、読者が自分で決める設計上の判断です。たとえば二割の余裕を持たせると決めるなら、英語の幅に1.2を掛けた値が枠に収まるかで判定します。

起こりやすい誤り

• ブラウザの拡大率が条件によって違い、幅が比較できなくなる。
• 日本語フォントが代替フォントになり、実際のゲームと幅が変わる。
• 英語を一例だけで決めてしまう。訳語は複数あるので、短い訳と長い訳の両方を測ると、幅の振れ方が分かります。
• 余白（パディング）の値を現実のボタンと違う値にしてしまう。

公式作品で表示の崩れを確かめる

測定ツールで当たりをつけたら、実際の作品で確かめます。アソバースの13作品は、サイトの日本語／英語設定に合わせて表示を切り替えます。さらに、言語を変えたりプレイ画面を拡大したりしても進行が保たれる仕様です。日本語と英語を同じ局面で見比べられるので、やり直しを気にせず確かめられます。

確かめる場所

文字が多くなりやすい場所は、あらかじめ見当がつきます。

• 「潮目のオセロ」の理由付きヒント
• 「灯りのチェス」の取った駒と全棋譜の表示
• 「潮だまり」の絵付き図鑑と観察ノート
• 「時計じかけの台所」の六つのレシピ
• 「こだまの森」の聴き直しや一時停止などの操作

どの文字がどう表示されるかは確認済み事項にありません。各作品で言語を切り替え、実際に見て確かめてください。

記録のしかた

画面幅を広い・中くらい・狭いの三段階にします。それぞれで言語を日本語と英語にし、ボタンやラベルごとに次の四つのいずれかを記録します。

• 収まる
• 折り返す
• 切れる
• 重なる

一作品あたり、三段階の幅と二つの言語で六回の観察になります。ブラウザのウィンドウ幅を変えるか、プレイ画面を拡大して近い状況を作れます。画面を拡大すると有効な画面幅が狭くなるのと同じ状況になるため、狭い画面の確認として使えます。

読み方

日本語では収まるのに英語で切れる箇所は、幅の固定が疑われる場所です。逆に、どの条件でも収まる場所は、余裕を持たせた設計になっている可能性があります。ただし「設計がそうなっている」と断定するには内部を見る必要があるため、ここでは観察できた範囲にとどめます。

タイトルの文字組みにも注目

作品ごとにタイトルの文字組みが異なり、縦組みの明朝、手描き文字、郵便ラベル、夜の標識、光の幾何学、メニュー風などがあります。縦組みの日本語タイトルと英語を並べたとき、どのように見えるかは作品を開いて確かめるしかありません。作者が入力した作品名は切り替わらないため、タイトルまわりは言語設定の影響を受けにくい領域でもあります。

作る側が考えておくこと

自作のゲームを投稿する場合、ゲーム内の言語を何で切り替えるかは作者が決めることです。アップロード作品がサイトの言語設定を受け取れるのか、受け取る方法があるのかは、確認済みの案内に載っていません。「現在の案内で確認する」のが確実です。

仮に自分で言語切り替えを持たせるなら、次の順で考えると破綻しにくくなります。

1. 文言をコードの中に直接書かず、言語ごとの表にまとめる。
2. 枠の幅を固定せず、最小幅と余白だけを決める。
3. 一番長い訳を入れた状態で確認する。
4. 狭い画面と拡大した画面でも見る。

四番目まで確認して初めて、「訳が長くなっても大丈夫」と言える状態になります。

次の行動

まず、上のHTMLを保存し、自分が気になるラベルを五組ほど入れて幅を測ってみてください。次に、サイトの言語を切り替えて、「理由付きヒント」や「全棋譜の表示」のような文字の多い場所を、三段階の画面幅で見比べます。収まらない箇所が見つかったら、枠のどこが固定されていそうかを考えてみてください。