数字を一切表示しないパズルを作る：粒の並びだけで「手数の多さ」は伝わるか

問いを一つに絞り、「数字なし」の範囲を決める

問いは次の一つです。見た目の差の大きさが同じで、必要な手数だけが違う盤面を並べたとき、遊ぶ前の「簡単そう／難しそう」の予想は、実際の手数の順番と一致するか。

題材は、横一列に並んだ容器の中身をならすパズルです。各容器には粒が積まれ、点線の目標ラインがあります。粒は隣り合う容器にだけ1つずつ動かせます。「隣だけ」という制約が、見た目と手数をずらす仕掛けです。粒が余った容器と足りない容器が隣にあれば短い手数で済みますが、両端に離れていれば間の容器を経由するぶん手数が増えます。見た目の「余り1つ、不足1つ」は同じでも、必要な手数は変わります。

次に「数字を一切表示しない」の範囲を先に決めておきます。決めないまま作ると、後から紛れ込みます。

• 画面上の文字：手数、残り、ステージ番号、「1/3」のような進行表示、タイトルの数字を含めません。
• 見えない文字：aria-label、title、alt など、読み上げや吹き出しに出る文字にも数字を入れません。
• 名前：ファイル名、ブラウザのタブ名、ステージ名に数字を使いません。
• 数えられる表現：粒は数えようと思えば数えられます。これは禁止せず、後述する比較条件で影響を見ます。

準備するもの：隣だけ動かせる最小のパズル

用意するのはHTMLファイル1つ、ストップウォッチ（スマホで可）、記録用の紙、参加者3〜5人です。次のコードをメモ帳などに貼り、.html で保存するとブラウザで動きます。外部ライブラリは使っていません。

