白黒の線画を生成して自分で塗る：色の決定権をどこに置くかを確かめる実験設計

比べる条件を決める

比べるのは次の3条件です。線画は同じものを使い、塗り方だけを変えます。

• A：生成任せ、色の決め方：線画を渡して「彩色して」と頼む、確かめたいこと：色の判断を丸ごと任せた場合の基準線
• B：先決めパレット、色の決め方：塗る前に5〜6色と役割を決め、その色だけで塗る、確かめたいこと：色の役割を先に決める効果
• C：場当たり手塗り、色の決め方：パレットを決めず、自分の感覚で塗る、確かめたいこと：「手で塗ること」自体の効果と、Bのパレットの効果を切り分ける

Cを入れる理由は、BがAより良く見えたときに、手塗りが効いたのか、パレットを先に決めたことが効いたのかを分けるためです。BとAだけの比較では、この二つを分けられません。

線画は1つでは足りません。キャラクター、小物、背景のように性質の違う線画を3枚用意し、3条件×3枚の計9枚を作ります。1枚だけだと、たまたま相性のよい絵が当たった可能性を排除できないからです。

準備するもの

• 線画を生成できる画像生成ツール。利用規約、商用利用の可否、生成物の権利の扱いは、使うツールの公式情報で確認します。法的な判断が必要な場合は専門家にも相談してください。
• 画像を塗るツール。普段使っているペイントソフトで構いません。下に載せる最小のブラウザ塗りつぶしツールでも足ります。
• 記録用の表。条件、線画の番号、塗りにかかった分数、使った色数、やり直し回数の列を作ります。
• 評価用の見本画面。ゲームの背景色の上に素材を並べた画面を1枚作り、すべての素材を同じ縮尺で置きます。

線画の生成指示には、色に関する言葉を入れないのがコツです。「青い服」のような語が混ざると、線画なのに灰色や薄い着色が入りやすくなります。指示の方針は次のとおりです。

• 白い背景に黒い輪郭線だけ、塗りなし、影なし、グレーなし、と明記する。
• 太さは均一に、線は閉じた形にしてほしいと伝える。
• 細かい模様は避ける。塗る領域が増えるほど、時間も差も測りにくくなります。

手順

1. 線画を3枚生成して整える

生成した線画は、そのまま使わず前処理をします。画像編集ソフトで、明るさの境目を決めて白と黒の二つに分ける「二値化」を行います。灰色のにじみが消え、塗りつぶしの境界がはっきりします。二値化のあと、線が途切れて塗りが外へ漏れる箇所がないか、拡大して確認します。切れていたら、黒で線をつないでおきます。

2. 条件Aを作る

3枚の線画を、生成ツールに渡して彩色させます。追加の細かい注文は付けず、「彩色して」程度にとどめます。注文を足すほど、自分の判断が混ざってAの基準線ではなくなります。気に入らなくても、再生成は1回までなど回数を先に決めておきます。

3. 条件Bのパレットを先に決める

塗る前に、色の役割を紙やメモに書き出します。例として次のような分け方があります。

1. 主役の色：プレイヤーや操作対象。画面の中で最も目立たせたい1色。
2. 危険や敵の色：主役と明確に区別できる1色。
3. 取るもの、触れるものの色：1色。
4. 背景の主色：明るさを抑えた1色。
5. 背景の補助色：主色と近い明るさの1色。
6. 文字や縁取り用の色：必要なら1色。

色の数は5〜6色までとします。多くすると、条件Cとの差が「色数の差」になってしまうからです。決めたパレットは塗り始めてから変更しません。変えたくなった場合は、その回数を記録します。

4. 条件BとCを塗る

Bはパレットの色だけで塗ります。Cはパレットを決めず、塗りながら選びます。同じ線画を2回塗る形になるので、記憶の影響を減らすため、BとCは別の日に作るか、間に時間を空けます。

塗りの道具を持っていない場合は、次の最小構成が使えます。画像ファイルを選び、パレットのボタンで色を選び、画像の領域をクリックして塗りつぶします。外部ライブラリは使わず、サーバーも不要です。HTMLファイルとして保存し、ブラウザで開けば動きます。

<!doctype html>
<meta charset="utf-8">
<input type="file" id="f" accept="image/*"><div id="p"></div><canvas id="c" style="max-width:100%"></canvas>
<script>
const cv=document.getElementById('c'),ctx=cv.getContext('2d',{willReadFrequently:true});
const pal=['#2f4858','#f6ae2d','#f26419','#86bbd8','#e8dcc4']; // ここを自分のパレットに
let cur=pal[0];
pal.forEach(col=>{const b=document.createElement('button');
  b.style.cssText='width:32px;height:32px;background:'+col;
  b.onclick=()=>cur=col;document.getElementById('p').append(b);});
document.getElementById('f').onchange=e=>{
  const img=new Image();
  img.onload=()=>{cv.width=img.width;cv.height=img.height;ctx.drawImage(img,0,0);};
  img.src=URL.createObjectURL(e.target.files[0]);};
