オンライン定規の精度 — なぜほとんどが不正確で、どう直すか

「オンライン定規」で検索して最初の結果を開き、クレジットカードを画面に当てたら、カードが20%小さい。または大きい。その定規は間違っています — そしてほとんどのオンライン定規がそうです。

これは謎ではありません。インターネット上のほぼすべてのオンライン定規に組み込まれた、一つの誤った仮定による予測可能な失敗です。

96 PPIの嘘

CSS仕様では1インチ = 96ピクセルと定めています。すべてのブラウザがこの慣例に従います。ウェブサイトが96ピクセルの線を引いて「1インチ」と呼んでも、ブラウザは文句を言いません。

問題は：96 PPIが現実と一致したのはCRTモニターの時代まで。 現代の画面は92 PPI（基本的な24インチモニター）から460 PPI以上（iPhone 15 Pro）まで幅があります。460 PPIの画面で96ピクセルを描くと、たった5mmほどの線になります — 1インチには程遠い。

ほとんどのオンライン定規がまさにこれをやっています。ピクセルを描いてセンチメートルやインチとラベルを付け、そのピクセルが特定の画面で実際の物理単位に対応するかチェックしていません。

6つの人気オンライン定規をテスト

問題の深刻さを確認するため、3つのデバイスで6つの広く使われているオンライン定規ツールをテストしました：24インチ1080pモニター（92 PPI）、13インチMacBook Air（227 PPI）、iPhone 15（460 PPI）。

標準的なクレジットカード（幅85.6mm、ISO 7810）を各ツールの画面上の定規に当てて測定しました。

ツール	24"モニター	MacBook Air 13"	iPhone 15
ツールA（校正なし）	-4%	+58%	+380%
ツールB（校正なし）	-3%	+61%	+372%
ツールC（手動DPI入力）	設定後OK	設定後OK	モバイル非対応
ツールD（固定96 PPI）	-4%	+58%	+380%
ツールE（自動検出を主張）	-8%	+42%	+210%
Screen Ruler Online（校正済み）	1%未満	1%未満	1%未満

パターンは明確です：校正を省略するツールは、たまたま96 PPIに近い1種類の画面でのみ偶然正確になります。ノートPCでは40〜60%、スマホでは200〜400%ずれます。

「自動検出」が通常失敗する理由

一部のツールはwindow.screen.width、devicePixelRatio、ユーザーエージェント文字列を使って画面サイズを自動検出すると主張します。有望に聞こえますが、いくつかの理由で失敗します：

ブラウザの報告が不正確。 screen.widthプロパティはCSSピクセルを返し、物理ピクセルではありません。

ディスプレイスケーリングが仮定を壊す。 Windowsユーザーは125%や150%スケーリングで使うことが多い。macOSも設定に応じて「実効解像度」を調整します。

ズームレベルが見えない。 ブラウザを110%にズームしていた場合（数ヶ月前に調整して忘れているかも）、すべてのピクセルベース計測が10%ずれます。

外部モニターが複雑にする。 ノートPCに外部ディスプレイを接続している場合、ブラウザが報告するのはどちらの画面の特性かが不確実です。

校正の仕組み

校正は、既知の寸法を持つ物体を画面に置き、画面上の画像が実物と一致するまで調整することで、これらの問題をすべて回避します。

Screen Ruler Onlineがサポートする校正用物体：

• クレジット/デビットカード（85.6 × 54.0mm）— ほぼ全員が持っている最も一般的な選択
• 米25セント（直径24.26mm）
• ユーロ1ユーロコイン（23.25mm）
• 英1ポンドコイン（23.43mm）
• 印5ルピーコイン（23.0mm）
• A4用紙（297 × 210mm）

クレジットカードが推奨される理由：

1. 寸法が世界中で規格化（ISO 7810）
2. 精密な位置合わせに十分な大きさ
3. 硬くて平ら — 曲がったり反ったりしない
4. ほぼ全員がすぐ手の届くところに持っている

校正後、設定はブラウザのローカルストレージに保存されます。デバイスの変更やディスプレイスケーリングの調整をしない限り、再校正は不要です。

実際に期待できる精度

適切な校正後に現実的に達成できる精度：

画面タイプ	期待精度	理由
スマホ（300+ PPI）	±0.3mm	高いピクセル密度 = 細かい分解能
タブレット（200-300 PPI）	±0.5mm	良好な密度、大きな校正面
ノートPC（150-250 PPI）	±0.5mm	モデルにより異なる
デスクトップモニター（90-160 PPI）	±1.0mm	低い密度、粗い刻み

最も正確に測るためのコツ

1. 100%ズームで校正する。 校正前にブラウザのズームを100%にリセット（Ctrl+0 / Cmd+0）。
2. コインよりクレジットカードを使う。 大きな参照物の方が位置合わせの精度が上がります。
3. 物体を平らに置く。 カードを画面にしっかり押し付ける。角度や隙間があると誤差が生じます。
4. 変更があったら再校正。 外部モニターに切り替えた？再校正。スケーリングを変えた？再校正。
5. 画面の中央で測る。 湾曲モニターは端で寸法がわずかに異なることがあります。

結論

オンライン定規は本質的に不正確なのではなく、間違った仮定に基づいているだけです。CSSの「インチ」は今日のほとんどの画面で物理的なインチとは無関係です。

校正に10秒かければ推測が不要になります。クレジットカードを画面に置き、スライダーを調整すれば、ほとんどのデバイスで0.5mm以内の精度の計測ツールになります。

試してみましょう — ダウンロード不要、アカウント不要、どのデバイスでも動作します。