丸と四角だけでキャラクターを作る：形で性格を伝える

準備するもの

必要なのは、ブラウザ、テキストエディタ、そして見てもらう人です。見てもらう人は、キャラクターを作った本人以外で、できれば5人以上を目安に集めてください。人数が少ないと偶然の偏りが大きくなるため、後述の読み方の基準も「目安」にとどめています。

キャラクターは、丸と四角だけで描ける最小構成に固定します。構成は次の6パーツです。

• 頭（丸または四角）
• 胴体（四角）
• 足（四角が2つ）
• 目（丸が2つ）

色は胴体や頭を同じ灰色一色、目だけ白にします。色を足すと、形の効果なのか色の効果なのか分からなくなるためです。

下のコードをHTMLファイルとして保存し、ブラウザで開くと、頭の形、頭の大きさ、胴体の幅、足の幅をスライダーで変えられます。外部ライブラリは不要で、そのまま動く最小構成です。

<!doctype html>
<meta charset="utf-8">
<title>丸と四角のキャラ</title>
<svg id="c" width="240" height="300" viewBox="0 0 240 300"></svg>
<p>
<label>頭 <select id="head"><option value="circle">丸</option><option value="rect">四角</option></select></label>
<label>頭の大きさ <input id="hs" type="range" min="40" max="110" value="70"></label>
<label>胴体の幅 <input id="bw" type="range" min="50" max="160" value="90"></label>
<label>足の幅 <input id="lw" type="range" min="10" max="50" value="20"></label>
</p>
<script>
const $ = id => document.getElementById(id);
function draw() {
  const hs = +$("hs").value, bw = +$("bw").value, lw = +$("lw").value;
  const cx = 120, top = 130, g = "#666";
  const head = $("head").value === "circle"
    ? `<circle cx="${cx}" cy="${top - hs / 2}" r="${hs / 2}" fill="${g}"/>`
    : `<rect x="${cx - hs / 2}" y="${top - hs}" width="${hs}" height="${hs}" fill="${g}"/>`;
  const ey = top - hs / 2, ex = hs * 0.18;
  $("c").innerHTML = head +
    `<rect x="${cx - bw / 2}" y="${top}" width="${bw}" height="100" fill="${g}"/>` +
    `<rect x="${cx - bw / 2 + 10}" y="230" width="${lw}" height="60" fill="${g}"/>` +
    `<rect x="${cx + bw / 2 - 10 - lw}" y="230" width="${lw}" height="60" fill="${g}"/>` +
    `<circle cx="${cx - ex}" cy="${ey}" r="4" fill="#fff"/>` +
    `<circle cx="${cx + ex}" cy="${ey}" r="4" fill="#fff"/>`;
}
document.querySelectorAll("select,input").forEach(e => e.oninput = draw);
draw();
</script>

手順：一度に一つだけ変える

実験の要は、変える場所を一度に一つに絞ることです。まず基準になるキャラクターを決めます。コードの初期値（頭は丸、頭の大きさ70、胴体の幅90、足の幅20）をそのまま基準にしてください。

次の4つの比較を行います。それぞれ、変える項目以外はすべて基準のままにします。

• 1、変える項目：頭の形、A：丸、B：四角
• 2、変える項目：頭の大きさ、A：小（例：55）、B：大（例：95）
• 3、変える項目：胴体の幅、A：狭い（例：60）、B：広い（例：140）
• 4、変える項目：足の幅、A：細い（例：15）、B：太い（例：45）

数値は一例です。差が小さすぎると見分けがつかず、大きすぎると極端な絵になるため、自分で画面を見ながらAとBの差がはっきり分かる程度に調整してください。ただし、調整したら途中で変えず、全回答者に同じ値を見せます。

各パターンの画面は、スクリーンショットで1枚ずつ保存しておくと、見てもらうときの準備が楽になります。1枚の画像には1体だけを置き、名前やラベルは付けません。「ボス」と書いてあれば、形を見る前にその言葉で印象が決まってしまうからです。

見てもらう手順は次のとおりです。

