生成した絵柄を統一する：参考画像の渡し方

この実験で確かめる問い

中心の問いは次の一つです。

複数の絵を「同じ世界の絵」に見せるうえで、参考画像の渡し方のどれが最も効くのか。

細かく分けると、確かめたいのは次の3点です。

1. 文章だけで絵柄を指定する場合と、参考画像を足す場合で、そろい方に差が出るか。
2. 参考画像を1枚にする場合と3枚にする場合で、そろい方や題材の描き分けに差が出るか。
3. 前の出力を次の参考画像にする「連鎖」で、絵柄が少しずつずれていくか。

統一できたかどうかは「似ているか」だけでは判断できません。参考画像に似すぎて、鍵もきのこも同じ構図の同じ絵になってしまっては、アイコンとして使えないからです。そのため評価は、そろい方と、題材の描き分けの両方で行います。

準備するもの

• 画像生成ツール：参考画像を受け付けるものを使います。参考画像の枚数、扱われ方、文章との併用方法はツールごとに異なります。ツールの案内で確認し、この実験では1種類に固定してください。
• 題材5個：ゲームで実際に使うものを選びます。例として、鍵、きのこ、扉、猫、船です。形が大きく違うものを混ぜると、描き分けの確認がしやすくなります。
• 参考画像：次の2種類を用意します。
• 参考画像X：絵柄の見本にしたい1枚。題材は、上の5個に含まれないもの（例：ランプ）にします。
• 参考画像Y・Z：Xと同じ絵柄で、題材が違う2枚（例：傘、本）。
• 権利の確認：参考画像は、自分で描いた絵か、利用条件を確認した素材だけを使います。他人の作品を無断で参考にすることは避けてください。ツールの利用規約や著作権の扱いは、公式の案内で確認し、迷うときは専門家に相談してください。
• 記録用の表計算シートかノート。
• 評価を手伝ってくれる人：できれば2〜3人です。いなければ、一晩おいてから一人で評価します。

参考画像X・Y・Zを用意する手段に決まりはありません。手描きでも、別の機会に生成して選び抜いた画像でもかまいません。ただし3枚とも、背景の扱い（透明、白、色付き）と大きさをそろえます。ここが違うと、絵柄ではなく背景の違いが結果に混ざります。

手順：4つの条件で同じ題材を作る

比べる条件は4つです。

• A、渡し方：参考画像なし。絵柄を言葉だけで説明する
• B、渡し方：参考画像X 1枚と、短い題材指定
• C、渡し方：参考画像X・Y・Z 3枚と、短い題材指定
• D、渡し方：連鎖。1題材目は参考画像Xを渡し、2題材目以降は直前に生成した画像を参考にする

1. 共通の文を決める

絵柄を言葉で表す一文を先に作り、全条件で一字も変えずに使います。例は次のとおりです。

太めの輪郭線、少ない色数、柔らかい影、正面から見た構図、単色の背景。

条件Aではこの文に題材を足します。条件B〜Dでは、題材だけを短く書き、絵柄の説明は参考画像に任せるか、同じ一文を添えるかを決めて、全条件で統一します。どちらにしても、条件間で変えるのは参考画像の渡し方だけにします。

2. 生成する

各条件で、5題材を各3回、合計15枚作ります。4条件で60枚です。ツールの上限や手間で難しければ、各題材2回にして40枚に減らしてもかまいません。ただし、1回だけの結果で判断するのは避けます。同じ条件でも出来にばらつきが出るためです。

条件Dは順番が大切です。題材の順は「鍵→きのこ→扉→猫→船」のように決め、各回で同じ順にします。1回目の鍵を参考にして1回目のきのこ、そのきのこを参考にして扉、と進めます。途中で出来の悪い画像を捨てて作り直すと、連鎖の条件が崩れます。作り直す場合はルールを先に決め、すべて記録してください。

3. 良い出力を選ばない

「一番よく出来た1枚」を選ぶのは避けてください。選別すると、渡し方の差ではなく選んだ目の差が測られてしまいます。各条件・各回の最初の出力を採用する、と決めるのが基本です。

記録の取り方

画像の整理

生成した画像は、ファイル名を「条件・題材・回」が分からない乱数の名前に変えます。対応表は別のシートに書き、評価が終わるまで見ません。評価する人が条件を知っていると、「Cが良いはず」という期待が採点に入り込むためです。

セット単位で見る

評価は画像1枚ずつではなく、5枚を並べたセット単位で行います。「1回目の鍵・きのこ・扉・猫・船」が1セットです。1条件につき3セット、全体で12セットができます。

並べて見るために、ブラウザだけで動く最小の比較ページを用意しました。ファイルを選ぶと順番をシャッフルして並べ、スライダーで表示幅を変えられます。ファイル名は表示されないので、盲検のまま確認できます。1セットの5枚だけを選んで開いてください。

<!doctype html>
<meta charset="utf-8">
<input type="file" id="f" accept="image/*" multiple>
<label>表示幅 <input type="range" id="w" min="32" max="256" value="96"></label>
<div id="g" style="display:flex;flex-wrap:wrap;gap:8px;background:#888;padding:8px"></div>
<script>
const g=document.getElementById('g');
const f=document.getElementById('f');
const w=document.getElementById('w');
f.onchange=()=>{
  g.innerHTML='';
  const files=[...f.files];
  for(let i=files.length-1;i>0;i--){
    const j=Math.floor(Math.random()*(i+1));
    [files[i],files[j]]=[files[j],files[i]];
  }
  files.forEach(file=>{
    const im=new Image();
    im.src=URL.createObjectURL(file);
    im.style.width=w.value+'px';
    g.appendChild(im);
  });
};
w.oninput=()=>g.querySelectorAll('img').forEach(i=>i.style.width=w.value+'px');
</script>

