ピクセルパーフェクトなスクショ：整数スケール/グリッドと圧縮の最短手順

要点（TL;DR）

• 非整数スケールはにじみの原因。100%/200%など整数に。
  理由: 1px線・文字エッジがサブピクセル補間され半端にブラーされる。
• アプリ側ズームも100%/200%等に。フォントのヒンティング差に注意。
  失敗時: OSとアプリで倍率がズレ、グリッドから外れてにじむ。
• PNG保存でエッジ劣化を回避。色空間はsRGB固定が安全。
  根拠: UIは高周波エッジが多く、JPEGは量子化ノイズが目立つ。

1. 背景：グリッド整合が画質を決める

スクリーンショットは、描画グリッドに対してキャプチャ範囲が半端だと即にじみます。OSとアプリの 倍率を整数に揃え、1pxラインを起点に矩形を切り出すことで、UIのシャープさを保持できます。

2. OSとアプリの設定

# Windows
設定 → システム → ディスプレイ → 拡大縮小とレイアウト → 100% / 200%

# macOS
システム設定 → ディスプレイ → 解像度 → デフォルト（Retinaの2.0x相当）

# ブラウザ
ズームを100%にし、デベロッパーツールのデバイスピクセル比に注意

# よく使う撮影手段
Windows: PrintScreen / Snipping Tool / PowerToys
macOS: Shift+Cmd+4（部分）/ Shift+Cmd+5（ウインドウ/録画）
共通: ブラウザ開発者ツールの要素スクショ（1px境界に注意）

2.5 アプリ別ズームの落とし穴

• デザインツール（Figma/Sketch）は1x/2x表示でも補間を挟む設定がある → ピクセルプレビューを有効化
• ブラウザDevToolsのデバイスピクセル比シミュレーションはUIをぼかす場合 → 実機 or OSスケール優先
• 映像系プレイヤーはアンチエイリアス強 → フレーム抽出時は等倍/最近傍補間を選択

3. キャプチャと保存

キャプチャ後に縮小/拡大を繰り返すとにじみます。必要なら整数倍率で処理し、 最終出力幅で一度だけリサイズします。

PNG最適化は /screenshot-png-optimize を参照。

3.5 コマンドライン自動化（任意）

CLIで整数拡大して余白を付ける例（ImageMagick）。

magick in.png -filter point -resize 200% -bordercolor white -border 20 out@2x.png

3.8 グリッド/アンチエイリアス診断

• 1px の縦横グリッドに要素が載っているか（境界サブピクセル回避）
• 小サイズの文字はヒンティング差に注意（フォント差で太さが変わる）
• 等倍での表示確認を優先し、拡大確認は最近傍補間に限定

4.5 QA プロトコル（5分）

1. OSスケールとアプリズームが整数で一致しているか
2. 1px 枠コンポーネントの辺が等倍で均一か
3. PNG保存後、再ロードしても差分が出ないか（無劣化）