カバーに文字を入れるか入れないか：小さく表示して比べる

何を確かめる実験か

問いは次の二つに分けます。混ぜると結果が読めなくなるためです。

1. 可読性の問い：文字入りカバーは、どのサイズまで作品名が読めるか。
2. 印象の問い：文字が読めなくなったサイズで、文字入りと文字なしのどちらが「何のゲームか」を伝えているか。

一つ目は、縮小しながら読める限界を探すので、一人でも調べられます。二つ目は第三者の目が必要です。作り手は作品名を知っているため、読めなくても脳内で補ってしまうからです。

比べる案は「文字あり」と「文字なし」の二択に絞らず、文字の条件を一つずつ変えた複数案にします。たとえば次のとおりです。

• 案A：文字なし（絵だけ）
• 案B：短い作品名を大きく入れる
• 案C：同じ作品名を小さく入れ、キャッチコピーも添える
• 案D：案Bの文字の下に、半透明の帯を敷く

条件を二つ以上同時に変えると、どちらが効いたのか分からなくなります。案Bと案Dの差は「帯の有無」だけ、案Bと案Cの差は「文字の大きさと量」だけ、というふうに、隣り合う案の違いを一点に保ちます。

準備するもの

• 同じ元絵から作った複数案の画像ファイル（上のA〜D程度）
• 手元のブラウザと、下に示す比較ページ（HTMLファイル一つ）
• 実際に表示される大きさを測る手段（ブラウザの開発者ツールなど）
• 記録用の表（紙でもスプレッドシートでも構いません）
• 見てもらう第三者（人数は後述）

表示サイズは、この記事では決めません。カバーが一覧のどの大きさで出るかは、作品が実際に並ぶ画面を開いて測ってください。PCとスマートフォンでは違うはずです。端末ごとに一度ずつ測り、その値を比較ページの段階に反映します。作品投稿画面に画像の推奨サイズなどの案内があるかどうかも、現在の画面で確認してください。

比較ページ

画像を選ぶと、それぞれを4段階の幅で横に並べます。外部ライブラリは使わず、ファイルを開くだけで動きます。チェックを入れると白黒になり、明暗の差だけで読めるかも調べられます。sizes の数値は、先ほど測った実寸に合わせて書き換えてください。

<!doctype html>
<meta charset="utf-8">
<title>サムネ比較</title>
<input type="file" id="f" accept="image/*" multiple>
<label><input type="checkbox" id="g"> 白黒にする</label>
<div id="o"></div>
<script>
const sizes = [320, 160, 96, 64];
const o = document.getElementById('o');
const f = document.getElementById('f');
f.onchange = () => {
  o.innerHTML = '';
  for (const file of f.files) {
    const row = document.createElement('div');
    row.style = 'display:flex;gap:12px;align-items:flex-end;margin:16px 0';
    const url = URL.createObjectURL(file);
    for (const w of sizes) {
      const img = document.createElement('img');
      img.src = url;
      img.width = w;
      img.title = file.name + ' ' + w + 'px';
      row.append(img);
    }
    o.append(row);
  }
};
document.getElementById('g').onchange = e => {
  o.style.filter = e.target.checked ? 'grayscale(1)' : '';
};
</script>

ブラウザの拡大率は100%に戻して使います。拡大していると、数字上は同じ幅でも見え方が変わります。

手順

手順1：自分一人で「読める限界」を探す

比較ページに全案を読み込み、4段階の幅を左から順に見ます。各案で「作品名が読める最も小さい段階」を記録します。目安として、読めたと言い切れるのは、文字を一つずつ追わなくても単語として認識できたときです。目を細めて何とか読めた場合は「読めない」側に数えます。

このとき、画面から少し離れて見ます。腕を伸ばしたくらいの距離で、一覧をざっと眺める状態に近づけるためです。

手順2：他のカバーと並べて見る

比較ページは自作の案だけを並べるため、実際の一覧とは見え方が違います。一覧では周りのカバーが色や文字で主張しています。そこで、アソバースの作品一覧で公式作品などを開き、周囲のカバーがどんな文字の扱いをしているかを眺めます。

公式作品13本には、タイトルの文字組みが作品ごとに違うという特徴があります（縦組みの明朝、手描き文字、郵便ラベル、夜の標識、光の幾何学、メニュー風など）。ただし、その文字組みがカバー画像の上でどう扱われているか、一覧でどのサイズで見えるかは、確認済みの情報にありません。実際に作品とカードを開いて確かめてください。なお、公式作品のカバー画像は生成したアートワークで、ゲーム画面のスクリーンショットではありません。見る人にとってカバーは、実際の画面を見せるのではなく雰囲気を伝える役割になります。

観察する項目は三つです。

• 細い線の書体と太い書体で、潰れ方がどう違うか
• 文字の色と背景の明暗がどの程度離れているか
• 文字の位置（中央、端、下部）で、絵の主題と重なっているか

手順3：第三者に短時間だけ見せる

見せる人は、作品を知らない人にします。次の流れで行います。

1. 一人につき一つの案だけを見せます（複数案を見せると、先に見た案で作品名を覚えてしまうためです）。
2. 実寸の大きさで、1〜2秒ほど見せて隠します。
3. 「作品名は何でしたか」「どんなゲームだと思いましたか」を、選択肢を出さずに聞きます。
4. 答えをそのまま書き取ります。誤読も記録します。

人数は、案の数と相談になります。各案に最低でも数人ずつ当たるよう、人数を割り振ってください。少人数では偶然の影響が大きいので、数字の大小ではなく、答えの中身（どこで間違えたか）を読む使い方にとどめます。

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

記録は次のような表にまとめます。「読めた最小幅」は手順1の自己判定、「回答」は手順3の第三者の回答です。

• A 文字なし、読めた最小幅（自己判定）：該当なし、作品名の回答（人ごと）：該当なし、ジャンルの回答（人ごと）：、気づいたこと：
• B 大きく短く、読めた最小幅（自己判定）：、作品名の回答（人ごと）：、ジャンルの回答（人ごと）：、気づいたこと：
• C 小さく長め、読めた最小幅（自己判定）：、作品名の回答（人ごと）：、ジャンルの回答（人ごと）：、気づいたこと：
• D 帯つき、読めた最小幅（自己判定）：、作品名の回答（人ごと）：、ジャンルの回答（人ごと）：、気づいたこと：

読み方の基準は次のとおりです。

• 読めた最小幅が、実際の表示幅より小さい案は、文字が実用になっています。余裕が少ないなら、表示幅の違う端末で再確認します。
• 読めた最小幅が実際の表示幅より大きい案は、その文字が一覧では読めません。この場合は、文字を大きくするか、文字を外す判断になります。
• 作品名の回答が正しくない場合は、誤読の内容を見ます。文字の一部だけ読まれたのか、別の語に見えたのかで、直す箇所が変わります。
• ジャンルの回答は、文字なしの案Aと、読めなかった文字入りの案を比べます。文字なしのほうが作品の雰囲気に近い答えが出るなら、読めない文字は絵を邪魔している可能性があります。逆に、文字なしでは雰囲気が伝わらず、文字入りの案で伝わるなら、文字が手がかりになっています。
• 案Bと案Dの差が出たなら、帯が効いたと判断できます。差がなければ、帯の追加は絵を覆うぶんだけ不利になる可能性があります。

回答が割れて結論が出ない場合は、無理に勝者を決めず、案を一点だけ変えて同じ手順をもう一周します。

起こりやすい誤り

• 作品名を知っている人に見せてしまう：作り手本人や制作仲間は、読めなくても名前を補って「読めた」と答えがちです。第三者は作品を知らない人に絞ります。
• 拡大した画面で確認する：ブラウザの拡大や高解像度の画面では、同じ幅でも実際の見え方と違います。表示の測定と判定は、同じ設定で行います。
• 一種類の端末だけで決める：PCで読めても、スマートフォンの一覧では違う大きさになる可能性があります。端末ごとに測り直します。
• ライトとダークの両方を見ない：サイトにはライト／ダークの切り替えがあります。カバーの周りの背景色が変わると、縁の目立ち方や文字との明暗差が変わる可能性があります。両方で確認してください。
• 画像の端に文字を置く：一覧の表示で端が切り取られる場合があります。切り取りの有無は、実際のカード表示で確認してください。
• 言語の切り替えを見落とす：サイトの日本語／英語の切り替えは、作者が入力した作品名や紹介文を書き換えません。同様に、画像に焼き込んだ文字も言語で変わりません。英語表示で見る人にも日本語の作品名が見えることを前提に、読めるかどうかを考えます。
• 作品名がカード上に別に表示されているのを忘れる：作品名がカバーの外に表示される画面では、画像の文字は重複した情報になります。その場合は「文字は読ませるためか、雰囲気づくりか」で役割を決め直せます。実際にどの画面で作品名が別表示されるかは、現在の画面で確認してください。
• 複数の条件を同時に変える：色、位置、大きさを一度に変えると、どれが効いたか特定できません。

次の行動

まず、自作のカバーから文字なしの版と、文字入りの版を用意し、比較ページで4段階の幅に並べて読める限界を記録してください。次に、実際の一覧の表示幅を測り、その値と比べて余裕があるかを確認します。余裕が小さいと分かったら、文字を大きくするか、外すかを決め、作品を知らない人に1〜2秒だけ見せて答えを書き取ってください。