「カバー画像が粗く見えます」：縮小と再描画の仕組みを確かめる

Q1. 「粗く見える」には何種類の原因がありますか

見た目の症状は似ていても、原因は大きく三つに分かれます。

• 拡大によるぼやけ：元画像のピクセル数が、表示される大きさより少ない状態です。足りない分は補間（周りの色から推測して埋める処理）で作られるため、輪郭がにじみます。
• 縮小によるつぶれ：元画像が大きすぎて、細い線や小さな文字が縮小で消えかけている状態です。ギザギザやちらつきとして見えることもあります。
• 圧縮によるノイズ：保存時の圧縮が強く、輪郭の周りにもやもやした模様が出る状態です。JPEGのような非可逆圧縮（元に戻せない形で情報を捨てる方式）を繰り返すと目立ちます。

「粗い」と感じたときは、この三つのどれに近いかを見分けるのが第一歩です。輪郭全体がにじむなら拡大、細部がざらつくなら縮小、輪郭の周りに汚れのような模様が出るなら圧縮が疑われます。

Q2. 表示のとき、画像には何が起きていますか

画像を表示するとき、ブラウザは「画像のピクセル」と「画面のピクセル」を対応させる必要があります。ここで知っておきたい言葉が二つあります。

• CSSピクセル：ウェブページ上で「幅320」と書いたときの単位です。
• デバイスピクセル比：CSSピクセル1つに、画面の物理ピクセルが何個対応するかを表す値です。高精細な画面では2や3になることがあります。

たとえば、ページ上で幅320の枠に画像を表示し、デバイスピクセル比が2の画面だったとします。この場合、物理的には幅640ピクセル分の細かさがあります。元画像の幅が320ピクセルしかなければ、ブラウザは画像を引き伸ばして描くことになります。同じ画像でも、画面が違えば粗く見えたり見えなかったりします。

縮小のときも仕組みは同じです。元画像が表示枠よりずっと大きい場合、ブラウザは複数のピクセルを混ぜて1つの色にします。この混ぜ方は実装によって差があり、細い線は薄くなったり途切れたりしやすいです。カバーは一覧では小さく、詳細では大きく表示されることがよくあります。そのため、一つの画像が複数の大きさで描き直され、それぞれで見え方が変わります。

また、カバーは縦横比の違う枠に収まることがあります。枠に合わせて切り抜かれたり、余白が付いたりすると、見せたい部分が思ったより小さく表示されます。被写体が小さく表示されれば、細部がつぶれやすくなります。切り抜きの有無や方法は、現在の案内で確認する項目です。

Q3. きれいに見える元画像には、どんな条件がありますか

以下は画像表示一般の目安であり、アソバースの仕様ではありません。サイト固有の推奨サイズや形式は、現在の案内の記載を優先してください。

• 元画像の幅、きれいに見えやすい状態：表示される最大幅×デバイスピクセル比以上あります、粗く見えやすい状態：それより小さく、拡大されます
• 縦横比、きれいに見えやすい状態：表示枠の比率に近いです、粗く見えやすい状態：大きく違い、切り抜きや余白で被写体が小さくなります
• 被写体の大きさ、きれいに見えやすい状態：主役が画面の中で大きく置かれています、粗く見えやすい状態：主役が小さく、周囲に余白が多いです
• 細部、きれいに見えやすい状態：太い形と、はっきりした色の面で構成されています、粗く見えやすい状態：細い線や小さな文字が多いです
• 保存方法、きれいに見えやすい状態：圧縮を繰り返していません、粗く見えやすい状態：保存し直しを重ね、ノイズが乗っています
• 加工の順序、きれいに見えやすい状態：元の大きな画像から一度だけ書き出します、粗く見えやすい状態：縮小した画像をさらに拡大して使います

特に効くのは、一覧の小さな表示でも読める「大きな形」で構成することです。公式作品のカバー画像は、生成したアートワークで、ゲーム画面のスクリーンショットではありません。画面の細部をそのまま縮めるのではなく、小さくても主題が伝わる絵として作られた画像です。作品ごとにタイトルの文字組みを変えている点も、小さな表示で個性が伝わるようにするための工夫と読めます。これは公式作品の仕様から読み取れる範囲の話で、制作の意図までは断定できません。

自作のゲーム画面をカバーにする場合は、画面全体を縮めるより、見せたい場面を大きく切り出して使うほうが、小さな表示では読みやすくなります。ここでも判断基準は「一覧サイズでも何の絵か分かるか」です。

