画面を一度も更新しないゲーム：静止画の中で遊ぶ

「更新しない」を先に定義し、仮説を立てる

「一度も更新しない」という言葉は、そのままでは曖昧です。ページの再読み込みのことなのか、描画のことなのかで、実験の中身が変わってしまいます。この実験では次のように決めます。

• 禁止するのは、時間の経過だけで画面が変わることです。requestAnimationFrame、setInterval、setTimeout による描き替え、CSSの transition や animation、点滅する演出が対象です。
• 許可するのは、プレイヤーの入力（クリック、タップ、キー操作）を受けて、その場で一度だけ表示が切り替わることです。切り替わったあとは、次の入力まで何も起きません。

この定義にすると、ゲームの「時計」が時間から手番へ移ります。次に何かが起きるのは、プレイヤーが動いたときだけです。時間制限やリアルタイムの敵は使えませんが、その代わりに考える時間がすべてプレイヤーのものになります。盤面を読む、先を想像する、といった遊びが中心になります。

そこで立てる仮説は次の3つです。実験はこれを支持するか崩すかを見るためのものです。

1. 静止していても、変化が「一目で分かる」ことが保たれていれば、プレイヤーは動きの不在を不満に感じにくい。
2. 動きが担っていた「今、何が起きたか」の説明は、直前の手の印や数字などで代替できる。
3. 代替できない部分は、変化の理由を言葉で示すことで補える。

なお、動きを抑える設定をオンにしている人にとっては、動きのない設計は特別な工夫ではなく、普段どおりの体験です。アソバースの公式作品も「動きを抑える」設定に対応しています。静止で成立するゲームは、この設定を使う人にも同じ遊びを届けやすい設計だといえます。

準備と最小の試作

用意するものは次のとおりです。

• テキストエディタとブラウザ。ライブラリやサーバーは使いません。
• 下の試作コードを保存した index.html を1つ。
• 試してくれる人を3人以上。ゲームを作る人でなくても構いません。
• 時計かストップウォッチ、記録用の紙か表計算ソフト。

試作には、5×5の「ライツアウト」を使います。マスを押すと、そのマスと上下左右の隣のマスの点灯・消灯が反転し、すべて消せばクリアという古典的なパズルです。時間で動く要素が自然にゼロで、状態が盤面にすべて見えているため、静止画向きの題材です。盤面は全消灯の状態から8回ランダムに押して作るので、必ず解けます。

