画面（UI）を作る

なぜ要るか

UIというのは、遊ぶ人が実際に見て触る部分のことです。札や的の並び、数字の表示、押せるボタン、そのすべてが含まれます。

山が7枚になって、遊べるようになりました。でも遊ぶ人が分からないことが増えています。

いま何手目か
あと何手あるか
どの的でリードしているのか
置いた札の合計はいくつか

これを説明せずに分かる状態にするのが、この術です。

判定は1つだけです。説明なしで遊べるか。 遊び方の説明文を書き足して解決するのは、この術では反則にします。

使う道具: なし

AIプロンプト

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

index.html の画面に2つ足して。1つは的ごとの合計を相手側と自分側に出して、多い方に色と『←リード』の文字を付ける。もう1つは『n 手目 / 全 n 手』の表示で、全体の手数は配る枚数から出す。数字を手で書かないで。決着したら『勝負あり』に変える。それ以外は変えないで。

的ごとの合計と手数の部分は、自分のゲームで遊ぶ人が知りたい2つに置き換えてください。

遊ぶ人が知りたいのは2つだけ

画面に足すものを決めます。増やしすぎると逆に読めなくなるので、2つに絞ります。

知りたいこと	出し方
いま何手目か	「3 手目 / 全 3 手」
どの的でリードしているか	的ごとに「相手 4 ←リード／自分 3」

これだけです。 履歴も、通算成績も、いま要りません。

実際の画面がこれです。

この1枚から、説明なしで読み取れることを挙げます。

3手目である。これが最後の1枚
門の的は相手が4でリード
蔵の的は自分が5でリード
井の的はまだ誰も置いていない
残り1枚で、取れる的は最大2つ ← 捨てる的を決める材料

最後の1行がこの画面の仕事です。 2-2で決めた「どの的を捨てて、どの的を取るか」を、遊ぶ人が計算できる状態にしています。面白さの1行に効かない情報は、画面に出しません。

合計を出すか出さないかは、面白さの判断です

ここは迷ったところなので、判断の過程を残します。

的ごとの合計は、出さなくても遊べます。 札が並んでいるので、足せば分かるからです。実際、最初は出していませんでした。

出すことにした理由は2つです。

理由	中身
暗算はゲームの面白さではない	足し算が得意な人が勝つゲームにしたくない
捨てる判断に毎回必要	見るたびに計算するなら、それは画面の仕事

逆に出さなかったものもあります。「この的を取るにはあと何点必要か」です。便利ですが、そこまで出すと考えることが無くなります。

便利さと面白さは、しばしば逆を向きます。 何を出すかは、2-2で決めた1行に照らして決めてください。

リードを色だけで示しません

これは見落とされやすい話です。

'<div class="sum' + (ts > ms ? ' lead' : '') + '">相手 ' + ts + (ts > ms && !finished ? ' ←リード' : '') + '</div>'

.target .sum.lead { color: var(--gold); }

条件 ? A : B は「条件が合っていれば A、合っていなければ B」という書き方です。ここでは相手の合計 ts が自分の合計 ms より多いときだけ、lead という印と「←リード」の文字を付けています。var(--gold) は、あらかじめ決めておいた金色を呼び出す指定です。

金色にするだけでなく「←リード」の文字を添えているのが要点です。

色だけで区別すると、色が見分けにくい人には同じに見えます。 文字を添えておけば、色に頼らず伝わります。

取った的の見せ方も同じ考え方です。

.target.won { transform: translateY(-8px); border-color: var(--gold); }
.target.lost { opacity: .55; }

translateY(-8px) は的を上へ8pxずらす指定で、取った的が浮き上がって見えます。opacity: .55 は少し透けさせる指定で、取られた的が沈んで見えます。

色（金）と位置（浮く）と濃さ（沈む）の3つを重ねています。1つが伝わらない人にも、残り2つで伝わります。

もう一歩やるなら、機械にも伝えます。読み上げソフトを使う人に「これは押せない」が伝わります。1行なので入れておいてください。

el.setAttribute('aria-disabled', finished ? 'true' : 'false');

aria-disabled は「この部品はいま押せない」を機械へ伝えるための印です。見た目は変わりませんが、読み上げソフトはこれを読んで「押せません」と伝えてくれます。

残り手数は、数えさせません

「2 手目 / 全 3 手」の1行です。

