macOS の画面にある UI 要素を、自動エッジ検出で計測するメニューバーアプリ。⌘ ⇧ M でボタン・アイコン・レイアウトブロックにカーソルを乗せるだけで、サイズが瞬時に表示されます。
Figma のデザインと実装画面を見比べる時、スクショを撮って拡大してピクセルを数える、という作業はもう不要です。Pixel Ruler は画面から直接ピクセル情報を読み取り、要素の境界を自動的に検出します。
SCENE 01
Figma 上のパディング 16px が、実装画面では何 px になっているかを 1 秒で確認。差分があれば、その場で気付けます。
SCENE 02
「あのアプリのボタン角丸、何 px だろう」を、推測ではなく数値で把握。CSS / SwiftUI / Tailwind の形でそのままコピーできます。
SCENE 03
「ここのマージンがズレている」を、計測線を焼き込んだスクリーンショットで添付。文章で説明する手間が消えます。
5 つの主要機能を、それぞれの画面とともに紹介します。
⌘ ⇧ M でエッジ検出モードに入り、計測したい要素にカーソルを乗せるだけ。ボタン・アイコン・レイアウトブロックの上下左右のサイズが、画面に重ねて表示されます。スクショ → 拡大 → ピクセル数えの往復が、すべて消えます。
自動検出が効きにくい場面では、ドラッグモードに切り替えて任意の範囲を計測。矢印キーで ±1px の微調整も可能です。⇧ + クリックで複数計測を画面にピン留めし、複数箇所のサイズを同時に確認できます。
計測した値を、CSS / SwiftUI / Tailwind / 独自テンプレートでクリップボードへ。「padding: 16px 24px;」「.padding(.horizontal, 24)」のような、すぐ使える形で出力できます。テンプレートは自由にカスタマイズ可能です。
⌘ S で、計測結果を重ねたスクリーンショットを書き出し。QA のバグ報告・デザインレビュー・実装相談など、「文章で説明するより 1 枚見せたほうが早い」場面で使えます。
常駐はメニューバー 1 つだけ。ホットキー（⌘ ⇧ M）はカーソル位置のディスプレイで動作し、マルチディスプレイ環境でも 1 アクションで起動できます。コピーフォーマットの並び順・色・線の太さも調整可能です。
画面収録権限を扱うアプリだからこそ、「何が起きて、何は起きないのか」を専門用語を使わず書きます。
無料です。これからも無料の方針です。Settings パネルから任意の感謝寄付（Tip Jar）ができますが、寄付の有無で機能差はありません。すべての機能が同じように使えます。
ドラッグモードだけなら、画面収録の権限は不要です。任意の範囲をドラッグして計測するだけなら、最初の権限ダイアログをスキップして使い始められます。エッジ検出（自動計測）を使うときだけ、後から権限を付与してください。
使えます。ホットキー ⌘ ⇧ M は「カーソルがある画面」で起動するので、複数ディスプレイでも 1 アクションで切り替えなく使えます。
作れます。Settings の「フォーマット」欄に、プレースホルダ（{width}, {height}, {top} など）を含めたテンプレートを書くと、計測時にそのフォーマットでクリップボードへ書き出されます。
変更できます。Settings からお好みのキーの組み合わせに割り当て直せます。他アプリと競合する場合は、別のキーに変更してください。
はっきりした色境界がある UI 要素（ボタン・アイコン・ブロック）は高い精度で検出できます。背景と要素の色が近い場合や、グラデーション・半透明の要素は、ドラッグモードでの計測が確実です。
動きます。Apple Silicon / Intel どちらにも対応するユニバーサルバイナリで配布しています。
完全無料、課金なし、データ収集なし。⌘ + ⇧ + M で、いつもの作業に組み込めます。