Skill 学ぶ

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


暑い夏に全然ピッタリではないデザインツールの紹介です。インドア派のみなさんにお届けしたいと思います。

今回は、WebやMobile AppのUIをデザインする人に向けた、便利なマイクロアプリを紹介します。Photoshopを使えばできなくもない内容ではあるのですが、便利なものはどんどん使ってしまおうと思って早速試してみました。ちなみにどちらもMac用です。Windowsユーザーの方ごめんなさい・・・。

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