画面上の余白やサイズを測ってくれるMacアプリ「Pixel Snap」

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. 画面上の余白やサイズを測ってくれるMacアプリ「Pixel Snap」

画面上の余白やサイズを測ってくれるMacアプリ「Pixel Snap」

画面上の余白やサイズを測ってくれるMacアプリ「Pixel Snap」

コーダーのみなさん、デザインからコーディングを起こす時にボタンのサイズコンテンツ間の余白などはどうやって測っていますか?

Photoshopだと、レイヤーを範囲選択して[情報]ウィンドウで縦横のサイズを確認したり、範囲選択ツールでドラッグして何pxなのか調べたり、でしょうか。
パーツごとに何回も調べたり、わざわざPhotoshopを起動したりと、繰り返し繰り返し作業が積み重なるとちょっとした手間なんですよね。

今回「Pixel Snap」という画面上に表示されているあらゆるコンテンツのサイズや余白を測ってくれるアプリを紹介します。
なお現在Pixel Snap2がリリースされていますが、機能紹介はPixel Snap1となりますのでご注意ください。

以下公式のアプリ紹介動画です。

Pixel Snapはここがすごい

いい感じにコンテンツ間の余白やコンテンツのサイズを測ってくれる。

色のコントラスト差でサイズを計測しているようですが、表示中のアプリケーションやMacのUIなど、画面上のあらゆるもののサイズを測ってくれます。

下のキャプチャはChromeで開いたアウラのトップページで、Pixel Snapでサイズを測っています。
マウスカーソルを始点にしてコンテンツの境目から境目までの縦横のサイズをpxで表示してくれます。

 

精度を調整できる

精度を「Zero」「Low」「Medium」「High」の4段階を設定できます。
それぞれの項目で「0〜100」までの閾値を設定できます。

設定は「環境設定」の「Tolerance」で編集できます。

「0」に近くなるほど精度が高くなり、よりわずかな違いも検出し、「100」に近づくと逆に精度が下がっていきます。

「Medium」が、程よい具合に測ってくれるので普段は「Medium」を使うと良いでしょう。

 

ショートカットですぐに起動

Pixel Snapは一度起動した後はショートカットキー「⌘ + Shift + F」でいつでも呼び出せます。
そして測るのをやめたい時は「スペース」キーで解除できます。

ショートカットキーはカスタマイズ可能なので、自分の使いやすいショートカットに変更しましょう。

 

ドラッグでコンテンツのサイズを測れる


上のキャプチャのようにコンテンツサイズもドラッグで測れます。
大まかに範囲を選択するとキュッといい感じに範囲を補正してくれるのが気持ちいい。

さらに、範囲指定後にPxが表示されているポップにカーソルを合わせると「Save」と表示され、選択範囲をキャプチャしてデスクトップに保存してくれます。

 

ちょっと残念なところ

Mac専用アプリです

Windowsでは使用できません。WindowsユーザーはAppleに課金しましょう。

 

有料アプリです

購入当初は15$だったのですが、現在Pixel Snap2にアップグレードしており、Mac1台で25$からのようです。

ちなみにPixel Snap1を持っている人は半額で2にアップグレードできます。

ちょっと作業早くなるんじゃない?

手グセでついついPhotoshop上のツールでサイズを測りがちなので、最初は意識して使わないといけませんが、使い慣れたらちょっと仕事が早くなります。

有料ですが25$で買いきりなので、物は試しに気になる方は使ってみてはいかがでしょうか。

Pixel Snap2

 

前後の記事

【2019年版】こんなSEO対策は古くて危険!

こんにちはアウラの河野です。 最近、お客様のホームページに対してSEO対策を考えたり、実際に施策を行うことが増えてきました。 ホームページを見ていると「あ!このSEO対策は数年前のやり方だから今は危険…

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら