ルールだけ渡して見た目を一切指定しないと、どんな画面が出てくるか
遊びをつくる執筆にClaudeを使用しています。
ゲームのルールだけを文章で書き、色もフォントも雰囲気も指定せずにAIへ送る場面を考えてみます。返ってきたHTMLを開くと、盤面や得点表示、ボタンが並んだ画面が現れます。そのとき背景は明るいのか暗いのか、角は丸いのか、タイトルは付いているのか、絵文字は使われているのか。指定しなかった部分は、AIが「何も言われなければこうする」という既定値で埋めています。 この記事は、その既定値、つまりAIの「標準の見た目」を観察するための実験の設計書です。結果は書きません。読者が自分の環境で同じ手順を行い、自分のAIの癖を自分のデータで見つけてもらう形にしています。癖を知っておくと、ふだん指定していない部分が実は誰が作っても似てしまう部分だったと気づけます。自作ゲームの見た目を意図して選び直す足がかりにもなります。
最初に決める問いと、数える単位
問いは次の一文に絞ります。「ルールだけを渡し、見た目を指定しないとき、複数回の生成で繰り返し現れる見た目の要素は何か」。
ここで大切なのは、1回の出力の印象ではなく、複数回の出力で繰り返し現れるかどうかを見ることです。1本だけ見て「暗い背景だった」と思っても、それが癖なのか、その回の偶然なのかは区別できません。AIの出力は毎回少しずつ変わるので、同じ条件で何度も出させて「10本中何本に出たか」という頻度で捉えます。
もう一つ、題材の影響を切り分けます。宇宙を題材にしたルールなら暗い背景が出やすいのは当然です。そこで、題材の違うお題を2種類用意し、両方で繰り返し出る要素だけを「癖の候補」として扱います。
準備と手順：20本を集める
準備するもの
- 使うAIのチャット環境（1種類。モデル名と実施日を控えます）
- 次の2つのお題文
- 記録用の表計算ソフトまたは紙
- 生成物を保存するフォルダ（ファイル名は「A01.html」「B01.html」のように連番にします）
- 後述の簡易カウンタ（ブラウザで開ける1ファイル）
お題Aは盤面型、お題Bは数字型のルールです。
お題A：ブラウザで動く単一のHTMLファイルとして、次のルールのゲームを作ってください。5×5の盤にパネルが並んでいます。パネルには数種類の「種類」があります。同じ種類のパネルが上下左右に2枚以上つながっているところをクリックすると、つながった全部が消えます。消した枚数が多いほど高得点です。消せる組がなくなったら終了です。
お題B：ブラウザで動く単一のHTMLファイルとして、次のルールのゲームを作ってください。1から9までのカードが並んでいます。プレイヤーとCPUが交互に1枚ずつカードを取ります。先に、自分の手持ちのうち3枚の合計がちょうど15になった側が勝ちです。全部取っても決まらなければ引き分けです。
お題文には「かわいい」「シンプル」「モダン」「落ち着いた」といった雰囲気の語を入れません。これらはすべて見た目の指定にあたります。「単一のHTMLファイル」は出力形式の条件で、見た目の指定ではありません。お題Aの「種類」を何で表すか（色、記号、絵文字など）は、あえて任せています。
手順
- 会話を新規に開き、お題Aを貼って送ります。追加の質問や修正の依頼はしません。
- 返ってきたコードを丸ごと保存します（A01.html）。
- 新しい会話を開き、同じ文を送って保存します。これをA10まで繰り返します。
- お題Bでも同じようにB10まで集めます。
- 全ファイルをブラウザで開き、表示して、クリックまたはタップが動くかどうかを確認します。動かないものは捨てずに「動作不良」と印を付けます。見た目の観察には使えるからです。
毎回「新しい会話」にするのは、前の出力が次の出力に影響するのを防ぐためです。同じ会話で「もう一度」と頼むと、前回と違うものを出そうとして癖が見えにくくなります。
記録の取り方：目視と計測を分ける
記録は、ファイル1本につき表の1行です。列は次のとおりです。
- 背景の明暗、記録するもの：明るい／暗い／その他、取り方：目視
- 主な色の数、記録するもの：画面で区別できる色数、取り方：目視と計測
- 種類の表し方、記録するもの：色／記号／絵文字／その他、取り方：目視
- タイトル表示、記録するもの：あり／なし、取り方：目視
- 配置、記録するもの：中央寄せ／左寄せ／その他、取り方：目視
- 得点の位置、記録するもの：盤の上／横／下、取り方：目視
- 説明文、記録するもの：なし／1行／複数行、取り方：目視
- ボタンの形、記録するもの：角丸／角ばり／その他、取り方：目視
- 動き、記録するもの：消える時の演出などの有無、取り方：目視
- グラデーション、影、角丸、アニメーション定義、viewport指定など、記録するもの：出現回数、取り方：計測
目視の項目は、あらかじめ選択肢を決めておきます。見たあとで分類を作ると、自分の期待に合わせて分けてしまいがちだからです。
計測できる項目は、コードから機械的に数えます。次の最小構成のHTMLを保存してブラウザで開き、生成されたHTMLの中身を貼り付けると、特定の指定が何回出てくるかを数えます。
<!doctype html>
<meta charset="utf-8">
<title>見た目チェック</title>
<textarea id="src" rows="10" cols="60" placeholder="生成されたHTMLを貼ります"></textarea>
<br><button id="go">数える</button>
<pre id="out"></pre>
<script>
const checks = {
"gradient": /(linear|radial|conic)-gradient/g,
"border-radius": /border-radius/g,
"box-shadow / text-shadow": /(box|text)-shadow/g,
"@keyframes": /@keyframes/g,
"transition": /transition\s*:/g,
"meta viewport": /name=["']viewport["']/g,
"prefers-color-scheme": /prefers-color-scheme/g,
"system-ui / sans-serif": /system-ui|sans-serif/g,
"serif(明朝系) / monospace": /(?<![-\w])serif\b|monospace/g,
"CSS変数 (--)": /--[a-z][\w-]*\s*:/gi,
"backdrop-filter": /backdrop-filter/g,
};
document.getElementById("go").onclick = () => {
const s = document.getElementById("src").value;
const lines = Object.entries(checks).map(([k, re]) =>
k + ": " + (s.match(re) || []).length);
const colors = new Set((s.match(/#[0-9a-fA-F]{3,8}\b/g) || [])
.map(c => c.toLowerCase()));
lines.push("色コード(#)の種類: " + colors.size);
lines.push("絵文字の個数: " + (s.match(/\p{Extended_Pictographic}/gu) || []).length);
lines.push("文字数: " + s.length);
document.getElementById("out").textContent = lines.join("\n");
};
</script>このカウンタには限界があります。rgb()やhsl()で書かれた色は拾いません。CSS変数に色を入れている場合も、色の種類は少なく出ます。数字は厳密な値ではなく「有無と大まかな量」を見る道具として使い、色の数は目視の記録と突き合わせてください。
結果の読み方
20本の記録が揃ったら、列ごとに「お題Aで何本、お題Bで何本」と数えます。判断の目安は次のとおりです。
- A・Bの両方で8本以上に出る要素：標準の癖である可能性が高いです。ルールの題材が違っても出ているので、題材の影響では説明しにくくなります。
- 片方のお題だけで8本以上出る要素：題材に引きずられた可能性があります。たとえば数字カードだけで特定の配色が多いなら、数字という題材との結びつきを疑います。
- どちらも3〜7本にとどまる要素：ばらつきの大きい部分です。指定しなくても毎回違う見た目になるので、癖とは呼べません。
- ほとんど出ない要素：AIが標準では選ばない選択肢です。ここは「指定しないと決して出てこない見た目」の候補なので、控えておくと次の企画で役に立ちます。
8本や3本という境目はあくまで目安です。本数を増やせば境目は変わるので、自分で基準を決めて、表に基準を書き添えてください。
記録を読むときは、癖を良し悪しで見ないことも大切です。標準の見た目は、多くの人に読みやすいという利点もあります。見るべきなのは、自分のゲームの意図と合っているかどうかです。ルールの手触りが静かな思考型なのに、いつも同じ派手な装飾が付くなら、そこがずれています。
さらに、動作不良の本数も忘れずに数えます。見た目の癖とは別に、「ルールを正しく実装できたか」という観点も見えてきます。たとえばお題Bで勝敗判定が抜けていないか。これは見た目の実験ではありませんが、同じ20本から取れる付加情報です。
起こりやすい誤り
実験の信頼を損ねるのは、たいてい次のような点です。
- 会話の持ち越し：同じ会話で連続して生成すると、前の出力を避けようとします。必ず新規の会話にします。
- 記憶機能や共通の指示の影響：使っている環境に、好みを覚える機能や常設の指示がある場合は、オフにするか、その状態を記録に書き添えます。
- お題文への雰囲気語の混入：書き直しているうちに「見やすく」「使いやすく」と足してしまいがちです。これも見た目への誘導になるので、2つのお題文は一字も変えずに使います。
- 1〜2本で結論を出す：癖は頻度でしか語れません。最低でも各10本を集めます。
- 見たあとで分類を作る：選択肢を決めてから見ます。「その他」は残します。
- 計測値の過信：正規表現は書き方の違いを拾い損ねます。数字は目視と突き合わせます。
- 環境の変化：AIのモデルや更新で傾向は変わりえます。実験日とモデル名を表の先頭に書き、結果を一般化しすぎないようにします。
次の行動
まずお題Aだけ10回集め、表を埋めるところから始めてください。そのうえで、癖として見つかった要素のうち、自分のゲームに合わないものを見た目の指示として具体的に書き直し、同じお題でもう一度10本集めて、本数がどう動くかを比べてみてください。仕上がったゲームをアソバースに投稿するなら、直下に置いた index.html が入口になります。アップロードは20MiB以内という上限があるので、素材を増やしたときは容量も確かめてください。
