マガジン

生成したアバターを48種類と並べると何が浮くのか:馴染ませる条件を確かめる手順

遊びをつくる

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

大小の円形フレームで、キツネや鳥などのアバターの輪郭と色を比べるイラスト。
記事のテーマをもとに制作したAI生成イラスト。

アソバースのアバターは、用意された48種類(画像40体とクラシック8種)から選べます。それとは別に、「自分だけのアバターを作る」で説明文と絵柄(切り絵・手描き・粘土)を選んで、画像を生成することもできます。ここで気になるのは、生成したアバターを用意された絵柄と並べたとき、自分のものだけが目立つのか、それとも自然に溶け込むのか、という点です。 ゲームを作る人にとって、この問いはアバターだけの話ではありません。手描きの素材に生成画像を数枚足す、既存のアセットパックに自作のアイコンを混ぜる、といった場面でも同じことが起きます。「どこが違うから浮くのか」を言葉にできれば、直す場所が決まります。 この記事は結果の報告ではなく、読者自身が行うための実験の設計書です。どの属性が見分けの手がかりになるのかを、記録と簡単な盲検テストで確かめます。得られる答えは、読者が生成した画像と、読者が選んだ見る人の組み合わせに固有のものです。結果を先取りした断定は書きません。

この記事の目次
  1. 問いを分解する
  2. 準備するもの
  3. 手順:条件を決め、並べて見てもらう
  4. 記録の取り方と、結果の読み方
  5. 誤りやすい点
  6. 次の行動

問いを分解する

「浮く」を一語で扱うと、実験が曖昧になります。まず、見分けの手がかりになりそうな属性に分けます。

  • 線:輪郭線があるか、太いか細いか、線がない塗りだけの絵か
  • 色:使われている色数の多さと、全体の彩度(鮮やかさ)
  • 背景:単色、模様、背景なし(枠の色がそのまま見える)のどれか
  • 構図:顔や主役が枠に対して占める割合と、位置の中心寄り・端寄り
  • 質感:紙の切り口、絵の具のにじみ、粘土の立体感といった素材らしさ
  • 小ささでの判読性:24〜48px程度に縮めたときも形が読めるか

この6つから、次の2つの問いを立てます。

  • 問いA:説明文を固定して絵柄(切り絵・手描き・粘土)だけを変えると、どの絵柄が最も見分けにくくなるか
  • 問いB:絵柄を固定して説明文の書き方(短い/特徴を3つ入れる)を変えると、見分けやすさは変わるか

どの絵柄が馴染むかは、48種の内訳によって変わるはずです。そのため、内訳を先に決めつけず、手元の48種を観察してから比較します。48種の絵柄の傾向は、アバター選択画面を開いて確かめてください。

準備するもの

必要なものは次のとおりです。

  1. メール確認を済ませたアソバースのアカウント。画像生成はメール確認済みの利用者に限られます
  2. 48種のアバターのスクリーンショット。選択画面で見える範囲を、同じ縮尺で切り出します
  3. 生成した画像のスクリーンショット。48種と同じ手順、同じ縮尺で取ります
  4. 下に載せる比較用HTML(ブラウザで開くだけで動き、外部通信はしません)
  5. 見てもらう人。人数は読者が決めてかまいませんが、後述のとおり少ないと結論が弱くなります
  6. 記録用の表計算ファイルかノート

生成には制限があります。1人につき1時間に1回で、全体でもUTCの1日に10回までです。日本時間では午前9時が日付の区切りになります。つまり、1回の実験で作れる枚数は限られ、混み合う日は生成できない場合もあります。そのため、実験の設計は「少ない枚数で、変える条件を1つだけにする」ことを前提にします。

切り出した画像は、評価のために自分の手元で使う範囲にとどめてください。アバター画像の扱いについては、現在の案内で確認することをおすすめします。

手順:条件を決め、並べて見てもらう

生成の計画を立てる

