Webデザインが終わって、コーディング作業に入ろうと思った時に必要なのが各パーツの大きさとその距離です。Photoshopなどを使って大きさを測定しているケースは多いですが、Webベースのモックアップだとどうすれば良いでしょう。 スクリーンショットを撮って、それの長さを測るというのもありますが面倒です。そこで使ってみたいのがDimensionsです。

Dimensionsの使い方

DimensionsはGoogle Chromeの機能拡張として提供されています。インストール後、Dimensionsのアイコンをクリックすると起動します。

Dimensionsは表示されているものの距離を測定しているのでDOMや画像などに関わらず測定できるようです。

画像の端から端が取れるという感じではないので、モックアップであれば画像に枠をつけたりする必要がありそうです。恐らく実際のWebサイトよりもモックアップ、ワイヤーフレームレベルの方が使いやすいと思われます。

DimensionsはGoogle Chrome用のオープンソース・ソフトウェア（MIT License）です。

Dimensions Browser Extension Dimensions - Chrome ウェブストア mrflix/dimensions