ピクセルとミリメートル：単位変換の完全ガイド

Screen Ruler TeamApril 28, 202619 min read

pixel converterpixels to mmpixels to inchesDPIPPI

すべての画面とすべての印刷物は、同じ断層線の上に立っている。ピクセルには固定された物理サイズが存在しないという断層だ。同じ100ピクセルの矩形が、一般的なブラウザでは26ミリメートル、雑誌のページでは8ミリメートル、ファインアートプリントではわずか4ミリメートルにも見える。デジタルのピクセルと現実世界の長さを橋渡しする数値がDPI（インチあたりドット数）であり、これを正しく扱えるかどうかが、快適にタップできるボタンと指が外してしまうボタン、シャープに印刷されたロゴとぼやけて出てきたロゴを分ける境界線になる。

このガイドでは、ピクセルとは実際に何なのか、なぜDPIが重要なのか、ピクセルとミリメートルを変換する計算式、現実で出会うDPI標準、そしてデザイナー、写真家、開発者が変換を行う実践的なワークフローを順を追って解説する。途中で、Screen Ruler Onlineの無料ピクセル変換ツールを紹介するので、別タブで開いて読みながら数値を確認してほしい。

ピクセルとは何か

ピクセル（「picture element」の略）はデジタル画像やディスプレイの最小離散単位だ。画面上では、通常は赤・緑・青の3つのサブピクセルから構成される、アドレス指定可能な単一のドットで、これらが組み合わさって一つの知覚色を生み出す。画像ファイルでは、色値のグリッド内の単一エントリだ。重要なのは、ピクセルは論理単位であって物理単位ではないということ。その現実世界でのサイズは、レンダリングするデバイスがどう校正されているかに完全に依存する。

1920×1080の画像を考えてみよう。ネイティブ解像度で動作する24インチモニターでは、各ピクセルは約0.265 mm幅になる。同じ画像を5.5インチのスマートフォンに収まるよう拡大縮小して表示すると、各ピクセルは約0.06 mmになる。300 DPIで印刷された雑誌では、各ピクセルは0.085 mmになる。画像は同じだが、ピクセルの物理サイズは出力媒体の関数として決まる。

これがピクセルだけの仕様が媒体をまたいだ瞬間に破綻する理由だ。「このボタンを44 px縦にする」というルールは、iPhoneでは快適なタップ対象になるが、4Kモニターでは細い帯になり、ビルボードでは巨大な形状になる。実際のサイズを語るには、DPIを語る必要がある。

DPI（とPPI）とは何か

DPIは「dots per inch」（インチあたりドット数）の略で、物理表面の1インチ直線上に詰め込まれるピクセル（または印刷の場合はドット）の数を指す。PPIは同じ概念を画面に特化して適用したもの（「pixels per inch」）だ。カジュアルな文章では2つの用語は互換的に使われる。本ガイドでは変換計算が依存するのはDPIなので、主にDPIと呼ぶ。

DPIは変換係数だ：

inches = pixels / DPI
millimeters = (pixels / DPI) × 25.4

定数25.4は固定で、国際的な定義により1インチはちょうど25.4ミリメートルになる。可変なのはDPIで、媒体によって変わるのはこちらだ：

文脈	標準DPI	意味
Web（CSSピクセル）	96 DPI	ブラウザとOSの基準解像度
旧Macタイポグラフィ	72 DPI	1ピクセル = 初期Appleソフトウェアでの1プリンターポイント
ドラフト／大判印刷	150 DPI	ポスター、バナー、プルーフ
高品質印刷	300 DPI	雑誌、書籍、パッケージ
写真／ファインアート	600 DPI	写真プリント、線画、拡大下のテキスト

これら5種のDPIで同じ100ピクセルがマッピングされる結果は次のとおり：

DPI	インチ	ミリメートル
72	1.389	35.28
96	1.042	26.46
150	0.667	16.93
300	0.333	8.47
600	0.167	4.23

DPIが上がるにつれて物理的な長さが劇的に縮むことに注目してほしい。ピクセル数は決して変わらず、変わるのは想定される密度だけだ。

計算式を順を追って

幅800ピクセルのバナーがあって、画面でどのくらいのサイズになるかを知りたいとしよう。式から始める：

inches = pixels / DPI = 800 / 96 ≈ 8.33 inches
millimeters = inches × 25.4 ≈ 211.67 mm
centimeters = inches × 2.54 ≈ 21.17 cm

つまり、Web標準の96 DPIでの800 pxは約21 cm幅になる。A4用紙のおよそ半分だ。

同じ800 pxアセットを300 DPI印刷に移してみよう：

inches = 800 / 300 ≈ 2.67 inches
millimeters ≈ 67.73 mm

同じピクセル数で、印刷サイズは劇的に小さくなる。印刷で同じ物理サイズを得るには、ピクセル数を3倍の約2400 pxにする必要がある。これが印刷デザイナーがWebアセットの「300 DPI版」を求める理由だ。同じ物理サイズでシャープに着地させるには、写真やロゴをより高いピクセル密度でリサンプリングまたは再書き出しする必要がある。

