生成画像を256pxに縮めると、何が消えるか

この実験で確かめること

問いは一つです。「同じ生成画像を元の大きさと256pxで見比べたとき、どの要素が判別できなくなり、どの要素が残るか」。ここでの要素は、次の10項目に分けます。

1. シルエット（全体の輪郭とポーズ）
2. 主な色の配色
3. 顔（目や口の向き、表情）
4. 手と指
5. 持ち物などの小物
6. 画像内の文字（看板、ロゴ、名札など）
7. 細かい模様（衣装の柄、床のタイル）
8. 質感（金属、布、毛並みなど）
9. 背景の遠景にある物
10. 生成特有の崩れ（指の本数、線の溶け、左右で噛み合わない装飾）

実験を始める前に、各項目が256pxで「残る」か「消える」かを予想して紙に書いておきます。後で結果と見比べると、自分の思い込みがどこにあったかが分かります。

準備するもの

画像

同じ主題で、要素の入り方が違う画像を最低6枚用意します。たとえば、旅人の立ち絵を主題にします。

• 顔のアップが中心の絵
• 全身で手に持ち物がある絵
• 背景に建物や看板が入る絵
• 衣装に細かい柄がある絵

こうして10項目のそれぞれが、少なくとも2枚には強く出るようにします。使うのは、実際にゲームで使うつもりの生成ツールとプロンプトの系統です。画像は長辺1024px以上の大きなサイズで書き出し、保存形式は可逆圧縮のPNGにします。JPEGだと、圧縮のざらつきが縮小後の見え方に混ざります。

生成画像をゲームに使う場合の権利や条件は、使う生成ツールの利用規約と、必要なら専門家に確認してください。この実験は、画像の使用許諾とは別の話です。

道具

画像を複数のサイズで並べて見せる、小さなHTMLを使います。外部ライブラリは不要で、ブラウザで開くだけです。ほかに、記録用の表（後述）と、時間を測る手段が要ります。スマートフォンのストップウォッチで十分です。

見る環境

ゲームで実際に表示する端末と、ブラウザの拡大率100%を基本にします。可能なら、PCとスマートフォンの両方で見ます。表示環境が変わると「残る要素」も変わるからです。

手順

1. 縮小比較ページを作る

次のHTMLをcompare.htmlとして保存し、ブラウザで開きます。画像を選ぶと、長辺を512px、256px、128pxにした3枚が横に並びます。

<!doctype html>
<meta charset="utf-8">
<title>縮小比較</title>
<input type="file" id="f" accept="image/*">
<div id="out" style="display:flex;gap:16px;align-items:flex-start;margin-top:12px"></div>
<script>
const SIZES = [512, 256, 128];
document.getElementById("f").onchange = (e) => {
  const file = e.target.files[0];
  if (!file) return;
  const img = new Image();
  img.onload = () => {
    const out = document.getElementById("out");
    out.innerHTML = "";
    for (const s of SIZES) {
      const k = s / Math.max(img.width, img.height);
      const c = document.createElement("canvas");
      c.width = Math.round(img.width * k);
      c.height = Math.round(img.height * k);
      const g = c.getContext("2d");
      g.imageSmoothingQuality = "high";
      g.drawImage(img, 0, 0, c.width, c.height);
      out.append(c);
    }
    URL.revokeObjectURL(img.src);
  };
  img.src = URL.createObjectURL(file);
};
</script>

これは縮小の見え方を確かめるための最小構成です。ゲームに組み込む画像の書き出し方法は、使っている制作環境の手順に従ってください。

2. 縮小版だけを先に見る（ブラインド手順）

ここがこの実験の肝です。元の大きな画像を先に見てしまうと、脳が記憶で細部を補い、256pxでも「見えた気がする」状態になります。そこで、次の順序を守ります。

1. 画像を1枚選び、256px版だけを画面に出します（他のサイズは隠すか、別ウィンドウにします）。
2. 決めた時間（たとえば5秒）だけ見ます。時間は全画像で揃えます。
3. 目を離して、見えたものを10項目に沿って紙に書きます。「右手に何か持っている」「背景に建物らしいもの」といった書き方で構いません。
4. そのあとで元の画像と128px版を見て、答え合わせをします。

