使い方は簡単だ。インストールが済むと、Firefoxの[ツール]に[Pencil Sketching]という項目が追加される。Pencilの起動はここをクリックしよう。

プロトタイプを作るための基本操作は、左側に並んでいるGUI部品を右側のキャンバスにドラッグ＆ドロップで配置するだけだ。Pencilにはあらかじめテキストやレクタングル、ボタンといったGUI部品が用意されている。最初はとりあえず必要な部品をどんどん適当に配置していけばいい。

配置した要素はマウス操作で拡大・縮小や移動ができ、テキストボックスやボタンなどの場合は、ダブルクリックで文字の入力・編集が可能。部品を選択して右クリック→[Properties]すると詳細な見た目の変更もできるので、ワイヤーフレームだけでなく、簡単なモックのデザインであればPencilだけでも作業が済む。

もう1つ、Pencilのよい点は、1つのプロジェクトで複数のページを作れること。たとえば、「問い合わせフォーム」のプロトタイプを作る場合、「ロード中」「送信前」「送信後」といったページ遷移を一度に作れる。ページを追加する際は既存のページをコピーしてそれを元に作業すればいいので楽だ。

作成したファイルは独自形式で保存できるほか、PNGに出力する機能もある。プロトタイプをメールで送って確認をとったり、他のグラフィックツールに読み込んで素材を作りこむといった用途に使える。

Pencilは「プロトタイプを作る」というシンプルな目的に特化しながらも、多機能で便利なツールだ。Firefox 3をすでにお使いであればインストールも手軽。ぜひ一度使ってみよう。

All-in-One Sidebar
サイドバーにアドオン整理・ダウンロード状態などを表示するものです。
サイドバーをフル活用したい方にお勧めです！

関連記事：
『できるポケット＋ Firefox』All-in-One Sidebar

Stealther
ステルス化できるアドオン。
GoogleChromeでいう「シークレットウィンドウ」化することができます。
履歴やクッキーなどを一時的に保存しないようにできます。

関連記事：
Firefoxをステルス化する拡張「Stealther」

Webdeveloper
Web制作に必須！
ブロック要素ごとに枠で囲えたり、CSSの編集などが行えます。
昔よく使ったなぁ～～。

関連記事：
Web Developerでウェブサイトを構築・デバッグ

Instapaper
アドオンというか、ブックマークレットですね。
いわゆる「あとで読む」と同じ機能です。

関連記事：
ウェブ閲覧の ToDo リスト、Instapaper

FireFTP
FTPクライアント機能をFirefoxに盛り込むことができます。

関連記事：
FTPツール要らず! Firefox 3のアドオン「FireFTP」で、楽々FTP

Greasemonkey
おなじみのグリースモンキーです。
ウェブページごとにあらゆる拡張機能を追加できるアドオン。

関連記事：
Greasemonkey入門 ～よくわかるグリースモンキーの使い方 ～

Tab Mix Plus
有名なアドオン。タブを超カスタマイズできます！

関連記事：
Tab Mix Plusでどんどん開け！

User Agent Switcher
ユーザーエージェントを変更できるアドオン。

関連記事：
Firefox + user agent switcher編

IE View
指定したページをIEで自動的に開くようにできます。

関連記事：
「Firefox」で現在表示中のページやリンク先ページをIEで開き直す「IE View」

IE Tab
描画エンジンをIEに変更します。さきほどのIE Viewとほぼ同じ。

関連記事：
Firefoxのタブ内でIEのレンダリングエンジンに変更

Sage
FirefoxのRSSリーダーを拡張できます。
ブラウザでRSSを読む習慣のある人は是非いれてみてください！

関連記事：
Firefox 3用RSSリーダー「Sage-Too」を使ってみる！

HideBad
ボスが来た！そんなときに閲覧中のページをすべて消すアドオンです。
閉じたときに、履歴なども同時に消去してくれる機能付き！

関連記事：
開いているタブやFirefoxのあらゆる情報を瞬時に消すことができるアドオン「hideBad」

Download Statusbar
ダウンロード中の進行状況が一目でわかるアドオンです。
何気にずっと使ってますｗ

関連記事：
Download Statusbar ● ダウンロード状況を表示する

DownThemAll
ページ内の画像などを一括保存したいときに使います。
画像収集には欠かせない必須アドオン！

関連記事：
「DownThemAll！」でFirefoxでのダウンロードをパワーアップ

FoxyTunes
Firefox上で音楽プレーヤーを操作できるアドオン。
わざわざiTunesを起動しなくても音楽流せますよ！
音楽プレーヤーは多数対応してます。日本語化もされています。

関連記事：
FoxyTunesがかなりパワーアップしてる件