逆方向の変換も同じくらい一般的だ。プリンターから300 DPIで100 mm × 50 mmのロゴを求められたとする。必要なピクセル寸法は次のとおり：

pixels = (millimeters / 25.4) × DPI
       = (100 / 25.4) × 300 ≈ 1181 px wide
       = (50 / 25.4) × 300 ≈ 591 px tall

ピクセル変換ツールはこの往復をリアルタイムで行ってくれる。ミリメートルのフィールドに100を入力し、DPIを300に切り替えると、単位チップをクリックするだけで1181ピクセルと表示される。

Webの現実：96 DPIとCSSピクセル

現代のWebブラウザ、OS、そしてCSS仕様はすべてインチあたり96基準ピクセルで標準化されている。つまり96 pxの線は1インチ分の物理画面領域としてレンダリングされるべきとされている。実際にはいくつかの要因がそれを複雑にする：

ディスプレイスケーリング。 macOSとWindowsはUIを125%、150%、200%などにスケーリングできる。200%スケーリングの4Kディスプレイでの100 px線は、100%スケーリングの1080pディスプレイと同じ物理サイズで表示される。これは高DPIハードウェアでテキストが読めないほど縮小されないようにするシステムレベルの調整だ。
デバイスピクセル比（DPR）。 「Retina」またはHiDPIディスプレイは、各CSSピクセルに対して複数の物理ピクセルをレンダリングする。iPhone画面はDPR 3で動作することが多く、指定した各CSSピクセルに対してブラウザは実際に3ピクセルを描画している。これにより特別なことをしなくてもテキストが鮮明に保たれる。CSSはCSSピクセルで話し続け、GPUがアップサンプリングを処理する。
ブラウザズーム。 ユーザーが起動したズームは、物理ピクセルに対するCSSピクセルを倍増させる。150%ズームは100 px線をレイアウトエンジンにとっての150 CSSピクセルの作業に変える。

要点は、Webデザインには96 DPIを使うということ。CSSピクセルはすでに正しい言語を話している。正確なサイズで印刷する必要のある物理モックアップを作っているなら、変換ツールを300 DPIに切り替えて再計算する。

印刷の現実：300 DPIとリサンプリング

印刷では、ソースデータのすべてのピクセルがデバイスの解像度に物理的に詰め込まれていることが期待される。300 DPIで動作する雑誌は、印刷される1インチごとに約300ピクセル分の詳細を見たがる。それより少なく送信すると、印刷機は補間しなければならず、エッジが甘くなり、細線がギザギザになる。

デザイナーは2段階で変換する：

現実世界の単位でレイアウトする。 雑誌の見開きは「210 mm × 297 mm」（A4縦）であって「2480 × 3508ピクセル」ではない。InDesign、Affinity Publisher、Photoshopのプリントモードはすべてミリメートルやインチでキャンバスをセットアップできるようになっている。
ターゲットDPIで書き出す。 レイアウトを印刷用にPDFやTIFFに書き出すとき、ソフトウェアはラスター画像をターゲットDPIにリサンプリングする。300 DPIページに100%スケールで配置された写真は、ピクセル換算ですでに300 DPIになっているはずだ。ピクセル換算で150 DPIしかない場合、書き出し時に倍化されることになる。これがソフトさが入り込む瞬間だ。

ピクセル変換ツールはフェーズ1で最も役に立つ。何ピクセルを用意すべきかを判断する段階だ。300 DPIブロシュアにロゴを正確に50 mm幅で印刷する必要があるなら、591 pxのソース詳細が必要だ。300 pxで用意したら、印刷時にぼやけが見えるだろう。

写真：センサーから印刷まで

24メガピクセルのカメラは約6000 × 4000ピクセルの画像を生成する。写真家はピクセル → 物理印刷サイズへの変換を絶え間なく行う：

At 300 DPI: 6000 / 300 = 20 inches wide → 50.8 cm
At 240 DPI: 6000 / 240 = 25 inches wide → 63.5 cm
At 180 DPI: 6000 / 180 ≈ 33 inches wide → 84.7 cm

300 DPIは腕の長さで見るプリント（書籍、ギャラリープリント）のゴールドスタンダードだ。240 DPIは視聴距離が伸びるとき、つまり離れて見る大型ウォールアートで許容される。180 DPIはほとんどの人がソフトさを感じ始める下限だ。

ピクセル変換ツールの300および600 DPIプリセットは写真ワークフローをきれいにカバーする。センサーのピクセル数を入れて、印刷寸法をインチとセンチメートルで確認し、ネイティブ解像度で印刷するかアップスケールするかを決められる。

Retina、HiDPI、そしてデバイスピクセル比

iPhone 4は2010年に「Retina」ブランドを導入した。一般的な視聴距離で個々のピクセルが人間の視覚解像度を下回るほど密度の高いディスプレイだ。今日では、ほとんどのラップトップ、タブレット、スマートフォンの画面はHiDPIで、CSSピクセルあたり2〜3個の物理ピクセルがある。

