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

作品名を縦に組むと似合うのはどんな名前か：文字数と字形で確かめる実験

遊びをつくる

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

活版のような抽象的な字形とローラーを並べ、太さや間隔を検討する写真風イメージ。
記事のテーマをもとに制作したAI生成イラスト。

タイトル画面を作っていて、作品名を縦に組みたくなる場面を考えてみます。縦組みは落ち着いた和の雰囲気を出しやすく、細長い余白も使えます。ところが「ミルク・ティーの夜」のように、長音符や中黒を含む名前を縦にした途端、読みにくくなることがあります。同じ手法でも、名前によって似合うものと似合わないものがありそうです。 この記事が確かめるのは、縦組みの適性は文字数と字形のどちらに強く左右されるのかという問いです。感覚で「なんとなく合う」と決める代わりに、自分の候補名を同じ条件で並べ、採点して比べます。結果はこの記事には書きません。手元の名前と環境で答えを出すための、実験の設計書です。 作業に使うのはブラウザと短いHTMLだけです。ひとりで30分ほど、他の人にも見てもらうなら少し長くかかります。

この記事の目次
  1. 縦組みの適性は何で決まるのか
  2. 準備：候補名と表示用ページを用意する
  3. 手順：条件をそろえて、順番に見る
  4. 記録の取り方：5項目を0〜2点で付ける
  5. 結果の読み方と、起こりやすい誤り
  6. 次の行動

縦組みの適性は何で決まるのか

仮説は二つあります。

  • 文字数仮説：短すぎると縦に細い線のようになり、長すぎると画面の高さに収まらない。ちょうどよい字数の帯がある。
  • 字形仮説：字数よりも、縦組みで形が変わる文字（長音符、中黒、小書きのかな、英数字、記号）の有無が効く。

縦組みの高さは、画面の高さで決まります。文字サイズ36px、字間を文字サイズの約0.1倍とすると、1字あたりおよそ40px使います。高さ480pxの領域なら、収まるのは12字前後です。これは単純な割り算なので、自分の画面でもすぐ計算できます。つまり文字数の上限は、見せたい画面の高さと文字サイズで先に決まります。実験で見るのは上限の内側で、読みやすさや見栄えに差が出るかどうかです。

字形のほうは、縦組みにすると次のような変化が起こりえます。どれも、フォントとブラウザによって結果が異なります。この表を鵜呑みにせず、実際の画面で確かめます。

  • 長音符「ー」、縦組みで起こりえること：縦棒になる／横棒のまま残る、見る点：隣の字と繋がって見えないか
  • 中黒「・」、縦組みで起こりえること：位置が変わる、見る点：区切りとして働くか、浮いて見えるか
  • 小書きの「ゃゅょっ」、縦組みで起こりえること：位置が右上に寄る、見る点：前の字との間隔が自然か
  • 英字・数字、縦組みで起こりえること：横倒しになる／立てると幅が不揃い、見る点：読む向きが混在しないか
  • スラッシュ・括弧、縦組みで起こりえること：向きが変わる／変わらない、見る点：記号が主役になっていないか
  • 漢字・ひらがな、縦組みで起こりえること：基本的に問題が少ない、見る点：画数の差で重心が偏らないか

準備：候補名と表示用ページを用意する

まず、比べる名前を8〜12個そろえます。条件をそろえるため、次のように意図して散らします。

  • 字数を2〜3字、4〜7字、8字以上の三つの帯に分け、各帯に少なくとも3個入れる。
  • 各帯に、漢字・かな中心の名前と、字形が変わる文字（長音符、中黒、小書き、英字）を含む名前を両方入れる。
  • 自作のゲーム名の候補だけでなく、普段遊ぶ作品の名前に似た構成のものも混ぜる。比較の基準になります。

名前は、実在の作品名を使わず、実験用に作ったものでかまいません。たとえば「灯台守の手紙」「ミルク・ティー」「Moon Night」といった具合です。

次に、表示用のHTMLを一つ作ります。下のコードをtate.htmlとして保存し、ブラウザで開くと、テキストエリアに入れた名前（1行に1つ）が縦組みで並びます。外部ライブラリもサーバーも使わない単独のファイルです。

