同じ作品で5枚のカバーを作り、一覧に並べて選ぶ手順
遊びをつくる執筆にClaudeを使用しています。
カードが12枚並んだ一覧を、スマートフォンで親指を滑らせながら眺める場面を考えてみます。ほとんどのカードは一瞬で通り過ぎ、止まるのは1〜2枚です。止まったカードは、作品の出来を評価されたのではありません。カバーが「並びの中で目立つ条件」を満たしたというだけです。 この記事で確かめる問いは、同じ作品のカバーを5通り作って周囲のカードと並べたとき、どの案が最初に視線を集めるかです。好みで選ぶのではなく、並べ方と記録の取り方を決めて、自分で答えを出す設計書として書いています。結果は載せていません。実際に並べた読者の手元にだけ答えが出ます。
先に決める問い：何を測り、何を測らないか
測るのは「一覧の中で最初に目が止まるか」だけです。「面白そうと思われたか」や「実際に遊ばれたか」は、別の問いです。
目立つ案と、作品の内容を正しく伝える案は一致するとは限りません。落ち着いた雰囲気のパズルが、激しい色のカバーで選ばれても、遊んだ人の期待とずれてしまいます。そこで問いを2つに分けます。
- 目立つか：12枚の中から最初に選ばれるか。
- 伝わるか：選んだ人が「どんなゲームか」を言葉にしたとき、実際の内容と合っているか。
最終的に選ぶのは、1で上位に入った案のうち、2で内容とのずれが小さいものです。
5案の作り方：変えるのは1要素だけ
5枚を作るときは、元になる1枚を決め、案ごとに変える要素を1つに絞ります。色も文字も構図も同時に変えると、選ばれた理由が分かりません。
- A（基準）、変える要素：変えない、見たいこと：他の案との比較の起点
- B、変える要素：主役を1つに絞り、大きくする、見たいこと：小さく表示されても形が読めるか
- C、変える要素：明暗差を強める、見たいこと：縮小しても輪郭が残るか
- D、変える要素：周囲と逆の色相にする、見たいこと：並びの中で色が浮くか
- E、変える要素：タイトル文字を大きく、太くする、見たいこと：文字だけで見分けがつくか
アソバースの公式13作品は、作品ごとにタイトルの文字組みが異なります。縦組みの明朝、手描き文字、郵便ラベル、夜の標識、光の幾何学、メニュー風などです。カバー画像は生成したアートワークで、ゲーム画面のスクリーンショットではありません。文字組みをどう使い分けているかは、一覧で実際に見比べると分かります。この部分は作品を開いて確かめてください。案Eを作るときの参考になります。
画像の書き出しサイズや縦横比、トリミングのされ方は、投稿画面の現在の案内で確認します。カード枠で端が切れる場合に備え、重要な要素は中央に寄せておくと安全です。
周囲を用意する：比べる相手が結果を決める
目立つかどうかは、隣に何があるかで決まります。周囲が似た色ばかりなら、どの案でも目立ってしまいます。
周囲には、自分の作品が実際に並びそうなジャンルのカバーを7枚ほど使います。候補5枚と合わせて12枚です。入手のしかたは2通りあります。
- 自分で用意した画像（過去の作品、フリー素材、自作のダミー）を使う。
- アソバースの一覧画面を別ウィンドウで開き、その隣に自分の候補を並べて見る。
他人が作った画像を保存して使うときは、権利と利用条件に注意してください。個人の検証でも扱いに迷う場合は、サイトの利用案内で確認します。
表示サイズも先に揃えます。一覧を開き、スマートフォンとパソコンそれぞれで、カード画像が実際に何ピクセルの幅で表示されているかをブラウザの検証機能で確認します。確認した幅を、次の比較ツールの幅欄に入れます。大きな画面で原寸表示して選ぶと、実際の一覧と違う結果になります。
並べて選ぶ手順
次の単独で動くHTMLを保存し、ブラウザで開きます。「周囲用」に周囲の画像を、「候補用」に候補の画像を選ぶと、全部をランダムな位置に並べます。クリックした順に、候補か周囲かと経過秒数がログに出ます。
<!doctype html><meta charset="utf-8">
<title>カバー比較</title>
<p>周囲用: <input id="bg" type="file" accept="image/*" multiple>
候補用: <input id="cd" type="file" accept="image/*" multiple>
幅(px): <input id="w" type="number" value="240" min="80">
<button id="go">並べる</button></p>
<div id="grid" style="display:flex;flex-wrap:wrap;gap:12px"></div>
<ol id="log"></ol>
<script>
const $=id=>document.getElementById(id);
let t0=0;
const shuffle=a=>{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};
$("go").onclick=()=>{
const items=[...$("bg").files].map(f=>({f,c:false}))
.concat([...$("cd").files].map(f=>({f,c:true})));
$("grid").innerHTML=""; $("log").innerHTML="";
shuffle(items).forEach(it=>{
const img=new Image(); img.src=URL.createObjectURL(it.f);
img.style.width=$("w").value+"px";
img.onclick=()=>{
img.style.opacity=.5;
const li=document.createElement("li");
li.textContent=(it.c?"候補 ":"周囲 ")+it.f.name+" "
+((performance.now()-t0)/1000).toFixed(1)+"秒";
$("log").append(li);
};
$("grid").append(img);
});
t0=performance.now();
};
</script>使い方は2通りあります。
方式1：5案を同時に並べる。 候補用に5枚すべてを選びます。周囲7枚と合わせて12枚です。協力者に「一覧を見て、気になった順に3枚クリックしてください」と頼み、最初のクリックと3枚の内訳を記録します。案同士の相対的な強さが分かります。
方式2：1案ずつ並べる。 候補用に1枚だけ選び、周囲11枚と並べます。「最初に気になった1枚をクリックしてください」と頼みます。5案を5回の試行に分けます。単独の案が周囲に埋もれるかどうかが分かります。
どちらの方式でも、試行のたびに「並べる」を押して配置を作り直します。ログは試行後に見るか、協力者に見えない位置に置きます。ファイル名で候補が分かってしまうと、選び方が変わります。
協力者は、制作の事情を知らない人を3〜5人探します。先に候補を見せないでください。
記録の取り方と結果の読み方
記録は1クリックごとに1行です。次の項目を表計算ソフトに入れます。
- 試行番号と方式（1または2）
- 協力者（名前ではなく番号）
- 使った端末と画面の幅
- ライトかダークか
- クリックの順番、選んだ案（A〜Eまたは周囲）、経過秒数
- 選んだ理由の一言（その場で聞きます）
- 「どんなゲームだと思いますか」の答え
回数は、方式2なら協力者1人につき5案を1回ずつが最小です。方式1は、配置を変えて協力者1人あたり2回以上行います。
結果は次の基準で読みます。
- 偶然と比べる。 方式2は12枚中1枚が候補なので、偶然に選ばれる確率は12分の1です。ある案の選択数が「試行数÷12」の近くなら、その案は周囲に埋もれていると考えます。方式1では、最初のクリックが候補になる偶然確率は12分の5ですが、個別の案が選ばれる偶然は12分の1です。
- 少人数では断定しない。 数人の結果は偶然のぶれが大きく、結論ではなく絞り込みの材料です。選択が1〜2案に集中するか、全案が分散するかを見ます。
- 位置の偏りを見る。 毎回シャッフルしているので平均化されますが、左上や中央のカードが選ばれやすい傾向がないかも確認します。偏りが強ければ、案の強さと分けて考えます。
- 理由で型を分ける。 理由が「色」「文字」「形」のどれに集まるかを数えます。色の理由が多ければ案D、文字なら案Eが効いている可能性があります。
- 内容とのずれを見る。 目立った案でも、「どんなゲームか」の答えが作品と違うなら採用を見送ります。候補が複数残った場合は、内容が最も正しく伝わった案を選びます。
誤りやすい点
- 複数の要素を同時に変える。 理由が特定できなくなります。1案1要素を守ります。
- 周囲が偏っている。 周囲の色が揃いすぎると、どれでも目立ちます。実際の一覧に近い、ばらつきのある構成にします。
- 大きい画面だけで確かめる。 縮小したときに潰れる細部は、スマートフォン実機でしか分かりません。
- ライトとダークの片方だけで確かめる。 サイトにはライト／ダークの切り替えがあるので、両方で一覧を見ます。背景が変わると、同じカバーの浮き方も変わります。
- 同じ協力者に繰り返し見せる。 慣れて、探す視線になります。方式2は協力者ごとに案の順番を変えます。
- カバー内の文字に頼りすぎる。 カバー画像の文字は画像なので、サイトの日本語／英語の切り替えでは変わりません。作者が入力した作品名はカード上に別に表示されるため、画像内の文字と重複していないかは現在の一覧画面で確認します。
- 公開後の数字で効果を断定する。 プレイ回数は作品の起動の実測回数で、人数ではありません。同じ端末・作品の30分以内の再起動は重複が除かれます。カバー差し替えの前後でこの数字が変わっても、公開直後かどうかや掲載位置などの要因が混ざります。差し替えた日付は記録しますが、原因の判断は慎重にします。
次の行動
まず元になる1枚から、5案を1要素ずつ変えて書き出してください。次に、実際の一覧で測ったカード幅で方式2を試し、選ばれた案と理由を記録します。最後に、上位の案について「どんなゲームか」の答えを確認し、内容に合うものを採用します。カバーの登録方法や公開後の差し替えは、投稿画面の現在の案内で確認してください。
