Webサイト作りに役立つChromeの定規系プラグイン一覧

Chrome

WordPressでWebサイトの要素の配置などをデザインしているときに、もっと視覚的にわかりやすく要素の大きさや要素間のpxが表示されたら便利なのに……と思ったことはないだろうか?

今回は、そんな悩みを解決してくれるChromeの定規・グリッド測定プラグイン(アドオン)をいくつか紹介したい

スポンサーリンク

定規のようなプラグインが必要だと感じた理由

やはり、要素同士の距離であったり、要素を重ねて作る枠や帯の幅、アイコン・ボタンの大きさなどはその場で表示してくれた方がわかりやすいからだ。widthやheightを使って細かく指定し、ブラウザの画面のスクリーンショットを取り、それをペイントにコピーしピクセル単位で確認する……確かにそれでもできないことはないが二度手間三度手間だろう。

また、レスポンシブを念頭に入れてWebサイトのデザインをテストをしているときは、画面サイズによってレイアウトを変化させていくために、時としてピクセル単位での設計が求められる。そんな時に、いちいちスクショを撮ってペイントで確認して……とやると非効率だ。

よって、上記のような理由でこのようなプラグインがあったほうがいいなと私は痛感した。

Chromeの定規系プラグイン一覧

それではさっそく、私が現在使用しているプラグインを紹介していくことにする。また、プラグインの特徴などは大まかに「使いやすいか」「言語や開発状況、利用者数はどうなっているか?」「読み取り権限の有無や強度は?」の約3つに分けて記していくことにする。

Dimensions

伸び縮みする十字のターゲットで距離を測定し、視覚的にわかりやすく表すプラグイン。公式サイトはこちら

使いやすさ

プラグインのアイコンを押すことで起動・停止を行うことができる。ALT+Dのショートカットでも起動できると書いてあるが、私の環境では再現できなかった。

非常に単純に使うことができ、概要欄に記してあるように、画像・ビデオ・gifといったイメージからテキストの文字入力フィールド・ボタン ・アイコンのようなHTMLを組み合わせて作り上げたものなどなど、つまるところすべての要素をピクセルの色彩の変化で認識しピクセル単位で測定することができる

ただしこのプラグインの欠点は、 概要欄に書いてある通り色彩ですべてを認識している。つまりテキストやロゴといった色彩の境界線にターゲットが引っかかってしまう。とくにイラストや写真といった様々な色が使われている画像・文字がぎっしり書かれている要素の全体を輪郭に合わせて測ることは苦手である。また、ジャバスクリプトで表示されている要素の測定も苦手だ。

いちおう十字のグリッドが表示されているときに、ALTキーを押すことで色彩の変化を無視して画像などの要素そのものの大きさを測ることができるが、どうにも反応が悪いので扱いが難しい。私の環境では5回に1度成功したらいいほうで、すんなりと要素の大きさを測ることが出来なかった。

つまるところ、このプラグインは要素と要素の距離を測ることは得意だが、要素そのものの大きさを測ることは苦手としている。使う場面は、例えば投稿リスト間の距離や投稿記事とサイドバーの距離などを測定したいときなどに使うとよいだろう。

言語・開発状況・利用者数

英語のみである。

最終更新は2017年3月14日に行われており、おそらくこれが最後の更新である。現在のバージョンは2.0.5。プラグインの容量は16.51KiB。

利用ユーザーは約12万人

読み取り権限

無し。許可を要求されることは無い。

Page Ruler Redux

十字ポインターでペイントソフトの四角形のように距離を測ったり、また要素モードで要素そのものの大きさを調べることができるプラグイン

使いやすさ

プラグインのアイコンを押すことで起動・停止を行うことができる。 また、キーボードのショートカットも使用可能。

起動すると、マウスカーソルが十字カーソルに切り替わり、上の画像のようにChromeアドレスバー直下に「Width:」「Height:」「Left:」「Top:」「Right:」「Bottom:」のデータを表示するツールバーが現れる。また、ツールバー左端の赤い「<>」部分にカーソルを合わせることでElemetn Modeが表示され、それをクリックすることで要素モードに切り替えることや、右側の「Color:」でグリッドとグリッド内の色を変更することも可能だ。他にも、「Show Guides:」でグリッドの表示/非表示の切り替え右端の矢印アイコンでツールバーをブラウザ最下部に移動させたり、×(バツ)アイコンでプラグインの停止?(クエスチョン)アイコンを押すことでプラグインのガイドや開発に携わった人々やバージョン情報の詳細などを表示するページに飛ぶことができる。

