ドット絵を8×8で描く：最小の解像度で伝わる形

問いと準備：何を「決め手」と呼ぶか

問いの立て方

確かめたい問いは次の1つです。

8×8のキャラクターを見た人が「それが何か」を答えるとき、輪郭（シルエット）、色、目印になる1点、縦横の比率のうち、どれを手がかりにしているか。

「決め手」とは、それを取り除くと答えられなくなる要素のことです。見た人が「ここを見た」と言った要素ではなく、削ったら正答が崩れた要素を指します。この区別が、記録と読み方の軸になります。

仮説は事前に1行で書いておきます。たとえば「ネコとウサギは、色を揃えても耳の形で区別できる」といった形です。外れても構いません。外れたことが分かるように、先に書いておくことが目的です。

準備するもの

• お題を6つ。系統が離れたものを4つ、似たものを2つ混ぜます。たとえば「キノコ」「ロボット」「魔法使い」「ゴースト」と、似たペアの「ネコ」「ウサギ」です。似たペアは、区別の決め手がどこにあるかを見るための仕掛けです。
• 描く道具。方眼紙に8×8の枠を引いて塗るか、下のエディタを使います。紙の場合は、枠を18個以上用意します。
• 回答してくれる人。3〜5人が目安です。少人数なので、結果は統計ではなく傾向として読みます。描いた本人は回答者に含めません。答えを知っているため、見え方が偏るからです。
• 画像を見せる環境。同じ画面、同じ拡大率で見せます。拡大でにじませないことが重要です。

8×8エディタ（そのまま保存して開けます）

次のコードをdot8.htmlとして保存し、ブラウザで開きます。色は上から白（消しゴム兼背景）、黒、赤、青です。右下の小さな絵は実寸に近い確認用で、widthとheightの値を変えると、実際のゲームで使う大きさに合わせられます。