el('turninfo').textContent = finished ? '勝負あり' : (turn + 1) + ' 手目 / 全 ' + DEAL + ' 手';

finished は決着したかどうかを持っている入れ物です。決着していれば「勝負あり」、まだ途中なら手数の表示に切り替わります。turn は0から数えているので、turn + 1 で人が読む「◯手目」になります。

DEAL から出しているのが要点です。 6-2で配る枚数を4枚に増やしたとき、この表示も勝手に「全 4 手」になります。3 と書いていたら、増やした瞬間に嘘になります。

手札の枚数を数えれば分かる、とも言えます。でも数えさせた時点で負けです。 遊ぶ人の頭は、捨てる的を決めるために使ってもらいます。

やってみる

まとめて頼む

claude -p "index.html の画面に2つ足して。1つは的ごとの合計を相手側と自分側に出して、多い方に色と『←リード』の文字を付ける。もう1つは『n 手目 / 全 n 手』の表示で、全体の手数は配る枚数から出す。数字を手で書かないで。決着したら『勝負あり』に変える。それ以外は変えないで。"

「数字を手で書かないで」を必ず入れてください。 これが無いと 全 3 手 と直接書かれて、6-2でやった「増やしても付いてくる」が壊れます。

「色と文字の両方」も必ず言ってください。 言わないと色だけになります。AIは見た目をきれいにする方を選びがちです。

決着したときだけリードを消す

ここは自分で見て気づいた点です。
```
(ts > ms && !finished ? ' ←リード' : '')
```
決着後に「←リード」が残っていると、まだ途中のように見えます。 終わったら勝敗が答えなので、途中経過の言葉は消します。
誰かに遊んでもらう

ここが本番です。何も説明せずに渡してください。

見るのは3つです。
- 迷わず1手目を置けたか
- 「あと何回？」と聞かれなかったか
- 最後の1枚で、どの的に置くか迷ったか
3つ目が大事です。迷っていたら成功です。 迷わず置いたなら、判断の材料が足りていないか、そもそも判断する意味が無い状態です。

保存する

git add .
git commit -m "的ごとのリードと手数の表示を足した"
git push

説明文を足したくなったら負けです

遊んでもらって「分からない」と言われたとき、遊び方の説明を画面に書くのが一番簡単な解決です。

でもそれは、たいてい間違いです。説明が要る状態は、画面が足りていない状態だからです。

僕はこの順で考えるようにしています。

足す（手数、リード）
形を変える（位置、濃さ、文字を添える）
減らす（そもそも要らない要素を消す)
どうしても駄目なら説明を書く

3番目が抜けやすいです。 分かりにくい画面は、情報が足りないのではなく多すぎることもあります。

そして4番目にも居場所はあります。 説明を画面に常設するのは負けですが、最初の1手だけ導くのは別です。それは6-8でやります。

つまずきどころ

「4 手目 / 全 3 手」と出た

決着したあとも手番を数えています。finished のときは「勝負あり」に切り替えてください。

リードの表示が両方に出る

同点のときに >= で比べています。> にしてください。同点はリードではありません。 誰が取るかは6-6で決めます。

合計が合わない

伏せたままの札を数えています。開いていない札は合計に入れないでください。

sumOf(side.theirs.filter(function (e) { return !e.hidden; }))

filter は、条件に合うものだけを残す書き方です。ここでは伏せていない札だけを残して合計しています。

これを忘れると、伏せた瞬間に相手の手の内が漏れます。 数字だけ先に増えるからです。

スマホで的が細すぎる

的3つを横に並べているので、狭い画面では1つあたり100px程度になります。中の札が小さくなりすぎたら、札のサイズを下げるより的を縦に積む方が読めます。

@media (max-width: 480px) { .card.mini { width: 34px; height: 48px; } }

@media (max-width: 480px) は「画面の幅が480px以下のときだけ、この見た目を使う」という指定です。スマホだけ札を小さくしたいときに使います。

Windows の場合

コードは同じです。

次の一歩

自分で作ったゲームを、1週間後に開いてみてください。

作った本人でも、1週間経つと「これ何のボタンだっけ」が出ます。そこが本当に分かりにくい場所です。 他人に見せる前の自己チェックとして、これが一番安く効きます。

説明なしで遊べる形になりました。次は閉じても続きから遊べるようにします！

ここまでの三つの的

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

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