カバーの色を一色決めてから絵を作る

問いを一つに絞る

検証する問いは、次の一文にします。

「主色を先に決めて作ったカバーは、紹介文の雰囲気と結びつけて選んでもらいやすいか」

「良い絵か」や「クリックされるか」を問うと、絵の上手さや好みが混ざって判断できなくなります。そこで、紹介文を読んだ人が複数のカバーから「この文章のゲームのカバーはどれか」を選ぶ形にします。主色の効果が絵の出来と切り離され、雰囲気が伝わったかどうかだけを見ることができます。

比較する案は2つです。

• A案（主色先行）：色を一色決めてから、その色を画面の大半に使って絵を作ります。
• B案（絵先行）：いつもの順番で、モチーフと構図から考えて絵を作ります。

主色の決め方：ゲームの動詞から選ぶ

A案で最も大事なのは、主色をどう決めるかです。好きな色や流行の色で選ぶと、ゲームとの結びつきが失われます。次の手順で、ゲームの側から決めます。

1. ゲームの中心になる動作を、動詞一つで書きます（置く、集める、覚える、狙う、育てる、など）。
2. その動作をしている最中、プレイヤーの視界で一番広い面積を占める色を思い出します。背景でも盤面でも構いません。
3. 思い出せなければ、プレイ画面を開いて確かめます。記憶で決めないことが重要です。
4. その色を16進コード（例：#2a6f97）で書き留め、以後は変えません。
5. 補助色を1〜2色、強調色を1色だけ決めます。

面積の配分には、主色を大半、補助色をその次、強調色をごく一部にするという配色の経験則がよく知られています。比率は目安にすぎず、厳密に守る必要はありません。守ってほしいのは強調色を一つに限ることです。強調色が複数あると、主色が「先に決めた一色」として働かなくなります。

準備するものと2案の作り方

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

• 題材にするゲーム1本（自作でも制作中でも構いません）
• そのゲームを50〜100字程度で紹介する文章
• 描画ツール（使い慣れたもので構いません）
• 同じ縦横比のキャンバス2枚
• 見てもらう人（3〜5人程度が目安で、多いほど傾向は読みやすくなります）

制作の際は、次の点をそろえます。

• 制作時間を同じにします（例：各案60分で打ち切る）。
• タイトルの文字組みは両案で完全に同じにします。公式作品でも作品ごとにタイトルの文字組みが異なるように、文字は印象を左右する変数です。実験では固定します。
• モチーフは同じにします（例：どちらも「小舟と灯り」）。変えてよいのは色の決め方の順番だけです。
• 制作の順番は、A案→B案の次にB案→A案を試すなど、可能なら入れ替えます。後に作る案は前の案から学んでしまうためです。

主色の見え方を小さくして確かめる

カバーは、作品の一覧などで小さく表示される場面があると考えられます。実際の表示サイズや切り抜きの仕様は、投稿画面の案内で確認してください。主色が小さくても残るかを確かめるため、次の最小のHTMLを使います。ファイルに保存してブラウザで開くだけで動き、外部の通信はありません。

<!doctype html>
<meta charset="utf-8">
<title>主色プレビュー</title>
<label>主色 <input id="main" type="color" value="#2a6f97"></label>
<label>強調色 <input id="accent" type="color" value="#f4a261"></label>
<div id="out" style="display:flex;gap:12px;align-items:flex-end;margin-top:12px"></div>
<script>
const sizes = [256, 128, 64];
const out = document.getElementById('out');
function draw() {
  out.innerHTML = '';
  const main = document.getElementById('main').value;
  const accent = document.getElementById('accent').value;
  sizes.forEach(s => {
    const c = document.createElement('canvas');
    c.width = c.height = s;
    const g = c.getContext('2d');
    g.fillStyle = main;
    g.fillRect(0, 0, s, s);
    g.fillStyle = accent;
    g.beginPath();
    g.arc(s * 0.65, s * 0.4, s * 0.12, 0, Math.PI * 2);
    g.fill();
    out.appendChild(c);
  });
}
document.getElementById('main').oninput = draw;
document.getElementById('accent').oninput = draw;
draw();
</script>