特に便利だと感じた部分は、要素モードで要素を選んでいるとき、ツールバー内下にその要素の上下に重なっている要素も名称付きで表示されるので、そこから重なっている要素も選んで大きさを測ることができる。これにより要素を多層に重ねてデザインしている際、縁にカーソルをゆっくりと合わせて……などどストレスが溜まることは起こらない。

上の画像の左端下段のように、選んでいる要素に重なっている要素も表示され、それらを選ぶことができるのだ。また、右端下段のTracking ModeをONにすることで、また一度マウスカーソルを動かすと要素がピックアップされるようになる(要素を選んでクリックするとOFFになる)

なお、「Border Search:」については、使い方がよくわからなかった。申し訳ない。

ショートカット

このプラグインは、矢印キーとShiftキー・Ctrlキー・Altキーで、各種ショートカットを使うことができるのも魅力だ。ほかのプラグインと競合していなければ素早く使うことができる。

ここにPage Ruler Reduxのショートカットの一覧を記載しておく

  • ALT+Pでプラグインの起動・停止
  • 矢印キーで選択範囲を上下左右に1pxずつ移動
  • 矢印キー+Shiftで上下左右に10pxすつ移動
  • 矢印キー+Ctrlでグリッドを外側に1pxずつ拡大
  • 矢印キー+Ctrl+Shiftでグリッドを外側に10pxずつ拡大
  • 矢印キー+Altでグリッドを内側に1pxずつ縮小
  • 矢印キー+Alt+Shiftでグリッドを内側に10pxずつ縮小

また、ツールバー内のショートカットはこのようになっている。

  • 矢印キー上下で指定している枠内の値を1ずつ増減させる
  • 矢印キー上下+Shiftで指定している枠内の値を10ずつ増減させる

言語・開発状況・利用者数

言語は11ヶ国語。英語やロシア語といった言語がサポートされている。日本語には対応していない。

直近の更新は2019年2月28日バージョンは1.2.0。容量は180KiB。

利用ユーザーは約10万人

読み取り権限

閲覧履歴の読み取り」のみ。それ以外のデータを読み取ろうとはしていない。また、アドレスバーに表示されたアドオンアイコンを右クリックしてオプションを押す、もしくはこちらのURLから入ることで、このプラグインが収集した匿名化されたユーザー情報を送信するか・しないかを選ぶことができる

自分の情報を送信されるのが不快であると感じたならば、上の「Send Anonymous Usage Statistics:」のチェックは外すべきである。

「Do Not Show Update Tab:」については、新しいバージョンがインストールされるたびにタブが開かれてPage Ruler Reduxの情報・ガイドページに飛びますが、その機能を停止しますか?ということなので、うっとおしいと感じるならばチェックを入れて停止しておくべきだろう。

備考

どうやらこのプラグインは、自分達のプラグインを真似たプラグインに対して悩んでいると表明しており、このPage Ruler Reduxがオリジナルだと概要欄に記載して主張している。

個人情報の取り扱いについてはとりあえず信頼性が高いと思われるので、Page Ruler~系のプラグインはこのプラグインを導入したほうがよい。

特に、Page Rulerという似たようなプラグインは、利用者数は多いがところどころにPage Ruler Reduxのコピーが見て取れるので、気を付けた方がよいだろう。読み取り権限もアクセスしたウェブサイト上にある自分の全データの読み取りと変更」という、強力な読み取り権限を持っているため安易に許可することは危険である。


私は今はこの2つのプラグインを主に使っている。昔はペイントにスクリーンショットをコピーして一番細い線で測って……などと、とても非効率なことをやっていたが、現在ではそんな面倒な作業からは解放されている。

今回紹介した2つのプラグインがあれば、デザインの配置などで特に不自由することはないだろう。