Gmail Space
Gmailをストレージ代わりに利用できるアドオン。
知らんかった～いれてみようかなぁ。

関連記事：
FirefoxでGmailをストレージとして使う「Gmail File Space」

StumbleUpon
サイトを評価して、みんなで共有する。
そして、自分に合ったサイトが表示されるという嬉しいサービス！

関連記事：
StumbleUponがおもしろすぎる

NoScript
スクリプトをブロックしていけるアドオン。
かなり人気のアドオンです！

関連記事：
NoScript:Wikipedia

BugMeNot
会員登録しないで、サイトにログインできるアドオンです。

関連記事：
会員登録無しでサイト利用する方法 - Bugmenot.com

Mouse Gestures
マウスジェスチャーです。
マウスで線を引くだけでショートカットできます。

関連記事：
Crohn Life - Mouse Gestures

Fast Video Download
YouTube, Dailymotion などのサイトから動画を落とすことができるアドオンです。

関連記事：
動画共有サイトからすばやく動画をダウンロードできるFirefoxアドオン- Fast Video Download -。

ScribeFire
ブログ記事を執筆できるアドオン。

関連記事：
FC2ブログの投稿が簡単にできるFirefoxアドオン「ScribeFire」

BetterSearch
検索結果にサムネイルを載せることができます。

関連記事：
Firefoxの拡張機能「BetterSearch」

FlashBlock
Flashが勝手に動かないようにしてくれます。
クリックしたらFlashが見れるという仕組み。

最初に役立つTipsリンク
インストールしたら行う設定， タブの閉じるボタンが邪魔な場合， 意外と知らない10の基本機能
結構使える10の基本機能， ショートカット（CHEAT SHEET）， まとめてブックマーク
メニューバーカスタム メモリ節約１，節約２ Firefoxの壁紙１・壁紙２
天気 複数同時起動（こちらも）

最初に入れるといい
Firefoxプラグイン 解説など
Google Browser Sync 　画期的！「Cookie」「パスワード」「ブックマーク」「履歴」「最後に開いていたタブ情報」をGoogleにバックアップし複数のPC間で同期。→使い方。
ただ、一部同期上の問題あり。設定や拡張のバックアップはまだか？
嫌な人は、USBメモリやiPodで持ち運べるFirefox Portableが便利！
※パスワード保存は「FireMaster」や「Password Exporter」も参考まで。
※Browser Syncにはアップロード容量の制限があります。
Greasemonkey 　Firefoxでサイトの体裁を変える必須拡張。→解説
導入できるGreasemonkeyスクリプトはこちらで探せます。
スクリプトは「ツール」の「Manage User Scripts」で管理＆削除可能。
なお、Gmail2.0では正式サポートされていて、開発者用のAPIが用意されています。Gmail Greasemonkey API の使い方はこちら（開発者用）。

Firefox 用
Google ツールバー 　ブックマークやGmail送信、Google Docsなどが使えてほぼ必須ツール。
Officeファイルをダブルクリックで開いたり、GmailにSSLアクセスするテクニックもあります。
なお、ブックマーク登録は、サイドバーに呼び出すGMarks（GReader連携）を使ったり、ブックマークレット（メモ欄付きもある）を使う方法もあります。
CustomizeGoogle 　Gmail含め、Googleを使う上で便利な拡張。→解説
ただし広告削除などによりサービスに不具合が生じる場合あり。
テーマ 　見た目を好みのデザインに変えられます。
Colorful Tabs 　タブをカラフルにして気分は明るく！！ →解説？
All-in-One Gestures 　愛用されてる拡張の一つ。右クリックしながら描く図形のカタチでブラウザコントロール。→解説　例えば左に描くとバック、上に描くと新タブ表示。
Tab Mix Plus 　愛用されてる拡張の一つ。リンクを全てタブで開くなどの細かいタブの挙動を設定できるて便利さにはまっている人が多い。→解説
Japanize 　海外の便利なWebサービスを日本語化する拡張。かなり便利。
Googleの最新の英語サービスも日本語化される。
Google x はてブ 　はてなユーザが多いようなので紹介。
Google検索にはてなブックマーク数を表示するGreasemonkey →解説
これとは別に、はてなブックマークカウンタも便利。
人気のFirefox拡張＋
「Firefox」プラグイン特集 　それぞれ便利なFirefox拡張がまとめられています！
※入れすぎると重くなったり干渉する場合があります。
→遅くなった時は高速化用の拡張も！
（TouchUpWeb） 　たまにあるIE専用サイトを正常表示してくれる。Greasemonkey必須。
→ 解説記事はこちら。
（Useful_passwd） 　忘れた時にパスワードを表示させるGreasemonkey→解説こちら
Gmailで使える
Firefoxプラグイン等 解説など
Better Gmail 　Gmailで使える人気プラグインをパックした拡張。解説はこちら。
かなりオススメ。最新機能を含めたまとはこちら。日本語化はこちら。
SeaMonkeyサポート。こちらの記事も参考に。
以降Better Gmailに含まれるプラグインは黄色の背景色で区別。
Better Gmail 2 　Gmail新版のGmail2.0（英語）で使えるBetter Gmail。解説はこちら。
ただし、今のところ対応が鈍い。設定画面がおかしくなる場合はこちら。
gAttacher 　Gmail専用ファイル便。 大容量ファイルの添付に便利。震源地はこちら。
Gmail File Space
（GSpace） 　GmailをオンラインストレージにできるFTPライクの拡張。→解説，表示例
Gmail Counter 　Gmail上部に容量カウンターを設置するGreasemonkey→解説
Gmail Quota Graph 　Gmailの容量と使用量を蓄積しグラフ表示するGreasemonkey→作者サイト
dragdropupload 　Drag&DropでGmailにファイル添付できる拡張。→解説？
Gmail以外にもファイル参照がある所なら何処でも利用できます。
Gmail Notifier 　Firefox用Gmail新着チェッカー。ブラウザだけで使用できる。→表示例
ステータスアイコンを変えるCSS（Status bar icons）があります。
Gmail Manager 　Firefox用Gmail新着チェッカー。複数アカウント対応。→解説，表示例
独自ドメインのGoogle Appsに対応。
Gmail2.0用バージョンはこちら。見出しフォントサイズを変更する方法。
Firefox3b2で使えるようにするパッチが出ています。
GTalk Emoticons 　Gmailチャット用の顔文字拡張。解

