フリーランスでWebデザイナーをやっているマヒです。そこそこのWebサイトなら作れます。仕事ください。
ということで今回は、Webデザイナーの私が愛用している最強ブラウザ「Firefox（ファイアフォックス）」の最強カスタマイズをご紹介します。Firefox歴5年でたどり着いた、最も効率がいい作業環境です。これからWebデザイナーを目指すという方には耳寄りな情報だと思いますよ！
そもそもなぜFirefoxなのか？
自分はゴリゴリのWebデザイナーというよりは、マークアップエンジニア気質なので、ブラウザ＝デバックツールという位置付けになります。なので、拡張できるブラウザでなければ仕事になりません。そうなると、Chrome（クローム）かFirefoxとなりました。
あとは、お気に入り（ブックマーク）機能もかなり使うので、デフォルトでツールバー管理しかできないChromeはダメでした。
WebデザイナーにオススメなFirefoxのアドオン（拡張）
Firefoxの最大の魅力こそがその拡張性。アドオンと呼ばれる拡張プログラムをガンガンインストールすることで、自分だけのブラウザにカスタマイズすることができます。アドオンには公式・非公式ありますが、ご紹介するアドオンはWeb業界では有名ですよ！
Firebug（ファイアバグ）
Firebug（ファイアバグ）は、HTML・CSS・Javascriptなどをブラウザ上で編集やデバックできる、超便利なウェブ開発ツールです。わざわざエディタを開く手間がないので、かなり作業スピードが上がります。
正直なところ、Firebugがなければ仕事になりません。むしろ、Firebugがあったから、Webデザイナーとして独立できるまでに成長できました。
アドオン検索からだと、Firebugの拡張版や類似アドオンが複数でてきますので、下記からインストールして下さい。
Firebugのインストールはこちら
※Firefox最新バージョンでは非対応になってしまいました
※公式では「開発ツール」へ移行するように促しています
FireMobileSimulator（ファイアモバイルシミュレーター）
FireMobileSimulator（ファイアモバイルシミュレーター）は、ガラケーやスマホのユーザーエージェントに切り替えて表示デバックができるアドオン。
レスポンシブ以外でスマホ対応している時は、とりあえずFireMobileSimulatorでチェックしています。まれに、FireMobileSimulatorでも反応しない場合もあるので要注意です。
FireMobileSimulatorのインストールはこちら
※Firefox最新バージョンでは非対応になってしまいました
ColorZilla（カラージーラ）
サイトで使用している色を知りたい時に便利なアドオンがColorZilla（カラージーラ）。抽出したい色にポインターを当てるとカラーコードがコピーされます。コピーされるカラーコードは16進数の＃有り無しやRGBなども選べるのでPhotoshopで使う時もシームレス。
ColorZillaのインストールはこちら
Dust-Me Selectors
Dust-Me Selectorsは、機能していない無駄なCSSを自動で探し出してくれる優れもの。しかも「Clean」のボタンを押せば、無駄なソースが削除されたCSSがダウンロードできます。
ただし、一つのCSSでレスポンシブウェブデザイン対応している場合だと、スマホのスタイルシートが無駄とみなされる場合もあるので要注意です。
Dust-Me Selectorsのインストールはこちら
※Firefox最新バージョンでは非対応になってしまいました
Page Saver WE screenshot capture tool
画面キャプチャならPage Saver WE screenshot capture tool。ワンクリックでどんな縦長のサイトでも、ページの上から下まできっちりキャプチャしてくれます。
Page Saver WE screenshot capture toolのインストールはこちら
Abduction!
部分的なキャプチャならAbduction!が便利。バージョンが古いので一部機能に不具合がありますが、HTML要素別のキャプチャや、キャプチャエリアの変更などが視覚的に行えるので気に入っています。
Abduction!のインストールはこちら
※Firefox最新バージョンでは非対応になってしまいました
再起動ボタン
Firefoxは優れた拡張性ゆえ、ブラウザの中でも最もメモリを使うブラウザでもあります。ずっと起動させているとどんどんメモリが増えて、ブラウザが落ちる原因にも。
ブラウザを軽くするにはFirefoxの再起動が一番効果的なのですが、タブを全部閉じてしまうと作業再開時に面倒ですよね。そこでこの再起動ボタンが超便利。ワンクリックでタブ情報を記憶したままFirefoxを再起動してくれます。
再起動ボタンのインストールはこちら
※Firefox最新バージョンでは公開終了したようです
Firefoxを自分流にカスタマイズする
必要なアドオンがインストールできたら次はFirefoxのインターフェースをカスタマイズします。右上の「三」のようなアイコンから「カスタマイズ」を選択。ドラック＆ドロップで視覚的にツールバーやアイコンを動かせるので、自分の好みにカスタマイズしましょう。
左下の「タイトルバー」はページのタイトルが確認できるので表示。「ブックマークツールバー」は頻繁に閲覧するサイトのブックマークが表示されるので「表示する」にします。「検索」は「アドレスバー」で兼用可能。
カスタマイズのポイントは極力シンプルにすること。視覚的に使いやすくなるだけでなく、メモリの節約にもなります。
SyncでFirefoxを同期させる
自分はWindowsのデスクトップとMacのノートPCを使用しています。こういった場合にSyncを有効にしておけば、全く同じ環境でFirefoxを使うことができます。
Syncを有効にするにはメールアドレスとパスワードの設定が必要ですが、まだ使ったことない人は絶対に使うべきです。仕事効率が格段に上がります。
設定情報やお気に入り（ブックマーク）だけなく、インストールしたアドオン、カスタマイズも同期されます。さらにクッキーや入力履歴、パスワードも共有されるのでかなり便利。
近日中にiPhoneでFirefoxアプリがリリースされるそうなので、さらにSyncが便利になりそうですね。
Firefox起動ページは空白ページが最速
Firefoxを起動した時にYahoo!トップページにしていると起動が遅くなります。あの情報量はみててワクワクしますが、読み込みに数秒かかり、それが積み重なって数時間のロスになります。
Googleトップページでもいいのですが、Google検索はパーソナライズ検索が使われているので、自分はめっきりYahoo!検索派です。なので、ブラウザの「家」マークをクリックした時に表示されるホームページはYahoo!トップページに設定しています。あとはアドレスバーの検索エンジンもYahoo!にしています。
新規ウィンドウはタブで開く
別窓で開くリンクは全てタブで開くように設定しています。その方が画面もスッキリするし、メモリも節約できます。
作業効率が格段に上がるブラウザのショートカットキー
ブラウザで頻繁につかう操作はショートカットを使いましょう。ちなみにご紹介する大抵のブラウザで共通するショートカットキーなので、覚えておいてそんはありません。MacOSは「Ctrl」を「command」に置き換えてください。
- Ctrl ＋ B ：お気に入りサイドバーの表示・非表示
- Ctrl ＋ D ：お気に入り（ブックマーク）に追加
- Ctrl ＋ F ：文字検索
- Ctrl ＋ R ：ページ更新
- Ctrl ＋ Shift ＋ R ：ページ更新（キャッシュクリア）
- Ctrl ＋ Shift ＋ Delete ：履歴削除（使う時は要注意）
- Ctrl ＋ N ：新規ウィンドウ
- Ctrl ＋ T ：新規タブ
- Ctrl ＋ マウスホイール ：ズームイン・ズームアウト
- Ctrl ＋ 0 ：ズームのリセット
- Shift ＋ マウスホイール ：ブラウザバック・進む
まとめ
これだけ自由にカスタマイズができるのはFirefoxだけだと思います。速度はChromeが断然早いのですが、仕事につかうならFirefoxしか考えられません。
Firefoxはちょっととっつきにくいブラウザでもありますが、一度使い始めれば仕事スピードが上がること間違いありません。特にWebデザイナーにはオススメですよ。
この記事のコメント