問いAには3枚、問いBには2枚が最低限必要です。1時間に1回の制限があるので、1日のうちに時間をあけて作ります。例を示します。

  • 1、絵柄:切り絵、説明文:説明X、目的:問いA
  • 2、絵柄:手描き、説明文:説明X、目的:問いA
  • 3、絵柄:粘土、説明文:説明X、目的:問いA
  • 4、絵柄:問いAで選んだ絵柄、説明文:説明Y(短い)、目的:問いB
  • 5、絵柄:同じ絵柄、説明文:説明Z(特徴3つ)、目的:問いB

説明Xは「丸い眼鏡をかけた猫が、帽子をかぶっている」のような、1文で特徴が2つ程度のものにします。説明Yは「眼鏡の猫」の程度に短くし、説明Zは「丸い眼鏡、青い帽子、しっぽが長い」のように特徴を3つ入れます。実在の人物や他の作品のキャラクターを指定する説明は避けてください。著作権や肖像に関わる可能性があるため、判断に迷う場合は公式の案内や専門家に確認してください。

同じ説明と絵柄でも、生成のたびに結果が少し違う可能性があります。「同じ条件でもばらつく」という前提を持ち、1枚の結果から結論を出さないことが、この実験でいちばん重要です。生成後に画像を編集できるかどうかは、画面で確かめてください。

比較用の並べ表示を用意する

48種と生成した画像を混ぜ、シャッフルして小さく並べるための最小のHTMLです。ファイル名にmineを含む画像を「自作」として扱い、「答えを見る」を入れたときだけ赤い枠を付けます。見てもらう間は、答えを見るをオフにしておきます。

html
<!doctype html>
<meta charset="utf-8">
<input type="file" id="f" accept="image/*" multiple>
<label>サイズ <input type="range" id="s" min="24" max="160" value="48"></label>
<label><input type="checkbox" id="g">白黒</label>
<label><input type="checkbox" id="b">ぼかし</label>
<label><input type="checkbox" id="a">答えを見る</label>
<button id="r">並べ替え</button>
<div id="w" style="display:flex;flex-wrap:wrap;gap:6px;margin-top:8px"></div>
<script>
const $=i=>document.getElementById(i);let items=[];
$('f').onchange=()=>{
  items.forEach(x=>URL.revokeObjectURL(x.u));
  items=[...$('f').files].map(x=>({u:URL.createObjectURL(x),mine:x.name.includes('mine')}));
  shuffle();
};
function shuffle(){items.sort(()=>Math.random()-.5);draw();}
function draw(){
  const w=$('w');w.innerHTML='';
  items.forEach(x=>{
    const im=new Image();im.src=x.u;
    const f=($('g').checked?'grayscale(1) ':'')+($('b').checked?'blur(2px)':'');
    im.style.cssText=`width:${$('s').value}px;height:${$('s').value}px;`+
      `object-fit:cover;border-radius:50%;filter:${f};`+
      ($('a').checked&&x.mine?'outline:3px solid red;':'');
    w.appendChild(im);
  });
}
['s','g','b','a'].forEach(i=>$(i).oninput=draw);
$('r').onclick=shuffle;
</script>

円形の切り抜き(border-radius:50%)は、アバターが実際にどんな枠で表示されるかを確かめてから、同じ形に合わせてください。表示枠が四角なら、この指定を外します。

盲検テストを行う

見てもらう人には、次の手順で進めます。

  1. 48種のうち使う枚数と、自作1枚を混ぜた画像を、ランダムな順序で表示します。自作の位置は伝えません
  2. 「この中に、あとから混ぜた1枚があります。どれだと思いますか」と尋ねます
  3. 選んだ理由を、線・色・背景・構図・質感のどれに近いかを含めて、自由に話してもらい記録します
  4. 同じ人には、別の自作画像で2回目をやりません。見分けのコツを覚えてしまうためです
  5. 条件を変えた別の自作画像は、別の人に見てもらいます

人数が少なくて試行を重ねたいときは、サイズを変える(24px・48px・96px)、白黒にする、といった表示の違いごとに別の人を割り当てます。同じ人が何度も見ると記憶に頼るので、避けてください。

記録の取り方と、結果の読み方