const hex=h=>[1,3,5].map(i=>parseInt(h.slice(i,i+2),16));
cv.onclick=e=>{
  const r=cv.getBoundingClientRect(),w=cv.width,h=cv.height;
  const x=Math.floor((e.clientX-r.left)*w/r.width),y=Math.floor((e.clientY-r.top)*h/r.height);
  const d=ctx.getImageData(0,0,w,h),a=d.data,i0=(y*w+x)*4;
  const t=[a[i0],a[i0+1],a[i0+2]],c=hex(cur);
  if(t[0]<60&&t[1]<60&&t[2]<60)return; // 黒い線の上は塗らない
  const q=[[x,y]],seen=new Uint8Array(w*h);
  while(q.length){const[px,py]=q.pop();
    if(px<0||py<0||px>=w||py>=h)continue;
    const k=py*w+px;if(seen[k])continue;seen[k]=1;
    const i=k*4;
    if(Math.abs(a[i]-t[0])+Math.abs(a[i+1]-t[1])+Math.abs(a[i+2]-t[2])>90)continue;
    a[i]=c[0];a[i+1]=c[1];a[i+2]=c[2];
    q.push([px+1,py],[px-1,py],[px,py+1],[px,py-1]);}
  ctx.putImageData(d,0,0);};
</script>

使うときの注意が二つあります。一つは、線の際に白い細い縁が残る点です。線のアンチエイリアス（輪郭をなめらかに見せる中間色）の部分が塗られないためで、二値化した線画を使えば目立ちにくくなります。もう一つは、大きな画像だと処理が重くなる点です。長辺を800ピクセル前後に縮めてから読み込むと快適です。

出来上がった画像は、画面のスクリーンショットなどで保存します。

5. 見本画面に並べる

9枚をすべて、ゲームの背景色の上に同じ縮尺で置いた画面にします。背景色は実際のゲームで使う色を選びます。本番と違う背景で比べると、判別のしやすさの評価がずれます。

記録と評価のしかた

作業の記録

塗りの最中は、1枚ごとに次を記録します。

• 塗りにかかった時間（分）
• 使った色数
• やり直し（塗りを消して塗り直した回数）
• パレットを変えた回数（Bのみ）

見た目の評価

見た目は、あとで条件を伏せて評価します。9枚の順番をばらばらにして、どの条件の絵か分からない状態で見ます。自分が塗った絵は見分けがつきやすいので、可能なら家族や友人など、制作に関わっていない人にも見てもらいます。人数は固定の決まりがあるわけではないので、3人程度を目安に、実施した人数を記録に残します。

評価の観点は次の4つです。それぞれ「できている／あいまい／できていない」の3段階で付けます。

1. 縮小しても主役が見えるか：見本画面を、実際のゲームで表示される大きさ、またはそれより小さく縮小して見ます。
2. 白黒にしても区別できるか：見本画面をグレースケールにします。明るさだけで主役、敵、背景が分かれているかを確認します。色の違いだけに頼っていると、色の見え方が異なる人にも伝わりにくくなります。
3. 隣り合う領域が混ざらないか：体と背景の境目、小物と手など、接する部分が溶け合っていないかを見ます。
4. 3枚並べて同じ世界に見えるか：キャラクター、小物、背景を並べたとき、同じ作品の素材に見えるかを答えてもらいます。

結果の読み方

結果が出たら、観点ごとに3条件の評価を並べて読みます。判断の目安は次のとおりです。

• BがAとCの両方より高い観点が多い場合：パレットを先に決める効果があると読めます。ただし、色数が少なかったことの効果である可能性が残ります。Aの色数を数えて確認します。
• BとCがほぼ同じで、Aだけ低い場合：効いているのはパレットよりも、人が色を選ぶこと自体かもしれません。手塗りの手間に見合うかを、作業時間と合わせて考えます。
• Aが「3枚並べて同じ世界か」で高い場合：生成ツールが統一感を保つのが得意な可能性があります。主役の判別だけを手で補正する方法を検討します。
• どの観点でも差が小さい場合：この素材量やゲームの画面構成では、色の決め方の差は大きくないと読めます。その場合は、作業時間が短い方法を採ります。
• 評価者によって結果がばらつく場合：1回の実験で結論を出さず、線画を替えてもう一巡します。

時間の記録は、見た目の評価と別に読みます。見た目が少し良くても、作業時間が何倍にもなるなら、全素材に使うか、主役だけに使うかという判断の材料になります。

起こりやすい誤り

• 線画に灰色や薄い塗りが混ざる：塗りつぶしがうまく働かず、領域が細かく分かれます。二値化で対処します。
• 線が閉じていない：塗りが線の外へ漏れます。拡大して線をつなぎます。
• 条件Aで注文を足しすぎる：基準線ではなく、半分は自分の塗りになってしまいます。
• パレットを途中で変える：条件Bの意味が失われます。変えた場合は回数を記録し、分析で区別します。
• 自作を贔屓して評価する：条件を伏せ、順番をばらばらにして見ます。
• 背景色を本番と変える：判別しやすさの評価が成り立たなくなります。
• 1枚だけで結論を出す：3枚の線画、できれば複数回の実施で読みます。
• 権利の確認を後回しにする：生成物の扱いは、ツールの規約や公式情報に従います。公開や販売を考える場合は、事前に確認します。

次の行動

まず、線画を3枚生成して二値化し、条件Bのパレットを紙に書き出すところまで進めてみてください。パレットの色に役割を付けるだけでも、自分のゲームで何を最優先で見せたいのかが見えてきます。実験を終えて使う素材が決まったら、相対パスで配置し、index.htmlを直下に置いたZIPをアソバースの投稿画面にアップロードして、表示の確認まで進めてみてください。