スクリーン上のピクセルサイズを測ってくれるGoogleChromeの機能拡張プラグイン「PageRuler」が素晴らしい!

WEB制作中に参考サイトを閲覧していると”このヘッダーのサイズ感いいな”とか”写真のサムネサイズ、これくらいかな?”とか、ピクセル数値をクリップしたくなる事ありますよね?このプラグインはそんな要望に答えてくれます。
インストールはコチラ:Page Ruler(Googleウェブストア)

サイトのコンテナ幅を測る

制作サイトのワイド幅を決める時、一定の数値は決まっていたとしても正確な数値決定で悩むコトが結構ありますよね?閲覧サイトのワイド幅がすぐにクリップ出来たら便利だなぁ、インストールしました。
操作は至って簡単!!調べたいエレメントをドラッグするだけで、ツールバーに所定のピクセルサイズが表示されます。


↑こんな感じで計測できます。

ELEMENT MODEはさらに効率的

ノーマルモードではドラッグしてアナログ的に数値計測でしたが、エレメントモードではCSSのマークアップを読み取りマウスオンすると自動でそのエレメントの数値を計測してくれます。

この機能がメチャクチャ便利なんです!
何気なくマウスをオンするだけで適宜数値を拾ってくれるんです。

*文節だと少し判りにくいので操作動画を参照↓↓↓

WEB制作に携わるなら必須の機能拡張プラグイン

イラストレーターやフォトショップなどでデザインカンプを制作していると、実際にコーディングベースに載せると【あれっ!?ロゴサイズがデカイ?】とか【マージン数値が違ってる??】などの差異が出てくるモノです。

このプラグインは事前に実際のブラウザから実在の数値を計測出来るので、限りなくその”差異”を最小限に留めることが出来ます。

WEBクリエイターのみならず、全てのデザイナーにもオススメ出来るプラグインです。

インストールはコチラ:Page Ruler(Googleウェブストア)

作成者: Takayuki Kuwabara

服飾専門学校を卒業後、自身のアパレルブランドを立上げて創作活動をスタート。ブランドの広告プロモーション活動を通じて販促物の制作・カメラワーク・WEB構築の知識を独学で習得。同時期その経験に基づき、企業ロゴの制作やフライヤー制作・商品写真撮影などの依頼を受託するようになる。その実績が功を奏しカメラマン・デザイナーへと転身。後にcreaBox(クリアボックス)の設立に携わる。現在ではデザイナー・カメラマン・WEBクリエイターとしてセールスプロモーションに関わる分野で幅広く活躍中。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です