子供と大人で最初に触る場所は違うか
遊びをつくる執筆にClaudeを使用しています。
タイトル画面を、小学生と大人にそれぞれ説明なしで渡す場面を考えてみます。画面の中央には大きなタイトル、右下には小さな「はじめる」ボタン、背景には動くキャラクターがいます。ボタンへ指を伸ばす人もいれば、まずキャラクターに触れる人も、画面の端を押してみる人もいるかもしれません。 作り手は自分が何度も見た画面を基準に、「ここを押すはず」と考えがちです。その想定が年齢の違う人にも当てはまるかは、実際に渡して見ないと分かりません。この記事は、その差を自分で確かめるための実験の設計書です。結果は書きません。問いの立て方、準備、手順、記録の取り方、結果の読み方、失敗しやすい点を順に示します。 確かめる問いは次の1つです。同じ画面を、同じ条件で、説明なしに渡したとき、年齢の違う人は最初の30秒で「どこを」「いつ」触るか。
「最初の操作」を決め、記録項目を固める
最初に、何を記録するかを決めます。ここが曖昧だと、後で比べられなくなります。
「最初の操作」は、画面が表示されてから最初に起きた入力（タップ、クリック、キー押下）とします。視線や手の動きは含めません。記録する項目は次の5つです。
- 最初の入力までの秒数：画面表示から最初の入力まで。入力がなければ「なし」
- 最初の入力の対象：下の領域コードのどれか
- 最初の入力の種類：タップ、クリック、キー
- 30秒間の入力の総数
- 最初の入力で画面に変化が起きたか：起きた、起きなかった
対象は、画面を領域に分けたコードで記録します。例を挙げます。実際のゲームに合わせて増減してください。
- title、領域：タイトル文字
- start、領域：開始ボタン
- char、領域：キャラクターや主役の絵
- deco、領域：背景や飾りなど、反応しないはずのもの
- menu、領域：設定、ヘルプなどの補助ボタン
- blank、領域：何もない余白
「deco」と「blank」の記録は特に重要です。反応しないはずの場所に最初の入力が集まるなら、その画面は「触れる場所」と「触れない場所」を見分けさせられていない可能性があります。
準備するもの
同じ端末、同じ画面、同じ版
年齢だけを動かすために、それ以外はそろえます。端末は1台に固定し、画面の向きと明るさ、音量も同じにします。ゲームも同じ版を使い、途中で直さないでください。タッチ操作に慣れた人とマウス操作に慣れた人では、最初の動きが違うことがあります。そのため、年齢群ごとに端末を変えるのは避けます。
対象の人数と群
年齢群は、たとえば「小学校低学年」「小学校高学年」「大人」のように分けます。各群3〜5人を目安にします。この人数で一般的な結論は出ません。目的は、自分の画面で起きやすい傾向と、直すべき箇所を見つけることです。
記録用の最小コード
入力の時刻と対象を自動で残すと、観察者の見落としを減らせます。次のコードは単独で動きます。外部通信はなく、記録は画面を開いている間だけ残ります。画面の中身は自作ゲームに差し替えてください。各要素に data-zone を付けるだけで、対象が記録されます。
<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>first-input log</title>
<style>
body{margin:0;font-family:sans-serif;background:#dde6f5}
#stage{position:relative;height:100vh;overflow:hidden}
#stage>*{position:absolute}
h1{left:10%;top:15%;margin:0;font-size:2.4rem}
#char{left:40%;top:45%;width:90px;height:90px;border-radius:50%;background:#f4b860}
#start{right:6%;bottom:8%;font-size:1rem;padding:8px 14px}
#menu{right:6%;top:6%;padding:6px 10px}
</style>
<div id="stage" data-zone="blank">
<h1 data-zone="title">ゲームの題名</h1>
<div id="char" data-zone="char"></div>
<button id="start" data-zone="start">はじめる</button>
<button id="menu" data-zone="menu">設定</button>
</div>
<script>
const t0 = performance.now(), log = [];
function rec(e){
const el = e.target.closest('[data-zone]');
log.push({
n: log.length + 1,
sec: ((performance.now() - t0) / 1000).toFixed(1),
type: e.type,
zone: el ? el.dataset.zone : 'none'
});
}
addEventListener('pointerdown', rec);
addEventListener('keydown', rec);
setTimeout(() => console.table(log), 30000);
</script>ページを読み込んだ時点が0秒です。参加者が替わるたびに再読み込みします。30秒後に開発者ツールのコンソールへ表の形で出力されるので、観察者がそれを写します。「deco」の要素を足して、反応しない場所も計測すると、より役に立ちます。
同意と配慮
子供に協力してもらう場合は、保護者に目的を説明し、同意を得てください。名前は記録せず「低学年A」のような符号だけにします。画面録画や録音をするなら、その点も事前に伝えます。途中でやめたくなったら、いつでもやめてよいことを子供本人にも伝えます。
手順：1人あたり3分前後
- 参加者を端末の前に座らせます。ゲームはまだ見せません。
- 台本を読みます。「この画面を30秒、好きなように触ってください。何もしなくても大丈夫です。分からなくても質問には答えません」。この言い方を全員で同じにします。
- 画面を読み込み、30秒間は黙って見ます。助言も、うなずきも、笑いもしません。
- 30秒たったら、コンソールの表を写します。観察者メモには、迷っている様子、画面を見回す動き、声に出した言葉を短く書きます。
- 終わったら一つだけ聞きます。「何をする画面だと思いましたか」。答えは、そのまま書き留めます。
- 次の参加者のために、ページを再読み込みします。
順番は、年齢群が偏らないよう交互にします。大人から始めて子供で終えると、観察者の慣れが一方の群にだけ影響します。
結果の読み方：こうなればこう判断する
結果が出たら、群ごとに5項目を並べます。まず見るのは、最初の入力の対象が群ごとにどう分かれたかです。次の表は、もしそうなったら何を疑うかの目安です。あくまで仮説であり、あなたの画面でどうなるかは測るまで分かりません。
- どの群も最初の入力がstartに集中する、疑う点：入口は機能している可能性が高い、次の一手：入力後の変化の分かりやすさを次に確かめる
- 子供でcharが多く、startが少ない、疑う点：絵が「触れそう」に見え、ボタンが目立たない、次の一手：charを触ったときの反応を用意するか、startを目立たせる
- 大人でmenuやtitleが多い、疑う点：説明を探す動きかもしれない、次の一手：説明を探さなくても始められるか見直す
- decoやblankに入力が集まる、疑う点：触れる場所と触れない場所の区別が弱い、次の一手：見た目の差を作る、または反応を足す
- 入力が「なし」の人がいる、疑う点：何をすればよいか分からないか、様子を見ている、次の一手：迷っている様子のメモと照らして原因を分ける
- 群の中でも人によって大きくばらつく、疑う点：年齢以外の要因（ゲーム経験など）が大きい、次の一手：年齢での単純化をやめ、経験の有無を聞いて分けて見る
次に、最初の入力までの秒数を見ます。短ければ画面が分かりやすい、長ければ分かりにくい、とは限りません。慎重な人は長く、勢いのある人は短くなるだけかもしれないためです。秒数は、対象のばらつきや「変化が起きたか」と合わせて読んでください。
最初の入力で変化が起きなかった人が多い場合は、年齢差よりも画面の問題である可能性が高くなります。その場合、「何も起きなかった」入力が2回、3回と続いたかどうかも見ます。続くなら、反応のない場所に何度も触れさせている状態です。
起こりやすい誤り
- 説明しすぎる：台本以外の言葉を足すと、最初の入力が観察者の言葉に引きずられます。質問されても「触ってみてください」とだけ返します。
- 近くで見られる緊張：観察者が真横に座ると、特に大人は無難な動きを選びがちです。少し離れ、画面を見る位置を決めておきます。
- 保護者の口出し：子供の隣の保護者が「ここだよ」と言うことがあります。事前に「黙って見ていてください」と頼みます。
- 端末の違いを年齢差と取り違える：タッチとマウスで動きが変わります。端末は固定し、普段使い慣れた端末が違う場合は、そのことも記録します。
- 文字が読めないことを見落とす：子供は文章を読まずに絵から触り始めることがあります。漢字の読みやすさも、群の違いとして記録します。
- ボタンの大きさ：指で押す端末では、小さなボタンは押し損ないやすくなります。押し損ないはdecoやblankの記録として現れます。狙いが違ったのか、位置がずれたのかは、観察メモで見分けます。
- 1人の結果で結論を出す：数人の差は、年齢ではなく個人差かもしれません。傾向として読み、直した版でもう一度同じ手順を行ってください。
- 参加者が変わる版の比較：直した後の版を、同じ人で試すと、前の記憶が入ります。新しい参加者を用意するか、期間を空けてください。
次の行動
まず、自作ゲームの入口画面に data-zone を付けて、記録コードを組み込んでください。次に、大人と子供を各2人ずつ、同じ台本で試してください。出た表を見て、最初の入力が集まった場所が自分の想定と違えば、そこが最初に直す箇所です。
公式作品で練習したい場合は、気になる作品の入口画面を同じ手順で観察できます。ただし、画面の細部は作品を開いて確かめてください。直した版でもう一度同じ手順を行えば、変更の効果を比べられます。
