縦書きのゲームUIは成立するか：自分で確かめる、日本語の組み方の実験設計

「成立する」を三つに分けて考える

「成立するか」をそのまま測ることはできません。そこで、ゲームUIで起こる三つの行為に分けます。

• 読む：ラベルや説明文を意味として理解する。
• 探す：複数の選択肢から、目的のものを見つける。
• 押す：狙った場所を、間違えずに素早く操作する。

縦組みが有利になりやすいのは「読む」のうち、タイトルや短い名前のように、雰囲気ごと味わう場面です。逆に、数字や英字、長い説明文は横組みより負担が増えることがあります。ただし、これは傾向についての見立てであり、本当にそうなるかは測ってみないと分かりません。

三つのうち「探す」と「押す」は、ゲームでは特に重要です。メニューは一度しか見ないタイトル画面と違い、ヒントや一手戻すのように何度も押す操作があるからです。縦書きの美しさが、繰り返し使うときの負担に変わらないか。これを実験の中心に置きます。

設計から読み取れること：アソバースの作品群

アソバースの公式作品13本では、作品ごとにタイトルの文字組みが異なります。確認済みの範囲では、縦組みの明朝、手描き文字、郵便ラベル、夜の標識、光の幾何学、メニュー風などがあります。縦組みはその選択肢の一つとして使われています。ここから読み取れるのは、文字組みを作品の雰囲気を伝える部品として扱っているということです。

ここで区別しておきたいことが二つあります。

1. タイトルの文字組みと、プレイ中の操作UIは別物です。 どの作品のタイトルが縦組みか、プレイ画面のボタンまで縦組みかどうかは、この記事では述べません。作品を開いて確かめてください。
2. カバー画像は生成したアートワークで、ゲーム画面のスクリーンショットではありません。 カバーの文字組みから、実際の操作画面を想像しないようにします。

13作品に共通する仕様にも、実験の観点になるものがあります。表示は日本語と英語の設定に合わせて切り替わり、言語を変えてもプレイ画面を拡大しても進行は保たれます。「動きを抑える」設定にも対応しています。そこで、次の点を作品を開いて確かめる項目にできます。

• 日本語から英語へ切り替えたとき、文字組みの印象がどう変わるか。
• 画面を拡大したとき、ラベルが読みやすいまま押しやすさも保たれるか。
• 「動きを抑える」を有効にしたとき、見た目の手がかりが不足しないか。

これらの答えは、各作品の画面の中にあります。結果をメモしておけば、自分のゲームを作るときの判断材料になります。

最小の比較ページで測る

作品を見るだけでなく、縦と横を同じ条件で比べる小さなページを用意します。次のコードをメモ帳などに貼り、拡張子を .html にして保存し、ブラウザで開くと動きます。外部ライブラリもサーバーも使いません。

<!doctype html>
<meta charset="utf-8">
<title>組み方比較</title>
<style>
body{font:20px serif;margin:16px}
#menu{display:flex;gap:8px;margin:12px 0}
.v button{writing-mode:vertical-rl;padding:12px 8px}
.h button{padding:8px 12px}
button{font:inherit;min-width:44px;min-height:44px}
</style>
<p>指示：<b id="goal"></b>　<button id="mode">縦/横を切替</button></p>
<div id="menu" class="v"></div>
<pre id="log"></pre>
<script>
const names=["はじめる","つづき","ヒント","せってい","もどる"];
const menu=document.getElementById("menu");
const rows=["mode,target,ok,ms"];
let goal,t0;
function next(){
  const list=[...names].sort(()=>Math.random()-.5);
  goal=names[Math.floor(Math.random()*names.length)];
  menu.replaceChildren(...list.map(n=>{
    const b=document.createElement("button");
    b.textContent=n;
    b.onclick=()=>{
      rows.push([menu.className,goal,n===goal,Math.round(performance.now()-t0)].join(","));
      document.getElementById("log").textContent=rows.join("\n");
      next();
    };
    return b;
  }));
  document.getElementById("goal").textContent=goal;
  t0=performance.now();
}
document.getElementById("mode").onclick=()=>{
  menu.className=menu.className==="v"?"h":"v";
  next();
};
next();
</script>

