画面に定規・分度器を表示して、ドラッグ操作だけで長さと角度を測定できます。 cm・mm・inch・pxの単位切り替えや、カードを使った実寸校正にも対応。
定規の長さプリセット
定規の長さ
8.0 cm
測定角度
非表示
ADVICE
現在は96DPI換算の初期値です。実寸に近い値が必要な場合は「実寸に校正」からお手持ちのカードで調整してください。
画面上の定規・分度器とは？ブラウザだけで長さと角度を測る方法
画面上の定規・分度器は、実物の定規やアプリのインストールなしに、ブラウザ上で長さと角度を測定できる無料ツールです。定規はドラッグで自由に配置・回転でき、分度器は2本のアームを対象の線に合わせるだけで、その間の角度を自動で計算します。
Webデザインで要素の余白をpx単位で確認したい時、写真や資料に写った物のおおよその角度や比率を確認したい時、あるいは手元に定規がない状態でとっさに長さの目安を知りたい時など、「実物の定規を探す前に、画面上でサッと確認したい」という場面で役立ちます。
クレジットカードなど規格サイズが決まったカードを使った簡易校正機能も搭載しており、校正を行うことでcm・mm・inch表示をその端末の実際の表示サイズに近づけることができます。
こんなシーンで便利です
Webデザイン・UI制作で要素のサイズや余白を確認する時に
単位をpxに切り替えれば、画面上のボタンやカードの幅・高さ・余白をそのままピクセル単位で確認できます。デザインカンプと実装のズレをチェックする際にも便利です。
写真や資料に写った物のおおよその角度・比率を確認したい時に
画像を読み込んで分度器を重ねれば、写真に写った角度（傾き・勾配など）のおおよその値を確認できます。定規で縦横の比率をざっくり確認することもできます。
手元に定規がない時、とっさに長さの目安を知りたい時に
実寸校正を行っておけば、画面に物を当てるだけでおおよその長さを確認できます。ちょっとした目安の確認に、実物の定規を探す手間を省けます。
図形やレイアウトの角度をラフにチェックしたい時に
資料作成やDIYの下書きなどで、2つの線がなす角度をラフに確認したい場合に分度器機能が役立ちます。5°刻みのスナップ機能で切りの良い角度に素早く合わせられます。
使い方は簡単 4ステップ
- 「定規」または「分度器」ボタンを選んで、計測エリアに表示します。
- 定規は本体をドラッグして位置を、分度器はアーム先端の丸いハンドルをドラッグして角度を合わせます。
- 実寸（cm・mm・inch）で使いたい場合は「実寸に校正」から、お手持ちのカードで幅を合わせます。
- 必要に応じて画像を読み込み、対象物の上に定規・分度器を重ねて確認します。
※すべてドラッグ操作とボタン選択だけで完結し、読み込んだ画像を含め、入力内容がサーバーに送信されることはありません。
ご利用時の注意点
- 表示される長さ・角度はあくまで目安です。厳密な採寸・角度測定が必要な場合は、実物の定規・分度器をご使用ください。
- ブラウザの表示倍率（Ctrl + / Ctrl -）や、OSの画面拡大設定によって、実際の物理サイズとの誤差が生じる場合があります。校正後も表示倍率を変更した際は、校正をやり直してください。
- 読み込んだ画像はブラウザ内でのみ処理され、外部に送信・保存されることはありません。
- 完全無料・登録不要でご利用いただけます。
用途別・おすすめの使い方
目的に合わせて、定規・分度器・校正・画像読み込みを組み合わせてご利用ください。
| 用途 | おすすめの使い方 | ポイント |
|---|---|---|
| 写真や資料に写った物のおおよその長さを知りたい | 定規＋画像読み込み＋実寸校正 | 対象物と同じ縮尺で表示された画像で使うと精度が上がります |
| WebデザインのUI要素の余白やサイズを確認したい | 定規（px単位） | 単位をpxにすると、画面のCSSピクセルをそのまま計測できます |
| 資料や図形の角度をラフにチェックしたい | 分度器 | 2本のアームを対象の線に合わせて角度を読み取ります |
| 手元の紙やカードの実寸を画面で確かめたい | 定規＋実寸校正 | 校正後はcm・inch表示が実際のサイズに近づきます |
画面上の定規・分度器を正しく使うための基礎知識
測定を始める前に知っておきたい、CSS単位の仕組みと校正・角度測定のコツを解説します。
結論：画面上の定規・分度器には「px計測」と「実寸計測」の2つの使い方がある
本ツールの使い方は大きく2種類に分かれます。1つはWebデザインのpx単位をそのまま確認する使い方で、これは画面のCSSピクセルをそのまま表示するため、校正なしでも正確です。
もう1つはcm・mm・inchで実物の長さの目安を知る使い方で、こちらは画面の物理的な表示サイズに依存するため、事前の校正が必要になります。目的に応じて使い分けることが正しい活用のポイントです。
なぜCSSのcm・inchはそのまま実寸にならないのか
CSS（Webの表示規格）における1inchは、実際の物理的な1インチではなく「96px」という固定値として定義されています。しかし、実際のディスプレイは機種によって1インチあたりの画素数（DPI・PPI）が異なるため、同じCSS上の1inchでも、画面によって物理的な大きさが変わってしまいます。
そのため、初期状態のcm・inch表示はあくまで規格上の換算値であり、実際に定規で測った長さとは一致しないことがあります。
クレジットカードを使った簡単な校正（キャリブレーション）のやり方
クレジットカードやキャッシュカード、マイナンバーカードなどは幅85.6mm・高さ54mmの規格サイズで統一されています。この既知のサイズを利用し、「実寸に校正」機能で表示された枠にカードの実物を当てて幅を合わせることで、その画面（デバイス・表示倍率）における「1mmが何pxか」を逆算できます。
校正後は、cm・mm・inch表示が実際の物理サイズに近い値で表示されるようになります。
分度器で正確に角度を測るコツ
分度器で角度を測る際は、2本のアームの先端を、測りたい2つの辺や線の延長線上にできるだけ正確に合わせることが重要です。画面を拡大表示（ズーム）しながら細かく位置を合わせると精度が上がります。
切りの良い角度（15°・30°・45°など）を確認したい場合は、5°刻みのスナップ機能をオンにしておくと素早く合わせやすくなります。
よくある失敗と対策
ブラウザの表示倍率が100%でないまま計測し、実寸とズレる
ブラウザの表示倍率（Ctrl + / Ctrl -）が100%からずれた状態で校正・計測してしまい、実際のサイズと表示された数値が食い違ってしまう失敗です。
💡 対策・解決策を見る▼
校正をせずcm・inch表示をそのまま実寸として信用してしまう
初期状態の96DPI換算による目安表示を、実際に測った長さだと思い込んでそのまま使ってしまう失敗です。機種によって数mm〜1cm以上のズレが生じることがあります。
💡 対策・解決策を見る▼
画像の表示倍率と現実のスケールが一致していないまま測定してしまう
読み込んだ画像自体がどの縮尺で表示されているか把握しないまま、定規や分度器の数値をそのまま実物のサイズだと解釈してしまう失敗です。
💡 対策・解決策を見る▼
画面が小さい端末で長い定規を配置し、操作しづらくなる
スマートフォンなど画面の小さい端末で、計測エリアの幅を超えるような長い定規を配置してしまい、ドラッグ操作や表示が窮屈になってしまう失敗です。
💡 対策・解決策を見る▼
分度器のアームを片方しか対象に合わせず、角度を誤読してしまう
2本あるアームのうち1本だけを対象の線に合わせ、もう1本を初期位置のまま読み取ってしまい、実際とは異なる角度を測定結果として使ってしまう失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.画面上の定規は本当に正確ですか
A. 初期状態ではCSSの標準規格である96DPI換算で長さを表示しているため、実際の物理サイズとはズレが生じます。より実寸に近づけたい場合は「実寸に校正」機能で、クレジットカードなど規格サイズが決まったカードを画面に当てて幅を合わせることで、その画面（デバイス）に合わせた換算値に調整できます。ただし気軽な目安としてご利用いただくものであり、精密な採寸には実物の定規・分度器をご使用ください。
Q.分度器で角度はどうやって測るのですか
A. 分度器を表示すると、中心から伸びる2本のアーム（青・紫の線）が表示されます。それぞれの先端にある丸いハンドルをドラッグして、測りたい2つの線や辺に合わせることで、2本のアームの間の角度が自動で計算・表示されます。5°刻みでスナップさせる設定もオンにできます。
Q.校正（キャリブレーション）とは何ですか、なぜ必要ですか
A. パソコンやスマートフォンの画面は、機種によって同じ「1cm」でも実際に表示される物理的な大きさが異なります。校正とは、クレジットカードなど大きさが決まっている実物を画面に当て、表示上の幅を実物の幅（85.6mm）に合わせることで、その画面固有の「1cmが何pxか」を割り出す作業です。校正を行うことで、cm・mm・inch表示が実際のサイズに近づきます。
Q.画像を読み込んで測定できますか
A. はい、計測エリアに画像を読み込み、その上に定規や分度器を重ねて表示できます。写真に写った物の縦横比や角度の確認、デザインカンプ上の余白チェックなどに活用できます。ただし画像そのものの表示倍率と実物のスケールが一致しているとは限らないため、正確な実寸を知りたい場合は画像内に写っている既知のサイズの物と比較するなど、あくまで目安としてご利用ください。
Q.スマートフォンでも使えますか、タッチ操作に対応していますか
A. はい、対応しています。定規や分度器のドラッグ移動、分度器のアームの角度調整は、マウスだけでなくスマートフォン・タブレットのタッチ操作でも同じように操作できます。
Q.単位はどれを選べばいいですか
A. WebサイトのデザインやUI要素の余白・サイズを確認したい場合はpx（ピクセル）が実際の表示単位と一致するためおすすめです。紙の資料や実物のサイズ感を確認したい場合は、実寸に校正したうえでcm・mm・inchをご利用ください。
Q.入力したデータや読み込んだ画像が外部に送信されることはありませんか
A. 一切ありません。本ツールはすべての処理をブラウザ内だけで完結する設計です。読み込んだ画像もブラウザのメモリ上でのみ扱われ、外部サーバーへ送信・保存されることはなく、ページを閉じれば消去されます。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。