マガジン

数値をすべて指定した依頼と、一つも指定しない依頼を比べる

遊びをつくる

執筆にClaudeを使用しています。

一枚の紙の四つの欄に、画面、操作、目的、終わり方を絵で整理する机。
記事のテーマをもとに制作したAI生成の写真風イメージ。

「避けゲームを作って」とだけ頼んだ場合と、キャンバスの大きさ、自機の速さ、障害物の落下速度、制限時間まで細かく書いて頼んだ場合を考えてみます。どちらも動くゲームは返ってくるかもしれません。では、その差は何に現れるのでしょうか。遊びやすさでしょうか。同じものをもう一度出せるかどうか(再現性)でしょうか。それとも、ほとんど差が出ないのでしょうか。 この記事では結果を述べません。述べられるのは、自分で確かめる設計だけです。比べたいのは次の問いです。「速度・サイズ・時間を数値で指定すると、AIが作る試作の何が変わり、何は変わらないのか」。読み終えたら、お手元のAIに2種類の依頼を出し、同じ物差しで測れる状態を目指します。 数値の指定は、一見すると明らかに有利に思えます。ただ、数値が多いほど良いゲームになるとは限りません。指定した数値が互いに矛盾することもあります。本当に確かめたいのは、指定が「意図の通りやすさ」と「出来の良さ」のどちらに効くのかを切り分けられるかどうかです。

この記事の目次
  1. 問いを三つに分けて、測れる形にする
  2. 準備するもの
  3. 手順
  4. 記録の取り方
  5. 結果の読み方と、起こりやすい誤り
  6. 数値が設計に現れている例を眺めてみる
  7. 次の行動

問いを三つに分けて、測れる形にする

「効果がある」では測れません。次の三つに分けると、それぞれ手元で数えられます。

  1. 指示追従:指定した数値が、生成されたコードに指定どおり現れているか。
  2. 再現性:同じ依頼を複数回出したとき、出来上がりのばらつきはどれくらいか。
  3. 遊んだ印象:実際に遊んだとき、難しすぎたり退屈すぎたりしないか。

指定の効果が最も出やすそうなのは1です。無指定のほうが有利になるかもしれないのは3です。2は両方に関わります。この予想は仮説にすぎないので、実験の前にメモに書いておきます。後から読み返すと、自分の思い込みがどれだけ当たっていたかも分かります。

準備するもの

お題は「左右キーで動かして、落ちてくる障害物を避けるゲーム」に固定します。単純で、速度・サイズ・時間のすべてが意味を持つからです。

依頼文A(全指定)には、次の10個の数値を入れます。

ブラウザで遊べる避けゲームを、1つのindex.htmlで作ってください。外部ライブラリは使いません。左右キーで自機を動かします。キャンバスは幅480、高さ640。自機は幅32pxで、毎秒260px動きます。障害物は幅24〜48pxで、上から毎秒180pxで落ち、0.6秒ごとに1つ出ます。制限時間は30秒で、3回当たると終了です。

依頼文B(無指定)は、数値を一つも入れません。

ブラウザで遊べる避けゲームを、1つのindex.htmlで作ってください。外部ライブラリは使いません。左右キーで自機を動かします。

操作方法と「1つのHTML」は両方に入れます。数値ではない条件までAだけに足すと、何が効いたのか分からなくなるためです。

そのほかに用意するものは次のとおりです。

  • 同じAI、同じモデル、同じ設定。
  • 条件ごとに3回以上の生成。生成のたびに新しい会話を始めます。
  • ストップウォッチ(スマートフォンので十分です)。
  • 次の計測用スニペット。
html
<script>
(() => {
  let dts = [], last = performance.now();
  const tick = now => { dts.push(now - last); last = now; requestAnimationFrame(tick); };
  requestAnimationFrame(tick);
  const box = document.createElement('div');
  box.style.cssText = 'position:fixed;right:0;top:0;background:#000c;color:#fff;font:12px monospace;padding:6px;z-index:99999';
  document.body.appendChild(box);
  setInterval(() => {
    if (!dts.length) return;
    const avg = dts.reduce((a, b) => a + b, 0) / dts.length;
    const max = Math.max(...dts);
    const c = document.querySelector('canvas');
    box.textContent = 'avg ' + avg.toFixed(1) + 'ms / max ' + max.toFixed(1) + 'ms / ' +
      (c ? c.width + 'x' + c.height : 'canvas none');
    dts = [];
  }, 1000);
})();
</script>

生成されたindex.htmlの</body>の直前に貼り、ブラウザで直接開きます。1秒ごとに、フレーム間隔の平均と最大、キャンバスの属性上の大きさが右上に出ます。画面の動きが滑らかかどうかを、見た目の印象ではなく数字で残すための道具です。

手順

1. 依頼の前に、矛盾を計算で確かめる

Aの数値は、先に頭の中で組み合わせておきます。高さ640pxを毎秒180pxで落ちる障害物は、約3.6秒で画面を横切ります。0.6秒ごとに出るなら、同時に画面にいる障害物は6個前後です。幅480pxを毎秒260pxで動く自機は、約1.8秒で端から端まで届きます。

こうした見積もりをしておくと、「難しすぎる」と感じたとき、原因が数値の組み合わせなのか、AIの実装なのかを切り分けやすくなります。

2. 生成して保存する

