マガジン

「日本語で」と付けた場合のUI文言:どこに英語が残るか

遊びをつくる

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

ゲームを実際に動かしながら、下書きの説明カードを鉛筆で確かめる手元。
記事のテーマをもとに制作したAI生成の写真風イメージ。

ゲーム生成の依頼に「日本語で」と一行足すと、見出しやボタンは日本語になりやすいと考えられます。気になるのは、プレイを進めた先で出る文字です。ゲームオーバーの表示、ハイスコア更新の知らせ、確認ダイアログ、ブラウザのタブ名、読み上げ用のラベルなどに、英語が混ざっていないかを確かめたくなります。 この記事は結果を報告するものではありません。「言語指定の抜けは、どの場所で起きるのか」を、読者が自分の手元で探すための実験の設計書です。条件は、指定なし、「日本語で」の一語、範囲を明示した指定の3つです。生成物を同じ基準で調べ、英語が残った場所を地図にしていきます。 先に見方を決めておきます。初期画面が日本語かどうかは、探す対象ではありません。見に行くのは、プレイして状態が変わった後に初めて現れる文字と、画面に直接出ない文字です。

この記事の目次
  1. 問いと条件を決める
  2. 準備するもの
  3. 英語が残りうる場所の地図を先に作る
  4. 手順
  5. 記録の取り方と結果の読み方
  6. 起こりやすい誤り
  7. 次の行動

問いと条件を決める

問いは次の一文に絞ります。「同じゲーム仕様の依頼で、言語指定の書き方を変えると、生成されたHTMLの中で英語が残る場所は変わるのか」。

変えるのは、依頼文の末尾の一行だけです。基本の依頼文は次のものを使います。

ブラウザで遊べる30秒の的当てゲームを、単一のHTMLファイルで作ってください。スコア表示、残り時間、一時停止、ゲームオーバー、ハイスコア、もう一度遊ぶボタンを付けてください。外部ライブラリや外部通信は使わないでください。

この末尾に足す一行で、次の3条件を作ります。

  • 条件A:何も足さない(指定なし)
  • 条件B:「日本語で。」だけを足す
  • 条件C:「画面に出る文字(ボタン、ダイアログ、ツールチップ、読み上げ用ラベル、タブ名)はすべて日本語で。」を足す

基本の依頼文自体が日本語なので、AとBの差は小さいかもしれません。差が出ないこと自体も、読み取れる材料になります。依頼文の言語の影響を切り分けたい場合は、基本文を英語に書き換えた系列を別に作ります。その場合も、系列の中では基本文を揃えてください。

固定するものは次のとおりです。

  • ゲームの仕様(上の基本文)
  • 使うモデルと設定
  • 毎回新しい会話で生成すること

各条件で3回ずつ、合計9本を生成します。

準備するもの

  • 上の基本文と、3条件ぶんの末尾の一行
  • 生成されたHTMLを保存するフォルダ(ファイル名は「条件_回」、たとえば C_2.html)
  • 英語の候補を機械的に拾う確認ページ(次の節のコード)
  • 記録用の表(スプレッドシートで足ります)
  • 最新のブラウザ

確認ページは生成物とは別に、自分用に1枚だけ作ります。外部通信はせず、貼り付けたHTMLの文字列を読むだけです。

英語が残りうる場所の地図を先に作る

調べる場所を先に列挙しておくと、見落としが減ります。次の表を記録用の分類として使ってください。

  • 初期画面のラベル・ボタン、見つけ方:開いてそのまま見る、画面で見えるか:見える
  • 動的に書き換わる文字(スコア、残り時間の接頭辞や単位)、見つけ方:プレイ中に見る。HTMLに日本語があっても、スクリプトが英語で上書きすることがあります、画面で見えるか:見える
  • 状態が変わる表示(一時停止、ゲームオーバー、新記録)、見つけ方:実際にその状態まで進めて見る、画面で見えるか:見える
  • alert や confirm のダイアログ、見つけ方:リスタートや終了の操作をして見る、画面で見えるか:見える
  • <title>(タブ名)、見つけ方:タブの表示を見る、画面で見えるか:見える
  • aria-label、alt、title 属性、見つけ方:確認ページで拾う。title はマウスを乗せると出ます、画面で見えるか:一部のみ
  • 入力欄の placeholder、value、見つけ方:確認ページで拾う、画面で見えるか:一部のみ
  • lang 属性、見つけ方:確認ページで見る、画面で見えるか:見えない
  • 単位・略語(pts、sec、s など)、見つけ方:プレイ中に見る、画面で見えるか:見える

コード内のコメント、変数名、関数名、CSSのクラス名は対象外です。利用者の目に触れないためです。コンソール出力(console.log)も画面には出ないので、数えるなら別枠にしてください。

手順

  1. 3条件×3回で9本を生成し、1本ずつ保存します。生成するたびに会話は新規にしてください。
  2. 保存した順にブラウザで開き、次の操作を必ず通します。
  • 開始する
  • ゲームの途中で一時停止し、再開する
  • 時間切れでゲームオーバーにする
  • ハイスコアが更新される状況を作る
  • 「もう一度遊ぶ」を押す
  1. 操作の途中で英語を見つけたら、記録表に1行ずつ書きます。目で見つけたものは「見える」に分類します。
  2. 次に、9本それぞれのHTMLの全文を確認ページに貼って「調べる」を押します。画面には出ない属性やスクリプト内の文字列の候補が並びます。
  3. 候補が本当に英語の文言なのか、ただの識別子やフォント名なのかを判定し、記録表に追記します。

