無料ピクセルルーラー
画面上のピクセル単位で距離を測定します。
使い方
- ルーラー上をクリック&ドラッグして距離を測定します。ルーラーはピクセル単位の増分を表示します。
- 開始点と終了点はドラッグ可能, つかんで測定を調整します。
- 垂直モードを有効にして、水平ではなく垂直の距離を測定します。
- ルーラーの下にピクセル数と推定物理サイズが表示されます。
よくある質問
物理サイズの計算はどれくらい正確ですか?
物理サイズはデバイスのピクセル比と96の想定DPIに基づいています。実際のモニターのDPIは異なるため、これは概算です。印刷物の正確な測定には、物理的な定規を使用してください。
垂直距離を測定できますか?
はい。垂直モードを有効にして、水平ではなく垂直のピクセル距離を測定します。
デバイスピクセル比とは?
高密度ディスプレイ(Retinaディスプレイなど)はピクセル比が1より大きく、つまり複数の物理ピクセルが1つのCSSピクセルを表します。このツールはCSSピクセル単位で測定します。
このルーラーが測れるもの（と測れないもの）
これはブラウザタブ内に存在するフリーフォームの定規だ。上のキャンバスをドラッグしてCSSピクセルの読み取り値を取得できる。ブラウザのビューポート内に描画されたもの（タブで開いたスクリーンショット、インラインで表示したFigmaエクスポート、別のタブのライブWebページ）に対して動作するが、デスクトップウィンドウ、ネイティブアプリUI、タスクバー、またはブラウザ外でOSレベルのコンポジターが描画するものは測れない。Chrome DevToolsやPage Ruler Reduxのように要素境界を自動検出することもできない。それは別の種類のツールだ。正直な位置づけが重要：このルーラーはブラウザ内でインストール不要の素早い測定を求めるときの正解だ。
CSSピクセルはハードウェアのドットではない
JavaScriptとCSSが使用するピクセルはW3Cが定義した参照ピクセルだ：「デバイスのピクセル密度が96 dpiで、読者から腕の長さの距離にあるデバイス上の1ピクセルの視角。」腕の長さを約28インチとすると、その視角はおよそ0.0213°、または画面表面で約0.26 mmになる。CSSピクセルは視角の単位であってハードウェアのドットではなく、意図的にデバイス非依存に設計されているため、16 pxのフォントはスマートフォン、ノートパソコン、テレビで大まかに同じ物理サイズに見える。
他のすべての絶対CSSの長さはこれを基準としている：1in = 2.54cm = 96px、1mm ≈ 3.78px、1pt ≈ 1.333px。この固定変換表が「96 DPI時のmm」の読み取り値を真の計測ではなく推定値にしている理由だ（後述）。
デザイナーが混同する3つのピクセル用語
| 用語 | 何をカウントするか | どこにあるか |
|---|---|---|
| CSSピクセル | W3C参照ピクセル。JSとCSSがレイアウトに使用する単位 | window.innerWidth、getBoundingClientRect()、すべてのCSSの長さ |
| デバイスピクセル | パネル上の実際のアドレス可能なドット | screen.width × devicePixelRatio、モニターのネイティブ解像度 |
| 画像ピクセル | ラスターファイルの固有解像度 | naturalWidth / naturalHeight（<img>の属性） |
1文で表すと：画面の物理解像度 ≈ CSSビューポートサイズ × デバイスピクセル比、そして鮮明な画像には固有の幅 ≥ レンダリングされたCSS幅 × DPRが必要。DPR 3のスマートフォンでCSSサイズ100 pxのロゴには、鮮明に見えるために少なくとも300ピクセル幅のソース画像が必要だ。
デバイスピクセル比
インフォパネルのDPR読み取り値はwindow.devicePixelRatioを報告する：「現在のディスプレイデバイスの物理ピクセルの解像度とCSSピクセルの解像度の比率。」よくある値：
- 1.0：クラシックな96 DPIディスプレイ（古いモニター、100%スケールのWindowsマシン）。
- 2.0：ほとんどのRetina MacBook、200%スケールの多くの4Kモニター。
- 2.5〜3.5：現代のスマートフォン。iPhone Proは3.0を報告し、AndroidフラッグシップはDPR 2.625 / 2.75 / 3.5であることが多い。
知っておくべき2つの動作：ページズーム（Ctrl/Cmd + および −）はDPRを変更するため、ズームすると読み取り値が変化する。ピンチズームはレンダリングされたビューポートを拡大するが、基礎となるCSSピクセルサイズは変更しないため変化しない。Appleは2010年にiPhone 4でRetinaディスプレイを導入した。デバイスピクセルが両次元で2倍になったとき既存のアプリとページが以前の4分の1のサイズに縮小しないよう、iOSは「ポイント」（CSSピクセルに相当する単位）を導入した。Webも同じモデルを継承した：2× CSSピクセルは4つのデバイスピクセルにマッピングされる。
タップターゲットサイズ標準
ピクセルルーラーの最も便利な使い方のひとつは、ボタン、リンク、アイコンがアクセシビリティのタップターゲット最小サイズを満たしているかを確認することだ。通常は次の3つの標準が一緒に挙げられる：
| 出典 | 最小サイズ | 単位 | ~実寸（96 DPI） |
|---|---|---|---|
| WCAG 2.2 SC 2.5.8 AA | 24 × 24 | CSS px | ~6.4 × 6.4 mm |
| WCAG 2.5.5 AAA | 44 × 44 | CSS px | ~11.6 × 11.6 mm |
| Apple HIG | 44 × 44 | pt | ~11.6 × 11.6 mm |
| Material Design / Android | 48 × 48 | dp | ~9 mm（160 dpi基準） |
WCAG 2.2は2023年10月にAA基準として24 × 24を追加した。W3Cの適合テストはこう表現している：「24 by 24 CSSピクセルの正方形を…ターゲット内に完全に描くことが概念的に可能でなければならない。」例外が5つある（間隔、同等、インライン、ユーザーエージェント制御、必須）が、一般的なボディUIはその基準を満たす必要がある。古いAAA基準（2.5.5）は44 × 44を要求し、AppleのHIGと一致し、Materialの48 dpとほぼ一致する。
8ピクセルデザイングリッド
現代のUIデザインのほとんどは8ピクセルの基本単位（プラットフォームによって「8ポイントグリッド」または「8 dpグリッド」）に基づいている。Material Design 2と3はどちらもこれを基盤としており、アイコンや密度の高いコンポーネントには4 dpの細かい調整を使用する。8を選ぶのは偶然ではない：一般的な画面幅（320、360、375、1280、1440）で割り切れ、整数比（8、16、24、32、40、48）でスケールし、16 pxのデフォルト本文テキストと自然に合う。4ピクセルのサブグリッドで細かな位置合わせを行う。
実践的な使い方：ギャップを14 pxまたは17 pxと測った場合、CSSの単位ミスを見つけた可能性が高い。本来の値はほぼ確実に16だ。ピクセルルーラーはグリッドから外れたスペーシングを見つける最速の方法だ。
ブラウザルーラーを使う場面
- 公開済みページのデザインQA。ライブの結果を仕様と比較する。2枚のカード間のギャップは16 pxか24 pxか？
- タップターゲットの確認。ルーラーをボタン上に置いて、AA基準の24 pxまたはAAA基準の44 pxを満たしているか確認する。
- 貼り付けたモックアップのスペーシング監査。Figmaエクスポートをタブで開き、ルーラーを当ててリズムを確認する。
- レスポンシブブレークポイントのサニティチェック。ビューポート幅の読み取り値はウィンドウサイズ変更中にライブのブレークポイントインジケーターとしても機能する。
- 教育目的。若い開発者に自分のマシンで
devicePixelRatioが何を報告するか、そしてCmd/Ctrl + を押してズームすると値がどう変わるかを示す。 - アクセシビリティ監査。アイコンボタンのヒット領域、CSSピクセル単位の行長、最小テキストサイズを確認する。
ブラウザDevToolsとその他のルーラー
すべての最新ブラウザには計測ツールが搭載されているが、開発者パネルの奥に隠れている。
- Chrome DevTools：コマンドメニュー（Cmd/Ctrl+Shift+P）を開き、「rulers」と入力してShow rulers on hoverを選択する。要素にホバーするとビューポートの上端と左端にルーラーが表示される。フリーフォームのドラッグではなく要素選択に連動する。
- Firefox DevTools：設定 → 利用可能なツールボックスボタン → Toggle rulers for the pageを有効にする。DevToolsツールバーにルーラートグルボタンが表示され、ルーラーが右上にビューポートの寸法とともにページの端にオーバーレイされる。
- Figma / Sketch / Adobe XD：すべてキャンバス内にルーラーオーバーレイを持つ。FigmaはShift+Rでトグルする。これらはファイルにバインドされており、デプロイされたウェブページではなく独自のドキュメントモデル内を計測する。
- ブラウザ拡張機能：Page Ruler Redux、MeasureIt、PixelZoomer、Dimensions。すべてインストールと権限が必要。すべてブラウザ内に限定されている。要素の自動検出が必要な場合に便利だ。
このようなブラウザタブのルーラーは、DevToolsパネルや拡張機能のインストールではなくシングルクリックを求めるデザイナー、QAレビュアー、コンテンツ担当者への回答だ。
その他の質問
ミリメートルの読み取り値はどのくらい正確か？
これは推定値だ。変換はW3Cが固定した「1 in = 96 CSS px」の関係を使用しており、モニターが実際に96 DPIで、ブラウザズームが100%、OSスケーリングが100%の場合にのみ正確だ。実際のモニターは大きく異なる：24インチの1080pパネルは約92 ppi、27インチの1440pは約109 ppi、27インチの4Kは約163 ppiだ。mm数値は大まかな推定値として扱い、印刷品質の計測には使わないこと。実際の物理サイズには画面に物理的な定規を当てること。
ズームするとデバイスピクセル比が変わるのはなぜか？
ページズーム（Cmd/Ctrl + または −）はCSSピクセルのデバイスピクセルに対するサイズを文字通り変更するため、それらの比率が変化する。タッチデバイスのピンチズームは異なる動作をする。レンダリングされたビューポートを拡大するが、基礎となるCSSピクセルサイズは変更しないため、DPRは動かない。
1366 × 768が正確に16:9でないのはなぜか？
正確には16:9ではないからだ。1366 ÷ 768 = 1.7786であり、真の16:9は1.7778だ。簡略比は実際には683:384だ。多くの安価なノートパソコンパネルはこの微妙に仕様外の解像度を使用しており、1080pビデオがこれらのパネルで不完全にダウンスケールされることがある理由のひとつだ。
ブラウザ外を測れるか？
いいえ。ウェブページは自身のブラウザタブ内でのみ表示・描画できる。デスクトップウィンドウ、ネイティブアプリUI、またはブラウザ外のものを測るには、OSレベルのユーティリティが必要だ：macOSプレビューの「Show Inspector」、ディメンションオーバーレイ付きのWindowsのスニッピングツール、またはサードパーティのスクリーンルーラー。
何かサーバーに送信されるか？
いいえ。ルーラーはHTML5 Canvas APIでレンダリングされ、ビューポートの寸法とDPRはローカルのJavaScriptから取得され、計測の読み取り値はブラウザ内で計算される。ページは読み込まれた後オフラインで動作する。