主色と強調色を選ぶと、256・128・64ピクセル角の3サイズで並びます。強調色が64ピクセルでも見つかるか、主色との明るさの差が足りて埋もれないかを、絵を描く前に確認できます。

記録の取り方

見てもらう手順は次のとおりです。

1. 見てもらう人に、先に紹介文だけを読んでもらいます。
2. A案とB案のカバーを並べ、「この紹介文のゲームのカバーはどちらか」を選んでもらいます。
3. 左右の配置は人ごとにランダムにします。常にA案を左に置くと、位置の癖が混ざります。
4. 同じ人に、大きいサイズと小さいサイズ（上のツールの64ピクセル程度）で1回ずつ、合計2回選んでもらいます。小さいサイズでは違う順番や左右で見せ、前の記憶に引きずられないようにします。
5. 選んだ直後に、理由を一言だけ書き留めます。理由を深掘りすると、後付けの説明が増えます。

記録は次のような表にまとめます。

• 1、サイズ：大、A案の位置：左、選んだ案：、理由（一言）：
• 1、サイズ：小、A案の位置：右、選んだ案：、理由（一言）：
• 2、サイズ：大、A案の位置：右、選んだ案：、理由（一言）：

評価者には、どちらが主色先行案かを伝えません。また、制作者本人が自分の2案を評価対象に含めないでください。選ぶ側がどちらを作ったか分からない状態を保つことが、この実験の前提です。

結果の読み方と起こりやすい誤り

集計は単純で構いません。大きいサイズと小さいサイズのそれぞれで、A案が選ばれた回数を数えます。判断の目安は次のとおりです。

• A案が多く、小さいサイズで差が広がる：主色が小さい表示でも雰囲気を運んでいる可能性があります。主色先行の手順を、次の作品でも試す価値があります。
• 大きいサイズでは差がなく、小さいサイズだけA案が多い：細部の絵では差が出ず、一覧のような小さい表示で色の効果が出る可能性があります。
• ほぼ同数：この題材では、順番による差が見えなかったと読みます。「効果がない」と断定するのではなく、題材や色の決め方を変えて再度試します。
• B案が多い：主色の選び方そのものを疑います。手順の2で、ゲームの動作中ではなくメニュー画面の色を選んでいなかったか、見直してください。

評価者が3〜5人ならば、結果は傾向であり、証明ではありません。理由欄に同じ言葉（暗い、明るい、静か、にぎやか、など）が繰り返し出るかを見ると、数字より多くのことが分かる場合があります。その言葉が紹介文の雰囲気と合っているかを確認してください。

起こりやすい誤りは次のとおりです。

• 絵の出来の差が混ざる：A案にだけ時間をかけると、色ではなく完成度の差を測ってしまいます。制作時間を揃えます。
• スクリーンショットとの混同：ゲーム画面そのものを使う場合と、描き下ろしの絵を使う場合では、読み取られる情報が違います。この実験では、どちらの案も同じ種類の素材にそろえます。アソバースの公式作品のカバーは生成アートワークですが、投稿作品のカバーとして何が使えるかは、投稿画面の案内で確認してください。
• 強調色が増える：途中で「ここにも赤を」と足していくと、主色先行の条件が崩れます。
• 紹介文を後から直す：結果を見てから紹介文を書き換えると、合うように見えてしまいます。実験の前に確定させます。
• プレイ回数で判断する：公開後のプレイ回数は作品起動の実測回数で、人数ではありません。カバー以外にも作品名や公開時期が影響するため、この実験の判定には向きません。

次の行動

自分のゲームのプレイ画面を開き、手順2〜4で主色を16進コードで書き留めてください。次に上のHTMLで、その色と強調色が64ピクセル角でも見分けられるかを確かめます。そこまでできたら、同じ制作時間でA案とB案を作り、紹介文だけを手がかりに選んでもらってください。