確認ページのコードです。1つのHTMLファイルとして保存し、ブラウザで開けば動きます。

html
<!doctype html>
<meta charset="utf-8">
<title>英語残りチェッカー</title>
<textarea id="src" rows="10" cols="70" placeholder="生成されたHTMLを貼る"></textarea><br>
<button id="go">調べる</button>
<pre id="out"></pre>
<script>
const hits = [];
const add = (kind, text) => {
  const t = text.trim();
  if (/[A-Za-z]{3,}/.test(t)) hits.push(kind + "\t" + t.slice(0, 60));
};
document.getElementById("go").onclick = () => {
  hits.length = 0;
  const doc = new DOMParser().parseFromString(
    document.getElementById("src").value, "text/html");
  hits.push("lang属性\t" + (doc.documentElement.lang || "(なし)"));
  // 画面に出るテキスト(script・styleは除く)
  const w = doc.createTreeWalker(doc, NodeFilter.SHOW_TEXT);
  while (w.nextNode()) {
    const p = w.currentNode.parentNode.nodeName;
    if (p !== "SCRIPT" && p !== "STYLE") add("本文/タイトル", w.currentNode.nodeValue);
  }
  // 画面に直接出ない属性
  const attrs = ["title", "alt", "aria-label", "placeholder", "value"];
  doc.querySelectorAll("*").forEach(e => attrs.forEach(a => {
    if (e.hasAttribute(a)) add("属性 " + a, e.getAttribute(a));
  }));
  // スクリプト内の文字列リテラル(空白を含む、または大文字始まりのもの)
  doc.querySelectorAll("script").forEach(s => {
    for (const m of s.textContent.matchAll(/(["'`])((?:\\.|(?!\1).)*?)\1/g)) {
      if (/\s/.test(m[2]) || /^[A-Z]/.test(m[2])) add("script文字列", m[2]);
    }
  });
  document.getElementById("out").textContent = hits.join("\n");
};
</script>

このコードは候補を拾うだけで、判定はしません。フォント名の Arial、ID名、単位の記号なども拾います。逆に、文字列を "Sc" + "ore" のように分割して組み立てた場合や、画像に描かれた文字は拾えません。最終判断は、目で見た記録と合わせて人が行います。

記録の取り方と結果の読み方

記録は1行を1件にします。列は次の6つです。

  • 条件(A/B/C)
  • 回(1〜3)
  • 場所の分類(上の地図の項目名)
  • 見つけた文字列
  • 判定(英語の文言/意図的な英字/誤検出)
  • 見つけ方(目視/確認ページ)

同じ文字列が同じ生成物で複数回出た場合は、1件にまとめます。数える単位は「生成物ごと、場所ごと」です。

集計では、行を場所の分類、列を条件にして、「3回中何回出たか」を書き込みます。たとえば「ゲームオーバー表示」の行に、A=2/3、B=1/3、C=0/3と入る形です。この数字は例示であって、実際の結果ではありません。

読み方の基準は、事前に決めておきます。

  • AからB、Cへ進むほど同じ場所の件数が減る場合。 指定の範囲が効いている可能性があります。次は、Cの文言のどの語が効いたのかを切り分けます。「ダイアログ」を抜いたC'を作って比べる方法があります。
  • BとCの両方で同じ場所が残る場合。 指定の書き方では届きにくい場所です。そこだけを名指しした一行を足す追加実験の候補になります。
  • 3回中1回だけ出た場合。 ばらつきの可能性があります。回数を増やして再確認するまでは、傾向とも言い切れません。
  • 条件を問わず3回中3回出る場合。 定型的に書かれやすい場所かもしれません。lang 属性や <title> がここに入るかどうかは、集計してから判断します。

「意図的な英字」の線引きも先に決めます。たとえば、ゲームの固有名詞、HP や FPS のような略語、単位の s を許容するかどうかです。許容するものを決めずに集計を始めると、あとから都合に合わせて判定が動いてしまいます。

起こりやすい誤り

  • 初期画面だけで判定する。 英語が出やすいのは、状態が変わった後の表示です。ゲームオーバーまで必ず進めてください。
  • 確認ページの出力をそのまま英語残りの数にする。 識別子やフォント名も拾うため、判定の列で仕分けるまでは数えられません。
  • 3回の結果で差を断言する。 9本は傾向を見るのに足りても、確率を語るには足りません。差が小さいときは、回数を増やして再確認してください。
  • 末尾以外も書き換える。 条件ごとに基本文を少しずつ直してしまうと、何が効いたのか分かりません。差分は1行だけにします。
  • 会話を引き継ぐ。 前の生成物が文脈に残ると、後の条件が前の条件の影響を受けます。毎回新しい会話で始めてください。
  • 後から「日本語に直して」と追加で頼む。 その時点で別の実験になります。今回は一度の生成の結果だけを見ます。
  • 日本語の自然さまで同時に採点する。 「ゲーム終わり」のような言い回しの違和感は別の軸です。今回は、英語が残っているかどうかだけを数えます。

次の行動

まず条件Aから3本を生成し、ゲームオーバーまで通して遊んで、見える範囲の英語を記録表に書き出してみてください。そのあとに確認ページへ貼ると、画面に出ない英語の位置も見えてきます。

自作ゲームをアソバースに投稿するときは、入力→表示の確認→公開の3段階のうち「表示の確認」でも、状態が変わる画面まで一通り遊んで確かめてください。