ピクセル変換ツール

ピクセル変換ツールとは？

ピクセル変換ツールは、デジタルのピクセルと実世界の長さの単位（ミリメートル・センチメートル・インチ）を、任意の DPI で相互変換します。CSS ピクセルは既定で 96 DPI を仮定しますが、印刷は 300 DPI、写真印刷では 600 DPI に達することもあり、DPI が変われば同じピクセル数でも物理サイズはまったく異なります。4 つの単位のいずれかに値を入力し、用途に合った DPI プリセットを選ぶと、残りの 3 単位がリアルタイムで更新されます。すべての結果はワンクリックでクリップボードにコピーできます。

ピクセル変換ツールの使い方

1. 変換したい値を入力欄に入力します。例えば 100 などです。
2. 入力した値の単位を選びます。ピクセル、ミリメートル、センチメートル、インチのいずれかです。
3. DPI プリセットを選択します。Web 用なら 96 DPI、印刷用なら 300 DPI、独自の値を入力するなら「カスタム」を選びます。
4. 下の結果パネルで、残り 3 つの単位に変換された値を確認します。
5. 各結果の横にある「コピー」をクリックしてクリップボードに保存するか、URL を共有します。入力値はクエリパラメーターとして保持されます。

ピクセル変換ツールの利用シーン

• 学生： ピクセルとミリメートルの換算を含む数学・物理の課題や、コンピューターグラフィックス講義での画面解像度の演習に。
• Web／UI デザイナー： 物理モックアップ寸法（mm）から、適切な参照 DPI で CSS ピクセル単位のアイコン・余白・コンポーネントサイズを決めるときに。
• 印刷デザイナー： Photoshop や Figma から書き出したピクセル値を、印刷所に入稿する前に 300 DPI でミリメートルやインチに換算するときに。
• 写真家： カメラ出力から物理的な印刷寸法を計算します（例：4000 × 3000 px を 300 DPI で印刷すると 13.3 × 10 インチ）。
• 開発者： 製品仕様書やアクセシビリティ要件で指定された物理サイズと、CSS のピクセル値を突き合わせて検証するときに。

このツールの特長

• 4 つの単位（ピクセル・ミリメートル・センチメートル・インチ）が、入力に応じてリアルタイムで更新されます。
• 5 種類の DPI プリセットを内蔵。Web の 96 DPI、Mac レガシーの 72 DPI、印刷の 150／300／600 DPI をカバーします。
• Retina や高解像度モニター、特殊な印刷ワークフロー向けに、カスタム DPI も入力できます。
• URL 共有に対応。値・元の単位・DPI がクエリパラメーターとして保持されます。
• 100% ブラウザ完結。登録不要、結果パネルに広告なし、計算式はオープンソースです。

変換精度はどれくらい？

本ツールは標準的な「1 インチ ＝ 25.4 ミリメートル」の比率と、指定された DPI を用い、IEEE 754 倍精度浮動小数点で計算します。結果は浮動小数点の丸め誤差の範囲内で正確です（相対誤差 ≤ 1×10⁻⁶）。実世界の誤差の唯一の原因は DPI 値そのものです。お使いのディスプレイが想定どおりの DPI で動作していない場合は、まず Screen Ruler ツールでキャリブレーションを行ってください。

よくある質問

ピクセルとは何ですか？

ピクセルは、デジタルディスプレイや画像を構成する最小の離散単位です。物理的な大きさは固定ではなく、画面のピクセル密度（DPI）によって決まります。96 DPI の Web ディスプレイでは、1 ピクセルはちょうど 1/96 インチ（約 0.265 mm）です。300 DPI の印刷では、1 ピクセルは 1/300 インチ（約 0.085 mm）になります。

DPI とは何ですか？なぜ重要なのですか？

DPI（インチあたりドット数）は、ピクセルと物理的な長さを結び付ける換算係数です。同じ 100 px でも、96 DPI なら 26.46 mm、300 DPI ならわずか 8.47 mm にしかなりません。変換結果に物理的な意味を持たせるには、対象となる媒体（画面・印刷物・書き出しデータ）の DPI を必ず使う必要があります。

ピクセルをミリメートルに変換するには？

ピクセル数を DPI で割ってインチに変換し、25.4 を掛けてミリメートルにします。式：mm ＝（px ÷ DPI）× 25.4。例えば 96 DPI で 100 px の場合、100 ÷ 96 × 25.4 ≈ 26.46 mm です。本ツールはこの計算をリアルタイムで自動実行します。

Web では 72 DPI と 96 DPI のどちらを使うべきですか？

96 DPI を使ってください。CSS、ブラウザ、OS は 1990 年代から「1 インチあたり 96 リファレンスピクセル」を標準として採用しています。72 DPI は初期の Apple タイポグラフィ（1 ピクセル ＝ 1 ポイント）の名残で、現在は特定の Mac 時代のアセットでのみ意味を持ちます。最新の Web 制作では 96 DPI が前提です。

印刷では何 DPI を使うべきですか？

