コーダーのみなさん、デザインからコーディングを起こす時にボタンのサイズやコンテンツ間の余白などはどうやって測っていますか？
Photoshopだと、レイヤーを範囲選択して[情報]ウィンドウで縦横のサイズを確認したり、範囲選択ツールでドラッグして何pxなのか調べたり、でしょうか。
パーツごとに何回も調べたり、わざわざPhotoshopを起動したりと、繰り返し繰り返し作業が積み重なるとちょっとした手間なんですよね。
今回「Pixel Snap」という画面上に表示されているあらゆるコンテンツのサイズや余白を測ってくれるアプリを紹介します。
なお現在Pixel Snap2がリリースされていますが、機能紹介はPixel Snap1となりますのでご注意ください。
以下公式のアプリ紹介動画です。
色のコントラスト差でサイズを計測しているようですが、表示中のアプリケーションやMacのUIなど、画面上のあらゆるもののサイズを測ってくれます。
下のキャプチャはChromeで開いたアウラのトップページで、Pixel Snapでサイズを測っています。
マウスカーソルを始点にしてコンテンツの境目から境目までの縦横のサイズをpxで表示してくれます。
精度を「Zero」「Low」「Medium」「High」の４段階を設定できます。
それぞれの項目で「０〜１００」までの閾値を設定できます。
設定は「環境設定」の「Tolerance」で編集できます。
「０」に近くなるほど精度が高くなり、よりわずかな違いも検出し、「１００」に近づくと逆に精度が下がっていきます。
「Medium」が、程よい具合に測ってくれるので普段は「Medium」を使うと良いでしょう。
Pixel Snapは一度起動した後はショートカットキー「⌘ + Shift + F」でいつでも呼び出せます。
そして測るのをやめたい時は「スペース」キーで解除できます。
ショートカットキーはカスタマイズ可能なので、自分の使いやすいショートカットに変更しましょう。
上のキャプチャのようにコンテンツサイズもドラッグで測れます。
大まかに範囲を選択するとキュッといい感じに範囲を補正してくれるのが気持ちいい。
さらに、範囲指定後にPxが表示されているポップにカーソルを合わせると「Save」と表示され、選択範囲をキャプチャしてデスクトップに保存してくれます。
Windowsでは使用できません。WindowsユーザーはAppleに課金しましょう。
購入当初は15$だったのですが、現在Pixel Snap2にアップグレードしており、Mac1台で25$からのようです。
ちなみにPixel Snap1を持っている人は半額で2にアップグレードできます。
手グセでついついPhotoshop上のツールでサイズを測りがちなので、最初は意識して使わないといけませんが、使い慣れたらちょっと仕事が早くなります。
有料ですが25$で買いきりなので、物は試しに気になる方は使ってみてはいかがでしょうか。