html
<!doctype html>
<meta charset="utf-8">
<title>縦組みテスト</title>
<style>
body{margin:16px;font-family:"Hiragino Mincho ProN","Yu Mincho",serif;background:#f6f1e7}
textarea{width:100%;height:7em;font:inherit}
#row{display:flex;flex-direction:row-reverse;gap:24px;margin-top:16px;height:60vh;overflow-x:auto}
.t{margin:0;padding:12px;border:1px solid #aaa;letter-spacing:.1em;white-space:nowrap}
</style>
<textarea id="in">灯台守の手紙
ミルク・ティー
Moon Night
月夜のおつかい
ちいさなきょうりゅう</textarea>
<label>大きさ <input id="sz" type="range" min="20" max="64" value="36"></label>
<label><input id="up" type="checkbox"> 英数字を立てる</label>
<label><input id="hz" type="checkbox"> 横組みで見る</label>
<div id="row"></div>
<script>
const $=id=>document.getElementById(id);
function draw(){
  const row=$("row"), hz=$("hz").checked;
  row.innerHTML=""; row.style.flexDirection=hz?"column":"row-reverse";
  $("in").value.split("\n").filter(s=>s.trim()).forEach(s=>{
    const p=document.createElement("p");
    p.className="t"; p.textContent=s;
    p.style.writingMode=hz?"horizontal-tb":"vertical-rl";
    p.style.fontSize=$("sz").value+"px";
    p.style.textOrientation=$("up").checked?"upright":"mixed";
    row.appendChild(p);
  });
}
["in","sz","up","hz"].forEach(i=>$(i).addEventListener("input",draw));
draw();
</script>

縦組みの列は右から左へ並ぶので、row-reverseで入力の1行目が右端に来るようにしています。「横組みで見る」にチェックを入れると、同じ名前が横組みで並びます。縦と横を同じ画面で見比べるための切り替えです。

手順：条件をそろえて、順番に見る

次の順で進めます。途中で条件を変えず、一つずつ記録します。

  1. 候補名をすべて入力し、文字サイズを36pxにして縦組みで表示します。
  2. 名前ごとに、下の記録表の採点をします。採点は、表示を見て10秒以内に直感で付けます。
  3. 文字サイズを28pxと48pxに変え、同じ名前をもう一度採点します。画面が小さい端末を想定する場合は、ブラウザの幅を狭めて確かめます。
  4. 「英数字を立てる」を入れた状態で、英字・数字を含む名前だけもう一度採点します。
  5. 「横組みで見る」に切り替え、最後の項目「縦のほうが良いか」を、横組みと見比べて付けます。
  6. 日を置いて、同じ名前を順番を入れ替えて、もう一度採点します。

6の再採点は、見慣れによる評価のぶれを知るためです。1回目と2回目で採点が大きく変わる名前は、自分でも決めきれない名前です。結果を読むときに、信頼度の低いデータとして扱います。

可能なら、ゲームを遊ばない人を2〜3人誘い、名前だけを縦組みで見せて、声に出して読んでもらいます。作者は正しい読みを知っているので、読み違いに気づきにくいからです。読むのに詰まった位置と、読み間違いの内容をメモします。

記録の取り方：5項目を0〜2点で付ける

採点は名前ごと、サイズごとに行います。項目は次の五つで、各項目を0（悪い）、1（どちらでもない）、2（良い）で付けます。

  • A 読み順：上から下へ、迷わず最後まで読めるか。
  • B 字形：長音符、中黒、小書き、英数字などが意図どおりの形か。該当する文字がなければ空欄にします。
  • C 収まり：想定した高さに収まっているか。はみ出す、または余白が極端に多い場合は低く付けます。
  • D 重心：画数の多い字と少ない字が偏らず、列としてまとまって見えるか。
  • E 縦の優位：横組みと比べて、縦のほうが名前の印象に合っているか。

表は次のような形で、紙でも表計算でもかまいません。

名前 ／ 字数 ／ 字形の要注意文字 ／ サイズ ／ A ／ B ／ C ／ D ／ E ／ 気づいたこと

「字形の要注意文字」の欄には、長音符、中黒、小書き、英字などの種類を書きます。後で分類して集計するためです。

記録するときの単位は、名前1つ×サイズ1つで1行です。10個の名前を3サイズで採点すれば30行になります。複数人に見てもらう場合は、人ごとに表を分け、後で合算します。

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

採点が終わったら、次の順に集計します。

  1. 各名前の合計点（B が空欄なら、その項目を除いて平均）を出す。
  2. 字数の帯（2〜3字、4〜7字、8字以上）ごとに、平均点を出す。
  3. 要注意文字を含む名前と含まない名前に分け、平均点を出す。

そのうえで、次のように判断します。

  • 字数の帯ごとの差が大きく、要注意文字の有無による差が小さい場合：文字数仮説が当てはまります。最も点の高い帯に合わせて、名前の長さを決める方針が立てられます。
  • 要注意文字の有無による差が大きく、字数の帯の差が小さい場合：字形仮説が当てはまります。長音符や中黒を別の表記に置き換えれば、縦組みでも通用するかを試す価値があります。
  • どちらにも差が見られない場合：名前の個性や、フォントの選び方のほうが効いている可能性があります。フォントを変えて再度採点します。
  • 差が両方に見られる場合：まず字形の問題を直し、そのうえで字数を調整します。字形は直せますが、字数は名前の意味を左右するからです。

同じ点差でも、1〜2名前の差なのか、全体の傾向なのかは別問題です。名前が10個程度なら、傾向の確認までにとどめ、結論は強く言い切らないでください。

起こりやすい誤りも挙げておきます。

  • フォントの違いを見落とす：縦組み用の字形が入っていないフォントでは、長音符などが横棒のまま残ります。端末ごとに表示が変わるため、複数の端末とブラウザで見ます。
  • 自分の名前だけ甘く採点する：自作の名前は読み慣れており、評価が高くなりがちです。他の人の採点を必ず混ぜます。
  • 大きさだけで判断する：大きい文字は迫力があり、点が上がりやすくなります。サイズ別の点を分けて集計します。
  • 画像化との混同：画像の中の縦組みと、HTMLの文字による縦組みは別物です。画像にする場合は、字形の崩れは問題になりません。ただし、画面の言語切り替えや拡大への追従は、自分で用意する必要があります。
  • フォントの同梱：縦組みを引き立てる明朝体を、作品に同梱したくなることがあります。アソバースへのアップロードは20MiB以内で、ZIP内の1ファイルは30MiB以内ですが、日本語フォントは大きくなりがちです。ライセンスもフォントごとに異なるので、配布元の利用条件を確認してください。

次の行動

まず候補名を8個だけ用意し、上のコードで縦と横を切り替えながら、A〜Eを採点してみてください。結果が出たら、点の低かった名前のうち、字形が原因のものを一つ選び、表記を変えてもう一度採点します。名前を変えるか、縦組みをやめるか、その判断にこの表が使えます。

マガジン一覧に戻る