画面ルーラー

アプリでできること

画面のものを 3 ステップで測る方法

1. 定規のゼロの端を、測り始める位置に合わせます。
2. マーカーを反対側の端までドラッグ——または矢印キー（Shift で ×10）でピクセル単位に微調整します。
3. 値を読み取ります：大きな表示とキャンバス上のチップの両方に、現在のピクセル距離が出ます。

Windows に画面定規はない

物理的なものの測定は簡単なのに、ピクセルの測定は不思議と難しい。Windows には画面上の距離を示すものがありません：DevTools はブラウザー内だけ、画像エディターは自社キャンバス内だけ、それ以外では人は方眼線を数えるしかありません。画面ルーラーはその欠けた道具です：100 px ごとに目盛りとラベルの付いた細いウィンドウ、マウスを追うドラッグ可能なマーカー線（B）、ライブで更新される表示——≈ 482 px。幅には水平、高さには垂直、ワンクリックで切り替え。

ゴーストモードとピクセル精度

画面測定を本当に機能させる 2 つのディテール：透明度と微調整。不透明度スライダー（40～100 %）はウィンドウをゴーストに変え、測定中の UI の上に重ねられます——Alt+Tab もスクリーンショットも不要。マーカーは大まかな作業はドラッグで、精度は矢印キーで：1 回の押下で 1 ピクセル、Shift で 10 ピクセル。「マーカーをリセット」を押すとゼロに戻り、キャンバス上の数値チップは見ているその場所に距離を表示するので、視線が移動しません。定規は実際の画面ピクセルを読み取ります。表示スケーリング 100 % なら、それは CSS やデザインツールが言う px そのものです。Windows のスケーリングがそれより高い場合、システムはスケーリングされた単位で動作します——他のすべてと同じように。

小さな道具、毎日の用途

デザイナーは生きたブラウザーで余白やブレークポイントの幅を検証します。開発者は修正を書く前に、あの謎のパディングが 8 px か 12 px かを確認します。QA エンジニアはタッチ対象が少なくとも 44 px あることを確かめます。プレゼン資料を作る人は、プロジェクター解像度で画像に残る領域を測ります。そして誰もが時々、あのウィンドウが本当は何 px 幅なのか知りたくなります。画面ルーラーは、マーカー位置を覚える小さなオフラインウィンドウ 1 つ——アカウントなし、テレメトリーなし、設定するものも何もありません。

機能

• ドラッグできるマーカー線とライブのピクセル表示
• ワンクリックで水平・垂直モード
• 10 px ごとの目盛り、100 px ごとのラベル
• 矢印キーの精度：1 px、Shift で 10 px
• リセットボタンでマーカーがゼロに戻る
• 不透明度 40 % から——測定中の UI の上にゴースト
• 「常に最前面に表示」でブラウザーやエディターの上に
• キャンバス上の数値チップ——見ている場所に数字
• 表示スケーリング 100 % なら校正不要
• マーカー位置は実行間で記憶される
• ダーク／ライトテーマ、オフラインで動作
• 16 言語のインターフェース、広告・テレメトリーなし

スクリーンショット