高品質な雑誌や書籍の印刷には 300 DPI、ドラフトの校正刷りや大判印刷には 150 DPI を使います。600 DPI が必要なのは、写真印刷、精密な線画、強拡大される文字に限られます。一般的な印刷で 300 DPI を超えても、多くの紙では目に見える品質向上はなく、ファイルサイズが増えるだけです。

Retina／高解像度ディスプレイは変換にどう影響しますか？

Retina をはじめとする HiDPI ディスプレイは、CSS ピクセル 1 つに対して物理ピクセル 2 〜 3 個を描画します。本ツールは既定で CSS ピクセル基準で動作するため、96 DPI で 100 CSS px はどの HiDPI 画面でも正しい結果になります。物理ピクセル数が必要な場合は、デバイスピクセル比を掛けてください（ブラウザでは window.devicePixelRatio）。

Web デザインが 4K モニターで小さく見えるのはなぜですか？

ほとんどの OS は 4K モニターを 150 〜 200% スケーリングで動作させており、CSS ピクセルが 1080p ディスプレイと視覚的にほぼ同じ大きさに保たれます。スケーリングが無効になっていると、同じピクセル数がより少ない実インチをカバーするため、デザインが物理的に小さく見えます。OS の DPI スケーリング設定を調整するか、固定 px の代わりに rem や % 単位を使ってください。

DPI 詳説 — 一度で正しい数字を選ぶ

ピクセルから長さへの換算はすべて 1 つの式に集約されます: 長さ = ピクセル ÷ DPI。難しいのは、出力先のメディアに合う DPI を選ぶことです。間違った DPI はエラーになりません — 数学的には正しく物理的には間違った数値を黙って出します。下のプリセットは実務の 95% をカバーします。

Web 制作 — 常に 96 DPI

1990 年代後半に CSS、ブラウザ、OS が 1 インチあたり 96 参照ピクセルに統一して以来、この数値は動いていません。すべての現代ブラウザは物理ディスプレイに関係なく 1 CSS ピクセルを 1/96 インチとして扱います。Retina や 4K モニタはより高い物理密度でレンダリングしますが、OS が CSS ピクセルを 96 DPI 参照にスケールバックするので、計算は有効なままです。72 DPI はレガシー扱い — OS X 以前の Mac からアセットを取り出す場合のみ意味があります。

印刷制作 — 150、300、または 600 DPI

大半の雑誌、書籍、コンシューマー写真プリントは 300 DPI を使用します。視聴距離で解像度低下が隠れる校正刷りや大判作業では 150 DPI に下げる — ファイルサイズが半分になり 1 メートル離れればまだ鮮明に見えます。600 DPI に上げるのは至近距離で検査される印刷の場合のみ — 精密な線画、技術図面、光沢紙の小さな文字など。600 DPI を超えてもほとんど可視品質は向上せず、ディスクを消費するだけです。

Retina と HiDPI — CSS ピクセルで作業する

Retina ディスプレイは CSS ピクセル 1 つにつき 2 または 3 個の物理ピクセルをレンダリングしますが、OS がこれをコードから隠蔽します。レイアウト計算は CSS ピクセル (96 DPI) を堅持してください。実際の物理ピクセル数が必要な場合 — 例えば各デバイスでくっきり見えるべきビットマップアセットを出荷するとき — 実行時に window.devicePixelRatio を掛け、@2x や @3x のバリアントを配信してください。ピクセルコンバーターは既定で入力を CSS ピクセルとして扱います; カスタム DPI は、既知のディスプレイの物理ピクセル密度を実測した場合にのみチェックしてください。

よくある換算パターン

一部のピクセル値はあまりに頻出するので覚えておく価値があります。下の表は 100 px、1000 px、および典型的なフル HD 幅 (1920 px) が、最もよく使われる 4 つの DPI 値でどう換算されるかを示します。

開発者向け実践 Tips

まず DevTools で確認

換算を信頼する前に、コンソールで window.matchMedia('(min-resolution: 96dpi)').matches を入力してブラウザが 96 参照 DPI を報告しているか確認してください。正しく設定されたシステムでは true が返ります。false が返るなら、OS のスケーリングやズームレベルが既定でなく、換算には調整が必要です。

常にターゲット DPI でエクスポート

Photoshop、Figma、大半のデザインツールは既定でキャンバス DPI でエクスポートします。エクスポート前にキャンバス DPI をターゲットメディアに合わせてください — 96 DPI のキャンバスを 300 DPI でエクスポートしても画像はアップサンプルされず、メタデータがラベル変更されるだけで、意図した物理サイズの 1/3 で印刷されます。

画面を校正して真値の基準を作る

物理精度が業務に必要なら — 手持ちの物体を画面に当てて測る、既知のクレジットカード幅にアイコンを合わせる — まず Screen Ruler ツールを開いて実物のクレジットカードで校正してください。画面の実 DPI が仕様シートと一致することは稀です。校正は換算を物理的現実に固定します。