印刷入稿の解像度: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)
- A4(210×297mm)を300dpiで作るなら必要pxは2480×3508px(= mm ÷ 25.4 × 300)。
- 遠目のポスターや電飾等は150〜200dpiでも十分な場合あり(掲示距離に依存)。
- 図版や小さな文字はPNG、写真はJPEG/AVIFを基本に(入稿仕様に従う)。
- 色はまずsRGBで整える(関連: Webのカラーマネジメント)。CMYK要求は先方ICC/プリセットに合わせる。
1. なぜDPIに“正解”があるのか
DPIは印刷の出力解像度。Webはpxが絶対でしたが、紙は距離と物理サイズが支配します。 写真のディテールや細い線、小さな文字は300〜350dpiを要求します。一方で遠目で見るポスターは150dpiでも成立します。 数値を決めてから、必要pxに換算しましょう。
2. 最短フロー(計算・書き出し)
- 仕上がりサイズをmmで確定(塗り足し/トンボを含むか確認。例:塗り足し3mmなら各辺+6mm)。
- 用途ごとにDPIを決定:写真300dpi / 細線・小文字350dpi / 遠目ポスター150〜200dpi。
- 必要pxを計算し、元画像を十分なpxで用意(足りない場合は画質劣化に注意)。
-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. 応用と使いどころ
- Webと紙をまたぐデザインは、まずWeb版(sRGB)で統一 → 印刷版に派生させると管理が楽。
- 画像圧縮は /compressor で数値を比較し、見た目に影響ない範囲で軽量化。
- 画質差は /compare でBefore/Afterを確認。輪郭のにじみやディザに注意。
5. 公開前チェック
- 必要px =
mm ÷ 25.4 × DPI
を満たしている。 -units PixelsPerInch -density XXX
が正しく入っている(XXXは用途に応じて300/350/150など)。- 色域はsRGB(または入稿指定通り)。関連: sRGBとP3。
- 塗り足し(例:3mm)と最小文字サイズ/線幅の要件を満たす。
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 を見比べるのがおすすめです。