Developer's Blog

画面レイアウトを行うときに便利なツール

先週の荻野のブログエントリではアプリケーション上の各要素間の間隔について書かれていました。デザイナが導き出した各要素間の間隔を限りなく忠実にコーディングするための助けとなるツールを紹介したいと思います。

xScope

マウスカーソルのある場所から上下左右の距離を自動ではかってくれる Dimensions 機能が大変便利です。シミュレータ上で動いているアプリの各要素間の距離を測りたい時にはマウスカーソルを動かしていくだけです。Dimenshions 機能以外にも Ruler 機能、Loupe 機能など盛りだくさんです。

Free Ruler

Ruler 機能のみのシンプルなところと Free で配布されているところがポイントです。先に紹介した xScope の Dimensions 機能は色のの変化を基準に計測しているようです。背景にグラデーションがかかっている時や入り組んだデザインには Ruler 機能が便利です。


Pixie

  • Free
  • /Developer/Applications/Graphics Tools/Pixie.app

カーソル位置を拡大表示するツールです。開発ツールをインストールするといっしょにインストールされます。拡大以外にも任意のピクセルの色ををコピーする機能などもあります。

他にも Mac の標準機能の拡大表示機能(Ctrl + スクロールホイール)も便利です。「イメージをスムージング」オプションをオフにしておくのがおすすめです。




今回は画面レイアウトの確認に便利なツールを紹介しました。どのツールもやっていることはシンプルですが、一度使うとこれなしでは開発効率が著しく下がってしまいます。これらのツールで少しでもみなさんの開発効率が上がればと思います。

Copyright © 2019 Fenrir Inc. All rights reserved.