画像の順番はランダムにします。同じ主題が続くと、前の画像の記憶で補完されるからです。

3. 他の人にも見てもらう（任意）

自分だけだと、描いた内容を知っているぶん判定が甘くなります。可能なら、画像の内容を知らない人にも256px版だけを見せ、「何が描かれていますか」と尋ねます。ここで守る条件は二つです。

• 同じ人に、同じ画像の別サイズを続けて見せない
• 質問は「何が描かれていますか」の一種類に固定し、「文字がありますか」のような誘導をしない

人数は何人でも構いませんが、「何人に聞いてこうだった」と一般化せず、自分の画像の記録として扱ってください。

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

記録表

画像ごと、サイズごと、項目ごとに、次の3段階で判定します。

• ○：何がどうなっているか説明できる
• △：何かあるのは分かるが、何か言えない
• ×：気づかない、または見分けられない

判定の単位は「1画像×1サイズ×1項目」です。6枚×3サイズ×10項目で、最大180マスになります。該当する要素がその画像にないマスは「なし」と書き、空欄にはしません。表の例は次のとおりです。

• A、項目：手と指、元の大きさ：○、256px：△、128px：×、メモ：指の本数は256pxで数えられない
• A、項目：画像内の文字、元の大きさ：○、256px：×、128px：×、メモ：看板の文字が読めない

この例の判定は書き方の見本であり、実際の結果ではありません。

記録は、一度に全部やらず、日を分けて同じ画像でもう一度行うと精度が上がります。同じ画像で判定が揺れる項目は、境界線上の要素です。

読み方の分岐

表が埋まったら、項目ごとに次のように読みます。

• 元でも256pxでも○：縮小に強い要素です。ここは小さく出しても伝わるので、配色やシルエットの作り込みを活かしてください。
• 元は○、256pxで×または△：縮小で失われる情報です。ゲーム内の表示サイズが256px以下なら、この要素に描き込みの時間を使っても伝わりません。重要な情報（キャラの識別、アイテムの種類）がここに載っているなら、大きく描き直すか、別の手がかり（色、形）に置き換えます。
• 256pxでも○で、しかも崩れている：最優先の修正対象です。縮小しても目に入る破綻なので、手描きで直す効果が最も大きくなります。
• 元は○だが崩れていて、256pxでは△または×：縮小で隠れる破綻です。表示サイズが256px以下で固定なら後回しにできます。ただし、拡大表示や宣伝画像にも使うなら直す必要があります。
• 元でも△または×：縮小以前の問題です。生成の段階で形が曖昧だった可能性があります。プロンプトか描き直しを検討します。

128px版は、アイコンや仲間リストなど、さらに小さく出す場面の目安です。256pxで○、128pxで×の要素は、「大きな場面では使えるが、小さな場面では頼れない」要素だと読みます。

起こりやすい誤り

• 縮小の仕組みを揃えない：縮小の方式やブラウザによって、ざらつきや甘さの出方が変わる場合があります。比較は常に同じツール、同じ設定で行います。
• 元の画像を先に見てしまう：記憶で補完されるため、256pxで見えたつもりになります。ブラインド手順を省かないでください。
• 画像1枚で結論を出す：その1枚が特殊なだけかもしれません。最低6枚で、同じ傾向が複数枚に出るかを見ます。
• 表示環境が実際と違う：高解像度の画面や拡大表示では、256pxの見え方が変わります。ゲームで実際に出す端末で確認します。
• 「消えた」と「最初から無かった」を混同する：元の画像で△や×の項目を、縮小のせいにしないでください。元の判定を必ず並べて記録します。
• 正方形以外の画像を同じ基準で扱う：上のコードは長辺を基準に縮めます。縦長と横長で短辺の大きさが違うため、比較するときは画像の形を揃えるか、メモに書き添えます。

次の行動

まず手元の生成画像を3〜6枚選び、縮小比較ページで256px版だけを先に見て、見えたものを書き出してみてください。表が埋まったら、「256pxでも見える崩れ」から順に手描きで直していくと、限られた時間を無駄にせずに済みます。