表示幅は、実際のゲームで使うサイズに合わせてください。大きく見るとそろって見えても、小さく縮めると線の太さの差が目立つことがあります。逆の場合もあります。32pxと実寸の2段階で見ておくと安心です。

採点項目

セットごとに、次の2つを記録します。

1. 統一度（1〜5点）：「この5枚は同じゲームの絵に見えるか」を直感で採点します。5が最もそろっている状態です。
2. 要素別チェック（○×）：線の太さ、色数やパレット、影の向き、背景の扱い、質感（塗り方）の5項目で、5枚がそろっているかを○×で記録します。×の項目は、どの画像が外れているかも書いておきます。

さらに、絵だけを見た別の人に「これは何の絵か」を答えてもらい、題材の識別率も記録します。題材を知っている本人では判断が甘くなるためです。協力者がいなければ、数日おいてから自分で答える方法でも代用できます。

記録表の例

• A-1回目、統一度：、線：、色：、影：、背景：、質感：、識別できた数（5枚中）：
• A-2回目、統一度：、線：、色：、影：、背景：、質感：、識別できた数（5枚中）：
• ……、統一度：、線：、色：、影：、背景：、質感：、識別できた数（5枚中）：

結果の読み方

条件ごとに、3セットの統一度の平均とばらつき（最大と最小の差）を出します。平均が高くても、ばらつきが大きければ、ゲーム素材を量産するときに当たり外れが出ます。

次の組み合わせで判断します。

• 統一度が高く、識別も高い：その渡し方は、統一と描き分けを両立できています。採用候補です。
• 統一度が高いが、識別が低い、または構図や姿勢が参考画像と同じになる：参考画像に引きずられている可能性があります。参考画像の題材を変える、枚数を増やす、題材指定の文を具体的にする、といった対処を検討してください。
• 統一度が低い：渡し方が効いていないか、参考画像の絵柄が複雑すぎる可能性があります。要素別チェックで×が多い項目を見て、文章で補うか、参考画像を単純な絵に差し替えます。
• BとCの差が小さい：枚数より、参考画像の中身が効いていると考えられます。Xを別の絵に差し替えて、もう一度比べると確かめられます。
• Cが明らかに高い：複数の題材で絵柄を示すと、題材の特徴と絵柄を分けて読み取りやすくなる、という仮説が支持されます。ただしこれは自分のツールでの結果にすぎません。ツールを替えたら再度確かめてください。
• Dの後ろの題材ほど統一度や要素別チェックが下がる：連鎖によるずれが起きています。続けて作るときは、数枚ごとにXに戻す運用を試す価値があります。
• Dの統一度がBやCと同程度：連鎖でも実用上は問題ない可能性があります。ただし2回目以降の再現性も併せて見てください。

要素別チェックは、原因の切り分けにも使えます。例えば、線と質感は常にそろうのに背景だけ×が続くなら、絵柄の問題ではなく背景指定の問題です。後処理で直せる項目と、生成の段階で直すべき項目を分けて考えられます。

誤りやすい点

• 題材の説明を条件ごとに変えてしまう：文が変わると、渡し方の差か文の差か分からなくなります。
• 参考画像の背景や解像度が不ぞろい：絵柄ではなく背景を真似される原因になります。
• 良い出力だけを選ぶ：前述のとおり、最初の出力を採用する決まりにします。
• 回数が少ない：1回きりでは偶然の差と見分けがつきません。
• 評価者が条件を知っている：乱数の名前に変え、対応表を見ないで採点します。
• 大きい画面だけで確認する：ゲームで使う実寸でも確認します。
• 統一度だけで決める：識別率と合わせて見ないと、全部同じ絵になった条件を選んでしまいます。
• ツールの更新を考えない：同じ名前のツールでも、時期によって挙動が変わることがあります。条件を決めた日付とツールの設定を記録に残しておきます。

絵柄をそろえた後に確認すること

生成の段階でそろえきれなくても、ゲームに入れる前の処理でかなり近づけられます。

• 表示サイズを統一する：全画像を同じ縦横比と同じ大きさに書き出します。
• 背景を統一する：透明にするのか、単色にするのかを決めて、全画像に適用します。
• パレットや明るさを揃える：画像編集ソフトで色味を寄せます。ただし、元の絵の質感が失われないか確認します。
• ファイルを軽くする：アソバースへの投稿は、アップロードが20MiB以内、ZIP展開後は合計100MiB・1,000ファイル以内、1ファイル30MiB以内です。画像を大量に使うゲームでは、実寸より大きすぎる画像を入れていないか見直してください。素材は相対パスで読み込み、直下のindex.htmlから参照する構成にします。

最後に、実際のゲーム画面に並べて確認します。比較ページでそろって見えても、ゲームの背景色や他のUIと組み合わせると印象が変わるためです。

次の行動

まず、5つの題材と参考画像X・Y・Zを決め、条件A〜Dの共通の文を一文にまとめてください。次に、各条件で各題材を3回ずつ生成し、ファイル名を乱数に変えて、セットごとに採点します。結果の読み方の表に当てはめ、自分のゲームに合う渡し方を一つ選んだら、その条件と日付をメモに残しておくと、次の素材づくりで同じ絵柄を再現しやすくなります。