<!doctype html>
<meta charset="utf-8">
<title>ならす</title>
<style>
body{font-family:sans-serif;background:#f4efe6;text-align:center}
#row{display:flex;gap:12px;justify-content:center;margin:24px}
.col{width:56px;height:220px;border:2px solid #555;border-top:none;display:flex;flex-direction:column-reverse;cursor:pointer;position:relative;background:#fff}
.col.sel{outline:3px solid #d2691e}
.u{height:20px;margin:1px;background:#3b82a0}
.goal{position:absolute;left:-6px;right:-6px;border-top:3px dashed #c0392b;pointer-events:none}
</style>
<h1>ならす</h1>
<div id="row"></div>
<p id="msg"></p>
<script>
const G=[2,2,2,2,2];
const stages=[{now:[3,1,2,2,2],goal:G},{now:[3,2,2,2,1],goal:G},{now:[5,0,0,0,5],goal:G}];
let s=0,cur,sel=null,moves=0,t0;
function load(){cur=[...stages[s].now];moves=0;sel=null;t0=Date.now();draw()}
function draw(){row.innerHTML='';cur.forEach((n,i)=>{
 const c=document.createElement('div');c.className='col'+(sel===i?' sel':'');
 for(let k=0;k<n;k++){const u=document.createElement('div');u.className='u';c.append(u)}
 const g=document.createElement('div');g.className='goal';g.style.bottom=stages[s].goal[i]*22+'px';c.append(g);
 c.onclick=()=>tap(i);row.append(c)})}
function tap(i){
 if(sel===null){if(cur[i]>0)sel=i}
 else{if(Math.abs(sel-i)===1){cur[sel]--;cur[i]++;moves++}sel=null}
 draw();check()}
function check(){
 if(cur.every((n,i)=>n===stages[s].goal[i])){
  console.log({stage:s,moves,sec:Math.round((Date.now()-t0)/1000)});
  msg.textContent='そろいました';
  s=(s+1)%stages.length;setTimeout(()=>{msg.textContent='';load()},900)}}
load();
</script>

画面に数字は一切出ません。手数と秒数はブラウザの開発者ツールのコンソールに出るので、記録する実験者だけが見ます。参加者に画面を見せるときは、コンソールを閉じておいてください。

盤面は3つです。

• 近い、容器ごとの粒（左から）：3, 1, 2, 2, 2、見た目の特徴：山と谷が隣り合う、隣だけ・1粒ずつの最小手数：1
• 遠い、容器ごとの粒（左から）：3, 2, 2, 2, 1、見た目の特徴：山と谷が両端に離れる、隣だけ・1粒ずつの最小手数：4
• 大きい、容器ごとの粒（左から）：5, 0, 0, 0, 5、見た目の特徴：両端が山で中央が空、隣だけ・1粒ずつの最小手数：8

最小手数は、左から順に「目標との差の累積」を取り、その絶対値を足すと求まります。たとえば「遠い」は累積が1, 1, 1, 1となり合計4です。作る盤面を変えるときは、粒の総数が目標の合計と一致しているか必ず確かめてください。一致しないと、どう動かしても終わらない盤面になります。

「近い」と「遠い」は、余りと不足が1つずつという見た目の差の量が同じです。違うのは距離だけです。この2つが実験の中心になります。

手順：同じ盤面を見せ方だけ変えて遊んでもらう

見せ方の条件を、粒の個数を数えやすい順に3つ用意します。

• 条件A（粒）：上のコードのまま。
• 条件B（連続した棒）：粒を個別に作らず、高さ n*22px の1枚の色の棒にします。数えにくくなりますが、高さは比べられます。
• 条件C（濃淡、任意）：容器の高さをすべて同じにして、背景の濃さだけで量を表します。1粒の差が色のわずかな差になるため、読み取りがかなり難しくなります。色だけに頼る表現なので、色の見え方に個人差がある点にも気をつけてください。

参加者1人あたりの流れは次のとおりです。

1. 操作する前に画面を見せ、「この盤面は少ない動きで終わりそうか、多い動きが要りそうか」を、数字を使わず「少ない／ふつう／多い」で答えてもらいます。
2. 実際に遊んでもらい、終わるまで助言をしません。
3. 3盤面をすべて遊び終えたら、遊んだ3つを「簡単だと思った順」に並べてもらいます。

順番の偏りを避けるため、参加者ごとに盤面の順を入れ替えます。たとえば1人目は近い→遠い→大きい、2人目は大きい→近い→遠い、というようにします。条件は、同じ参加者に複数を遊んでもらうと学習効果が出るため、まず条件Aだけで一巡し、別の日や別の参加者で条件Bを試すと比べやすくなります。

記録の取り方

記録する単位は「1人×1盤面×1回」です。やり直し（再読み込み）をした場合は、回数として別に残します。

• 事前予想、取り方：解く前の口頭回答を「少ない／ふつう／多い」で記録
• 手数、取り方：コンソールの moves
• 秒数、取り方：コンソールの sec
• つまずき、取り方：逆向きに動かした、選択をやめたなど、気づいた様子を一言
• 事後の順位、取り方：3盤面を簡単だと思った順に並べた結果

「つまずき」は一言メモで十分ですが、これが最も多くを教えてくれます。たとえば「遠い」で山の粒を隣へ動かした直後に止まる様子があれば、距離が見えていなかった手がかりになります。

結果の読み方と誤りやすい点

まず「近い」と「遠い」の事前予想を比べます。この2つは見た目の差が同じなので、予想の差が出るかどうかが問いの答えです。

• 予想が同じで、手数だけ違う：数字なしでは距離の違いが伝わっていません。難しさを伝える工夫が別に要ります。例として、導入のステージで「粒は隣にしか動かない」ことを体験させる、移動の軌跡を残して経由の必要を見せる、といった方向が考えられます。
• 予想の段階で「遠い」を多いと答える人が多い：山と谷の配置から距離を読み取れているということです。条件AとBで同じ傾向が出るかも見てください。
• 条件Aと条件Bで予想が分かれる：粒を数えられることが判断に影響している可能性があります。数えさせない表現が難易度の伝わり方を変えるかどうかの手がかりになります。
• 事後の順位が手数の順と一致する：遊んだ後なら難しさは分かるという意味です。遊ぶ前に伝わらなくても、遊んだ後に納得できるなら、体験としては成立している可能性があります。

参加者が3〜5人の観察では、統計的に「差がある」とは言えません。傾向の確認と、つまずきの質を見る材料として使ってください。

誤りやすい点は次のとおりです。

• 総数のずれた盤面を作ってしまい、解けない盤面で参加者が止まります。
• 参加者に「隣にしか動かせません」と先に言ってしまい、予想の判断が変わります。説明は最初に全員へ同じ内容を伝えます。
• 手数を画面のどこかに出してしまいます。デバッグ用の表示を消し忘れないようにしてください。
• 「大きい」盤面が最後だと、疲れや慣れで時間が伸び縮みします。順序を入れ替えて影響を分けます。
• 色の濃淡だけで量を伝える条件Cは、色の見え方が人によって異なります。結果を一般化せず、読み取りの難しさの確認にとどめてください。

次の行動

保存したHTMLを開き、まず自分で3盤面を遊んで、コンソールの手数が表の最小手数と合うことを確かめてください。そのうえで、身近な3人に「近い」と「遠い」だけでも予想を口頭で答えてもらい、結果を記録表に書き込んでみましょう。予想が分かれなかったなら、どんな手がかりを足せば伝わるかが、次に作るステージの課題になります。