ピクセル変換ツールの使い方（ステップ・バイ・ステップ解説）

Screen Ruler TeamApril 28, 202616 min read

how to use pixel converterpixels to mmpixels to inchesDPI conversion

ピクセルを物理単位に変換するために、換算表も電卓も「96 px は何 mm か」の検索も必要ありません。Screen Ruler Online の無料ピクセル変換ツールが計算を瞬時に処理してくれます。ただし、どの DPI を選ぶかを知っている場合に限ります。本ガイドではワークフロー全体を解説します。値を貼り付け、用途に応じた DPI を選び、もう一方の単位を読み取るまで。読み終わるころには、3 つの異なる場面（Web デザイン、印刷準備、写真プリント）で 3 通りの変換を経験していることになります。

30 秒バージョン

急いでいる方のために、手順は次のとおりです。

screenruler.online/pixel-converter を開く。
入力欄に値を入力または貼り付ける。
値に合った単位チップ（px / mm / cm / inch）をクリックする。
DPI プリセットを選ぶ。Web なら 96、印刷なら 300、写真なら 600。
結果パネルで変換後の値を読む。任意の単位の隣にある Copy をクリックすると、クリップボードにコピーできる。

これで全部です。本ガイドの残りの部分は、なぜ 300 ではなく 96 を選ぶのかを知りたいとき、結果がデザインツールの表示と一致しないとき、変換を逆方向に行いたいときに役立ちます。

ステップ 1：変換ツールを開く

https://screenruler.online/pixel-converter にアクセスします。ページは瞬時に読み込まれ、アカウント作成もサインアップも不要です。変換ツールはサーバー側でレンダリングされるので、回線が遅くても計算は機能します。ブックマークしておきましょう。何度も戻ってくることになります。

ページは 3 つの領域で構成されています。左上に値の入力欄、右上に DPI セレクタ、下に 4 つの単位（ピクセル、ミリメートル、センチメートル、インチ）すべてを同時に表示する結果パネルです。ページ読み込み直後のデフォルト状態は 96 DPI で 100 px で、すでに約 26.46 mm / 約 2.65 cm / 約 1.04 インチが表示されています。だから、何かを入力する前にページが正しく動いていることを確認できます。

ステップ 2：値を入力する

「Value to convert」とラベル付けされた入力欄をクリックして、数値を入力または貼り付けます。変換ツールが受け付けるのは次のとおりです。

整数：100
小数：42.5、0.75
桁区切りつきの数値：1,920 は 1920 として解釈されます
前後の空白： 100 も動作します
ゼロ：有効な入力で、すべての単位で 0 を返します

負の数（長さは負になり得ない）や数値以外の文字列は受け付けません。入力が無効な場合、結果パネルには古い数値の代わりに「Enter a non-negative number to see the conversions.」と表示されます。だから、誤解を招く値を誤ってコピーすることはありません。

ステップ 3：元の単位を選ぶ

入力欄の下には 4 つの単位チップがあります。Pixels / Millimeters / Centimeters / Inches。入力した数値に合うものをクリックします。変換ツールはアクティブなチップを青色でハイライトし、入力をその単位として扱います。結果パネルの残り 3 行が変換結果になります。

よくあるパターン。

デザインツールから（Figma、Photoshop、Sketch、Adobe XD）：ほぼ常にピクセルなので、Pixels を選択したままにします。
プリンタの仕様書や PDF から：通常はミリメートルかインチ。一致するチップを選びます。
CSS ルールから（width: 1024px）：ピクセル。
印刷モックアップから（「100 mm × 50 mm のロゴ」）：1 つの寸法ずつ Millimeters を選びます。

ステップ 4：適切な DPI を選ぶ

これがつまずきやすいステップです。変換ツールはデフォルトで 96 DPI を使います。これは、ブラウザと OS が標準化した CSS 基準解像度です。Web 作業には正解ですが、印刷や写真には不適切です。DPI ドロップダウンには 5 つのプリセットがあります。

