Mesurer

ローカル開発向けの計測・整列ツール

Mesurerは、localhost上でページ要素の寸法やアラインメントを確認できるReactコンポーネント。npm install mesurer でインストールし、ルートレイアウトに <Mesurer /> を配置するだけで使える。

キーボードショートカットで操作する設計になっている。Mキーで計測モードのオン・オフ、Sで要素選択、Gでガイド線の表示を切り替える。Altキーを押している間だけオーバーレイで寸法を表示する機能もある。Escで計測をクリア、Backspace/Deleteでガイド線を削除、Undo/Redoにも対応する。

highlightColor や guideColor などのpropsでカスタマイズが可能。localStorageを使った設定の永続化もオプションで備えている。

デザインカンプとの差分チェックや、要素間のスペーシング確認といった実装フェーズの作業を、ブラウザのDevToolsより直感的にこなせるツールだ。

DevToolsでも要素の寸法は見られるけど、デザインカンプと見比べながらスペーシングをチェックする用途には正直向いていない。Mesurerはそこにフォーカスしたツールで、キーボード一発でガイド線を引いたり要素間の距離を測れるのが気持ちいい。開発中だけ有効にする設計もきちんとしている。ibelick氏のプロダクトはどれもデザイナー目線が効いていて、そこが信頼できる。