生成した背景と手描きのキャラを合わせる：なじませる方法

問いを検証できる形にする：4つの条件と準備

比較のために、同じ背景とキャラから次の4枚を作ります。

• A、色の調整：なし、粗さの調整：なし
• B、色の調整：あり、粗さの調整：なし
• C、色の調整：なし、粗さの調整：あり
• D、色の調整：あり、粗さの調整：あり

Aが基準で、BとCがそれぞれ単独の効き方を見る枠、Dが両方の効果を見る枠です。

準備するものは次のとおりです。

• 生成した背景1枚。表示する画面と同じ縦横比（16:9など）にそろえておきます。
• 手描きのキャラ1体。背景が透過した形式のPNGで用意します。
• 画像を見比べられる環境。書き出しは同じ表示サイズで、同じ画面を使います。
• 記録用の表。条件A〜Dを行にし、評価点と「浮いて見える場所」の欄を設けます。
• 見てもらう人を3人以上。ゲーム画面を日常的に見ている人で、かつ制作の経緯を知らない人が向いています。

調整は必ず元の画像を残したまま、別ファイルとして書き出します。上書きすると、条件Aに戻れなくなります。

手順1：色を揃える

まず、揃える対象を数値で見えるようにします。

1. 背景から主要な色を3〜5色、スポイトで拾います。空、地面、遠景、いちばん暗い部分、いちばん明るい部分が候補です。
2. キャラからも同様に、肌、髪、服、輪郭線の色を拾います。
3. 色選択ツールで、各色の彩度と明度を表に書き写します。HSLでもHSVでもかまいませんが、ツールは一つに固定します。
4. 背景とキャラで、彩度の平均と明度の幅を見比べます。

見る点は「どちらが目立って鮮やかか」「暗部の色が同じ方向に寄っているか」の二つです。絶対値の目安はここでは断定しません。差が大きい項目から手を付けます。

調整は、一度に一項目だけ動かします。手段は大きく二つあります。

• 背景側を動かす：背景の彩度を下げる、または明度の幅を少し詰めます。
• キャラ側を動かす：背景の環境光に近い色を、キャラの上に薄く重ねます。重ねる強さは弱いところから始めます。影の色を、背景の暗部の色味に寄せるのも有効です。

条件Bはこの色の調整だけを施し、線や解像度には触れません。

手順2：線の粗さを揃える

粗さは目で見ただけでは比べにくいので、まず計測します。

1. 画像を等倍または拡大表示し、キャラの輪郭線の太さがピクセルで何本分かを数えます。数える場所は3か所以上にします。
2. 背景の中で、キャラと同じ距離感にある物体の境目を選び、境目がぼけている幅を数えます。
3. 二つの値を表に記録します。

もう一つ見落としやすいのは、表示倍率による変化です。キャラを大きなキャンバスで描き、小さく縮めて置くと、線は細くなります。逆に小さく描いて拡大すると、線は太くぼやけます。背景とキャラで「元の解像度」と「最終表示の倍率」が違えば、粗さも自然にずれます。ここを先に確認します。

粗さを揃える手段は次のとおりです。

• 背景を一度縮小してから拡大し、細部の密度を下げる。
• キャラの線を、背景の境目に合わせて細くする、またはわずかにぼかす。
• 完成した画面全体に、同じ粒状のノイズを薄くかけて質感を共通にする。

どれも、背景だけ、キャラだけを加工すると別の差を生むことがあります。全体にかける処理は、最後に一括で行います。

組み合わせを素早く見るための最小プレビュー

画像編集ソフトに書き出す前に、ブラウザで大まかな方向を確かめたい場合は、次のHTMLを preview.html として保存し、開いてください。背景とキャラの画像を選ぶと、背景の彩度、背景の粗さ、キャラへの色かぶせの強さをスライダーで動かせます。外部のライブラリは使わず、画像は端末の外へ送られません。

<input type="file" id="bg" accept="image/*">
<input type="file" id="ch" accept="image/*">
<label>背景の彩度 <input id="s" type="range" min="0" max="200" value="100"></label>
<label>背景の粗さ <input id="r" type="range" min="1" max="8" value="1"></label>
<label>キャラの色かぶせ <input id="t" type="range" min="0" max="40" value="0"></label>
<canvas id="c" width="640" height="360"></canvas>
<script>
const W=640,H=360,c=document.getElementById('c'),x=c.getContext('2d');
const img={},load=id=>document.getElementById(id).onchange=e=>{
  const i=new Image();i.onload=()=>{img[id]=i;draw()};
  i.src=URL.createObjectURL(e.target.files[0]);};