プリセット	DPI	使用場面
Web standard	96	CSS、ブラウザ、OS 基準
Mac legacy	72	初期 Apple タイポグラフィ（今日ではほぼ不要）
Print draft	150	ポスター、バナー、大判校正
Print high quality	300	雑誌、書籍、パッケージ — 最も一般的な印刷 DPI
Photo print	600	美術印刷、線画、拡大鏡で見るテキスト

任意の DPI を入力できる Custom オプションもあります。非標準ハードウェア（220 PPI の iPad、300 DPI の校正機、1200 DPI の産業用プリントヘッドなど）に便利です。

簡単な目安は次のとおりです。画面に表示されるなら 96、印刷されるなら 300、近くで見る写真プリントなら 600。

ステップ 5：結果を読む

下の結果パネルには 4 つの単位がすべて同時に表示されます。入力として選んだ単位はハイライト表示されます（自分で入力した数値を変換結果と勘違いして読み取らないように）。各行は適切な精度でフォーマットされた値を表示します。

Pixels：整数（ブラウザのピクセルは離散値）
Millimeters：小数 2 桁（26.46）
Centimeters：小数 3 桁（2.646）
Inches：小数 4 桁（1.0417 — タイポグラフィでは 1/1000 インチを使う）

任意の単位の隣にある Copy をクリックすると、<value> <unit> がクリップボードに入ります。ボタンには一瞬「Copied!」と表示されるので、コピーが成功したことがわかります。

ステップ 6：共有またはブックマーク

変換ツールは現在の状態を URL のクエリパラメータに反映します。?value=100&from=px&dpi=96。つまり、次のことができます。

URL を共有 チームメイトと同じ変換結果を見られます。
特定の構成をブックマーク たとえば、繰り返す印刷仕様チェック用に「300 DPI で 300 mm」を保存します。
再読み込み しても数値が失われません。

URL は入力に応じて更新されるので、保存ボタンを覚えておく必要はありません。

作例 1：Web バナーのサイズ設定

「1920 × 720 px」のヒーロー画像をデザインするよう指示されました。マーケティングチームは、それが一般的なデスクトップモニタでどれくらいの大きさになるかを知りたがっています。

入力欄に 1920 と入力する。
Pixels チップはすでに選択済み（デフォルト）。
DPI もすでに 96（Web）。
ミリメートルの行を読む。508.00 mm — 約 50 cm 幅。
入力を 720 にリセットして高さを得る。190.50 mm — 約 19 cm の高さ。

つまり、バナーは標準的な 1080p モニタ上で物理的に約 50 × 19 cm を占めます。200% スケーリングの 4K ディスプレイでは、同じ CSS 寸法が同じ物理面積をカバーします。100% スケーリングの 4K ディスプレイでは半分のサイズになります。だからこそ、CSS は物理ピクセル密度に関係なく 96 基準ピクセルを使うのです。

作例 2：正確なサイズの印刷ロゴ

プリンタから「300 DPI のパンフレット上でちょうど 50 mm 幅で印刷されるロゴ」を提供するよう求められました。提供すべきソースのピクセル数を知る必要があります。

入力欄に 50 と入力する。
Millimeters チップをクリックする。
DPI を Print high quality (300) に切り替える。
ピクセルの行を読む。591 ピクセル。

つまり、ソースアートワークは少なくとも 591 ピクセル幅でなければなりません。600 px でエクスポートすると、トリミング用に 1.5% の余裕があり、305 DPI で鮮明に印刷されます。400 px でエクスポートすると、プリンタは 200 DPI で 591 有効ピクセルにアップスケールし、グロッシー紙では明らかにソフトに見えます。

変換ツールは双方向で動作します。希望のピクセル数から始めて、媒体に合わせて DPI を切り替え、対応する物理サイズを読み取ることもできます。

作例 3：カメラからの写真プリント

