サムネイルを8つの構図で作ったら、どれが選ばれるのか：小さく並べて確かめる実験設計

「選ばれる」を三つの問いに分ける

「どれが選ばれるか」は一つの問いに見えますが、実際は別々の問いが混ざっています。

• 目に留まるのはどれか（一覧の中での見つけやすさ）
• 遊んでみたくなるのはどれか（興味）
• どんなゲームか分かるのはどれか（内容の伝わり方）

目に留まっても、内容が伝わらなければ遊ばれません。内容は伝わるのに地味で、通り過ぎられる絵もあります。この3つは、同じ8枚を使っても質問の文面を変えれば別々に測れます。

最初は、参加者に次の3つを順に聞く形をおすすめします。

1. 一覧をぱっと見て、最初に目が行った1枚を選んでください。
2. 遊んでみたい1枚を選んでください。
3. どんなゲームだと思いますか。一言で書いてください。

3つ目は選択ではなく自由記述です。自分が意図したジャンルや雰囲気と、書かれた言葉が合っているかを見るためのものです。

8枚の設計：3つの軸を2水準ずつ

変える要素は3つ、それぞれ2通りにします。2×2×2で、ちょうど8枚になります。

• 軸A：主役（キャラクターや中心モチーフ）の大きさ。画面の大部分を占める「大」と、余白に浮かぶ「小」です。
• 軸B：主役の位置。「中央」と、画面を3分割した線の近くに寄せた「寄せ」です。
• 軸C：タイトル文字。「あり」と「なし」です。

• c1、大きさ：大、位置：中央、文字：あり
• c2、大きさ：大、位置：中央、文字：なし
• c3、大きさ：大、位置：寄せ、文字：あり
• c4、大きさ：大、位置：寄せ、文字：なし
• c5、大きさ：小、位置：中央、文字：あり
• c6、大きさ：小、位置：中央、文字：なし
• c7、大きさ：小、位置：寄せ、文字：あり
• c8、大きさ：小、位置：寄せ、文字：なし

この表の通りに作れば、後で「大きさ」だけを取り出して比べられます。c1〜c4とc5〜c8を比べれば、位置と文字の影響は半々ずつ混ざって相殺されるからです。

固定するものも決めておきます。

• 色の組み合わせと背景の明るさは8枚とも同じにします。
• 画風と素材（同じ絵から切り出す、または同じ絵を再構成する）は揃えます。
• 縦横比は同じにします。
• タイトル文字の書体と色は同じにし、位置だけを動かします。

公式作品のカバーは生成したアートワークで、ゲーム画面のスクリーンショットではありません。作品ごとにタイトルの文字組みが異なります。縦組みの明朝、手描き文字、郵便ラベル、夜の標識などです。自作でも「画面そのままを使うか、カバー用に絵を作るか」は大きな分かれ道ですが、この実験では片方に固定します。そこまで動かすと軸が増えすぎるからです。気になる場合は、この実験を終えた後に別の実験として行ってください。

準備と手順

準備するもの

• 8枚の画像。ファイル名をc1.png〜c8.pngとして、同じフォルダに置きます。
• 下のHTMLファイル。ブラウザで開くだけで動き、外部通信はしません。
• 参加者に見せる端末。自分の端末だけでなく、普段の閲覧環境に近いものを使います。
• 記録用の紙か表計算ソフト。

表示サイズは、実際の一覧での大きさを案内で確認できればそれに合わせます。確認できなければ、幅80〜360px程度のスライダーで3段階（小・中・大）を決め、それぞれで試します。投稿画面や一覧での実際の表示サイズは、現在の案内で確認してください。

比較ツール

画像を毎回ランダムな順で並べ、クリックされた構図を記録するだけの最小構成です。

<!doctype html>
<meta charset="utf-8">
<title>サムネイル比較</title>
<p>幅 <input id="w" type="range" min="80" max="360" value="160">
<span id="v">160</span>px　参加者 <input id="who" size="6"></p>
<div id="g" style="display:flex;flex-wrap:wrap;gap:8px"></div>
<pre id="out">round,参加者,位置,構図,幅</pre>
<script>
const files=["c1.png","c2.png","c3.png","c4.png","c5.png","c6.png","c7.png","c8.png"];
let round=0;
const $=id=>document.getElementById(id);
function shuffle(a){
  a=a.slice();
  for(let i=a.length-1;i>0;i--){
    const j=Math.floor(Math.random()*(i+1));
    [a[i],a[j]]=[a[j],a[i]];
  }
  return a;
}
function draw(){
  $("g").innerHTML="";
  shuffle(files.map((f,i)=>i)).forEach((idx,pos)=>{
    const img=new Image();
    img.src=files[idx];
    img.alt="c"+(idx+1);
    img.style.width=$("w").value+"px";
    img.style.cursor="pointer";
    img.onclick=()=>{
      round++;
      $("out").textContent+="\n"+[round,$("who").value,pos+1,idx+1,$("w").value].join(",");
      draw();
    };
    $("g").appendChild(img);
  });
}
$("w").oninput=()=>{$("v").textContent=$("w").value;draw();};
draw();
</script>