記録は、1回の盲検テストにつき1行で残します。

  • 条件ID、記録の中身:例:A-切り絵-説明X
  • 表示サイズ、記録の中身:24/48/96px
  • 白黒の有無、記録の中身:あり/なし
  • 並べた枚数、記録の中身:例:49(48+自作1)
  • 選んだ位置、記録の中身:見た人が選んだ枚数目
  • 正解したか、記録の中身:はい/いいえ
  • 理由の分類、記録の中身:線/色/背景/構図/質感/その他
  • 自由記述、記録の中身:そのまま書き取る

並べる枚数が49枚なら、当てずっぽうで正解する確率は49分の1、約2%です。ここが「偶然の目安」になります。ただし、見てもらう人数が数人だと、1人の正解や不正解で割合が大きく動きます。数人の結果では、「全員が当てた」「全員が外した」「割れた」の3つの傾向しか読めません。数字の精度を求めず、傾向と理由の集まり方に注目してください。

読み方の基準を、次のように決めておきます。

  • 多くの人が自作をすぐ当てた場合:理由の分類を数えます。1つの属性に集中していれば、そこが浮く原因の候補です。たとえば「色」が多ければ、彩度を下げる方向の説明文を試す価値があります。ただし、説明文で彩度を操作できるかは未確認なので、問いBの形で確かめます
  • 当たりと外れが割れた場合:当てた人の理由と、外した人が選んだ別の画像の特徴を見比べます。外した人が間違えて選んだ画像に共通点があれば、それが「自作に近い見た目の既存アバター」で、馴染ませる手がかりになります
  • ほとんどの人が当てられなかった場合:馴染んでいる可能性がありますが、24pxのような小さい表示だけで見分けがつかなくなっているだけかもしれません。96pxなど大きな表示でも確かめてから判断してください
  • 理由がばらばらで一貫しない場合:自作が特に浮く条件は見つかっていない、という結論も成り立ちます。この場合は、生成の枚数か見る人数を増やして、傾向が変わるかを見ます

問いAでは、3つの絵柄で見分けやすさの傾向を比べます。問いBでは、説明文を変えたときの理由の分類の動きを見ます。いずれも、因果の証明ではなく、次にどこを直すかを決めるための手がかりとして読んでください。

誤りやすい点

実験の結果を歪めやすい点を挙げます。

  • 条件を2つ同時に変えてしまう:絵柄と説明文を同時に変えると、どちらが効いたのか分からなくなります。1回につき1つだけ変えます
  • 1枚の生成結果で結論を出す:同じ条件でも結果がばらつく可能性があるため、できれば同じ条件でもう1枚作る日を設けます。ただし1時間1回、全体で日10回という上限があるため、無理なく日をまたいでください
  • 切り出しの縮尺がそろっていない:48種の切り出しと自作の切り出しで拡大率が違うと、画質の差が「浮き」に混ざります。同じ画面、同じ拡大率、同じ手順で撮ります
  • 位置の偏り:自作がいつも端にあると、位置で見分けられます。毎回シャッフルして、見る人ごとに別の並びにします
  • 作った本人が評価してしまう:自作の癖を知っているので、本人の目は当てになりません。盲検は必ず第三者に頼みます
  • 「浮かないこと」を目的にしすぎる:自分だけの個性として目立たせたいなら、むしろ浮く属性を残すのも選択肢です。何を目的にするかを先に決めてから、結果を読みます
  • 説明文に個人情報や実在の人物を入れる:実験用でも避けてください。公開プロフィールの内容は、本人が公開を選んだときだけ表示される仕組みです。

次の行動

まず、48種のアバターを同じ縮尺で切り出して、比較用HTMLに読み込み、24px・48px・96pxで眺めてみてください。生成する前に、48種の中でどの属性がそろっていてどれがばらついているかを書き出しておくと、後の判断が楽になります。

そのうえで、説明文を1つ決めて切り絵・手描き・粘土を3回、1時間以上あけて生成し、盲検テストに進んでください。この手順は、ゲームの素材に生成画像を混ぜるときの確認にもそのまま使えます。