gazou-compressor.jp

印刷入稿の解像度:px→mm換算・DPI・色の実務ガイド(Windows/Next.js)

Webで扱う画像をそのまま印刷に使うと、粗い/にじむ/色が違うという事故が起きます。 核心はpx→mm換算・DPI・色域の3点。この記事では、現場で迷わない具体的な数値に落として解説し、ImageMagickの実コマンドチェックリストも付けます。

先に結論(実務の目安)
  • 写真主体は300dpi、細線/小文字は350dpiを基準。
  • 必要px = mm ÷ 25.4 × DPI。余裕が欲しければ1.1〜1.25倍大きく作る。
  • 色域は基本sRGB。入稿がCMYK指定なら先方のガイドに厳密準拠
  • 書き出しは -units PixelsPerInch -density 300 を明示。最終は /compare /compressor で画質・容量を検証。

要点(TL;DR)

1. なぜDPIに“正解”があるのか

DPIは印刷の出力解像度。Webはpxが絶対でしたが、紙は距離と物理サイズが支配します。 写真のディテールや細い線、小さな文字は300〜350dpiを要求します。一方で遠目で見るポスターは150dpiでも成立します。 数値を決めてから、必要pxに換算しましょう。

2. 最短フロー(計算・書き出し)

  1. 仕上がりサイズをmmで確定(塗り足し/トンボを含むか確認。例:塗り足し3mmなら各辺+6mm)。
  2. 用途ごとにDPIを決定:写真300dpi / 細線・小文字350dpi / 遠目ポスター150〜200dpi。
  3. 必要pxを計算し、元画像を十分なpxで用意(足りない場合は画質劣化に注意)。
  4. -units PixelsPerInch -density XXX を付けて書き出し、ICC/色域に注意。

3. 実装レシピ(コピペOK)

3.1 PowerShell:mm→px

// PowerShell# PowerShell: mmとDPIから必要pxを求める(横×縦)
param([double]$mmW = 210, [double]$mmH = 297, [int]$dpi = 300)  # 既定: A4・300dpi
$pxW = [math]::Round($mmW / 25.4 * $dpi)
$pxH = [math]::Round($mmH / 25.4 * $dpi)
"Required: $pxW x $pxH px (@$dpi dpi for $mmW x $mmH mm)"

3.2 Nodeユーティリティ

// TypeScript / Node// Node: mm⇔px 換算ユーティリティ
export function pxFromMm(mm: number, dpi = 300) {
  return Math.round((mm / 25.4) * dpi);
}
export function mmFromPx(px: number, dpi = 300) {
  return Math.round((px / dpi) * 25.4 * 10) / 10; // 0.1mm単位
}
// A4の推奨px(300dpi)
console.log(pxFromMm(210), pxFromMm(297)); // => 2480 x 3508

3.3 ImageMagick:density/ICC/形式

// CMD / ImageMagick# ImageMagick: density/ICCを設定して書き出し
# 写真→印刷用JPEG(sRGB、300dpi)
magick input.jpg -colorspace sRGB -units PixelsPerInch -density 300 -quality 92 output-300dpi.jpg

# 図版→PNG(テキスト/線が多い)
magick input.png -colorspace sRGB -units PixelsPerInch -density 350 PNG24:output-350dpi.png

# PDF化(余白10mm付与・A4判)
magick input.jpg -bordercolor white -border 118x118 -page A4 -units PixelsPerInch -density 300 output-a4.pdf

3.4 CSS:塗り足しプレビュー

// CSS/* CSS: プレビュー用の「塗り足し」ガイド(画面確認用) */
.preview {
  width: 210mm;            /* 仕上がりサイズ(例: A4) */
  height: 297mm;
  position: relative;
  background: #fff;
  outline: 1px solid #e5e7eb; /* 仕上がり */
}
.preview::before {
  content: "";
  position: absolute;
  inset: -3mm;             /* 3mmの塗り足し */
  outline: 1px dashed #9ca3af; /* 断ち切りラインの目安 */
  pointer-events: none;
}

3.5 事前検証チェックリスト

// PowerShell# 印刷前チェック(CLIで箇条書き出力:.txtに保存)
$checks = @(
  "サイズ: 仕上がり mm と px 換算が一致しているか",
  "DPI: 画像は 300dpi(細線/小文字は 350)を満たしているか",
  "余白: トンボ/塗り足し(例: 3mm)を考慮した余白か",
  "色域: sRGB/CMYKの取り扱い(入稿仕様に合わせる)",
  "圧縮: JPEG品質/PNG圧縮が過剰でないか(/compareで劣化確認)",
  "文字: 最小サイズ可読(6〜8pt未満は要注意)",
  "線幅: 0.1mm未満のヘアラインに注意",
  "黒: 4色ベタでなくK100指定(入稿ガイドに従う)",
  "最終: PDF/Xなど入稿指定に合致"
)
$checks | Set-Content -Encoding UTF8 ".\preflight-checklist.txt"
Write-Host "preflight-checklist.txt を出力しました"

4. 応用と使いどころ

5. 公開前チェック

6. まとめ

迷ったら「サイズをmmで決める → DPIを選ぶ → pxに換算 → densityと色域を明示」の順に固めれば事故は減ります。 Web向け最適化(srcset/sizes CLSゼロ設計)と併せて、 使い回せるテンプレをチームに共有しましょう。

FAQ(よくある質問)

画像形式の基本方針は?(写真/スクショ/透過)
写真は AVIF / WebP(画質80–85%目安)、UIやスクショはPNG / WebP Lossless、単色ロゴはSVGが基本です。 実装の詳細は srcset/sizes設計ガイド スクショ最適化 を参照してください。
圧縮しても画質を落とさないコツは?
実表示幅に合わせたリサイズ → 過大ダウンロードを防ぎ、srcset/sizes を 実描画幅に一致させます。画質は写真で 80–85% を起点に、ノイズやエッジを目視確認。 仕上げは /compare で Before/After を見比べるのがおすすめです。
CLSを悪化させない画像の置き方は?
すべての画像に width/height(または親に aspect-ratio)を与え、広告・埋め込みは 予約サイズを先に確保します。詳しくは CLSゼロ設計ガイド を参照。

公開:2025-08-31

gazou-compressor.jp 編集部

画像圧縮・変換・背景除去などの実践テクニックと、Webで“速く・軽く・崩さない”ためのノウハウを発信しています。

関連記事