変換ツールにとって、これは何も変えない。CSSピクセルはWeb慣習により依然として96 DPIだ。HiDPIの計算はブラウザが処理する。devicePixelRatioを特に対象としたアイコンデザインやアセット書き出しを行っている場合（たとえば同じアセットの@2xと@3xバージョンを書き出す）、その場合はソースのピクセル数を倍または3倍にすべきだが、物理ミリメートルへの変換は依然としてCSS基準で96 DPIを使う。

HiDPI画面で1:1物理サイズのビジュアルモックアップを作っているなら、次のいずれかを選べる：

96 DPIのCSSピクセルで作業を続ける（推奨。OSがスケーリングを処理する）
window.devicePixelRatioを掛けて実際の物理ピクセル数を求め、その後デバイスの真のPPI（ハードウェアによって異なる）で割って物理サイズを得る

変換ツールはよりシンプルなバージョンを行う。特定の画面で正確な物理サイズ測定を行うには、まずScreen Rulerツールでキャリブレーションする。

よくある落とし穴

72と96の混同。 IllustratorやPhotoshopから書き出された古いMacアセットには、72 DPIのメタデータタグが付いていることがある。それらを300 DPIの印刷レイアウトに読み込むと、ソフトウェアが予期せず拡大することがある。インポートされたファイルのDPIタグではなく、「実際の」ピクセル寸法を必ず確認すること。

Web書き出しの「DPI」。 Photoshopの「Web用に保存」はデフォルトでDPIを72に設定するが、それは問題にならない。ブラウザはタグを無視して96を仮定するからだ。気にする必要はない。Webではピクセル数が重要だ。

ネイティブ解像度を下回る印刷縮小。 読書距離で見る印刷物で200 DPI未満になると、ソフトさが目立ち始める。ピクセル変換ツールはあなたを止めないが、計算は真実を告げる。50 mm幅の600 pxアセットは305 DPIだが、同じアセットを100 mm幅にすると152 DPIにしかならない。

4KモニターでのCSSスケーリングを忘れる。 200%スケーリングの4Kモニターでテストされた1080pデザインは問題なく見える。スケーリングを100%に下げると、同じデザインが半分のサイズに見える。ネイティブ解像度ではなく、典型的なユーザースケーリングで必ずテストすること。

リサンプリング時のアスペクト比のずれ。 1920 × 1080の画像を1024 × 1024の正方形に収めるよう拡大縮小すると、トリミングするか歪ませるかになる。ピクセル数が変わるが、アスペクト比も重要だ。両方の要素が関係する場合は、ピクセル変換ツールとアスペクト比計算ツールを組み合わせて使う。

どのDPIをいつ使うか

選ぶDPIのクイックリファレンス：

Webデザイン、アプリUI、ブラウザ専用アセット：96 DPI。常に。
印刷に回る可能性のあるドキュメントテンプレート：レイアウトには96、ただし書き出し前に300 DPIでの印刷出力をモデル化する。
印刷プルーフ、大判バナー、離れた距離から見るポスター：150 DPIで十分。
雑誌、書籍、パッケージ、近距離で見るマーケティング資料：300 DPIが下限。
写真プリント、繊細な線画、拡大下のテキスト中心レイアウト：300〜600 DPI。
古いMacレガシーアセット：72 DPIは互換性のために存在する。新しい仕事には使わない。

迷ったら、画面には96、印刷には300をデフォルトにする。ピクセル変換ツールはどちらもワンクリックプリセットとして用意している。

まとめてみる

典型的なブランドデザイナーの一日はこんな感じかもしれない。プロダクトマネージャーから「イベントポスター用に300 DPIでシャープに印刷される、1920 × 720 pxのヒーローバナー」を依頼される。変換ツールを開き、ピクセルフィールドに1920を入力し、300 DPIに切り替える。これは162.56 mm幅だ。ポスター仕様は297 mm × 420 mm（A3）。162.56 mmではアセットは上半分しか埋められず、つまり300 DPIで297 mm全幅にするには3508 × 1316 pxのソースが必要になる。これでカメラマンに何を依頼すればよいかが分かる。

印刷モックアップを適応させるWeb開発者は逆方向に進む。モックアップは300 DPIで100 mm縦、つまりソースで1181 pxだが、Webサイトは画面で96 DPIで表示される。CSSで1181 px縦のままアセットを配置すると、画面で約308 mm縦になり、大きすぎる。378 px（= 100 mm × 96 / 25.4）にダウンサンプリングするか、CSS寸法を明示的にmm単位で設定する必要がある。

これらの変換は数回繰り返せば暗記できるくらいシンプルだ。しかしアセットを媒体間で素早く移動させるとき、計算を処理し、DPIプリセットを記憶し、結果をコピーできる専用ツールがあるかどうかが、スムーズなワークフローと絶え間ない算術の差になる。それがまさにピクセル変換ツールが存在する理由だ。