生成した絵の「おかしい部分」を探す：指・文字・影

準備と手順：同じ条件で3つの場面を作る

準備するもの

• 普段使っている画像生成ツール(1つに絞ります。複数を比べると条件が散ります)
• ゲーム内で実際に絵を表示するサイズ(幅何pxか。決まっていなければ仮でよいので数字を決めます)
• 記録用の表(次の節で形を示します)
• 下に載せる、画像を並べて見るための小さなHTMLファイル

生成画像をゲームに使えるかどうかは、ツールごとの利用規約で決まります。商用利用や再配布の可否、ゲームへの組み込みの扱いは、実験を始める前にそのツールの公式案内で確認します。

3つの場面を決める

崩れが出やすい対象を、それぞれ1場面ずつ用意します。

1. 指の場面：キャラクターが手で何かを持っている絵(例：ランタンを握る、カップを両手で包む)
2. 文字の場面：看板やラベルが主役になる絵(例：店先の看板、木箱に書かれた文字)
3. 影の場面：地面に複数の物が置かれ、光が当たっている絵(例：屋外の机に瓶と本と花)

各場面について指示文を一つ決め、途中で書き換えません。変えてよいのは、ツールが自動で変える乱数(シード)だけです。シードを指定できるツールでも、今回は毎回違う結果を出す設定にします。各場面で10枚、合計30枚が目安です。多いと感じたら各8枚でも構いませんが、5枚を切ると偶然に左右されやすくなります。

見る順番を固定する

生成が終わったら、次の順で検査します。

1. 実表示サイズで見る：ゲーム内に出すのと同じ幅に縮小して、まず1枚あたり数秒で眺めます。ここで「あれ?」と思った点は、理由が分からなくても記録します。
2. 原寸で見る：100%表示にして、指・文字・影の順にチェックします。

順番を逆にしないことが大切です。原寸を先に見ると、実表示では見えない崩れまで探してしまい、「ゲームの中で問題になるか」という問いに答えられなくなります。

比較用に、生成画像を一括で読み込み、実表示の幅と原寸を切り替えて並べるHTMLを用意しました。画像はブラウザ内で表示されるだけで、外部には送られません。

<!doctype html>
<meta charset="utf-8">
<title>表示サイズ比較</title>
<input type="file" id="f" accept="image/*" multiple>
<label>実表示の幅(px) <input type="number" id="w" value="128" min="32" max="1024"></label>
<label><input type="checkbox" id="z"> 原寸で見る</label>
<div id="g" style="display:flex;flex-wrap:wrap;gap:8px;margin-top:8px"></div>
<script>
const f=document.getElementById('f'),w=document.getElementById('w'),
      z=document.getElementById('z'),g=document.getElementById('g');
let urls=[];
function draw(){
  g.innerHTML='';
  urls.forEach((u,i)=>{
    const box=document.createElement('figure');
    box.style.margin=0;
    const im=new Image();
    im.src=u;
    im.style.width=z.checked?'auto':w.value+'px';
    const c=document.createElement('figcaption');
    c.textContent='No.'+(i+1);
    box.append(im,c);
    g.append(box);
  });
}
f.onchange=()=>{
  urls.forEach(u=>URL.revokeObjectURL(u));
  urls=[...f.files].map(x=>URL.createObjectURL(x));
  draw();
};
w.oninput=draw;
z.onchange=draw;
</script>

保存して .html として開き、場面ごとに10枚を選びます。No.の順番は選択したファイルの順なので、記録表の画像IDと対応させます。

見るべき崩れの具体像：指・文字・影

何を探すかを先に決めておくと、検査が速く、判定もぶれません。次の項目を、画像1枚ごとに「あり・なし」で判定します。

指

• 片手の指の本数が5本か(多い・少ないの両方を見ます)
• 指の関節の曲がる向きが自然か(逆方向に曲がっていないか)
• 持っている物と指の接触が成立しているか(物を貫通している、指が物と融合している)
• 左右の手が取り違えられていないか(親指の位置で判断します)
• 袖口から手首、腕へのつながりに途切れがないか

文字

• 文字が「読めそうで読めない」擬似文字になっていないか
• 日本語の文字に、存在しない画数や部品が混ざっていないか
• 同じ単語が複数箇所にあるとき、字形がそろっているか
• 左右反転や上下反転が起きていないか

文字の場面では、指示文に具体的な文言を入れて生成する場合と、文言を入れず「看板がある」とだけ書く場合の2種類を試す価値があります。ただし、条件を変えるのは文字の場面の中だけにし、各10枚のうちの前半と後半で分けます。

影

• 画像内のすべての影が、同じ方向に伸びているか
• 物と地面が接する部分に、接地の影(物の下の暗がり)があるか。なければ物が浮いて見えます
• 影の濃さが、物の距離や光の強さと矛盾していないか
• 窓や水面、金属への映り込みが、周囲の景色と合っているか