画面の上部に「指示」として目的のボタン名が出ます。その名前のボタンを押すと、モード（vが縦、hが横）、目的、正誤、かかったミリ秒が下のログに一行ずつ追加されます。ボタンの並びは毎回入れ替わるため、位置を覚えて押すことはできません。ログの内容はCSV（カンマ区切り）の形なので、表計算ソフトに貼れます。

手順と記録のしかた

比較が公平になるように、次の手順で進めます。

1. 同じ端末、同じ画面の向き、同じブラウザの倍率で行います。
2. 縦と横を交互に切り替えます。たとえば「縦→横→横→縦」の順を決めておくと、慣れの影響が片側に偏りません。
3. 各モードで最初の5回は練習として、集計から外します。
4. その後、各モード20回ずつを目安に記録します。
5. 誤って別のボタンを押した回は、ok が false で残るので、そのまま集計に使います。

記録の単位は、1回ごとのかかった時間（ミリ秒）と、正誤の二つです。平均だけでなく中央値も出してください。たまたま迷った一回が平均を大きく引き上げるためです。

スマートフォンとパソコンでは、押す動作が違います。タッチで押す場合と、マウスやキーボードで押す場合は、別々に記録します。保護者の方がお子さんと行うときは、大人と子どもで結果を混ぜず、それぞれ別の表にします。

結果の読み方と、起こりやすい誤り

出た数字は、次のように読みます。

• 中央値の差が小さく、誤タップ率も同程度の場合： 少なくともこの五つのラベルでは、縦組みは操作の妨げになっていません。雰囲気を優先して選べます。
• 縦組みで時間が長く、誤タップも多い場合： ラベルを短くする、ボタンを大きくする、よく押す操作だけ横組みにするなどの対策を検討します。
• 時間は同程度で誤タップだけが多い場合： 文字の読み取りより、ボタンの形や間隔に原因がある可能性があります。間隔を広げて再測定します。

どの場合も、一人の少ない回数の結果は偶然に左右されます。結論を急がず、日を変えて同じ測定を繰り返してください。

起こりやすい誤りは次のとおりです。

• 練習不足のまま比べる： 慣れた横組みが有利に見えやすく、縦組みの評価が低めに出ます。
• ラベルが単純すぎる： 五つのひらがなは読みやすい条件です。実際のゲームで数字、英字、長音「ー」、句読点を含むなら、それらを含めて測ります。縦組みでの数字は、桁の扱い（縦中横と呼ばれる、数字を横向きのまま並べる指定）で見え方が変わります。
• 並び順の方向を見落とす： 縦組みの文章は右の行から左へ進みます。ボタンも右から左に並べるべきかは、画面ごとに検討する必要があります。この比較ページでは並びを揃えているため、並び順を変えた条件は追加の実験として行えます。
• 手で文字が隠れる： 持ち方によっては、押す指が他のボタンの文字を隠すことがあります。左右の手で持ち替えて確かめてください。
• 言語や拡大を考えない： 英語表示や拡大表示でも崩れないかを、公式作品とあわせて確かめます。

次の行動

まず上のコードで縦と横の差を自分の端末で測り、ログを残してください。次にアソバースの公式作品を開き、タイトルの文字組みが縦組みの作品を探して、プレイ画面の操作UIがどう組まれているかを自分の目で確かめます。自分のゲームに縦書きを入れるなら、タイトルや短いラベルから試し、操作の多い部分は測定してから決めるのが安全です。

参考資料

• W3C「CSS Writing Modes Level 3」（縦書きを指定する writing-mode などの仕様）