1. 回答者に、これから形だけのキャラクターを見せること、ゲームの説明は一切ないことを伝えます。
2. 画像を1枚ずつ、約3秒だけ表示します。長く見せると形の分析になり、第一印象から離れてしまいます。
3. 見終わるたびに、「強そう」と「親しみやすい」をそれぞれ1〜5点で答えてもらいます。1が最も弱そう・親しみにくい、5が最も強そう・親しみやすい、と最初に伝えます。
4. 最後に、そのキャラクターから連想する役割（ボス、仲間、村人など）を一言で書いてもらいます。

表示の順番は回答者ごとに変えてください。たとえば実験1のAを先に見る人と、Bを先に見る人を半々にします。順番を固定すると、最初に見たものが基準になって、後の評価が引きずられる可能性があります。

記録の取り方

記録の単位は「1枚の画像を1人が評価した1回」を1行とします。表の列は次のとおりです。

回答者 ／ 実験 ／ パターン（A/B） ／ 見た順番 ／ 強さ（1〜5） ／ 親しみ（1〜5） ／ 一言

基準のキャラクターは、全員に最初と最後の2回見せると、見る順番による評価のずれも確認できます。基準を2回見せて点数が大きく違う回答者がいれば、その人の評価は揺れやすいと判断し、結果の読み方で扱いに注意します。

実験は4つ、各実験でAとBの2枚、回答者5人なら、評価は合計で40行です。紙でもスプレッドシートでも十分記録できます。回答の途中で表情や発言をメモしたくなりますが、数値の列とは別に、余白の欄に書き分けてください。

結果の読み方

実験ごとに、AとBそれぞれの「強さ」の平均を出し、差を見ます。「親しみ」も同じ手順で出します。判断の目安は次のとおりです。これは統計的な基準ではなく、少人数で傾向を見るための目安です。

• 平均の差が1点以上で、5人中4人以上がBの方を高く付けている：その変更は強さの印象に効いている可能性が高いと読みます。
• 平均の差が0.5点未満：この条件では、印象を動かす力は小さいと読みます。
• その中間、または回答者の方向がばらばら：判断を保留し、人数を増やすか、AとBの差を広げて再度行います。

実験1から4を並べ、差が最も大きかった項目が、自分のキャラクターで強さの印象を最も左右する項目の候補です。次に、強さの差と親しみの差を実験ごとに並べてみてください。強さが上がると親しみが下がる実験があれば、敵キャラには向く変更でも、味方キャラには使いにくい変更だと分かります。反対に、強さを下げても親しみがあまり上がらない変更があれば、「弱そう」と「親しみやすい」は別の軸だと読み取れます。

「一言」の欄も見直してください。強さの点数が同じでも、「ボス」と書く人が多い形と「村人」と書く人が多い形があれば、点数だけでは分からない役割の印象の差が出ています。

誤りやすい点

• 複数の項目を同時に変える：頭を四角にして同時に胴体も広げると、どちらが効いたのか分かりません。1回の比較で変えるのは一つだけにします。
• 作者本人が評価に加わる：作った本人は意図を知っているため、見たまま評価できません。回答者から外し、記録係に回ってください。
• 見せる前に説明する：「これは強いキャラです」などと言うと、形ではなく言葉が評価を決めます。
• 画像を見せる順番が全員同じ：前に見た画像が基準になります。順番は必ず入れ替えます。
• 回答者が身内ばかり：ゲームを遊ぶ人と似た層を選ぶのが理想ですが、難しければ、結果を「この人たちでの傾向」とだけ読んでください。
• スライダーの値を途中で変える：後半の回答者が別の絵を見ていたことになり、前半と比較できなくなります。
• 1つの結果を一般論にする：この実験で分かるのは、このキャラクターの構成、この数値、この回答者での傾向です。別の構成や絵柄では別の結果になる可能性があります。

次の行動

まず上のコードを保存し、実験1（頭の形）だけを3人に見てもらってください。記録表が埋まる感覚をつかんでから、残りの実験に進むと無理がありません。強さの印象を動かす項目が見つかったら、それを使い分けて敵と味方のキャラクターを描き、実際のゲームに入れて遊んでもらいます。HTMLファイル1つで完結していれば、アソバースには入力、表示の確認、公開の3段階で投稿でき、遊んでくれた人の反応からも、形の印象が伝わっているかを見直せます。