手描きのカバーと生成したカバーは、小さく表示すると何が違って見えるか：同じ作品で比べる手順
遊びを見つける執筆にClaudeを使用しています。
作品一覧をスクロールしている場面を考えてみます。カバー画像は親指の爪ほどの大きさで、次々に流れていきます。拡大すれば美しい絵でも、この大きさでは「何の絵かわからない」「隣の作品と同じに見える」ことが起こり得ます。逆に、線が少し粗い手描きの絵が、小さくなっても主役がはっきり残る場合もあります。 この記事の問いは、同じ作品に手描きのカバーと生成したカバーの二枚を用意したとき、小さく表示すると何が変わって見えるか、です。どちらが優れているかを先に決める記事ではありません。同じ条件で並べ、同じ観点で見て、差の出どころを自分で特定するための設計書として書いています。結果は、手元で二枚を並べた人だけが出せます。 比べる対象は「手描き」と「生成」という作り方の違いですが、見えてくる差の多くは、作り方そのものよりも、輪郭・明暗・主役の数・文字といった画面の性質に由来します。そこで、作り方の議論は脇に置き、小さくしたときに残る情報を観察します。
準備：同じ作品の二枚を、条件をそろえて用意する
最初に、比べる作品を一つ決めます。自作のゲームでも、遊んで気に入った作品でも構いません。重要なのは、二枚が同じ作品を表していることです。
二枚の作り方は次のとおりです。
- 手描きの一枚：紙に描いてスキャンや撮影をしても、お絵かきアプリで描いても構いません。デジタルの手描きでも、自分の手で線と色を決めたものであれば扱いは同じです。
- 生成の一枚：画像生成ツールに、作品の内容を文章で伝えて作ります。生成は一回ごとに結果が変わるため、同じ指示で数枚作り、その中から「出来が中くらいのもの」と「最も気に入ったもの」を選んでおくと、偶然の影響を減らせます。
ここで二枚をそろえる条件を決めます。次の項目は、あらかじめ書き出しておきます。
- 縦横比（たとえば4:3に切り抜く）
- 画像内のタイトル文字を入れるか入れないか（両方に入れるか、両方なしにします）
- 元の画像の解像度（片方だけ極端に大きいと、縮小後の見え方に差が出ます）
- 作った順番（後に作った方は、先の反省が入って有利になりやすいため、順番も記録します）
生成ツールの利用条件や、生成画像の権利の扱いはサービスごとに異なります。公開する画像として使う予定がある場合は、使うツールの利用規約で確認してください。著作権などの法的な判断が必要な場合は、専門家や公式の案内に当たるのが確実です。
手順：四つの大きさで、カラーと白黒を並べる
次に、二枚を同じ画面に並べて縮小表示します。下のHTMLを compare.html として保存し、ブラウザで開くと、二枚を選ぶだけで48・96・160・320ピクセル幅に並びます。画像はブラウザの中だけで扱われ、外部には送信されません。表示は4:3の枠に切り抜く設定です。比べたい枠の比率が違う場合は、コードの 3/4 を変えてください。
<!doctype html>
<meta charset="utf-8">
<title>カバー比較</title>
<style>
body{font-family:sans-serif;margin:16px}
.row{display:flex;gap:24px;align-items:flex-end;margin:12px 0}
.row img{object-fit:cover;background:#ddd}
.gray img{filter:grayscale(1)}
</style>
<p>A：<input type="file" id="a" accept="image/*">
B：<input type="file" id="b" accept="image/*">
<label><input type="checkbox" id="g">白黒で見る</label></p>
<div id="out"></div>
<script>
const sizes=[48,96,160,320], urls={a:"",b:""};
function draw(){
const out=document.getElementById("out");
out.className=document.getElementById("g").checked?"gray":"";
out.innerHTML="";
for(const k of ["a","b"]){
if(!urls[k]) continue;
const row=document.createElement("div");
row.className="row";
for(const w of sizes){
const img=new Image();
img.src=urls[k]; img.width=w; img.height=Math.round(w*3/4);
row.append(img);
}
out.append(row);
}
}
for(const k of ["a","b"]){
document.getElementById(k).onchange=e=>{
const f=e.target.files[0];
if(f){urls[k]=URL.createObjectURL(f);draw();}
};
}
document.getElementById("g").onchange=draw;
</script>AとBがどちらの作り方かは、見る人に知らせない状態にしておくと、先入観が入りにくくなります。自分で見る場合も、ファイル選択の順番をランダムにして、どちらがAかを忘れてから見るのがおすすめです。
見る手順は次のとおりです。
- 320ピクセルで二枚を見て、「何が描いてあるか」を一言で書きます。
- 160、96、48と小さくしながら、同じ問いを繰り返します。一言の答えが変わった大きさを覚えておきます。
- 「白黒で見る」をオンにして、同じ4つの大きさで繰り返します。
- 画面から少し離れる、または目を細めて、48ピクセルの二枚を見ます。
白黒にする理由は、色が違っていても明暗の差が小さい絵は、小さくすると全体がのっぺりして見えるからです。色で区別しているつもりの部分が、実は明るさでは区別できていない、ということを確かめられます。
記録の取り方と、結果の読み方
記録は「何を・どの単位で・何回」を決めて、紙かメモアプリに残します。
- 主役の判別、記録する内容：一言で答えられなくなった最初の大きさ、単位：4段階のどれか
- 輪郭、記録する内容：主役の形が背景から分かれて見えるか、単位：○・△・×
- 明暗、記録する内容：白黒でも主役と背景が分かれるか、単位：○・△・×
- 情報量、記録する内容：小さくしたとき、細部がつぶれて汚れに見えるか、単位：○・△・×
- 文字、記録する内容：タイトルを入れた場合、読める最小の大きさ、単位：4段階のどれか
- 区別、記録する内容：並んだ他の作品のカバーと見分けがつくか、単位：○・△・×
回数は、二枚×カラー・白黒の2種類×4つの大きさで16回が1セットです。一人で見るだけでなく、家族や友人に見てもらう場合は、各サイズ2秒ほど見せて「何の絵に見えましたか」と聞き、答えをそのまま書き留めます。人数が少ないうちは割合を出さず、「この絵は、こう答えた人が多かった」という傾向までにとどめます。
結果は次のように読んでください。ここに書くのは読み方の基準で、結果の予想ではありません。
- 白黒で急に判別できなくなる側がある場合：色の違いに頼った絵です。主役と背景の明るさの差を作ると改善します。これは手描きにも生成にも起こります。
- 小さくなるほど判別できなくなる大きさが早い側がある場合：細部が多く、主役が一つに絞れていない絵です。描き込みを減らすか、主役を大きくすると変わります。
- 中くらいの出来の生成と、最も気に入った生成で結果が逆転する場合：差は作り方ではなく、個々の絵の構図にあります。「生成だから」という括りで判断せず、構図の性質を見てください。
- 手描きの方が、小さくしても形が残る場合：輪郭線が太く、色数が少ないことが理由かもしれません。生成側でも、色数を絞る、背景を単純にするなどの指示を足して、もう一度比べると確かめられます。
- 文字だけが読めなくなる場合：絵の差ではなく、文字の太さと大きさの問題です。画像に文字を入れずに、作品名を別に表示する方法も検討してください。
なお、アソバースでは公式作品のカバー画像が生成したアートワークで、ゲーム画面のスクリーンショットではありません。作品ごとにタイトルの文字組みも異なります。一覧画面で複数の作品を小さく見て、文字の入れ方や絵の密度の違いがどう見えるかを観察すると、自作を比べるときの参考になります。実際の表示サイズや切り抜き方は、一覧画面を開いて確かめてください。
起こりやすい誤り
比べる設計で、よく起こる失敗を挙げておきます。
- 切り抜きの違いを作り方の差と取り違える：一方だけ余白が多いと、主役が小さく見えます。比率と余白を先にそろえてください。
- 気に入った生成画像だけを選んで勝負する：生成は何枚か作って出来にばらつきがあります。手描きも同様に、描き直した回数を記録します。
- 自分の画面だけで判断する：高精細な画面では、小さな表示でも細部が残って見えます。可能なら、別の端末や、ブラウザの拡大率を変えた状態でも見てください。
- 作り方を知ったまま評価する：「手描きだから温かい」「生成だから整っている」といった印象が混ざります。AとBの対応を隠して見てください。
- 一回の結果で結論を出す：作品が変われば結果も変わります。可能なら別の作品でもう一組、同じ手順を繰り返してください。
次の行動
手元の作品を一つ選び、手描きと生成の二枚を同じ比率でそろえてください。上のHTMLで四つの大きさとカラー・白黒を並べ、判別できなくなる大きさを表に書き込んでみてください。差が見つかったら、その観点だけを直した三枚目を作り、もう一度同じ手順で比べると、直した効果を確かめられます。
