遊び方を初見に伝える

なぜ要るか

6-3で「説明文を画面に書いたら負け」と書きました。そして最後にこうも書きました。最初の1手だけ導くのは別だと。この術がその回収です。

このゲームの操作は「札をえらぶ → 的をえらぶ」の2段階です。作った本人には当たり前ですが、初見の人はここで手が止まりがちです。札を押しても何も起きない（ように見える）からです。そして止まるとしたら、最初の1回だけです。

逆に言えば、操作は1手目さえ置ければ、あとは同じ繰り返しです。残るはルール。これも説明書にはしません。初めての1戦のあいだ、要る瞬間にこよりが一言ずつ言う形にします。作るのは説明画面ではなく、最初の1戦の道案内です。

使う道具: なし

AIプロンプト

この術の作業をAIへ任せるときは、これをそのまま貼ってください。

index.html に、初めて遊ぶ人向けの道案内を足して。最初の1手は押してほしい場所を光らせて、キャラの吹き出しで一言添える。1) 開始と同時に勝利条件から。手札を光らせて『三つの的を取り合って、多く取ったほうの勝ち。まずは一枚、呼ぶ者をえらんで。』 2) 札を選んだら的が光る『その者を、どの的へ送る？』。そのあとは初めての1戦のあいだだけ、ルールを2回、キャラに一言ずつ言わせる。3) 最初の札が開いたら『置いた札は、その的に残るよ。合計が大きいほうが、その的を取る。』 4) 最後の1枚で『ぜんぶの的は守れないよ。どれを捨てる？』。決着まで見届けたら localStorage に記録して二度と出さない。あわせて表紙に、あそびかたボタンを置いて、記録を消してから同じ案内を何度でも始められるようにして。専用のチュートリアル画面は作らない。それ以外は変えないで。

台詞の部分は、自分のゲームの勝利条件と、最初に止まる場所の言葉に置き換えてください。

チュートリアル画面は作りません

先に、作らないものを決めます。

作らないもの	理由
遊び方の説明画面	読み飛ばされやすいうえ、読ませる時点で6-3の方針に反する
練習モード	本番と別の画面を作ると、二重にメンテすることになる
スキップボタン	案内は遊ぶ流れを止めない（読み終わるまで待つ画面が無い）ので、飛ばす対象が無い

本番の画面そのものを光らせて導きます。 押してほしい場所が光り、キャラが一言添える。それだけです。専用の画面を作らないので、遊び方が変わっても案内が古くなりません。

仕組みは「いま何歩目か」の数字1つです

var narai = { step: 0 };
function naraiStart() {
  if (localStorage.getItem(NARAI_KEY)) return;
  narai.step = 1;
}
function naraiNext(step) {
  if (!narai.step) return;
  narai.step = step;
  if (step === 0) localStorage.setItem(NARAI_KEY, '1');
}

narai.step が「案内のいま何歩目か」を覚えている数字です。naraiStart は、NARAI_KEY という名前で「もう案内を見た」記録が残っていれば何もせず、無ければ1歩目から始めます。naraiNext は歩を進める係で、0を渡されたときだけ「見終わった」記録を残します。案内の状態がこの数字1つに集まっているので、途中の分岐が増えません。

step が1なら手札を、2なら的を光らせます。光らせ方は、描画のところでクラスを1つ足すだけです。

var cls = 'card' + (selected === id ? ' selected' : '') + (narai.step === 1 ? ' sasu' : '');

.sasu { animation: yobu 1.5s infinite; border-color: var(--gold) !important; }

クラスというのは、見た目の指定に付ける名札です。JS側では1歩目のときだけ sasu という名札を足し、CSS側でその名札にゆっくり明滅する動きと金色の枠を割り当てています。つまり光らせるために描画の仕組みを作り替えてはいません。名札を足すか足さないかだけです。

進み方はこうです。入り口で勝利条件、前半の2歩で操作、後半の2歩で残りのルールを伝えます。

開始と同時に、まず「どうなったら勝ちか」。こより「三つの的を取り合って、多く取ったほうの勝ち。まずは一枚、呼ぶ者をえらんで。」手札が光る。
札を選ぶと、今度は的3つが光る。こより「その者を、どの的へ送る？」
最初の札が開いた瞬間に、ルールの芯をひとこと。「置いた札は、その的に残るよ。合計が大きいほうが、その的を取る。」
最後の1枚の前に、面白さの1行をそのまま。「最後の一枚。ぜんぶの的は守れないよ。どれを捨てる？」
決着まで見届けたら localStorage に記録して、二度と出しません。

残りのルール（的を多く取ったほうの勝ち）は、言わせていません。決着の文「2つの的を守って、あなたの勝ちです！」が、それ自体で説明になっているからです。6-3で作った画面が仕事をしてくれる場所では、案内は黙ります。

「二度と出さない」が肝です。 2回目からの起動でも案内が出ると、遊ぶ人は毎回それを消す作業をさせられます。案内は初見の1回だけの持ち物です。