クリックするたびに並び順が入れ替わり、下の欄に「何回目、誰が、何番目の位置の、どの構図を、何pxで選んだか」が1行ずつ増えます。この欄の内容を表計算ソフトに貼り付ければ集計できます。スライダーは進行役が操作し、参加者には触らせません。

進め方

1. 進行役が参加者IDを入力し、幅を最初の段階に合わせます。
2. 参加者に問い1「最初に目が行った1枚」を選んでもらいます。選んだら並びが入れ替わります。
3. 同じ幅のまま、問い2「遊んでみたい1枚」を選んでもらいます。
4. 幅を次の段階に変え、1〜3を繰り返します。3段階が終わったら、問い3の一言を紙に書いてもらいます。
5. 参加者ごとに、幅の順番を入れ替えます。小から始める人と大から始める人を作ります。

同じ人に同じ8枚を何度も見せると、絵を覚えてしまい、純粋な第一印象ではなくなります。1人あたりの回数は「幅3段階×2問」程度にとどめ、問いごとに選んだ絵を「ツールの記録」と「紙の記録」で見分けられるようにしておきます。ツールには問いの区別がないため、記録欄の行を問い1と問い2の順に読み分けるか、問いごとにページを開き直してください。

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

記録する単位

1回の選択を1行とします。列は、参加者ID、問いの種類、幅、位置（左から何番目か）、選ばれた構図です。位置を残すのは、画像の内容ではなく「左上にあったから」という偏りを後で検出するためです。

軸ごとに合算する

集計は、構図そのものではなく軸ごとに行います。

• 軸A：c1〜c4（大）とc5〜c8（小）の選択数を比べます。
• 軸B：c1・c2・c5・c6（中央）とc3・c4・c7・c8（寄せ）を比べます。
• 軸C：c1・c3・c5・c7（文字あり）とc2・c4・c6・c8（文字なし）を比べます。

どの軸でも、半々に近ければ差はないと見ます。極端な偏りであれば、その軸に効果がある可能性があります。回数が少ないうちは、数回の偏りは偶然でも起こるため、「傾向」にとどめるのが妥当です。

幅ごとに分けて見る

軸ごとの合算を、幅の段階ごとにも出します。見るべきは次のようなパターンです。

• 全ての幅で同じ向きに偏っている場合は、その軸は安定して効くと読めます。
• 幅が小さいときだけ偏りが出る場合は、小さく見たときの問題と読めます。たとえばタイトル文字は、小さいと読めずに「ただの模様」になっている可能性があります。この場合、文字ありが選ばれにくければ、文字を大きく太くした版で再度試します。
• 幅が大きいときだけ偏りが出る場合は、細部の描き込みが効いている可能性があります。一覧の小さな表示では意味を持たないかもしれません。

問い3の自由記述と突き合わせる

選ばれた構図が多くても、自由記述がゲームの中身とずれているなら要注意です。たとえば、パズルのつもりが「アクションゲーム」と書かれているなら、目を引いても誤解を呼んでいます。8枚のうち、意図したジャンルが最も多く書かれた構図を別にメモしておきます。「選ばれた構図」と「伝わった構図」が一致するかどうかが、最終的な判断材料になります。

起こりやすい誤り

• 8枚の品質差を構図の差と誤認する。 一枚だけ丁寧に仕上げると、その絵が選ばれます。描き込みの量、解像度、塗りの密度を揃えてください。
• 自分や身近な人だけで判断する。 ゲームの内容を知っている人は、絵の意味を補って見てしまいます。ゲームを知らない人に選んでもらうのが基本です。
• 選択理由を先に聞く。 理由を聞かれると、人は理屈の通る選び方に寄ります。先に選ばせ、理由は後から聞きます。
• 位置の偏りを見落とす。 左上や中央が選ばれやすいことがあります。毎回並びを入れ替えて、位置の列も必ず確認します。
• 少数の結果で断定する。 参加者が少ないうちは、偏りを「この構図が優れている」とは言い切れません。傾向として扱い、次の改良案を作って再度比べます。
• 軸を増やしすぎる。 色や画風も同時に動かすと、読めなくなります。1回の実験では3軸までにします。

次の行動

まず、自作ゲームの主役が1つ決まっている絵を使い、上の表のとおり8枚を作ってみてください。ツールで友人や家族に選んでもらい、軸ごとに合算するところまで進めば、次に直す1点が見えてきます。

実際の公開では、アソバースのプレイ回数は作品を起動した実測の回数で、人数ではありません。同じ端末・同じ作品で30分以内の再起動は重複として除かれます。カバー画像以外の要因（紹介文、公開時期、ジャンル）も混ざるため、公開後の数字だけでカバーの優劣は断定できません。公開後にカバー画像を差し替えられるかどうかは、現在の案内で確認してください。