AとBをそれぞれ3回ずつ生成し、A-1.html、B-1.htmlのように名前を付けて保存します。生成のやり直しや「少し直して」といった追加の指示は、この段階では出しません。最初に返ってきたものだけを比べます。

3. 定数を探す

保存した各ファイルを開き、コード中の数字を検索します。Aなら480、640、260、180、0.6、30、3などです。見つかった場所と値を記録します。Bは、AIが自分で決めた数値がどこにあるかを探します。

4. 実測する

各ファイルを開いて、計測スニペットの表示を確認します。そのうえで、次の2つを手で測ります。

  • 障害物が画面の上端から下端まで落ちる秒数(5回測って平均します)。高さを秒数で割れば、実測の落下速度(px/秒)が出ます。
  • ゲーム開始から終了までの時間(5プレイ分)。

5. 遊んで印象を書く

各版を5回ずつ遊び、「簡単/ちょうどよい/難しい」の3段階と、一言の理由を残します。他の版を遊んだ直後は感覚が引きずられるので、版の順番は毎回入れ替えます。

記録の取り方

次の表を条件ごと、生成ごとに1行ずつ埋めます。

  • キャンバスの大きさ、取り方:スニペットの表示、単位:px、回数:生成ごとに1回
  • 指定値の現れ方、取り方:コード検索、○/△/×で記録、単位:なし、回数:数値ごとに1回
  • 落下の実測速度、取り方:画面の高さ÷落下秒数、単位:px/秒、回数:5回の平均
  • 1プレイの長さ、取り方:ストップウォッチ、単位:秒、回数:5回
  • フレーム間隔、取り方:スニペットの avg と max、単位:ms、回数:各5プレイ
  • 遊んだ印象、取り方:3段階と一言、単位:なし、回数:5回

「指定値の現れ方」の×は、数値がコードにまったくない場合です。△は、数値が近いが一致しない場合や、別の場所で上書きされている場合に使います。

スマートフォンの幅(たとえば375px程度の画面)でも一度開き、キャンバスが見切れていないかを加えて記録してください。キャンバスの大きさを指定したAでも、表示側の都合で縮む場合があるためです。見切れ以外にも、操作の効きや文字の読みやすさに気づいた点があれば、一言添えておきます。

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

読み方の分かれ道

  • Aの指定値の多くが○なら:数値の指定は、意図を伝える手段として働いていると読めます。×や△が多いなら、依頼文が長くなりすぎて一部が落ちた可能性があります。数値を減らした版を足して確かめます。
  • Bの3回で、キャンバスの大きさや落下速度が大きく違うなら:無指定は、毎回違う設計を引く依頼だと言えます。そろっているなら、AIの既定値が安定している可能性があります。
  • Aの3回がほぼ同じ動きなら:数値の指定が再現性に効いています。それでも「面白い」が保証されたわけではありません。印象の欄が「難しい」に偏っていれば、数値は再現できても、良い数値とは限らなかったことになります。
  • Bのほうが「ちょうどよい」が多いなら:数値を自分で決めるより、AIに任せたほうが遊びやすい場合があるということです。その場合は、Bで出た実測値を拾ってAの数値の土台にする、という使い方が考えられます。
  • フレーム間隔のmaxが大きい版があるなら:数値の指定とは別に、実装そのものの重さを疑います。

よくある誤り

  • 1回の生成で結論を出す:ばらつきを見る実験なので、各条件3回を下回ると意味が薄れます。
  • 自分の腕前で比べる:後に遊ぶ版ほど慣れて有利になります。順番を入れ替え、5回の平均で見ます。
  • 同じ会話で続けて生成する:直前のやりとりが影響し、条件がそろいません。
  • 条件を同時に変える:Aで数値を足すついでに説明文も書き換えると、何が効いたのか分からなくなります。
  • 矛盾した数値を入れる:先の見積もりで確かめた範囲を超えて数値を詰めると、遊べないものが出ます。それはAIの失敗ではなく、依頼側の設計の問題です。
  • 実測を目分量で済ませる:「速い気がする」は記録になりません。秒数で残します。

数値が設計に現れている例を眺めてみる

数値で縛ることの意味は、公式作品からも読み取れます。「紙ひこうき郵便」は、海辺が36秒で5通、丘が40秒で8通、山が44秒で10通と、ルートごとに時間と通数が決まっています。「時計じかけの台所」の本番も、1皿28秒、配膳6秒、ミスは3回までです。どちらも、時間や回数が数字で定められているため、遊ぶ側が自分の上達を測りやすい形になっていると読み取れます。なぜその数字になったかは、作品を開いて遊びながら確かめてください。

これを実験に引き寄せると、「再現できる数値」は「比較できる遊び」の土台になる、という見方が立ちます。逆に、無指定の試作を何度も遊び比べにくいのは、毎回数字が違うからではないか、という仮説も立てられます。ただし、これは設計から読み取れる範囲の見方にとどまります。仮説の当否は、上の表を埋めて判断します。

次の行動

まず依頼文AとBを、お手元のAIに3回ずつ出し、表の「指定値の現れ方」だけ埋めてみてください。そこまでは30分程度の作業です。余裕があれば、時間だけ、速度だけを指定したC版も足すと、どの数値が効いているかまで分かります。

比べ終えた試作は、index.htmlを入口にしたHTMLかZIPとして、アソバースに下書き保存できます。公開する場合はメールアドレスの確認が必要です。数値を変えた版を並べて公開すると、他の人の遊んだ印象が、自分の表にない視点を足してくれるかもしれません。