<!doctype html>
<meta charset="utf-8">
<title>8x8ドットエディタ</title>
<style>
canvas{image-rendering:pixelated;width:320px;height:320px;outline:1px solid #888;touch-action:none}
button{width:32px;height:32px;margin:2px}
</style>
<div id="pal"></div>
<canvas id="c" width="8" height="8"></canvas>
<p><button onclick="clr()" style="width:auto">全消去</button>
<button onclick="save()" style="width:auto">PNG保存</button>
<canvas id="s" width="8" height="8" style="width:64px;height:64px"></canvas></p>
<script>
const cols=["#ffffff","#222222","#e0533d","#3d7be0"];
let cur=1;
const pal=document.getElementById("pal");
const c=document.getElementById("c"),x=c.getContext("2d");
const s=document.getElementById("s").getContext("2d");
cols.forEach((v,i)=>{const b=document.createElement("button");b.style.background=v;b.onclick=()=>cur=i;pal.appendChild(b)});
function show(){s.drawImage(c,0,0)}
function clr(){x.fillStyle=cols[0];x.fillRect(0,0,8,8);show()}
function paint(e){
 if(!(e.buttons&1))return;
 const r=c.getBoundingClientRect();
 const px=Math.floor((e.clientX-r.left)/r.width*8),py=Math.floor((e.clientY-r.top)/r.height*8);
 x.fillStyle=cols[cur];x.fillRect(px,py,1,1);show();
}
c.onpointerdown=c.onpointermove=paint;
function save(){const a=document.createElement("a");a.href=c.toDataURL();a.download="dot8.png";a.click()}
clr();
</script>

image-rendering:pixelatedの指定が、拡大したときにマスの境目をぼかさないための設定です。この指定がないと、拡大表示で絵がにじみ、実験の条件が崩れます。

手順：描く、見せる、削る

ステップ1：3つの条件で全お題を描く

同じお題を、色数の違う3つの条件で描きます。

• 条件A：黒1色だけ（背景は白）。形だけで勝負します。
• 条件B：黒に1色を足した2色。
• 条件C：4色すべて使用可。

6お題×3条件で18枚です。1枚あたりの制限時間は事前に決めます。5分程度を目安にし、時間内に納得できなくても、その時点のものを提出します。描き直しを繰り返すと、条件ごとの手のかけ方が揃わなくなります。

描くときは、使った要素をメモしておきます。「耳を頭の左右に2マスずつ」「目は黒の1点ずつ」のような簡単なものでかまいません。後の削り実験で使います。

ステップ2：見せて答えてもらう

回答者には1枚ずつ見せ、6択で答えてもらいます。選択肢は毎回6つ全部を、順番を変えて並べます。見せる時間は事前に決めた同じ長さ（たとえば3秒）に統一します。時間を決めるのは、じっくり見て推理した答えと、ぱっと見て分かった答えを混ぜないためです。

ここで最も崩れやすいのが「覚えてしまう」問題です。同じ回答者に、同じお題を3条件とも見せると、2枚目以降は答えを知った状態で見ることになります。そこで、回答者ごとにお題と条件の組み合わせを回します。

• 回答者1、ネコ：A、ウサギ：B、キノコ：C、ロボット：A、魔法使い：B、ゴースト：C
• 回答者2、ネコ：B、ウサギ：C、キノコ：A、ロボット：B、魔法使い：C、ゴースト：A
• 回答者3、ネコ：C、ウサギ：A、キノコ：B、ロボット：C、魔法使い：A、ゴースト：B

回答者1人につき各お題を1回しか見ないので、答えの記憶が混ざりません。人数を増やすときは、この3行を繰り返します。

答えたら、続けて「何を見てそう思いましたか」を一言で聞き、そのまま書き取ります。

ステップ3：特徴を1つずつ削る

正解された絵を、別の回答者に削った版で見せます。1枚の絵につき、次のように要素を1つだけ変えた版を作ります。

• 耳や角など、目印になりそうな突起を消した版
• 目などの内部の点を消した版
• 色を黒1色に置き換えた版
• 全体を左右の幅の違う形に変えた（比率を変えた）版

変えるのは1回に1要素だけです。2つ同時に変えると、どちらが効いたのか分からなくなります。削った版は、元の絵を見ていない回答者に見せます。見せる時間は元の実験と同じにします。

記録と結果の読み方

記録の取り方

1回答につき1行、次の項目を記録します。

• 回答者、内容：番号だけ（名前は不要）
• お題、内容：正解のキャラクター
• 条件、内容：A／B／C、削り版なら削った要素
• 回答、内容：選んだもの
• 正誤、内容：○か×
• 迷い、内容：即答／少し迷った／かなり迷った の3段階
• 決め手の発言、内容：回答者の言葉をそのまま

時間を秒単位で測る必要はありません。ストップウォッチを使うと、操作の遅れが誤差として混ざります。迷いは3段階の主観で十分です。

読み方の基準

数字を見る前に、次の判断基準を決めておきます。人数が少ないので、基準なしに見ると、都合のよい解釈に流れやすくなります。

1. 条件間の差：条件AとCの正答数を比べます。差が1〜2件程度なら、偶然の範囲と見て「差なし」と扱う、のように閾値を先に決めます。差が小さいなら、色に頼らず形だけで伝わっている可能性があります。差が大きいなら、色が決め手になっているお題がどれかを探します。
2. 誤答の行き先：間違いが特定の2つに集中するなら、その2つを分ける特徴が足りていません。ネコとウサギが取り違えられるなら、耳の形か長さを見直す材料になります。
3. 削り版の変化：1要素を削って正答が崩れたなら、その要素が決め手の候補です。崩れなかったなら、その要素は削っても伝わる余裕分で、マスを他に回せます。
4. 発言の分類：決め手の発言を「輪郭」「色」「目印の1点」「比率」「その他」に分けて数えます。ただし発言は削り実験の補助にとどめます。人は自分が何を見たかを正確に言えないことがあるからです。

「迷い」が多い絵は、正解していても伝わり方が弱い絵です。正答数が同じなら、迷いの少ない描き方を採用します。

起こりやすい誤り

• 自分で判定する：描いた本人は正解を知っているので、どんな絵でも読めてしまいます。必ず他人に答えてもらいます。
• お題が簡単すぎる、または似すぎる：全員が正解するお題や、どう描いても区別がつかないお題では差が出ません。系統が離れたものと、似たペアを混ぜておくのはそのためです。
• 選択肢の順番が固定：同じ位置に正解が来ると、位置で答えが決まります。毎回並べ替えます。
• 見せる大きさがバラバラ：画面ごとに拡大率が違うと、条件を比べられません。同じ端末、同じ拡大率で見せ、拡大表示のにじみがないことを確認します。
• 削り版の複数同時変更：1度に変えるのは1要素だけです。
• 少人数を一般化する：3〜5人の結果は、あくまでその回答者と、その絵の話です。別のお題や別の描き方に当てはまるかは、描き足して確かめます。

次の行動

まず、お題を6つ決めて、似たペアを1組入れます。次に、条件Aの6枚を描き、回答者1人に見せるところまで進めてください。1人分の記録表ができれば、手順の不具合はそこで見つかります。

決め手が分かったら、描き方の方針を一言にして、次のキャラクターを描くときのルールにします。HTMLにまとめた作品は、アソバースにHTMLまたはZIPで投稿できます。入口は直下のindex.htmlです。小さなキャラクターが実際に遊ばれる画面で読めるかも、確かめてみてください。