Webデザイナー、グラフィックデザイナー、その他デザイナーにとって、画面上の要素のサイズと位置は重要です。しかし、残念ながら、これらの指標を測定するのは必ずしも簡単ではありません。様々な測定を容易にするユーティリティは数多くありますが、IconfactoryとArtis Softwareの共同開発による、最近リリースされた xScope 2.0( 27ドル)には特に感銘を受けました。XScopeは、複数の画面測定ツールを1つの便利なユーティリティに統合しています。
ツール
XScope の機能は、それぞれ特定の種類の測定、調整、または検査を目的とした 7 つの特定のツールによって提供されます。
Dimensions私のお気に入りのツール、Dimensions は、画面上の要素のサイズを測定できます。このツールがユニークで、単純にクールなのは、ほぼ自動であることです。測定する領域にカーソルを置くと、2 本の「レーザー ビーム」(1 本は垂直、もう 1 本は水平) が発射されます。まるで魔法のように、ビームは画面上の他のオブジェクト (ウィンドウの端やテキストの列など) に当たると止まります。次に、XScope が各ビームの長さをピクセル単位で表示します。このツールがオブジェクトまたは領域の正確な端を判別する機能は印象的です。文書内の 1 文字の寸法や、ページ上の 2 つの文字間のスペースさえも検出できます。

目的の要素またはスペースを測定したら、キーボード ショートカットを使用して測定範囲の周囲の領域を暗くしてその領域に焦点を合わせたり、測定した領域のみのスクリーンショットを撮ったりすることができます。
自動計測機能は色の変化に基づいてオブジェクトのエッジを判定するため、オブジェクトや背景にグラデーションや影がある場合、あるいは画像のエッジがはっきりと判別できない場合、xScope はうまく機能しないことがあります。このような場合は、「縮小モード」という奇妙な名前のモードを使うと良いでしょう。このモードでは、マーキーを使って計測対象領域を示すボックスを描画できます。このボックスは削除するまで画面上に表示され、画面上に好きなだけボックスを追加できます。これにより、2つの異なる画面領域の寸法を簡単に比較できます。
寸法ツールは便利ですが、いくつか制限があります。一番の不満は、例えば同僚にメールで送る場合など、測定した寸法をクリップボードにコピーするには、縮小モードを使わないとできないことです。(同様に、スクリーンショット機能では画像に寸法が含まれません。)また、縮小モードで描画したボックスのサイズを変更できればさらに便利です。

ルーラーこのツールは、ピクセル単位で要素を測定するための2つのルーラー(互いに90度の角度で配置)を画面上に表示します。多くの類似ユーティリティとは異なり、ルーラーを回転させて任意の角度で測定できます。また、xScopeのルーラーには、測定対象をフレーミングするための視覚的なノギスが含まれています。測定対象に合わせてルーラーの長さを調整できますが、ノギスはルーラーの外側に配置されているため、内側に切り替えて測定しやすくすることはできません。
ここで私が期待している 2 つの機能は、不規則な形状のオブジェクトを測定するために各定規の端から垂直に伸びる線と、定規の長さを 1 ピクセル単位で調整するなど、微調整を行うキーボード コントロールです。
スクリーン: Webデザイナーにとって特に便利なこのツールは、特定の画面サイズを表す半透明のオーバーレイを表示します。ポップアップメニューを使えば、シミュレートされた画面サイズに素早く切り替えることができます。320 x 320(Palm)から1920 x 1200(MacBook Pro)まで、幅広い画面サイズに対応しており、独自の画面サイズを追加することもできます。

しかし、多くの類似ユーティリティとは異なり、xScopeのスクリーンツールでは、選択した画面サイズのうち、実際にWebページを表示できる領域が、様々なブラウザでどの程度になるかを確認することもできます。リスト内のブラウザ名をクリックするだけで、そのブラウザのページ表示領域のアウトラインが表示されます(xScopeは、ブラウザが画面いっぱいに表示するように設定され、デフォルト設定が使用されていることを前提としています)。複数のブラウザを選択して、「最小公分母」領域を確認することもできます。
ルーペツールを使用すると、画面の一部を拡大して、200~800%の倍率で細部を確認できます。また、マウスカーソルの直下のピクセルのHTML、RGB、HSBカラー値も表示されます。これらの値、または拡大された画像をクリップボードにコピーできます。
このツールの一番気に入っている点は、細かい機能です。例えば、表示を固定(ロック)できるので、マウスを動かしても拡大画像が変化しません。(ロックと固定の違いは、前者は拡大領域の変化を画像に反映するのに対し、固定は静止画像になる点です。)また、「マウス回避」機能は、ルーペツールのウィンドウをマウスから自動的に離してくれるので、ウィンドウの下にあるものを調べたいときに便利です。
ガイドガイドツールを使用すると、画面上のオブジェクトの位置合わせに役立つ水平または垂直のガイドラインを作成できます。水平ガイドはShift+Command+H、垂直ガイドはShift+Command+Vを押すだけで作成できます。また、xScopeのガイドウィザードを使用することもできます。後者は、均等間隔で複数のガイドを追加する場合に特に便利です。ガイドの位置を変更する場合、xScopeは画面の左上隅を基準とした相対位置を表示します。ガイドをリンクしたり、ガイドセットを保存して後で使用したりすることもできます。
フレームガイドと同様に、フレームはその名の通り、画面上に長方形のオーバーレイを表示し、特定の領域のデザインに役立ちます。フレームは好きなだけ作成でき、それぞれ異なるサイズで使用できます。フレームを作成したら、サイズを変更したり(自由に、または設定されたアスペクト比を使用して)、複製したり、他のフレームにリンクしたりできます。各フレームには寸法が表示され、配置時には画面上の座標も表示されます。また、フレーム内に2×2、3×3、または4×4のグリッドを作成したり、フレームの内容のスクリーンショットを撮ったりすることもできます。ガイドラインと同様に、フレームセットを保存して後で使用することもできます。
クロスヘアこのシンプルなツールは、画面上のカーソル位置を示すクロスヘアを表示します。クロスヘアは画面の左上隅を基準としたX/Y座標で表示されます。また、現在のカーソル位置を座標の基準に設定することもできます。ルーラーツールを使用している場合は、ルーラーの交点を基準に設定することで、クロスヘアとルーラーを併用して画面上の要素を測定できます。
簡単にアクセス
xScope 独自のメニューに加え、ツールはメニューバーアイコン、フローティングツールパレット、キーボードショートカット、あるいはこれら3つを組み合わせたものから利用できます。これらのオプションにより、他のプログラムから xScope の機能に簡単にアクセスできます。メニューバーアイコンとキーボードショートカットは、ツールごとに使用するものを選択することもできます。例えば、メニューバーには「ディメンション」と「スクリーン」のみを表示し、その他のツールはキーボードショートカットを使用するといった設定も可能です。
デザイナーの観点から見ると、xScope の利便性をさらに高めているのは、各ツールのオン/オフをすばやく切り替えることができ、複数のツールを同時にアクティブにすることができ、各ツールが最後の設定を記憶していることです。
最後に、xScope の OS X にヒントを得た画面上の要素も美しく、このユーティリティの対象ユーザーを考えると適切です。
XScopeは明らかにニッチな製品です。しかし、その機能を必要とする人にとっては、他に類を見ない、そして非常に便利なツールです。
XScope 2 には Mac OS X 10.4 以降が必要です。