load('bg');load('ch');
['s','r','t'].forEach(k=>document.getElementById(k).oninput=draw);
function draw(){
  if(!img.bg)return;
  const r=+document.getElementById('r').value,s=document.getElementById('s').value/100;
  const m=document.createElement('canvas');m.width=W/r;m.height=H/r;
  m.getContext('2d').drawImage(img.bg,0,0,m.width,m.height);
  x.imageSmoothingEnabled=r==1;
  x.drawImage(m,0,0,W,H);
  const d=x.getImageData(0,0,W,H),p=d.data;
  for(let i=0;i<p.length;i+=4){
    const g=0.3*p[i]+0.59*p[i+1]+0.11*p[i+2];
    for(let j=0;j<3;j++)p[i+j]=Math.max(0,Math.min(255,g+(p[i+j]-g)*s));
  }
  x.putImageData(d,0,0);
  if(!img.ch)return;
  const h=H*0.7,w=img.ch.width*h/img.ch.height;
  const k=document.createElement('canvas');k.width=w;k.height=h;
  const kx=k.getContext('2d');kx.drawImage(img.ch,0,0,w,h);
  kx.globalCompositeOperation='source-atop';
  kx.fillStyle=`rgba(200,150,90,${document.getElementById('t').value/100})`;
  kx.fillRect(0,0,w,h);
  x.imageSmoothingEnabled=true;
  x.drawImage(k,(W-w)/2,H-h-10);
}
</script>

色かぶせの 200,150,90 は暖色の仮の値です。背景の環境光に近い色に書き換えてください。粗さのスライダーは縮小してから拡大するだけの簡易的な処理なので、仕上げの編集ソフトの代わりではなく、方向を見るための道具として使います。

評価を記録して、結果を読む

4枚の条件を、見てもらう人にはランダムな順番で、1枚ずつ同じ大きさで見せます。条件名は伏せます。1人につき、次の2点を記録します。

• 「一枚の絵に見えるか」を1〜5点で。
• 「ここだけ浮いている」と感じた場所を、指差しまたは言葉で。

人数が少ないので、点数の平均だけでなく、指差しの場所の偏りも見ます。可能なら同じ人に日を改めてもう一度、順番を変えて見てもらうと、順序の影響を確認できます。

読み方の枠組みは次のとおりです。

• BがCより明らかに高い：色の差が主因の可能性が高いです。以後、色の調整に時間を割きます。
• CがBより明らかに高い：線や解像度の差が主因の可能性が高いです。倍率の統一を最優先にします。
• DがBとCのどちらよりも高く、BやCの上積みが小さい：両方が必要な素材です。順序は問わず、両方を揃えます。
• A〜Dに差がほとんどない：調整量が足りないか、浮きの原因が別にあります。影の向きや接地、背景の遠近とキャラの大きさの釣り合いを疑ってください。
• 点数は上がったが指差しの場所が減っていない：全体の印象は変わっても、特定の部分が残っています。その部分だけを局所的に直します。

誤りやすい点

最後に、この実験で誤りが入りやすい点を挙げます。

• 複数項目を同時に動かす：彩度と明度を一度に変えると、どちらが効いたか分からなくなります。
• 制作者の目の慣れ：何度も見ているうちに、違和感に気付かなくなります。時間を空けるか、他の人に見てもらいます。
• 評価者に条件を教える：「調整した方」と伝えると、点数が上がる方向に偏ります。
• モニタの明るさや色味の違い：評価は同じ画面、同じ明るさで行います。
• 書き出し時の圧縮：JPEGに落とすと粗さが変わります。比較用の4枚は同じ形式、同じ設定で書き出します。
• 静止画だけで判断する：ゲーム内で背景がスクロールしたりキャラが動いたりする場合、止まった状態とは見え方が変わります。実際に動かして確かめます。

アソバースへ投稿する場合も、同じ考え方で確認できます。投稿は「入力→表示の確認→公開」の3段階です。表示の確認の段階で、実際のゲーム画面の大きさのまま、動かしながら浮きがないかを見られます。素材は相対パスで入れ、アップロードは20MiB以内に収める必要があります。調整後の画像を軽く書き出す工夫は、見た目の統一と同時に進められます。

次の行動

まず、手元の背景1枚とキャラ1体で、条件A〜Dの4枚を書き出してください。記録表は、彩度・明度の表と線幅の表の2枚で十分です。評価は3人以上に条件を伏せて行い、点数と「浮いて見える場所」を残します。結果の読み方の枠組みで最優先の調整が決まったら、その一項目だけを次の制作に持ち込みます。