ウェブページにPhotoshopライクな方法でガイド線を引くことができるFirefoxアドオン「FoxGuide」

Photoshopでコンテンツの配置などを行う際に、ガイド線を表示すれば便利なことがあります。

ウェブページデザインなどを行っている方なら、この機能を使うことで全体のレイアウトを構成したりすることもできて便利ですね。

ブラウザで今見ているページでも、このような機能を使うことができれば、同じようにレイアウトを組み立てる際の目安になるかもしれません。

そんな機能をFirefoxに与えてくれるアドオンが「FoxGuide」です。

「FoxGuide」は、Firefoxで表示しているウェブページ上で、Photoshopライクな方法でガイド線を簡単に引くことができるというアドオンです。

アドオンをインストールすると、ステータスバーに専用のボタン　　が付与されます。

デフォルトでグレーアウトしているこのボタンをクリッすれば、機能を有効にすることができるようになっています。

機能が有効になるとコントロールパネルが表示され、ブラウジングスペースの上部、および左端にルーラーが表示されるようなります。





コントロール部ではルーラーの不透明度、ガイド線の色が指定できるほか、（Hex部に直接カラーコードの記入も可）、現在のマウス位置が表示されるようになっています。





ここでガイド線の色を指定し、ルーラー部にマウスを乗せるとガイド線がドラッグできるようになり、マウスを離した位置にガイド線を置くことができます。





水平・垂直のガイド線は何本でも引くことができ、このガイドはウェブページを再訪問しても保持されるようになっています。

*ルーラーは最大10000pxまで表示されますので、かなり長めのページや幅の広いページにも対応することができます。

また、ページコンテキストメニューにも[FoxGuide]という項目が追加され、ここからは引いたガイド線の全消去（Reset）とコントロール部の表示・非表示ができるようになっています。





ウェブサイトオーナーやデザイナーさんには役立つことがあるかもしれませんので、興味のある方は使ってみてはいかがでしょうか。


ダウンロード：FoxGuide（Add-ons for Firefox）


＜関連記事＞


■閲覧ページの各部サイズを計測する「MeasureIt」

■Firefoxのブラウズ画面にラインを自由に書き込める「Firedoodle」

■ダミーイメージを簡単に作成することができるFirefoxアドオン「Dummy Images」