影を確かめるには、画像上に「光は右上から来ている」と仮の矢印を引き、各物体の影がその反対方向に伸びているかを見ます。印刷した画像に定規で線を引いてもよく、画像編集ソフトの線ツールでも構いません。影の先端と物体の先端を結ぶ線が、全物体でほぼ平行になれば光源は一つです。

記録の取り方

1枚につき1行、次の列で記録します。回数は、各画像を「実表示」「原寸」の2回、合計2回検査します。

• 例：A-03、場面：指、実表示で気づいた崩れ：(なし/あり+メモ)、原寸で見つけた崩れ：(なし/あり+メモ)、崩れの種類：本数・関節・接触など、直し方：再生成など、直した後の判定：OK/要再修正

記録のコツは3つあります。

• 「実表示で気づいた」と「原寸で見つけた」を別の列にします。 この差が、この実験でいちばん知りたい情報です。
• 崩れの種類は、上の項目名をそのまま使います。 「変」「微妙」といったメモは、後で集計できません。
• 1枚に複数の崩れがあるときは、列を増やさず、同じ画像IDで行を増やします。 数え間違いを防げます。

30枚の検査が終わったら、次の3つを数えます。

1. 場面ごとの「崩れのある画像の枚数」(10枚中何枚か)
2. 場面ごとの「実表示で気づいた枚数」
3. 場面ごとの「原寸でのみ見つかった枚数」

結果の読み方と直し方の選び方

数えた結果を、次のように読みます。

• 実表示で気づいた枚数が多い場面は、ゲーム内でも目につく崩れです。この場面は、生成後の修正を前提に制作を組みます。
• 原寸でのみ見つかった枚数が多い場面は、表示が小さいうちは問題になりにくい崩れです。ただし、プレイ画面を拡大して遊ぶ人や、タイトル画面で絵を大きく見せる設計があるなら、優先度は上がります。表示の最大サイズを基準に判断します。
• どの場面も崩れが少ない場合は、指示文が簡単すぎて崩れにくい場面を選んだ可能性があります。場面を複雑にして(両手に別の物を持つ、複数の看板を置くなど)、もう一度行います。

崩れ別の直し方

直し方は4種類あり、崩れの性質で向き不向きがあります。

• 指の本数・関節、再生成：枚数を重ねれば当たりが出ることがある、部分修正：手の部分だけ描き直す機能があれば有効、構図で避ける：手を袖や物の陰に隠す、後ろ姿にする、手で足す：手だけ自分で描いて重ねる
• 擬似文字、再生成：文言が正しく出るかは運に左右される、部分修正：該当箇所を空白に塗りつぶす、構図で避ける：文字が読めない距離・角度にする、手で足す：HTML/CSSで文字を重ねる(最も確実)
• 影の向きの不一致、再生成：光源を指示文に書いて再生成、部分修正：影を塗り直す、構図で避ける：影が目立たない曇り空・屋内の設定にする、手で足す：影を別レイヤーで自分で描く

ゲームの場合、文字は特に「画像に含めない」設計が有効です。ゲーム内の看板や文言は、画像の上にHTMLのテキストとして重ねれば、字形の崩れは起きません。言語を切り替える設計にも対応しやすくなります。生成画像には、文字を載せる余白のある看板の形だけを描いてもらいます。

直した後は、必ず同じ手順(実表示→原寸)でもう一度検査します。直した箇所が直っていても、別の箇所を壊していることがあります。

起こりやすい誤り

• 探しすぎる。 原寸で粗探しを始めると、どの絵も何かしらおかしく見えます。基準は「ゲーム内で見える大きさで気になるか」です。
• 指示文を途中で変える。 崩れが出るたびに指示文を足すと、どの条件が効いたのか分からなくなります。この実験の間は固定し、改善案は別の機会に試します。
• よく出来た1枚だけを見て判断する。 良い1枚は、10枚の中の偶然かもしれません。枚数を数える理由はここにあります。
• 自分の絵に甘くなる。 自分で指示文を考えた絵は、粗が見えにくくなります。可能なら、画像を他の人に見せて「実表示サイズで気になる所を指してもらう」手順を足します。その際、あらかじめ崩れの種類は伝えません。
• 画像の大きさを考えない。 公開用に容量を抑える場面では、画像の解像度や圧縮の度合いも見た目に影響します。アソバースへ投稿するHTMLやZIPには、1ファイル30MiB・ZIP全体20MiBなどの上限があります。画像は軽量化したうえで、軽量化後の見た目で再検査します。
• 権利や規約の確認を後回しにする。 生成画像の扱いは、ツールごとの規約や、法律の解釈によって変わります。断定はせず、公式の案内や専門家に確認します。

次の行動

まず、いま作っているゲームで画像を表示する幅を決め、指・文字・影の3場面から1つ選んで10枚生成します。上のHTMLで実表示と原寸を見比べ、記録表の最初の10行を埋めてください。1場面だけでも、「自分のツールで実表示サイズに現れる崩れ」が分かり、次に直す優先順位が決まります。