線の太さを変えるだけでゲームの印象はどう変わるか

準備するものと手順

用意するものは、ブラウザ、下のHTMLを保存したファイル、協力者3〜5人、記録用の紙か表計算ソフトです。協力者はゲームを作る人でなくて構いません。むしろ、制作側の目を持たない人が混ざっているほうが、読み方の違いが見えます。

下のコードは、丸・四角・地面の線という最小の場面を、4種類の線幅で順に表示します。どの線幅かは画面に出さず、ボタンを押すたびに次の線幅へ進みます。表示順は読み込むたびにランダムになり、最後に順序が表示されます。

<canvas id="c" width="320" height="200"></canvas>
<button id="b">次へ</button> <span id="n"></span>
<script>
const W=[1,3,6,12], g=c.getContext('2d');
let order=[...W].sort(()=>Math.random()-.5), i=-1;
function draw(w){
  g.fillStyle='#f4efe6'; g.fillRect(0,0,320,200);
  g.strokeStyle='#2b3a55'; g.lineWidth=w; g.lineJoin='round';
  const h=w/2;
  g.beginPath(); g.arc(80,100,40-h,0,7); g.stroke();
  g.strokeRect(160+h,60+h,80-w,80-w);
  g.beginPath(); g.moveTo(20,170); g.lineTo(300,170); g.stroke();
}
b.onclick=()=>{
  i++;
  if(i>=order.length){ n.textContent='終了。順序: '+order.join(', '); return; }
  draw(order[i]); n.textContent=(i+1)+'/'+order.length+' 枚目';
};
</script>

丸と四角の半径や辺は、線幅の半分だけ内側にずらしてあります。これは外側の大きさを揃えるためで、理由は後の「起こりやすい誤り」で説明します。

手順は次のとおりです。

1. 協力者1人につき、ページを読み込み直して順序を新しくします。
2. 協力者には、線の太さを変えていることは伝えず、「4枚の絵を順に見て、あとで印象を答えてください」とだけ頼みます。
3. 1枚目から4枚目まで、1枚あたり10秒ほど見てもらいます。長く見せすぎると、印象より細部の観察になります。
4. 4枚を見終えた後、終了画面の順序を記録者が控えます。協力者には見せません。
5. 4枚を同じ順序で見直してもらいながら、次の節の評価を答えてもらいます。見直しの際は、ボタンで順に表示するだけで構いません。

記録の取り方

印象は言葉にすると揺れるので、対になる言葉を5段階で選んでもらう方法を使います。次の4対を、1枚ごとに答えてもらいます。

• 重さ、1：軽い、5：重い
• 態度、1：やさしい、5：きびしい
• 性格、1：繊細、5：力強い
• 賑わい、1：静か、5：にぎやか

そのほかに、自由記述として「この絵が出てくるゲームを想像すると、どんな遊びですか」を一言だけ書いてもらいます。数値で拾えない連想が、ここに残ります。

記録表は、1行を「協力者ID・表示順・線幅・4つの評価値・一言」とします。1人あたり4行、4人なら16行です。線幅の列は、記録者が終了時に控えた順序から後で埋めます。協力者が答える間は、記録者も線幅を見ないようにしておくと、聞き方に癖が出にくくなります。

結果の読み方

人数が少ないので、結論は統計的なものにはなりません。傾向を見る道具として読みます。線幅ごとに、4つの評価軸それぞれの平均を出し、細い順に並べてみます。

見るポイントは三つです。

• 単調に動くか：線幅が増えるにつれて「力強い」寄りの値が順に上がっていれば、太さと印象が素直につながっているといえます。
• 途中で急に動くか：たとえば3から6のあいだだけ値が大きく動いているなら、その付近に印象の切れ目がある可能性があります。そこを境に、自作のゲームでどちらの側に立つかを決める材料になります。
• 人によるばらつきが大きいか：同じ線幅に対して1と5が混ざる軸は、線の太さでは説明できない要素が効いています。その軸は線幅で操作しようとせず、色や余白など別の手段を探します。

差がほとんど出なかった場合も、有効な結果です。「この場面では線幅は印象を決める主役ではない」と分かるので、調整に使う時間を別の要素へ回せます。自由記述は、数値と食い違う場合に注目してください。評価は同じでも、連想されるゲームの種類が違えば、その線幅は別のジャンルに向いているかもしれません。

起こりやすい誤り

実験を台無しにしやすい点を挙げます。

• 見かけの大きさが変わる：canvasの線は、指定した位置を中心に両側へ広がります。何も補正せずに線幅を上げると、図形そのものが大きく見え、「重い」という評価が線ではなく大きさのせいになりかねます。上のコードで半分だけ内側にずらしているのはそのためです。ただし、あえて補正しない条件を別に作って比べるのも有益です。
• 背景との差が変わる：細い線は、薄い色だと背景に埋もれます。色を変えずに太さだけを動かす実験では、線の色は背景と十分に差のある濃さにしておきます。
• 画面の拡大や高解像度表示：ブラウザの拡大率や画面の密度によって、1pxの見え方が変わります。協力者全員に同じ画面、同じ拡大率で見てもらってください。
• 順序の影響：最初に見た絵が基準になり、後の絵の評価を引っ張ります。順序をランダムにしているのはそのためですが、人数が少ないと偏りが残ります。記録表に表示順を残し、偏って見える場合は順序別にも眺めます。
• 言葉による誘導：「太いほうが強そうですよね」といった一言で、答えは動きます。説明は手順2の台詞だけにとどめます。
• 場面が単純すぎる：丸と四角は抽象的で、ゲームの文脈がありません。慣れてきたら、自作のプレイヤー、障害物、ゴールを描いた場面に差し替えて同じ手順で繰り返すと、より実際に近い結果になります。

公式作品の線を観察する

実験の後は、既存の作品で「線がどう使われているか」を眺めると、結果の解釈が深まります。ここでは、作品を開いて確かめる観点だけを挙げます。

「小さな軌道」には、全軌道の予測を点線で、前回の軌道を細い実線で示す機能があると案内されています。設計から読み取れるのは、線の種類によって、予測と過去という別々の情報を見分けやすくしていることです。実際の太さや濃さがどうなっているかは、作品を開いて確かめてください。

「プリズムの道」は、鏡と色ガラスで光を灯台へ届けるパズルです。光の筋、鏡、盤面の枠が、画面の上でどう区別されているかを見てください。線が盤面の情報を担う作品なので、太さの違いが役割の違いを伝えているかを観察する題材になります。

観察の際は、まず線を細く、または太く感じたかを一言メモします。次に、その線が何を示しているかを答えます。「見分けやすさ」と「雰囲気」は別のものなので、分けて書き残しておくと、先の実験結果と照らしやすくなります。

次の行動

まず上のコードを保存し、自分を含めた3人以上に4枚を見てもらい、記録表の1行目から埋めてみてください。結果が出たら、自作ゲームの線幅を一つだけ変えて同じ見直しをすると、実験が制作に結びつきます。アソバースに作品を投稿する際は、表示の確認の段階で、画面の拡大や縮小でも線の印象が保たれているかを見ておくと安心です。