• LIGの広告成功事例
WEB

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

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

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

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

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

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

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

Pearl Crescent Page Saver Basic

blog画像2

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

林家ペー&パーもびっくり!

ColorZilla

blog画像3

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

Measure it

blog画像4

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

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

Evernote Web Clipper

blog画像5

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

Fasterfox Lite

blog画像6

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

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

Link Checker

blog画像7

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

FireGestures

blog画像8

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

Add-on Compatibility Reporter

blog画像9

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

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

FireMobileSimulator

blog画像10

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

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

blog画像11

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

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

まとめ

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

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

この記事を書いた人

藤田
藤田 デザイナー 2013年入社
デザイナーの藤田です。 野球とビールと猫が好きです。 ジョブズの「来る日も来る日もこれが人生最後の日と思って生きるとしよう。」という言葉が好きです。言葉の通り毎日、全力投球で頑張っております。 どうぞ、よろしくお願い致します。