4月入社の新社会人Webデザイナー必見！現場で使える　ブラウザカスタム法　～Firefox編～

こんにちは、ディレクターの永島です。

今回は4月入社のピカピカ新社会人Webデザイナー向け、
ブラウザカスタム方を伝授していきたいと思います。

春、新しい会社、新しい環境、輝いて見える先輩デザイナーの方たち…
これからデザイナーとしてブイブイ言わせたい！

でも、周りの勢いがすごすぎて、どうすればいいか
よく分からないからまずは言われたことを淡々とこなそう…
なんて考えていませんか？

否！

若さを持て余す前に、やるべきことがあります。

…それはブラウザのカスタム！

※厳密に言うと他にも色々ありますが今回はあえて、
ブラウザカスタムにフォーカスしたいと思います。

Webデザイナー1年生としてスタートしたからには、避けては通れないこの
ブラウザカスタム。具体的には何をするのかというと、、

ブラウザに『アドオン』という拡張機能をインストールして
カスタマイズすることを言います。

Firefox、GoogleChromeそれぞれにアドオンがありますが
今回はFirefoxの便利アドオンをご紹介していきたいと思います！

便利アドオン初級編
～作業効率化～

●FireGestures
https://addons.mozilla.org/ja/firefox/addon/firegestures/
便利度：★★★★★

マウスジェスチャ機能を追加することで、マウスだけでブラウジング操作ができるようになります。
マウス動作や設定機能が充実しているので多くのことをマウスだけでできるようになり
一度使うと、FireGesturesがインストールされていないFirefoxでもうっかりブラウジング操作をしてしまいます。

●Pearl Crescent Page Saver Basic
https://addons.mozilla.jp/firefox/details/10367
便利度：★★★★★

Web ページのスクリーンショットをjpg、pngなどの画像ファイルとして保存できます。
Flash コンテンツにも対応しており、実際のブラウザ表示画面のスクリーンショットから長ーいページのスクリーンショットまでボタン1つでスクリーンショットを保存することが可能です。
またファイル名、拡大倍率、画像形式 (PNG または JPEG) など、様々なオプションを備えているので便利すぎて結婚を申し込むレベルのアドオンです。

●SuperStart
https://addons.mozilla.jp/firefox/details/318228
便利度：★★★★★

ブックマークしたサイトをカテゴリ毎に整理できるアドオンです。
画面背景も自由にカスタマイズできるので、子供の写真を背景にしてニヤニヤするも良し、萌え系画像を背景にして自分のアイデンティティを確立するも良しで、自分好みに設定できるのも嬉しい。
カテゴリの表示数も変更できる上に、それぞれのカテゴリにどのサイトをブックマークしたかが一目で分かるようにサイトキャプチャが表示されているのもこのアドオンの便利ポイントのひとつです。

●Tab Mix Plus
https://addons.mozilla.jp/firefox/details/1122
便利度：★★★★☆

タブの複製や固定、クリック時の動作変更、閉じたタブの復元、自動再読み込みなど、豊富なオプションを取り揃えているので、例えば昨日検索したサイトを全部タブ保存しておきたい！なんていう時にとても便利。
Firefoxの機能と併用すればブラウザ上で開いているタブ毎ブックマークすることも可能です。
あまり調子に乗って大量のタブを保存していると、ブラウザ立ち上げ時に読み込みが重くなるので注意！

●Showcase
https://addons.mozilla.jp/firefox/details/1810
便利度：★★★★☆

『Showcase』はその名の通りショーケース！調子に乗って開いてる大量のタブからお目当てのタブを探し出すまで、ひとつづつ確認しないといけないのが面倒…を解消する、タブ大量オープナーの方々に使ってほしいアドオンです。
複数のタブやウィンドウを、ポップアップウィンドウ、タブ、またはサイドバーに、サムネイルとして表示することで、目的のタブを簡単に特定、管理できます。ただしこちらも『Tab Mix Plus』同様、あまりにも大量に開きすぎているとサムネイル読み込みに時間がかかりすぎてヤキモキすることになるのでタブ保存はほどほどにしておきましょう。

便利アドオン中級編
～Webデザイナー向け～

●Firebug
https://addons.mozilla.org/ja/firefox/addon/firebug/?src=search
便利度：★★★★★

Web ページの CSS、HTML、及び JavaScript をリアルタイムに編集、デバッグできる言わずと知れた基本中の基本のアドオン！ちなみにGoogleChromeバージョンもあります。

●Image Spider
https://addons.mozilla.org/ja/firefox/addon/image-spider/?src=api
便利度：★★★★☆

カーソルをロールオーバーすると、ポップアップで画像サイズが表示されるアドオン。
このバナー何pxで作ってるの？なんて時に、いちいち調べる手間がなくなるから便利。
ただし、CSSで背景画像になっている画像については対象外なのがたまにキズ。。

●FireMobileSimulator
https://addons.mozilla.org/ja/firefox/addon/firemobilesimulator/?src=search
便利度：★★★★★

Webサイトを、主要3キャリア（DoCoMo/Au/SoftBank）の携帯端末ブラウザをシミュレートして、PCブラウザ上でモバイルサイト表示できる優れもののアドオン。
Web制作をしていると何かとスマホで確認、ガラケーで確認、とデバックが大変ですがFireMobileSimulatorを使えばPCでスマホ画面の確認ができるので作業効率化も間違いなし！

●Web Developer
https://addons.mozilla.org/ja/firefox/addon/web-developer/?src=cb-dl-mostpopular
便利度：★★★★★

様々な Web 開発ツールを統合したアドオンです。
CSS や JavaScript を無効化した状態でWeb ページがどのように表示されるかを確認したり、フォーム、画像、その他あらゆる要素に関する情報を表示することができるのでデバック時は特に便利です。

便利アドオン上級編
～Webデザイナー・ディレクター向け～

●Page Hacker
https://addons.mozilla.org/ja/firefox/addon/page-hacker/?src=ss
便利度：★★★★★

Page Hacker は、現在開いているページをデザイン編集できちゃう魔法のようなアドオン。
個人的には一番おすすめです。例えばサイトのキャプチャーを取りたいときに、取り除きたい画像やテキストがあった場合いちいちPhotoshopを立ち上げて背景色に塗りつぶして…なんていう作業をWeb上で行えます。
なんだかピンと来ていない人は、まずは使ってみてください。惚れます。

●Html Validator
https://addons.mozilla.org/ja/firefox/addon/html-validator/?src=ss
便利度：★★★★☆

表示されたページの HTML をローカルで検証し、エラーと警告の数をステータスバーに表示するアドオン。
このアドオンはデザイナー向けというよりどちらかというとコーダー向けかもしれません。
HTMLファイルのエラーをチェック出来るのでコーディングのレギュレーションが厳しい時やコーディングが完了して最後にエラーチェックを行う時なんかにおすすめです。