8月
17
17
UIデザイナー必見のツール!!スクリーンショットからUIパーツのピクセル数がわかる「Pixel Winch」

どうも、@takashingsです。
仕事でアプリのUIなどを担当することがあります。
アプリのデザインは1ピクセルで印象が変わったり、使い安さが変わったりします。
アプリのデザインは他のアプリなどを参考にしたりするのですが、
その際にたまに使っているツールが「Pixel Winch」
このアプリはスクリーンショットからパーツのピクセル数を計ることができるツールアプリです。
アプリを起動すると、ツールバーにアプリのアイコンが登場。

アイコンをタップして”Capture Selection”を選ぶと、スクリーンキャプチャを撮影するマウスカーソルになります。
範囲を選択すると該当部分のキャプチャを取得して、アプリが表示されます。

こちらはプレビューの一部をキャプチャしたもの。
このアプリのすごいところは”Grapple tool“。
カーソルを合わせたところのパーツ部分がどのぐらいのピクセル数かを計ってくれます。

パーツの幅や高さを細かく調べるにはこのツールは便利だと思います。
現在はパブリックベータ版として無料でダウンロードができるようになっています。
製品版でのリリースになると有料になるぐらいのツールなので、気になる方は今のうちにチェックしてみてください。