書体を一つ変えるだけで、ゲームのジャンルは変わって見えるか
遊びをつくる執筆にClaudeを使用しています。
タイトルが「あさひ」、ボタンが「はじめる」、下に「0230」と数字が出ているだけの画面を考えてみます。背景色も配置も文言も同じまま、文字の形だけを明朝体、角ゴシック、丸ゴシック、等幅、教科書体風の5通りに差し替えます。それぞれを別の人に見せて「どんなゲームだと思いますか」と聞いたとき、答えは書体ごとに分かれるのでしょうか。それとも、書体を変えても答えはあまり動かないのでしょうか。 書体がジャンルの印象に影響するという話は、ゲームを作る人の間ではよく聞きます。ただ、それが自分の作品の読者にも当てはまるのかは、実際に聞いてみなければわかりません。この記事は結果を示すものではなく、その答えを自分で出すための実験の設計書です。準備から、質問の順序、記録の取り方、結果の読み方、誤りやすい点までを順に示します。 アソバースの公式作品13本は、作品ごとにタイトルの文字組みが違います（縦組みの明朝、手描き文字、郵便ラベル、夜の標識、光の幾何学、メニュー風など）。どの作品がどの文字組みかは、作品を開いて確かめてください。実験の前に、書体が与える印象を自分の目で一度確認する材料になります。
問いを一つに絞る
「書体でジャンルは変わるか」はそのままでは広すぎるので、確かめる対象を次の形に絞ります。
画面の中身を固定して書体だけを変えたとき、回答者が挙げるジャンルの分布は書体ごとに違うか。
ここで固定するものと動かすものを分けます。動かすのは書体だけです。固定するのは次の項目です。
- 文言（タイトル、ボタン、数値）
- 配色と背景
- 文字の大きさ、太さ、字間
- 配置と画面の縦横比
文言はジャンルを示唆しやすい要素です。「START」や「GAME OVER」、「HP」といった語を入れた時点で、書体より言葉が答えを決めてしまいます。そのため、意味の薄い語を使います。この記事のサンプルでは、タイトルを「あさひ」、ボタンを「はじめる」、数値を「0230」としています。数値は点数にも時刻にも読めるので、特定のジャンルに寄りにくいと考えて選びました。この想定自体も実験で外れる可能性があるので、気になる人は文言を変えた第二弾の実験に回します。
準備するもの
必要なのは、ブラウザ、HTMLファイル1つ、回答を書き込む表計算シート、回答者です。サーバーも外部ライブラリも使いません。
刺激画面を作る
次のHTMLを保存し、ブラウザで開きます。アドレスの末尾に #1〜#5 を付けると書体が切り替わります。
<!doctype html>
<meta charset="utf-8">
<title>書体の実験</title>
<style>
body{margin:0;display:grid;place-items:center;height:100vh;background:#1f2a36;color:#f2efe6}
.card{width:640px;text-align:center}
h1{font-size:64px;font-weight:400;letter-spacing:.08em;margin:0 0 24px}
button{font:inherit;font-size:24px;padding:12px 40px;background:none;color:inherit;border:2px solid currentColor}
p{font-size:28px;margin:24px 0 0}
</style>
<div class="card" id="card">
<h1>あさひ</h1>
<button>はじめる</button>
<p>0230</p>
</div>
<script>
const fonts = {
1: '"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif',
2: '"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif',
3: '"Hiragino Maru Gothic ProN","BIZ UDPGothic","Zen Maru Gothic",sans-serif',
4: '"Osaka-Mono","MS Gothic","Noto Sans Mono CJK JP",monospace',
5: '"Klee One","Yu Kyokasho","Hannotate SC",cursive',
};
function apply(){
const n = location.hash.slice(1) || '1';
document.getElementById('card').style.fontFamily = fonts[n] || fonts[1];
document.title = '書体 ' + n;
}
addEventListener('hashchange', apply); apply();
</script>5つの書体を選ぶ
上のコードの5つは、次のように性格が離れるように選んでいます。
- 1、系統：明朝体、選ぶ理由：端正で静かな印象の代表として
- 2、系統：角ゴシック、選ぶ理由：中立的な基準として
- 3、系統：丸ゴシック、選ぶ理由：やわらかい印象の代表として
- 4、系統：等幅、選ぶ理由：機械的、端末的な印象の代表として
- 5、系統：教科書体・手書き風、選ぶ理由：人の手の気配がある代表として
フォント名は環境によって入っているものが違います。コードに並べた名前は候補にすぎないので、自分のパソコンで実際に5種類が別の見た目で表示されているかを必ず確認し、足りなければ手元にある書体に置き換えてください。見分けがつかない2種類があると、実験の前提が崩れます。
画像にして配る
回答者の端末には、同じ書体が入っているとは限りません。そのため、回答者に見せるのは自分の画面のスクリーンショット（5枚）にします。HTMLを配ると、回答者側で別の書体に置き換わって表示される恐れがあります。画像サイズは5枚とも同一にそろえます。
手順：何を、どの順で聞くか
1人に何枚見せるか
見せ方は2通りあり、それぞれ長所と短所があります。
- 1人1枚（群間比較）：他の書体を見ないので、素直な第一印象が出ます。その代わり、書体ごとに別の人が必要になり、人数が必要です。
- 1人5枚（個人内比較）：少ない人数でも比較できます。その代わり、並べて見ることで「これは前の画面より硬い」といった相対的な判断が混ざります。
周囲に協力してくれる人が少ない場合は後者でも構いません。ただし、その場合は提示順を回答者ごとに変えます。毎回1→5の順に見せると、順序の影響が書体の影響に混ざります。5枚の順番は、紙に番号を書いてくじ引きにするなど、機械的な方法で決めてください。
質問は二段階で
質問の順序が結果を左右します。最初にジャンルの選択肢を見せると、選択肢の中から選ぶことが前提になり、回答が誘導されます。そこで次の順で聞きます。
- 自由記述：「この画面から、どんなゲームを想像しますか。一言で書いてください」と聞き、書いてもらってから次へ進みます。
- 選択式：その後で、次の選択肢から一つ選んでもらいます。パズル／アクション／ホラー／リズム／箱庭・育成／物語を読む／レース／その他／わからない。
- 確信度：「どれくらい確かですか」を1（まったく自信がない）〜5（かなり確か）で聞きます。
ゲームの内容や実験の目的は説明しません。「書体の実験です」と伝えると、書体を意識した答えになります。事後に種明かしをする形が確実です。
記録の取り方と結果の読み方
表の列
回答1つを1行にして、次の列を作ります。
- 回答者ID（名前は不要。A01、A02のような連番）
- 見せた順番（何番目に見たか）
- 書体番号（1〜5）
- 自由記述（そのまま書き写す。要約しない）
- 選んだジャンル
- 確信度（1〜5）
- 回答者の属性（ゲームを日常的に遊ぶか、作るか、の2〜3段階程度）
自由記述は後から分類し直すことがあるので、手を入れず原文を残します。
結果の読み方
書体番号を行、ジャンルを列にしたクロス集計表を作ります。そのうえで、次の基準で読んでいきます。
- 特定のジャンルに集中する書体がある：書体がそのジャンルの印象を引き寄せている可能性があります。同じ書体で自由記述の言葉（「静か」「かわいい」「古い」など）も揃うなら、連想の根拠がより具体的になります。
- どの書体でも分布が似ている：この画面では、書体よりも他の要素（配色や文言）が印象を決めているのかもしれません。書体の選択にあまり悩まなくてよい、という判断材料になります。
- 「わからない」が特定の書体に多い：その書体は、ジャンルを絞らせない曖昧さを持っているのかもしれません。確信度が低いことも合わせて見ます。
- 確信度が低いまま偏っている：偏りが見えても、回答者がたまたま選んだだけの可能性があります。
人数が少ない段階では、偏りは偶然でも出ます。「この書体はこのジャンルを連想させる」と結論づけるのではなく、「この集まりではそう見えた」と記録し、人数や回答者を変えて再度確かめるのが妥当な使い方です。
色だけを変える対照実験
書体の効果を見るなら、基準になる比較があると読みやすくなります。書体を固定して背景色や文字色だけを変えた画面を同じ手順で見せ、書体の変更と色の変更のどちらがジャンルの回答を動かすかを比べます。書体より色の影響が大きいとわかれば、先に直すべき箇所が変わります。
誤りやすい点
実験が崩れやすい箇所を挙げます。
- 太さ・大きさが同時に変わる：書体を差し替えると、同じ指定でも文字の見た目の大きさや濃さが変わります。5枚を並べて、大きさと太さが著しく違わないかを確認し、必要ならサイズだけ補正します。ただし、補正した事実は記録します。
- フォールバックに気づかない：指定した書体がなく、別の書体で表示されていることがあります。5枚が本当に別の書体になっているかを、拡大して確認してください。
- 回答者が偏る：ゲーム制作仲間だけに聞くと、書体の知識があるぶん反応が専門的になりやすくなります。遊ぶ側の人にも聞き、属性の列で分けて読みます。
- 質問で誘導する：「怖そうですか」「かわいいですか」など、感情を先に出す聞き方は避けます。
- 説明しすぎる：回答者に、実験の意図や期待する答えを話さないでください。
- 一度の結果で決める：違う日、違う回答者、違う文言で繰り返すと、結果が変わるかを確かめられます。
次の行動
まず上のHTMLを保存し、自分の環境で5つの書体が見分けられるかを確認します。次に、スクリーンショット5枚を用意して、近くの数人に二段階の質問で答えてもらい、表に書き写すところまで進めてみてください。回答がそろったら、書体×ジャンルのクロス集計を作って、偏りがあるかどうかを見ます。その結果を踏まえて、自分のゲームのタイトル画面の書体を決める材料にしてください。
