WEBページのサイズを測れるChrome拡張機能「Page Ruler」

ページルーラーサムネイル






WEBページ上のサイズを測れる便利な定規「Page Ruler」を紹介します。

紙媒体をメインにしているデザイナーさんは「px」単位のサイズ感に慣れてないと思いますが、Chromeの拡張機能「Page Ruler」を使えば表示される定規で簡単にサイズを測ることができます。

Chrome拡張機能 Page Ruler

ページルーラーアイコン

Page RulerはChromeの拡張機能なので、SafariやOperaなどのブラウザでは利用できません。ブラウザがChrome以外の方は、まずChromを起動するかインストールをしてください。


chromeダウンロード

Chrome をダウンロード

次に、ChromeウェブストアからPage Rulerをインストールします。
無料ですので安心してインストールしてください。


ページルーラーインストール

Page Rulerをインストール

画面右上の「Chromeに追加」ボタンを選択すると、「Page Ruler」を追加しますか?と聞かれますので、「機能拡張を追加」を選択してインストールします。

機能拡張を追加

カンタン操作で便利なWEB定規

使い方はとてもカンタンです。

ブラウザの右上に、定規のアイコンが出ているはずなので選択します。

ページルーラーのアイコン

サイズを測りたい部分をドラッグするだけで、画面上部の青いバー内にドラッグした箇所のサイズが表示されました。定規を使うように簡単操作でサイズが測れます。

ページルーラー使用中

サイズ感がわからないなら測ればいい

私がPage Rulerを使用する場合、以下の2通りの使い方があります。

  1. 他サイトを測って参考にする
  2. 修正後の想定サイズを測る

他サイトを測って参考にする

特に紙媒体出身の方は、バランスが良いと思うサイトを片っ端から測って参考にする事をオススメします。

紙媒体もWEBも、マージン(余白)は重要なデザイン要素の一つです。余白のサイズ感が身につくと、WEBサイトをデザインしやすくなりますので、なんかわからないけどスッキリ見えるサイトの余白部分を測るだけでも、とても勉強になりますよ。

もちろん、余白だけでなく画像や文字サイズなど、なんでも測って参考にしちゃってください。

修正後の想定サイズを測る

私はコチラの用途が多いです。

例えば、サムネイル画像をちょっと拡大したい。という場合、CSSで「ちょっと」と指定するわけにはいきません。

拡大後の想定サイズでドラッグすれば、正確な数値が表示されるので、あとはCSSでサイズを変えてやれば思った大きさに変更できます。

Page Rulerを使用すれば、サイドバーの幅や記事一覧のサムネイル画像の大きさ等を変更する場合に、CSSで変更してブラウザで確認して…また繰り返して…という無駄な作業が大幅に減ります。

ページルーラーサイズ確認中

まとめ

私は紙媒体の制作期間が長く、ピクセル単位のサイズ感になかなか慣れませんでしたが、Page Rulerを使用するようになってからは、デザイン精度が上がったような気がします。
変に大きい・小さいという事がなくなりました。自分で言うのも何ですけどね(笑)

単純にサイト上を測るだけのツールですが、なんとかとモノサシは使いようと言うように、スキル向上に役立つので使ってみてください。

WEBページのサイズを測れるChrome拡張機能「Page Ruler」でした。







ページルーラーサムネイル