24 メガピクセルのカメラで 6000 × 4000 ピクセルの写真を撮りました。グロッシー写真用紙に 300 DPI で印刷したいです。プリントはどれくらい大きくできるでしょうか？

入力欄に 6000 と入力する。
Pixels チップを選択する。
DPI = 300。
インチを読む。20.0000 inches — そしてセンチメートル：50.800 cm。

つまり、最長辺はネイティブ解像度でちょうど 50.8 cm で印刷されます。それ以上大きくするにはアップサンプリングが必要です。300 DPI で 70 cm にするには 8268 ピクセルが必要ですが、6000 しかありません。ソフトな印刷（実効約 215 DPI）を受け入れるか、プリントを約 63 cm まで下げてネイティブのままにするかのどちらかです。

逆方向：寸法からピクセルへ

ほとんどの場合、ピクセルから始めて物理単位に変換します。しかし、逆も同様にうまく機能します。

印刷仕様：「300 DPI で 100 × 100 mm のアイコンが必要」→ 300 DPI で 100 mm を入力 → 各辺 1181 ピクセル。
バナー広告：「A4 PDF リーダー用に 96 DPI で 210 mm 幅」→ 794 ピクセル。
ディスプレイパネル：「11.6 インチのディスプレイで 1080p — DPI は？」→ DPI を解く：1920 px / 11.6 inch ≈ 165 DPI。Custom DPI = 165 に切り替える。

3 番目のケースでは、変換ツールに「DPI を計算する」モードはありませんが、候補の DPI で 11.6 inch を入力してピクセルが一致するかを確認することで検証できます。

よくある間違い

印刷時に DPI を切り替え忘れる。 「300 DPI で 100 mm のロゴ」は 1181 ピクセルになります。忘れてデフォルトの 96 DPI を使うと、変換ツールは 378 ピクセルと言い、プリンタはファイルが小さすぎると教えてくれます。印刷の数値を読む前に、必ず DPI ドロップダウンを確認してください。

ファイルに保存された DPI タグを信用する。 Photoshop の「Web 用に保存」はファイルメタデータを 72 DPI に設定します。ブラウザはそれを無視します。印刷機はレイアウトツールが伝えるものを使い、ファイルタグは使いません。変換ツールも無視します。毎回どの DPI を使うかを尋ねます。

Retina で CSS ピクセルとデバイスピクセルを混同する。 物理的な定規で Retina 画面を測定し、DPI を逆算しようとすると、iPhone では約 163 PPI が出ます。CSS は依然として 96 を使います。両方とも正しく、異なるものを記述しているのです。変換ツールは CSS ピクセルを話します。特定の画面の物理ピクセル測定には、Screen Ruler ツールでキャリブレーションしてください。

入力行のハイライトを無視する。 Pixels 行がハイライトされているとき、その行の値はあなたの入力であり、変換結果ではありません。残りの 3 行を読みましょう。（これに引っかかるデザイナーは、思っているより多いです。）

次のステップ

変換ツールがワークフローの一部になったら、関連する 2 つのツールがよく登場します。

アスペクト比計算ツールは直交する問題を扱います。「1920 × 1080 は 3840 × 2160 と同じ形か？」異なる媒体向けにアセットを再構築していて、寸法と形の両方が重要なときに、ピクセル変換ツールと一緒に使ってください。
Screen Ruler は実世界のキャリブレーションを扱います。画面に 1:1 の定規を表示するので、CSS の測定値を物理的な物体（クレジットカード、印刷物、硬貨）と比較できます。特定のディスプレイで DPI の不一致を疑ったときに、それを確認するためのツールです。

3 つすべてをブックマークすれば、ピクセルから物理単位までのワークフロー全体がタブ 1 つ分の距離になります。

ピクセル vs ミリメートル：完全な単位変換ガイド — 計算の背後にあるより深い「なぜ」
アスペクト比計算ツール — サイズではなく形のために
Screen Ruler — 物理的な 1:1 測定のために