スクリーンショットのアンチエイリアス対策：グリッドフィットと整数縮小の実務

1.5 グリッド合わせの具体策

• 境界ボックスの x/y/width/height を Math.round 相当で整数化
• レイアウト側は 4/8px グリッド設計で 1px 枠を守る
• SVG は整数座標と shape-rendering: crispEdges を検討

export const i = (n:number)=>Math.round(n);

TL;DR

• 表示/撮影は整数グリッド（1x/2x）。
• 縮小は整数比を優先。
• 形式はPNGパレット or WebP85%±5%で比較。

3.5 CLI ヘルパー（比較/最適化）

# 差分でAA崩れを可視化
magick compare -metric rmse A.png B.png diff.png || true
# PNG を16色パレットに（UI向け）
pngquant --force --quality=80-100 --speed 1 -o out.png in.png

1. 背景：なぜAAが崩れるのか

• 小数座標/小数幅 → 1px線が 0.5px×2 に分散され、AAが強制される。
• ブラウザのページズーム依存 → レンダリング後のスケール再サンプリングで文字がぼやける。
• 撮影後に非整数比で縮小 → 既存AAが再サンプルされ二重にぼやける。

6. QA：実機/ブラウザ差の最終確認

• Win ClearType / macOS CoreText で差が出ないか
• ライト/ダーク背景のコントラスト十分か
• 100%と150%で 1px 枠が破綻しないか

2. 撮影レシピ：DPRと整数スケール

1. UIの表示幅を実測し、1x/2x等の整数DPRで表示。
2. クリップ範囲は 整数px で切り出し（clip座標/幅高は四捨五入禁止）。
3. 出力はPNG（必要に応じてパレット減色）。

// クリップ矩形を整数に丸める
export function clampRect(r:{x:number;y:number;width:number;height:number}){
  return { x: Math.round(r.x), y: Math.round(r.y), width: Math.round(r.width), height: Math.round(r.height) };
}

3. 縮小レシピ：整数比優先

• 1/2 → Lanczos/二重三次でシャープに。リングが出たら Mitchell/NXへ。
• 2/3 → 先に 3/1 拡大→1/2 縮小 の2段で滑らかさを調整。
• 微細リングが出る時 → シャープ量を抑制、縮小比を見直す。

4. 形式選択：PNG/ロスレス/有損WebP

文字/罫線主体はPNGパレットやロスレスWebPが有利。写真混在はWebP有損85%±5%を起点に比較。

# 比較用にPNG(パレット16色)とWebP85を出力
pngquant --quality=80-100 --speed 1 --force --output out.png in.png
cwebp -q 85 in.png -o out.webp

4.5 実例：小アイコン/細字の最短手順

1. UIを1xまたは2xの整数DPRで表示（ズーム依存なし）。
2. クリップ座標/幅高を整数pxに丸めて撮影。
3. 最終サイズに整数比で縮小（1/2優先。次点で2/3）。
4. 形式は PNGパレット と WebP 85% を比較し、小さくて読める方を採用。

5. 実装と配信（LCP/CLS対策）

• width/height を必ず指定して CLS をゼロに。
• srcset/sizes で帯域最小化。
• キャッシュ更新はファイル名ハッシュで。

6. 公開前チェック

• 整数グリッドで撮影（ページズーム依存なし）
• clip座標/サイズが整数（0.5pxなし）
• 縮小は整数比優先でリングが出ていない
• 形式は用途に最適（PNGパレット/ロスレス/有損WebP）
• width/height/ srcset で配信最適化

実装・配信

• width/height 指定でCLSゼロ。
• srcset/sizes で帯域最小化。
• ファイル名ハッシュでキャッシュ更新。