「チュートリアル」を作り込む：最初の一手だけ導く

最初の一手を一文で決める

実装の前に、紙かメモに次の一文を書きます。

「このゲームの最初の一手は、【　】を【　】することです。」

たとえば「中央のマスをタップする」「光っている葉を見て、同じ順に押す」「紙ひこうきを左右に動かす」のような一文です。ここに二つの動作が入るなら、まだ絞れていません。最初の一手は一つの動作にします。

この一文を決めると、必要なものと不要なものが分かれます。

• 必要なもの：最初の一手の場所を示す手がかり、一手が通ったと分かる反応
• 後回しにするもの：得点の計算、失敗の条件、上級者向けの操作、設定画面の説明

後回しにしたものは捨てるわけではありません。二手目以降で、必要になった場面に出します。出す場所は、画面のその場か、投稿ページの紹介文や遊び方欄のどちらかです。アソバースの投稿画面にある「遊び方・最大参加人数」は任意の作者申告なので、ゲーム内に入れきれない補足の置き場として使えます。

公式作品の画面は、説明文の代わりに盤面側で手がかりを見せる例として参考になります。たとえば「潮目のオセロ」には返る石のプレビューと理由付きヒントが、「かたちのあいだ」には次の一手のヒントがあります。これらを導入として使っているかどうかは、作品を開いて自分の目で確かめてください。確かめるときは、説明文が先に出るのか、盤面が先に出るのか、一手目までに読む文字がどれだけあるかを見ます。

手順1〜3：何もしない時間を先に作る

導入でいちばん失敗しやすいのは、開いた瞬間に案内を出すことです。操作が分かる人にとっては邪魔になり、分からない人にとっても、画面を見る前に文字が出ると読み飛ばされやすくなります。そこで、最初は何も出さずに待つ作りにします。一定時間操作がなかったときだけ、最初の一手を示します。

1. 最初の一手の対象（ここでは中央のマス）を一つ決め、番号で持っておきます。
2. 開始から一定時間（ここでは3秒）、何も出しません。操作があるたびに待ち時間を数え直します。
3. 待ち時間を過ぎたら、対象だけを光らせ、短い一行を出します。誰かが一手を打ったら、光も一行も消します。

次のコードは、この3手順をそのまま動かす最小構成です。HTMLファイル1枚で動き、外部ライブラリは使いません。