<!doctype html>
<meta charset="utf-8">
<style>
#b{display:grid;grid-template-columns:repeat(5,56px);gap:4px;width:292px;margin:auto}
button{height:56px;font-size:22px;background:#223;color:#fff;border:2px solid #345}
button.on{background:#fd6;color:#000}
button.last{outline:3px solid #e33}
</style>
<p id="s" style="text-align:center"></p>
<div id="b"></div>
<script>
const N=5,g=Array(N*N).fill(0),b=document.getElementById("b"),s=document.getElementById("s");
let moves=0,last=-1;
function flip(i){
  const x=i%N,y=(i/N)|0;
  [[0,0],[1,0],[-1,0],[0,1],[0,-1]].forEach(([dx,dy])=>{
    const a=x+dx,c=y+dy;
    if(a>=0&&a<N&&c>=0&&c<N)g[c*N+a]^=1;
  });
}
function draw(){
  [...b.children].forEach((e,i)=>{
    e.className=(g[i]?"on":"")+(i===last?" last":"");
    e.textContent=g[i]?"●":"○";
  });
  const left=g.filter(Boolean).length;
  s.textContent=left?`手数 ${moves} ／ 点灯 ${left}`:`全部消えました。手数 ${moves}`;
}
for(let i=0;i<N*N;i++){
  const e=document.createElement("button");
  e.onclick=()=>{flip(i);moves++;last=i;draw();};
  b.append(e);
}
do{for(let k=0;k<8;k++)flip(Math.random()*N*N|0);}while(!g.some(Boolean));
draw();
</script>

このコードは、入力のときにだけ draw() を呼びます。タイマーも transition もありません。点灯を色だけでなく「●」と「○」の形でも示しているのは、色の違いに頼らずに状態を読めるようにするためです。

手順と記録の取り方

比較する3つの条件

同じ試作の表示だけを変えて、次の3条件を作ります。

• A（素の静止）、表示するもの：盤面のみ、コードの変更：last=i の代入と、s.textContent を設定する行を外します
• B（手がかりつき）、表示するもの：盤面＋直前に押したマスの枠＋手数＋点灯数、コードの変更：上のコードのままです
• C（理由つき）、表示するもの：Bに加えて、「押したマスと隣の何マスが反転したか」の一文、コードの変更：flip が反転したマス数を数えて返すようにして、s に「3行2列を押して、5マスが反転しました」のような文を足します

条件Cの文は、動きが本来伝えていた「どこが、いくつ変わったか」を言葉に置き換えたものです。盤面の端では反転するマス数が減るので、文の数字は押した場所によって変わります。

進め方

1. 参加者1人につき、3条件を1回ずつ遊んでもらいます。順序は人によって回します（1人目はA→B→C、2人目はB→C→A、3人目はC→A→B）。人数が増えたら、この3通りを繰り返します。
2. 遊ぶ前に伝えるのは、ルール（押したマスと上下左右が反転し、全部消せばクリア）だけです。実験の狙いや条件の違いは伝えません。
3. 1回のプレイは、クリアするか、5分たつかのどちらかで終えます。
4. 各条件の直後に、2つの質問をします。「直前に自分がどのマスを押したか言えますか」「今の一手で何が変わったか説明できますか」。
5. 3条件が終わったら、「いちばん遊びやすかったのはどれか」と「画面が動かないことが気になった場面はあったか」を自由に話してもらいます。

何を、どの単位で記録するか

観察者は次の表を、1条件・1人につき1行ずつ埋めます。

• 初手までの秒数、単位：秒、取り方：画面を見せてから最初のクリックまでです
• クリア手数、単位：手、取り方：クリアできなかったときは「未」と書きます
• 手が止まった回数、単位：回、取り方：10秒以上操作がなかった回数です
• 直前の手を言えたか、単位：はい／いいえ、取り方：質問1への答えが実際の手と合っているかで判定します
• 変化を説明できたか、単位：はい／いいえ、取り方：質問2への答えが実際の変化と合っているかで判定します
• 自由記述、単位：文、取り方：発言をできるだけそのまま書きます

盤面はランダムなので、クリア手数は難しさのばらつきも含みます。手数の比較は参考程度にとどめ、中心に見るのは「手が止まった回数」と、直前の手や変化を言えたかどうかです。

結果の読み方

数が少ないため、統計的な結論は出ません。傾向を読み、次の設計判断につなげるための実験です。条件ごとに次のように読み分けます。

• Aでも「言えた」が多く、手が止まる回数も少ない場合。 盤面そのものが十分に読みやすく、素の静止画で成立しています。追加の表示は足さずに、盤面の見せ方を磨く方向に進みます。
• Aで「言えない」が目立ち、Bで改善した場合。 直前の手の印や数字が、動きの代わりを果たしています。手がかりは「どこを触ったか」と「全体がどうなったか」の2点を最低限として残します。
• Bでは改善せず、Cで初めて改善した場合。 問題は触った場所の記憶ではなく、変化の中身の理解にあります。文章で補うより先に、ルールの見せ方（隣のマスが連動することを盤面上で示す工夫）を見直す余地があります。
• BとCに差がない場合。 文章は不要な情報です。足さないほうが画面は静かに保てます。
• どの条件でも手が止まる場合。 フィードバック以前に、ルールの説明や盤面の難しさに原因があります。表示を足すより、盤面を小さくするなど、問題の側を調整します。
• 自由記述に「動かないのが物足りない」が複数出た場合。 手応えの不足です。音の追加や、押した直後だけ別の文言を出す工夫を、次の実験の条件として立てられます。ただし、その場合は条件Aに戻らず、新しい条件として別に記録します。

誤りやすい点

• 知らないうちに時間で動かしてしまう。 :hover に transition を付けたり、ボタンの :active で大きさを変えたりすると、定義の外に出ます。ブラウザの標準のフォーカス表示は問題ありませんが、自分で足した演出は点検します。
• 条件の順序を固定する。 最後の条件ほど慣れて有利になります。順序を回すのはそのためです。
• 実験の狙いを先に話す。 「動かない画面の実験です」と伝えると、感想が誘導されます。
• 色だけで状態を示す。 色の見分けにくい人には読めない盤面になります。形や文字でも示してください。
• 観察者が助け舟を出す。 手が止まっても、10秒の間は黙って記録します。止まること自体が、この実験の測りたい対象です。
• 1人の感想で結論を出す。 3人でも傾向が割れることがあります。割れたこと自体を記録し、人数を増やすか条件を絞って再実験します。
• コードを大きくしすぎる。 試作は盤面と表示の差分だけに絞ります。演出を足しながら比較すると、何が効いたのか分からなくなります。

次の行動

まず上のコードを保存し、自分で条件Aを遊んでみて、画面が止まっていることをどう感じるかをメモしてください。そのうえで、盤面を自分のゲームの題材に置き換え、同じ3条件を3人に試してもらうと、静止画で足りる部分と足りない部分が見えてきます。形になったら、HTML単体の作品としてアソバースに投稿できます。投稿画面で表示を確認してから公開できるので、遊び方の説明にも「画面は入力のときだけ変わります」と書いておくと、静止画の設計の意図が遊ぶ人に伝わりやすくなります。