【デザイナー】UIデザインに役立つMac用アプリ「Pixel Winch」「Sip」：Useful Design Tools Vol.01

Pixel Winch | UIパーツのスペーシングを測るソフトウェア定規

UI制作をする際にとっても重要なのが、ボタンやスライダーなどの各種UIパーツのスペーシング。特にタッチデバイスで動作するMobile Appでは指先で操作するため、ユーザーが誤操作する事なく快適に使ってもらえるような配慮がとっても大事です。

ネット上には「ボタンの大きさは最低何px、間隔は何px」といった解説もあるのですが、実際に自分で使ってみて使い勝手の良いAppを参考にするのが一番だと思います。ここで紹介するPixel Winchは、スクリーンショットを元にUIパーツ間の感覚を簡単に測る事のできるツールです。

起動するとメニューバー右端に常駐します。この中から「Capture Selection」を選ぶと、マウスカーソルが範囲選択の形に変ります。Macユーザーならおなじみのスクリーンショットを撮る時の流れですね。ここで画面内の任意の場所を選択すると、撮影されたスクリーンショットが画面いっぱいに表示されます。この画面内左上にあるツールを使って、パーツそのもののサイズや、隙間のサイズを簡単に測る事ができます。試しにエンカフェのサイトをキャプチャーしてサイズ計測してみたのがこちら。

Rectangle Toolでは短形を使ってボタンのサイズを測る事ができ、Grapple Toolではパーツ間の隙間をセミオートで測る事ができます。サイズを測りたいだけならグラフィックツールを立ち上げるよりもはるかに簡単に、サクっと済ます事ができます。Mobile Appの場合は、まずはスマホでスクリーンショットを取って、それをDropboxなどを使ってMacに移して計測するという流れがスムーズでオススメです。

Pixel Winch