タイトル文字を縦組みにすると、作品の印象はどう変わるか

問いを一つに絞る

最初に、何を確かめるのかを一文で決めます。広すぎる問いは、結果が出ても読み解けません。次のような形が扱いやすいです。

• 同じ作品名を3通りの組みで見せたとき、「静かさ」「古風さ」「遊びやすそうな印象」の評価は変わるか。
• 作品名を読み取れるまでの速さは、組みによって変わるか。
• 縮小したカバー画像の中でも、その差は残るか。

最初の実験では、印象の評価と読みやすさの2点に絞ります。縮小表示は、2周目の問いとして残しておきます。

変えるのは文字の組みだけにします。フォント、文字サイズ、色、背景、作品名は固定します。組み以外が少しでも違うと、印象の差が何によるものか分からなくなります。

準備するもの

次のものを用意してください。

• 自分の作品名、または仮の作品名を1つ。長さは4〜8文字程度が比べやすいです。
• 見てもらう人。最低5人、できれば10人。一人で作っている場合は、作品を見たことのない知人に頼みます。
• 紙かスプレッドシート。後で示す記録用紙を写します。
• ストップウォッチ。スマートフォンのもので構いません。
• 下の比較ページ。メモ帳などで保存し、ブラウザで開けば動きます。外部ライブラリもサーバーも不要です。

作品名に長音符「ー」、英数字、小さい「ゃ」「っ」が入っていると、縦組みで表示が崩れやすくなります。それは実際の制作で気をつける点でもあります。最初は含まないほうが、組みの差だけを見やすくなります。含めた場合の挙動は、フォントによって変わります。

比較ページの作り方

ボタンを押すたびに、3通りの組みがランダムな順で1つずつ表示されるページです。順番を毎回変えるのは、最初に見たものが基準になってしまう影響を、人ごとに散らすためです。

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
body{margin:0;background:#1d2433;color:#f3ead8;
 font-family:"Hiragino Mincho ProN","Yu Mincho",serif;
 display:grid;place-items:center;min-height:100vh}
#card{width:260px;height:340px;background:#2b3550;
 display:grid;place-items:center;overflow:hidden}
#t{margin:0;font-size:32px;letter-spacing:.1em;white-space:nowrap}
.tate{writing-mode:vertical-rl}
.naname{transform:rotate(-12deg)}
button{margin-top:12px;font-size:16px}
#log{font:12px monospace;white-space:pre}
</style>
<div>
<div id="card"><h1 id="t"></h1></div>
<button id="next">次へ</button>
<div id="log"></div>
</div>
<script>
const NAME="ひかりの灯台"; // 自分の作品名に置き換える
const modes=["yoko","tate","naname"];
for(let i=2;i>0;i--){const j=Math.floor(Math.random()*(i+1));
 [modes[i],modes[j]]=[modes[j],modes[i]];}
let n=-1;const log=[];
const t=document.getElementById("t");
document.getElementById("next").onclick=()=>{
 n++;
 if(n>=modes.length){t.textContent="終了";t.className="";
  document.getElementById("log").textContent="順番: "+log.join(" → ");return;}
 t.textContent=NAME;t.className=modes[n];log.push(modes[n]);
};
</script>

「横組み」は何もクラスを付けない状態です。縦組みは writing-mode: vertical-rl（文字を縦に並べ、行が右から左へ進む指定）、斜めは rotate(-12deg)（左に12度傾ける指定）です。傾きは自分の作品に合わせて変えて構いませんが、一度決めたら全員に同じ値を使ってください。

最後に表示される順番は、記録用紙に書き写します。見てもらう人ごとにページを再読み込みすれば、順番は新しく決まります。

手順と記録の取り方

1人あたり3回、組みを変えて見てもらいます。流れは次のとおりです。

1. ページを開いて「次へ」を押し、1つ目の組みを表示します。
2. 表示と同時にストップウォッチを始めます。作品名を声に出して読めたら止め、秒数を記録します。
3. 5秒ほど見てもらってから、評価用紙に5段階で答えてもらいます。
4. 「次へ」を押して、残り2つの組みで同じことを繰り返します。
5. 最後に、ページが示した順番を記録します。

評価は、対になる言葉の間で1〜5を選んでもらう形が簡単です。

• 雰囲気、1：静か、5：にぎやか
• 時代感、1：古風、5：現代的
• 距離感、1：近寄りがたい、5：親しみやすい
• 遊びの想像、1：難しそう、5：気軽そう
• 読みやすさ、1：読みにくい、5：読みやすい

記録の単位は「1人×1つの組み×1項目」で1つの数字です。10人なら、10人×3通り×5項目で150個の数字と、読み上げ秒数が30個になります。紙には、人ごとに行を、組みごとに列を作って並べると整理しやすくなります。

見てもらう人には、ゲームのジャンルや内容を先に伝えないでください。内容を知っていると、文字より内容のほうが印象を決めてしまうからです。また、「縦組みを見てください」のような言い方は避けます。「これから作品名を3回見せます」とだけ伝えます。

結果の読み方と誤りやすい点

数字が揃ったら、全体の平均を出す前に、人ごとの差を見ます。同じ人が横組みと縦組みで何点違ったかを並べると、人による元々の癖が取り除かれます。たとえば、いつも高めの点をつける人と低めの人が混ざっていても、各人の中での差なら比べられます。

判断の目安は次のように置くと、結果を読みやすくなります。

• 多くの人で同じ向きに差が出た項目は、その組みの影響が見えている可能性があります。
• 差の向きが人によってばらばらの項目は、組みよりも好みや先入観の影響が大きいと考えます。
• 差がほとんどの人で1点以内なら、少なくともこの作品名・この条件では、組みは印象を大きく動かしていないと読めます。
• 印象は動いているが読み上げ時間が極端に延びる組みは、雰囲気と引き換えに可読性を払っていると判断できます。

人数が5〜10人では、統計的に確かな結論は出せません。出るのは「この条件で傾向がありそうか」という手がかりまでです。結論を急がず、次の改良案を決める材料として使ってください。

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

• 複数の要素を同時に変える。 縦組みにするついでに文字サイズや色も変えると、何が効いたのか分かりません。
• フォントが環境で変わる。 指定したフォントが入っていない端末では、代わりのフォントで表示されます。見てもらう端末は全員同じにするか、同じ画面で見てもらってください。
• 斜めの角度が強すぎる。 傾きが大きいと、読みやすさの低下が「斜めだから」ではなく「傾きが強いから」になります。角度を変えた比較は、別の実験として分けます。
• 見せる順番の偏り。 毎回同じ順にすると、最初に見たものが基準になります。比較ページのランダム順を使い、結果の記録にも順番を残します。
• 公開後の数字で代用する。 アソバースのプレイ回数は作品を起動した実測回数で、人数ではありません。レビューも、評価対象は作品全体です。タイトルの組みだけの効果を、公開後の数字から切り出すのは難しいと考えてください。

実際の表示で確かめたいときは、投稿画面で作品の表示を確認する段階があります。比較ページで選んだ組みを、カバー画像やサムネイルの縮小サイズで見直すと、小さくしても読めるかを確かめられます。なお、公式作品のカバー画像は生成したアートワークで、ゲーム画面のスクリーンショットではありません。自作では、画面の見た目とカバー画像の文字が食い違わないかも見ておくと安心です。

次の行動

まず比較ページの NAME を自分の作品名に変えて、自分の目で3通りを見比べてください。その後で、5人に評価用紙を渡し、人ごとの差を並べるところまで進めてみてください。差が小さければ、組みの選択は別の基準で決めて構いません。差が出たら、角度、文字サイズ、縮小表示を次の問いにして、1つずつ変えて確かめます。