案内の言葉は世界観で言います

「カードをクリックしてください」とは言わせていません。「呼ぶ者をえらんで」です。

これは飾りではなく実利があります。案内が同時に世界観の説明を兼ねるからです。この一言で「札は呼べる者だ」「自分では戦わないんだ」が伝わります。操作説明と世界観の導入を別々にやると2回読ませることになりますが、兼ねれば1回で済みます。

やってみる

止まる場所を1つだけ特定する

案内を作る前に、どこで止まるのかを実際に見ます。想像で決めると、止まらない場所に案内を付けることになるからです。誰かに黙って渡して、最初に手が止まった場所をメモします。それが案内する場所です。2つ以上案内したくなったら、画面の方を疑ってください（6-3）。

AIに頼む

claude -p "index.html に、初めて遊ぶ人向けの道案内を足して。最初の1手は押してほしい場所を光らせて、キャラの吹き出しで一言添える。1) 開始と同時に勝利条件から。手札を光らせて『三つの的を取り合って、多く取ったほうの勝ち。まずは一枚、呼ぶ者をえらんで。』 2) 札を選んだら的が光る『その者を、どの的へ送る？』。そのあとは初めての1戦のあいだだけ、ルールを2回、キャラに一言ずつ言わせる。3) 最初の札が開いたら『置いた札は、その的に残るよ。合計が大きいほうが、その的を取る。』 4) 最後の1枚で『ぜんぶの的は守れないよ。どれを捨てる？』。決着まで見届けたら localStorage に記録して二度と出さない。あわせて表紙に、あそびかたボタンを置いて、記録を消してから同じ案内を何度でも始められるようにして。専用のチュートリアル画面は作らない。それ以外は変えないで。"

「専用のチュートリアル画面は作らない」を必ず入れてください。 言わないと、モーダルで3ページの説明書が返ってきがちです。丁寧にすることがAIの善意なので、丁寧にしない指定はこちらの仕事です。

見える入り口を常設する

ここは実際に指摘されて直した点です。初回自動だけの案内は、入り口が誰にも見えません。 初回に流し読みした人、久しぶりに戻ってきた人、隣で見ていて自分もやりたくなった人が、たどり着けなくなります。

だから表紙に、初心者マーク付きの「🔰 あそびかた」ボタンを置きます。中身は、記録を消してから同じ案内を始めるだけです。案内の台詞は、5-3の仕組みでこよりの声でも流れます。
```
el('naraiBtn') && el('naraiBtn').addEventListener('click', function () {
  localStorage.removeItem(NARAI_KEY); // 何度でも見られる入り口。初回済みの記録を消してから始める
  hajimeru(true); // こよりの声で案内するので音あり
});
```
先頭で el('naraiBtn') && と書いているのは、そのボタンが無い画面でこの行が動いてエラーになるのを避けるためです。中身は2つだけで、見終わった記録を消し、案内をもう一度始めています。

自動で出す仕掛けと、自分から入れる入り口は、両方要ります。 前者は初見のため、後者はそれ以外の全員のためです。開発中の確認にも、このボタンがそのまま使えます。

保存する

git add .
git commit -m "最初の1手だけ導く手習いを足した"

つまずきどころ

案内が毎回出る

置き終わったときに localStorage へ記録するのを忘れています。「どこで終わりにするか」を指示に入れ忘れると起きます。

点滅がうるさい

光りっぱなしより、ゆっくり明滅する方が目に刺さりません。また、動きを減らす設定の人にはアニメーションを止めます。

@media (prefers-reduced-motion: reduce) {
  .target, .flash, .card, .sasu { transition: none; animation: none; }
}

prefers-reduced-motion: reduce は、端末側で「動きを減らす」設定にしている人を見分ける仕組みです。画面の動きで気分が悪くなる人がいるので、その人にはアニメーションを全部止めます。設定していない人には何も変わりません。

ルールを一度に全部説明したくなる

こらえてください。言わせるのはその瞬間に効く一言だけです。このゲームでルールを言うのは2回だけで、どちらも「いま起きたこと」「いま決めること」に張り付いています。まとめて言うと、それは壁の説明文と同じ形になり、読み飛ばされやすくなります。どうしても伝わらないルールがあるなら、それは案内ではなく画面の仕事です（6-3）。

案内の途中で最初からボタンを押された

途中の step が残って、光る場所がちぐはぐになります。仕切り直しのときは step も一緒に初期化してください。

Windows の場合

差はありません。

次の一歩

自分のゲームを、説明ゼロで誰かに渡してみてください。

最初に止まった場所が、あなたのゲームの「1手目」です。そこだけ光らせれば、説明書は要りません！

ここまでの三つの的

この講座は、見本ゲーム「三つの的」を術ごとにすこしずつ育てながら進みます。下にあるのはこの術を終えた時点の実物です。そのまま遊べます。

別の画面でこのゲームを開く