札と盤に絵を入れる

なぜ要るか

音が鳴り、演出も付きました。でも画面を見てください。灰色の箱に数字が並んでいるだけです。

2-6で世界観を決めました。口寄せ。呼んで、任せる。ところが今の画面には、その言葉がひとつも映っていません。「一の的」「二の的」という仮の名前のまま、ここまで来ました。

この術で、世界観を画面へ落とします。できあがりがこれです。

ルールは1行も変えていません。変えたのは名前と見た目だけです。 2-6で書いたとおり、世界観は部品を増やす口実ではなく、既にある部品に被せるものです。ここでそれを実際にやります。

AIプロンプト

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

index.html の3つの的に、門・蔵・井を表す小さな紋を付けて。画像は使わず、線だけのSVGをインラインで書いて。色はCSSから変えられるように currentColor で。あわせて札を生成りの和紙風にして。画像は使わずCSSのグラデーションだけで。数字が主役なので飾りは隅に小さく。

「門・蔵・井」と「和紙」の部分は、意味表で決めた自分の言葉に置き換えてください。

先に意味表を作ります

いきなり絵を頼まないでください。先に、部品ごとの言い換え表を作ります。 2-6で決めた世界観から引きます。

画面の部品	世界観の言葉	理由
一の的・二の的・三の的	門の的・蔵の的・井の的	里の守り所。全部は守れない
手札	呼べる者	自分は動かない。呼んで、任せる
背景	夜の里	夜が明けるまで互いの手は見えない

理由の列が本体です。 「和風だから門」ではなく、「守り所だから門・蔵・井」。ゲームの1行（どの的を捨てて、どの的を取るか）が、そのまま里の守りの話になります。この表が無いと、絵の発注が「なんか和風で」になり、なんか和風なだけの画面が返ってきます。

絵の入れ方は3種類を使い分けます

一口に「絵を入れる」と言っても、作り方は1つではありません。今回の画面は3種類でできています。

対象	作り方	理由
背景（夜の里）	AIで画像生成	曖昧で情報量が多い絵はAIが得意
的の紋（門・蔵・井）	SVGを手で描かせる	記号は生成しない。3つの線の太さが揃う
札（和紙）	画像ゼロ。CSSだけ	紙の質感は塗りで足りる

SVGは、線や図形を数字で書き表す絵の形式です。写真のように点で塗るのではなく「ここからここへ線を引く」という指示の集まりなので、HTMLの中へ直接書けます（これをインラインと言います）。ファイルが増えず、拡大しても輪郭がぼやけません。

全部をAI画像にしないのが要点です。 特に紋のような記号は、画像生成だと3つのタッチがばらつき、あとで4つ目を足すときに同じ絵柄を再現できません。SVGなら数行の線です。

紋のコードはこれだけです。蔵は屋根と壁と戸を線で描いています。

kura: '<svg viewBox="0 0 40 30" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12l14-8 14 8M9 12v16h22V12M17 28v-9h6v9"/></svg>',

path の中の英数字が、線をどこからどこへ引くかの並びです。stroke-width が線の太さで、3つの紋で同じ数字を使うから揃います。

currentColor は「その場所の文字色をそのまま線の色に使う」という指定です。だから色はCSS側から差せます。 的が取られたら沈む、といった演出と勝手に連動します。画像ではこうはいきません。

札も見てください。画像ファイルはありません。

.kesiki .card {
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%),
    linear-gradient(160deg, #f4ecdb 0%, #e6dbc2 100%);
  border: 1px solid #cdbf9f; color: var(--sumi);
  font-family: "Hiragino Mincho ProN", serif;
}

グラデーションは、色が少しずつ移り変わる塗りです。linear-gradient は直線の向きに、radial-gradient は円形に広がります。この2つを重ねているだけで、画像は1枚も使っていません。

生成りの紙色に、左上へ淡い光。数字は墨色の明朝体。札の主役は力量の数字なので、絵で数字を邪魔しないという判断です。

名前は表示だけを変えます

的の名前の付け替えは、データに世界観の名前を足して、表示のときに選ぶだけです。

var TARGETS = [
  { id: 't1', name: '一の的', kesiki: '門の的', mon: 'mon' },
  { id: 't2', name: '二の的', kesiki: '蔵の的', mon: 'kura' },
  { id: 't3', name: '三の的', kesiki: '井の的', mon: 'ido' },
];

1つの的が、内部の名前（id）、仮の表示名（name）、世界観の表示名（kesiki）、紋の呼び名（mon）を持つ形です。画面に出すときだけ kesiki を選びます。

