「子供向けに」と頼んだとき、AIは何を変えるか

条件を3つに絞り、お題を固定する

比べるのは、お題の末尾に足す一文だけです。それ以外はすべて同じにします。お題の本体は、難易度を左右する要素（制限時間・速さ・大きさ）を含むものにします。たとえば次の文です。

10秒間に出てくる丸をクリックして点数を稼ぐ、1枚のHTMLで動くゲームを作ってください。

この文の末尾に足す一文で、次の3条件を作ります。

• A（基準）、末尾に足す一文：何も足さない
• B（広い指定）、末尾に足す一文：子供向けにしてください。
• C（年齢の明示）、末尾に足す一文：5歳の子が遊ぶ想定にしてください。

Cを入れる理由は、「子供」の幅の広さを見るためです。Bの結果が、幼児向けの設計に寄るのか、小学生向けに寄るのかは分かりません。年齢を明示したCと並べると、Bが何歳くらいを想定した出力なのかを推測する手がかりになります。時間に余裕があれば、「小学校高学年の子が遊ぶ想定にしてください。」のD条件を足すと、年齢による差の幅も見えてきます。

出力の形式にも指定を入れておきます。「説明は不要で、HTMLだけを出力してください」を全条件のお題に含めると、後で記録しやすくなります。この指定は3条件すべてで同じ文言にします。

手順：1条件5回、毎回まっさらな会話で

手順は次のとおりです。

1. 使うAIとモデルを1つに決め、設定（あれば温度などの生成設定）も変えません。
2. 条件ごとに、新しい会話を開いてお題を送ります。前の会話の履歴が残っていると、「さっきと違う感じで」という力が働き、比較になりません。
3. 出力されたHTMLを、A-1.html、B-3.html のように条件と回数が分かる名前で保存します。
4. 同じ条件を5回繰り返します。A・B・Cで合計15ファイルです。
5. 回す順番は条件ごとにまとめず、A→B→C→A→B→C…と交互にします。時間帯による応答のくせの違いを、特定の条件に偏らせないためです。
6. すべて保存してから、ブラウザで1つずつ開いて遊びます。遊ぶ前に中身を読み込みすぎないほうが、実際の体験に近い記録になります。

1条件1回では、差があるのかばらつきなのか区別できません。同じお題でも、AIの出力は毎回変わるからです。5回は最低ラインと考え、余裕があれば10回に増やしてください。

3つの軸をどう記録するか

記録は、ファイルごとに1行の表にします。見た目で判断する項目と、コードから拾う項目を分けて書きます。

色

• 背景色（見た目で、おおまかな系統を書きます。例：白系、パステル、濃色）
• 使われている色の種類数（コードから数えます）
• 丸の色（1色か、複数色か。複数なら何色か）
• 文字色と背景色のコントラスト（見た目で「読みにくい」と感じたかを、○か△か×で書きます）

色の種類数は、色コード（#ff6600 など）や rgb() の記述を数えれば出せます。ただし、同じ色が少し違うコードで書かれていると、実際より多く数えます。数字だけで判断せず、画面で見た印象も併記してください。

文字

• 画面上の文言（タイトル、説明、ボタン、結果表示）を全部書き写します。
• ひらがな・カタカナ・漢字の文字数（スクリプトで数えます）
• 最も大きい文字サイズと、最も小さい文字サイズ（font-size の値）
• ボタンやクリック対象の大きさ（見た目で、指で押せそうな大きさかを書きます）

文言は、数だけでなく中身も見ます。たとえば、同じ「スタート」が、条件によって「はじめる」や「やってみよう！」に変わっているかもしれません。感嘆符の数や、励ます言葉（「すごいね」など）が増えるかどうかも、文字軸の観察項目になります。

難易度

難易度は、コードを読むより実際に遊んだほうが分かる軸です。

• 制限時間（お題に10秒と書いているので、守られているか）
• 丸が出る間隔（コード上のミリ秒、または体感）
• 丸の大きさ（コード上の直径、または体感）
• 丸が消えるまでの時間（消える仕様があれば）
• 同時に出る丸の数
• ミスの扱い（外れ、見逃しで減点があるか）
• 自分で遊んだときの点数（各ファイル2回ずつ。同じ人が遊ぶので、条件間の比較に使えます）

最後の項目は、実験者の慣れで後半ほど点数が上がります。ファイルを遊ぶ順番もランダムにして、慣れの影響を条件にかたよらせないようにしてください。

コードから拾う項目は小さなスクリプトで集計する

保存したHTMLから、色の種類数、font-size の宣言、文字種ごとの文字数、タイマーの数値をまとめて拾うページです。ファイルとして保存して開き、15個のHTMLを選ぶと、タブ区切りの表が表示されます。HTMLを実行はせず、テキストとして読むだけです。