Q4. 手元の画像が足りているか、どう確かめますか

次の手順で、元画像の幅が足りているかを自分で確かめられます。

1. 見え方を確かめたい画像を用意します。
2. 下のコードを check.html として保存し、ブラウザで開きます。
3. 画像を選ぶと、元画像のピクセル数と、表示枠で必要なピクセル数が並んで出ます。
4. 画面を切り替えて、同じ画像を見比べます。たとえば、普通の画面と高精細な画面、ブラウザの拡大率100%と200%です。
5. 画像ごとに「足りている／足りていない」を記録します。記録は画像1枚につき、表示幅ごとに1行あれば十分です。

<!doctype html>
<meta charset="utf-8">
<input type="file" id="f" accept="image/*">
<label>表示幅(px)
  <input type="number" id="w" value="320" min="50">
</label>
<p id="out">画像を選んでください。</p>
<img id="v" alt="" style="height:auto">
<script>
const f = document.getElementById('f');
const w = document.getElementById('w');
const v = document.getElementById('v');
const out = document.getElementById('out');
let url = null;
function judge() {
  if (!v.naturalWidth) return;
  v.style.width = w.value + 'px';
  const need = Math.round(w.value * devicePixelRatio);
  const have = v.naturalWidth;
  const ratio = (have / need).toFixed(2);
  let msg = '元画像の幅 ' + have + 'px / この画面で必要な幅 ' + need + 'px（比率 ' + ratio + '）。';
  if (have < need) msg += '拡大されるため、ぼやけやすい状態です。';
  else if (have > need * 3) msg += '大きすぎます。縮小で細部がつぶれていないか見てください。';
  else msg += '幅は足りています。';
  out.textContent = msg;
}
f.addEventListener('change', () => {
  if (url) URL.revokeObjectURL(url);
  url = URL.createObjectURL(f.files[0]);
  v.onload = judge;
  v.src = url;
});
w.addEventListener('input', judge);
</script>

この判定の「3倍」は、あくまで目安として置いた閾値です。実際の見え方は、画像の中身で変わります。結果は次のように読んでください。

• 比率が1未満：拡大されています。元の大きな画像から書き出し直せるなら、そちらを使います。
• 比率が1以上でぼやける：幅は足りています。圧縮ノイズや、もともとの絵のピントを疑います。
• 比率が大きく、細部がちらつく：縮小でつぶれています。細い線を太くするか、主題を大きくすることを検討します。

起こりやすい誤りは二つあります。一つは、画像を一度小さく書き出してから、大きな枠に使い回すことです。縮小で失われた情報は元に戻りません。もう一つは、確認を自分の端末一台だけで済ませることです。デバイスピクセル比が違えば、同じ画像でも判定が変わります。

Q5. アソバース側の処理は、どこまで分かっていますか

確認済みの範囲で言えるのは次の点です。

• 公式作品13本のカバー画像は、生成したアートワークであり、ゲーム画面のスクリーンショットではありません。
• 投稿作品は、公開後に内容の更新、非公開化、削除ができます。下書き保存もできます。
• サイトにはライト／ダーク切り替えがあり、動きを抑える設定にも対応しています。

一方、次の点は確認済み事項に含まれていないため、ここでは断定しません。現在の案内で確認してください。

• カバー画像の推奨サイズ、縦横比、対応する画像形式、ファイルサイズの上限
• アップロード後に自動で縮小や切り抜きが行われるかどうか
• 一覧と詳細で表示サイズや切り抜き方が違うかどうか
• 公開後にカバーだけを差し替えられるかどうか

粗さがサイト側の変換によるのか、元画像の条件によるのかを切り分けるには、手順を一つずつ分けます。まず、元画像をそのままブラウザで開いて100%で見ます。次に、同じ画像を一覧と詳細の両方で見ます。元画像の時点で粗ければ、原因は元画像にあります。元画像は鮮明なのに表示で粗くなるなら、表示枠との大きさの関係を疑います。その場合は、気づいた点と使った画面の種類を添えて、案内の問い合わせ先に伝えるのが確実です。

次の行動

手元のカバー画像を診断ページに通して、一覧サイズと詳細サイズの2つの幅で、比率と見え方を記録してください。比率が足りているのに粗い場合は、画像の中身や圧縮を見直します。サイト側の仕様に関わる点は、現在の案内で確認してください。