id は変えていません。 保存データも記録も t1 のままです。見た目の言葉と内部の名前を分けておくと、あとで「やっぱり櫓の的にしよう」となっても、表示の1か所を直すだけで済みます。内部の名前まで世界観語にすると、改名のたびに保存データが壊れます。

背景は敷いたら「暗幕」を重ねます

背景で一度失敗したので、その話をします。

夜の里の絵をそのまま敷いたら、札も文字も読めなくなりました。 絵が主張しすぎるからです。かといって暗い絵にすると、今度は敷いてあることが分かりません。

答えは、絵は明るめにして、上から半透明の幕を重ねるでした。

body.kesiki::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 40%, rgba(11,15,24,.35) 0%, rgba(11,15,24,.8) 75%);
}

::after は、その要素にもう1枚板を足す書き方です。inset: 0 で画面いっぱいに広げ、z-index: -1 で盤面より奥へ置いています。rgba の4つ目の数字が濃さで、.35 なら35%だけ塗って残りは透けます。

真ん中は薄く、外へいくほど濃く。盤面のある中央だけ絵が透けて、文字のある場所は暗く沈みます。 背景を入れて文字が読みにくくなったら、絵を差し替える前にまずこの幕を疑ってください。

飾りも意味表から出します

背景が寂しいときも、飾りを思いつきで足さず、意味表から引きます。このゲームでは3つ足しました。

飾り	意味表の根拠	作り
夜空を漂う折り鶴	こよりの相棒「しおり」（折り鶴の式神。栞＝道を示す紙）	線のSVG。紋と同じ作り
画面の隅に下がる紙垂（しで）	的は里の守り所。守り所には結界の紙が下がる（実在の文化から）	SVGの階段状の紙
蛍の光	夜の里	CSSの光点が明滅するだけ

どれも盤面より薄くしています。飾りは主役の後ろに立つ係で、これは背景の絵（暗幕）と同じ判断です。動きを減らす設定の人には、5-4と同じ仕組みで止まります。

やってみる

意味表を作る

2-6の世界観から、画面の部品3つぶんの言い換えを書きます。理由の列を必ず埋めてください。
背景をAIで生成する

意味表の言葉をそのまま使います。
```
夜の忍者の里を高い場所から見下ろした風景。深い藍色の空、
瓦屋根の家々にぽつぽつと灯り、遠くに山の稜線。
横長、落ち着いた色数、手前に大きなものを置かない。
```
「手前に大きなものを置かない」が要点です。 手前に何かあると、その上に載る札と喧嘩します。背景は主役の後ろに立つ係です。

紋と札はコーディングAIに頼む

claude -p "index.html の3つの的に、門・蔵・井を表す小さな紋を付けて。画像は使わず、線だけのSVGをインラインで書いて。色はCSSから変えられるように currentColor で。あわせて札を生成りの和紙風にして。画像は使わずCSSのグラデーションだけで。数字が主役なので飾りは隅に小さく。"

「画像は使わず」を2回言っているのは、わざとです。 言わないと画像生成を提案されたり、外部の画像URLを埋め込まれたりします。作り分けの判断はこちらで済ませてから頼みます。

文字が読めるかを確かめる

ここが合否の分かれ目です。背景を入れた状態で index.html を開き、いちばん小さい文字（的の合計など）が読めるかを見ます。読みにくければ暗幕を濃くします。絵がきれいでも文字が読めなければ、遊べていません。

保存する

git add .
git commit -m "世界観を画面へ。的に紋、札に和紙、背景に夜の里"

つまずきどころ

背景が目立ちすぎる、または見えない

暗幕の濃さで調整してください。絵の差し替えは最後の手段です。僕は絵を明るめに補正して、幕を薄くする方向で落ち着きました。

札の飾りが数字より目立つ

主役が逆転しています。飾りは小さく、隅に、薄く。札を0.5秒見て最初に目に入るのが数字なら合格です。

紋をAI画像で作ってしまった

3つ並べたときにタッチが揃っていれば、それでも構いません。ただし6章で的を増やすとき、同じタッチの4枚目を出す作業が発生します。線のSVGなら数行書き足すだけです。

世界観の名前が通じるか不安

「門の的」は説明なしで通じます。守る場所だと絵と紋が言っているからです。通じるか不安な名前は、意味表の理由の列が弱いことが多いです。名前ではなく表へ戻ってください。

Windows の場合

差はありません。

次の一歩

意味表をもう1行増やして、まだ画面に映っていない世界観をひとつ探してください。

次の章では、ゲームの中身そのものを作り込んでいきます！

ここまでの三つの的

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

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