これはデザイナーのみならず導入必須のソフトウェアと言えそうだ。

Webサイトを作る際には、モックアップが必要になる。それをベースにして「ここをこうしよう」「次はどこに遷移させよう」といった議論が可能になる。頭の中だけではイメージがはっきりせず、意見も出しづらい。

ドラッグアンドドロップでモックアップを作成できる

そんなモックアップを作成しようと思ったら、紙やHTMLオーソライズソフトウェア、画像編集ソフトウェアを使うことが多かった。だが画像編集ソフトウェアではチェックボックスやテキストボックスが作りづらい、HTMLオーソライズソフトウェアではデザインの微調整が面倒、紙では重ね書きしづらい…とそれぞれに欠点があった。そこでこれを導入してみよう。

今回紹介するオープンソース・ソフトウェアはPencil、Firefoxアドオンとして動作するモックアップ作成ソフトウェアだ。

個人的にはモックアップの作成にBalsamiq Mockupsを使っている。これは手書き風のポップな画面を作るのにはぴったりだ。そしてPencilはちょっと正確な画面を作るのに適している。何よりオープンソースであり、無償だ（Balsamiq Mockupsは有償）。

Quoted: Firefoxは高速なブラウザだが、拡張機能によってウェブ開発者やデザイナーのための強力な開発ツールに変えることもできる。この記事では、最初に試してみるべき10のアドオンを紹介する。 - builder by ZDNet Japan

特集 Firefox 3とFirebugで始めるJavaScript開発 堀邦明 Firefox 3のリリースが2008年6月頃になると発表されました。Firefox 3より，JavaScript 1.8に対応され，より洗練されたJavaScriptを利用することができます。また，高速化されたJavaScriptの処理により，あなたのJavaScriptによる開発を手助けしてくれることでしょう。 本連載では，この最新のFirefox 3と，JavaScript開発でのデファクトスタンダードとなりつつある，Firebugを組み合わせた開発手法について解説していきます。 シンプルかつ効果の高い情報漏えい対策 ファイルの暗号化，管理者によるファイルのアクセス権限制御。簡単な設定で効果的な情報漏えい対策を！ テストエンジニアのキャリアプランを支援します！ 第3回　Command Line APIとその活用，各タブからのデバッグ方法 Command Line API Command Line APIを利用してHTMLを解析する 関数呼び出しをmonitorで監視する monitorEventsでイベントを監視する XML ...

本日は、ケータイサイトの開発に便利なFirefoxアドオン「Modify Headers」をご紹介します。
ケータイ向け開発を行っていると、ログイン部分のプログラム作成などで、端末IDを取得したいケースがあります。
エミュレータには端末ID出力のための機能がついていたりするのですが、そのためにいちいちエミュレータから操作するのは面倒です。
「Modify Headers」を使うことで、HTTPヘッダを指定の通りに書き換えることができるため、携帯電話になりすまし端末IDを出力することができます。