こんにちは。デザイナーの藤田です。突然ですが、皆様は普段、どのブラウザを利用していますか？

私はFirefoxを利用しております。

理由としては「要素の検証」が他の主要ブラウザと違い、検証している箇所をマウスオーバーするのではなく、クリックでアクティブな箇所を選択できる点が気に入っており、一方のGoogle Chromeでは初期設定のフォントがWindows環境下だとギザギザしているのが嫌だったからです。さらにWindows環境でもスクロールがスムーズ！

ということで、今回の記事はFirefoxユーザーの私がWEB制作をする上でおすすめのアドオンをご紹介いたします。

ブラウザにこだわるWEBデザイナーにおすすめ！Firefoxのアドオンまとめ

Pearl Crescent Page Saver Basic

https://addons.mozilla.jp/firefox/details/10367

Firefoxで閲覧中のサイトのスクリーンショットを撮ることができるようになる拡張機能。
気に入ったサイトやバナーなどのキャプチャーを、アイコンをクリックするだけで簡単に撮ることができるのでかなり重宝しております。

林家ペー＆パーもびっくり！

ColorZilla

https://addons.mozilla.org/ja/firefox/addon/colorzilla/

ブラウザに表示されたページの色をスポイトで拾うことができるアドオンです。
色使いが参考になると思ったときに、簡単にカラーコードを表示してくれるので、こちらもかなり便利です。

Measure it

https://addons.mozilla.org/ja/firefox/addon/measureit/

ブラウザに表示されたページの縦横のサイズを計測できるアドオンです。

気に入ったサイトのグリットなどのサイズを、要素の検証をしなくても手軽に計測することができます。
何気によく使います。

Evernote Web Clipper

http://evernote.com/intl/jp/webclipper/

WEB上のさまざまな情報を、アイコンをクリックするだけでEvernoteにクリップできるようになるアドオンです。
Evernoteを使うなら、ほぼ必須のアドオンです。

Fasterfox Lite

https://addons.mozilla.org/ja/firefox/addon/fasterfox-9148/

Firefoxを高速化するためのアドオンです。細かいカスタマイズをすることで、かなりの高速化が期待できます。

カスタマイズが難しい場合は上記の画像のようにプリセットの設定を「ターボチャージャー」にしておくだけで速度がアップします。
私自身「ターボチャージャー」の設定だけでもかなり速度を実感しております。

Link Checker

https://addons.mozilla.org/ja/firefox/addon/linkchecker/

ページのリンク切れをチェックできるアドオンです。正常ならリンクが緑色になり、リンク切れの場合はピンク色に、アクセス制限がある場合などは黄色に変化します。

FireGestures

https://addons.mozilla.org/ja/firefox/addon/firegestures/?src=api

私はかざぐるマウスを利用しているのでインストールしておりませんが、右ボタンを押しながらマウスを動かす（マウスジェスチャー）だけで「前のページに戻る」や「タブを閉じる」といった操作を実行できるアドオンです。

Add-on Compatibility Reporter

https://addons.mozilla.org/ja/firefox/addon/add-on-compatibility-reporter/

Firefoxのバージョンアップによって使えなくなってしまったアドオンを強制的に再使用できるようにするアドオンです。

アイコンもなんか強そうでかっこいいですね～！

FireMobileSimulator

https://addons.mozilla.org/ja/firefox/addon/firemobilesimulator/

当たり前に使いすぎており、あやうく紹介しそびれるところでしたが、FireMobileSimulatorは簡単にモバイル端末をシミュレートできる拡張機能です。
FireMobileSimulatorをインストールした後に「ツール」→「FireMobileSimulator」→「UAを切り替えたい端末を選択する」と、選んだモバイル端末をシミュレートしてブラウジングができます。(上記画像はFireMobileSimulatorと要素の調査機能のレスポンシブルデザインモードを併用しております)

おまけ プラグインを無効化・削除する場合

おまけとしてプラグインを無効化・削除する手順を紹介しておきます。

1. Firefoxウィンドウ上部のFirefoxボタンをクリックし、アドオンを選択すると、アドオンマネージャのタブが開きます。
2. アドオンマネージャのタブで、拡張機能またはテーマパネルを選択します。
3. 削除・無効化したいアドオンを選択してください。
4. 削除・無効化ボタンをクリックします。
5. 今すぐ再起動 をクリックします。開いていたタブは Firefox の再起動後にも再び表示されます。

まとめ

今回紹介したアドオンは便利なものばかりなので、ぜひ皆様もご利用ください。
かなりメジャー所を紹介したので、ご存知のものばかりでしたら、申し訳ございません。
また、冒頭で触れたFirefoxの要素の検証はこちらの記事に詳しく書いておりますので、ご参照ください。

参考：開発者ツールは「Firebug」より「要素を調査」を使おう

http://creatorclip.info/2014/02/firefox-developer-tool/