<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
  body{font-family:sans-serif;display:grid;place-items:center;min-height:100vh;margin:0}
  #board{display:grid;grid-template-columns:repeat(3,80px);gap:8px}
  .cell{width:80px;height:80px;border:2px solid #345;border-radius:8px;background:#fff;font-size:28px}
  .hint{outline:4px solid #f90;animation:pulse 1.2s infinite}
  @keyframes pulse{50%{outline-offset:6px}}
  @media (prefers-reduced-motion:reduce){.hint{animation:none}}
  #msg{min-height:1.5em;margin:12px 0;text-align:center}
</style>
<div><p id="msg"></p><div id="board"></div></div>
<script>
const FIRST = 4;      // 最初の一手として導くマス（中央）
const WAIT = 3000;    // 何も出さずに待つ時間（ミリ秒）
let guided = true;    // 導入を出す間だけ true
let idle = null;
const board = document.getElementById('board');
const msg = document.getElementById('msg');
const cells = [];
for (let i = 0; i < 9; i++) {
  const b = document.createElement('button');
  b.className = 'cell';
  b.addEventListener('click', () => play(i));
  board.appendChild(b); cells.push(b);
}
function showHint() {
  if (!guided) return;
  cells[FIRST].classList.add('hint');
  msg.textContent = '光っているマスを押してみましょう';
}
function endGuide() {
  guided = false;
  clearTimeout(idle);
  cells[FIRST].classList.remove('hint');
  msg.textContent = '';
}
function play(i) {
  cells[i].textContent = '●';
  if (guided) endGuide();   // どのマスでも、一手打てば導入は終わる
}
function restartIdle() {
  clearTimeout(idle);
  idle = setTimeout(showHint, WAIT);
}
restartIdle();
</script>

ここでの設計判断は3つあります。

• 光らせるのは一か所だけです。 複数を光らせると、どれが最初なのかを考えさせてしまいます。
• どのマスを押しても導入は終わります。 指定の場所以外を押した人を「間違い」にせず、すでに分かっている人として扱うためです。「必ず指定の場所を押させる」設計にするかどうかは、ゲームの性質で決めます。順番が意味を持つゲームなら、指定の操作だけを通す選択もあります。
• 「動きを抑える」設定のときは点滅をやめます。 CSSのprefers-reduced-motionで、アニメーションだけを止め、輪郭の強調は残しています。アソバースの公式作品も「動きを抑える」設定に対応しているので、自作でも同じ配慮を入れておくと一貫します。

手順4〜5：消えるタイミングと言葉を決める

光る一マスができたら、次は「いつ消すか」と「何と書くか」を決めます。ここが作り込みの中心です。

1. 消える条件を決めます。 上のコードは「一手打ったら消える」です。ほかに、次の選択肢があります。

• 指定した操作が成功したときだけ消す
• 一定時間で自動的に消す
• 二手目まで残す

迷うときは、最初の一手が通った瞬間に消す形から始めます。残す案内は増やすより減らすほうが、後から調整しやすいからです。

1. 一行の言葉を決めます。 条件は次の三つです。

• 動詞で終わらせます（「押してみましょう」「動かしてみましょう」）。
• 目的や理由は書きません。「なぜ押すのか」は、押した後の反応で伝えます。
• 画面幅の狭い端末でも1行に収まる長さにします。

「押した後の反応」も導入の一部です。一手打ったとき、石が置かれる、音が鳴る、数字が動くなど、何かが変わったと一目で分かることが必要です。反応が弱いと、光る案内を消した後に「これで合っているのか」という不安だけが残ります。案内を削るなら、その分、一手目の反応を厚くします。

音で反応を返す場合は、音なしでも状況が分かる表示を一緒に用意します。公式作品の「こだまの森」は音なしでも遊べると案内されています。音を前提にしたゲームでも、導入の段階では視覚の手がかりを別に持つ考え方は参考になります。

手順6：自分以外の人で確かめる設計

導入の良し悪しは、作った本人にはほとんど分かりません。ルールを知っているので、案内がなくても迷えないからです。そこで、初めて遊ぶ人に画面を見てもらう小さな確認を設計します。ここに書くのは手順だけで、結果はあなたの手元で出るものです。

問い： 初めて見る人は、案内を出してから何秒で最初の一手を打てるか。案内なしでは打てるか。

準備するもの：

• 作品を開いた端末1台
• ストップウォッチ（スマートフォンの標準機能で足ります）
• 記録用のメモ（表形式が使いやすいです）
• そのゲームを一度も見たことがない人

手順：

1. 相手に「このゲームを遊んでみてください」とだけ伝えます。操作方法や目的は説明しません。
2. 画面を渡した瞬間にストップウォッチを始め、最初の一手が打たれた瞬間に止めます。
3. 待っている間に相手が口にしたこと、指が止まった場所、押した場所をメモします。声をかけたくなっても、助けずに黙って待ちます。
4. 終わったら、「最初に何をすればいいと思いましたか」と聞き、答えをそのまま書きます。

記録の取り方： 1回の確認ごとに、次の四つを1行にします。

• 最初の一手までの時間、単位：秒
• 最初に押した場所、単位：指定の場所か、別の場所か
• 案内が出てからの反応、単位：案内を見て打ったか、見ずに打ったか
• 相手が口にした疑問、単位：そのままの言葉

回数は、人を替えて数回行います。同じ人に2回目をお願いすると、すでに知っているので記録としては使えません。

結果の読み方：

• 案内が出る前に、多くの人が自分で打てていたら、案内は不要か、待ち時間を長くしてよい可能性があります。
• 案内が出てから打つ人が多いなら、案内が機能しています。時間が長すぎないかも見てください。
• 案内が出ても別の場所を押す人が続くなら、光らせ方か一行の言葉を見直します。
• 一手目を打った後に止まる人が目立つなら、問題は案内ではなく、一手目の反応か二手目の手がかりにあります。

人数が少ないうちは、傾向を断定せず、「この画面で止まりやすい場所の候補」を拾う目的にとどめます。録画する場合は、相手の同意を取ってください。

起こりやすい誤り

最小の導入にしたつもりでも、次の誤りは起こりやすいものです。

• 案内を足す方向にだけ直してしまう。 迷う人が出ると、説明を追加したくなります。まず光らせ方、反応、待ち時間のどれが原因かを切り分けます。
• 待ち時間を短くしすぎる。 開いてすぐに案内が出ると、自分で画面を見る前に指示されることになります。確認で、案内が出る前に打てた人がどれだけいたかを見て調整します。
• 導入が終わらない。 条件分岐を増やしているうちに、導入を消す条件を書き忘れることがあります。確認では、一手目の後に光や文字が残っていないかも見ます。
• 自分の端末だけで確認する。 画面が狭いと一行が折り返し、盤面を隠すことがあります。スマートフォンの縦画面でも一度開いてください。
• 導入の状態を保存しようとして肥大化する。 「導入を見たかどうか」を残したい場合、アソバースのアップロード作品内のlocalStorageは一時メモリーの互換処理で、永続の保存とは考えない方が安全です。クラウドセーブを使うなら、作品ごとにJSONで128KiBまでと決まっています。導入を見たかどうかのような小さな値なら容量は問題になりませんが、ログインしていない人には残らない点を前提に設計します。保存できない前提でも、導入は「操作がなければ出る」仕組みなので、再訪時に多少出ても大きな支障はありません。

次の行動

まず、自分のゲームの「最初の一手」を一文で書き出してください。次に、上のコードのFIRSTとWAITを自分のゲームに置き換えて、光る一か所と待ち時間だけを実装します。そのうえで、ゲームを見たことのない人に画面を渡し、最初の一手までの秒数と最初に押した場所を記録してみてください。