<!doctype html>
<meta charset="utf-8">
<input type="file" id="f" multiple accept=".html">
<pre id="out"></pre>
<script>
const count = (s, re) => (s.match(re) || []).length;
document.getElementById('f').onchange = async e => {
  const rows = ['ファイル\t色の種類\tfont-size\tひらがな\tカタカナ\t漢字\tタイマー数値'];
  for (const file of e.target.files) {
    const t = await file.text();
    const colors = new Set(
      (t.match(/#[0-9a-f]{3,8}\b|rgba?\([^)]*\)|hsla?\([^)]*\)/gi) || [])
        .map(c => c.toLowerCase().replace(/\s/g, ''))
    );
    const sizes = [...t.matchAll(/font-size\s*:\s*([^;}"']+)/gi)].map(m => m[1].trim());
    const timers = [...t.matchAll(/set(?:Interval|Timeout)\([\s\S]*?,\s*(\d+)\s*\)/g)].map(m => m[1]);
    rows.push([
      file.name,
      colors.size,
      sizes.join(' / '),
      count(t, /[\u3041-\u309f]/g),
      count(t, /[\u30a0-\u30ff]/g),
      count(t, /[\u4e00-\u9fff]/g),
      timers.join(' / ')
    ].join('\t'));
  }
  document.getElementById('out').textContent = rows.join('\n');
};
</script>

このスクリプトは簡易なもので、次の限界があります。

• コード内の日本語コメントも文字数に含まれます。コメントが多い出力ほど、文字数が膨らみます。
• タイマーの数値は、関数の中に別のカンマ区切りの数字があると、違う値を拾うことがあります。拾った値は、必ずコードの該当箇所と照らして確認してください。
• 色を CSS 変数にまとめている場合や、rem、vw で文字サイズを指定している場合は、実際の表示サイズと一致しません。サイズは画面でも確かめてください。

出力をスプレッドシートに貼り、見た目で記録した列と並べれば、15行の比較表になります。

結果の読み方と、誤りやすい点

読み方の基本は、「条件間の差」を「条件内のばらつき」と比べることです。

• 条件Aの5回の間で、ある項目が大きく動いているなら（例：丸の大きさが毎回違う）、その項目はもともと不安定です。BやCで違う値が出ても、一言の効果とは言い切れません。
• Aの5回がほぼ同じ値に集まり、Bの5回が別の値に集まっているなら、その項目は「子供向け」の一言に反応していると読めます。
• AとBの範囲が重なるなら、その項目は、この一言では動いていないと考えます。
• BとCを比べて、Cのほうが極端に動くなら、「子供向け」だけでは年齢の想定が定まらず、年齢を書くと設計が具体化する、と読めます。

軸ごとに「A→Bで動いたか」「B→Cでさらに動いたか」を表にまとめると、色・文字・難易度のどこが指定に敏感かが見えてきます。ここで仮説（難易度は動きにくい）が当たったかどうかも判定できます。

誤りやすい点は次のとおりです。

• 説明文を信じすぎる。 出力に「子供向けに大きなボタンにしました」とあっても、実際のサイズは別です。必ずコードか画面で確かめてください。
• お題に難易度の要素がない。 制限時間も速さもないお題では、難易度の軸を観察できません。丸の大きさや間隔など、AIが数値を決める余地があるお題を選んでください。
• 1回の印象で判断する。 「Bはやさしくなった」と感じても、5回並べるとAにも同じくらいやさしい出力が混じっていることがあります。
• 会話を引き継ぐ。 同じ会話で条件を切り替えると、AIが前の出力との差を意識します。必ず新しい会話にします。
• やさしい＝子供向け、と決めつける。 難易度が下がっていても、それが年齢への配慮なのか、お題のゆらぎなのかは、Aの幅と比べないと分かりません。
• コントラストの扱い。 パステルが増えても、文字が読みにくくなっていれば、見やすさの面では改善とは言えません。色の軸では、種類の変化と読みやすさを分けて書いてください。

次の行動

まず、お題の文と3条件の末尾の一文を決め、条件Aを5回回して保存してください。Aの5本を並べてみるだけでも、同じお題の中にどれだけ揺れがあるかが見えて、以降の比較の基準になります。続けてB・Cを回し、集計用スクリプトで表を作れば、色・文字・難易度のどこが指定に反応したかを自分のデータで判断できます。

出力が単独のHTMLに収まっていれば、気に入った1本をそのまま作品として投稿する材料にもなります。その場合は、投稿画面の案内でファイルの条件を確認してください。