Measureit｜WEBサイトのサイズ（幅×高さ）を測れるGoogle Chrome拡張機能

Measureitは、WEBサイト上のバナー画像や、コンテンツ幅などの要素のサイズ（幅×高さ）を測るためのGoogle Chrome拡張機能です。

WEBサイト運用の現場ではよく、以下のような質問をされることがあります。

• バナー画像を新しくするために、既存のバナー画像のサイズが知りたい
• 自社サイトのコンテンツ幅は1000pxだけど、競合サイトのコンテンツ幅はいくつで作られているか知りたい

このくらいの質問は、Measureitを使えば、10秒以内で答えることができるでしょう。

今回は、サイズが気になりがちなWEBサイト運用の担当者向けに、サイズを測るメジャーの役割を担ってくれる『Measureit』を紹介します。

Measureitとは

Measureitとは、WEBサイトのコンテンツ幅や、ページ上のバナー画像などのアイテムのサイズ（幅×高さ）を測るためのGoogle Chrome拡張機能です。

WEBサイトの制作・運用の現場では、ページ上のさまざまな要素のサイズを正確に把握しなければならないことが多々あります。
たとえばあなたがバナー画像のサイズを測るとき、画像を一度ダウンロードして、画像プロパティから確認していませんか？
あなたのブラウザがGoogle Chromeだとしたら、いちいち要素の検証を立ち上げて、対象のサイズを確認していませんか？

Measureitをつかえば、瞬時にサイズを知りたい要素をメジャーで測ることができて、大幅な時間短縮につながります。

早速、Measureitの使い方をみていきましょう。

Measureitの使い方

インストールの方法

ChromeウェブストアのMeasureitのダウンロードページからインストールします。

※Firefoxのアドオンでも利用できます。Firefoxアドオンのダウンロードページからインストールしてください。

要素のサイズを測る

拡張機能がインストールできていると、ブラウザの右上にオレンジ色の定規アイコンが表示されるようになります。

このアイコンをクリックすると、拡張機能が起動し、画面が白フィルターがかかった状態になります。

この状態でドラッグ操作を行うと、サイズを測りたい要素を測定できます。
右上に『W:00 H:00』と表示されますが、Wが幅のサイズ、Hが高さのサイズ（px表記）になります。

測定モードを解除する

サイズの測定モードを解除するには、起動時と同じく、ブラウザ右上のオレンジ色の定規アイコンをクリックします。画面上の白フィルターが消えたら、解除は完了です。

ショートカットキーでもっと便利に利用する

キーボードショートカットを使えば、1pxごとの細かいサイズ調整をおこなえます。
ドラッグだとサイズの微調整が難しいので、必ず覚えておきましょう。

1pxサイズを変更する　：　←→↑↓
5pxサイズを変更する　：　SHIFT + ←→↑↓

拡張機能のレビュー

かんたんにではありますが、筆者の使用した感想を書いておきます。

良いところ：
機能がとてもシンプルで、定規でサイズを測るだけというのが分かりやすく◯。また、動作がとても軽快で、重くなりがちな起動時などもストレス無くサクサク動きます。

悪いところ：
基本機能はドラッグ操作のみで大雑把にサイズを測るだけなので、細かくサイズを測りたいときにはやや不向き。IMGとかDIVとかのHTML要素を検出できたりするとより便利だったかなと思います。

まとめ

今回はWEBサイト上のバナー画像やコンテンツ幅など、要素のサイズ（幅×高さ）を測るためのGoogle Chrome拡張機能『Measureit』を紹介しました。

軽快な動作と、誰でも利用できるシンプルな機能が特徴で、ドラッグ操作のみで素早くサイズを測りたいときには、優秀な拡張機能です。
WEB制作の仕事などで、大雑把にでもサイズを図ることが多々あるという方は、ぜひ一度試してみてください。