SitePoint: New Articles, Fresh Thinking for Web Developers and Designers

Sean P Aune氏がSitePointにおいて19 Firefox Add-ons For Designersのタイトルのもと、Webデザイナ向けのFirefoxエクステンションを紹介している。Webデザインの作業をおこなうにあたり、複数のプログラムを起動して使うのではなく、1つのプログラムで複数の処理を簡単に行いたいという趣旨の内容になっている。紹介されているエクステンションは次のとおり。

カラーツール

  • ColorSuckr (画像から代表的な色を12色取り出して、そのデータからカラースキーマを作成する)
  • ColorZilla (ページのみならずブラウザの任意のポイントのカラーをピックアップするツール。任意の2点間の距離も測定できる)
  • FirePalette (Firebug CSSパネルにカラー選択ツールを追加するエクステンション)
  • Palette Grabber (任意のページからカラーパレットを作成する。パレットはPhotoshop、Flash、PaintShop Pro、GIMP、Adobe Fireworks、Mac OS X Color Pickerなど複数のデータ形式で出力可能)

計測ツール

  • GridFox (ページの上にグリッドを表示させるツール)
  • MeasureIt (任意の要素に対してルーラを表示させるツール)
  • Pixel Perfect (オーバーレイを追加して開発中の成果物と目標とするデザインがどの程度ずれているかを確認するツール)

スクリーンショットツール

  • Abduction! (ページの特定の部分または全部を画像として保存する)
  • FireShot (表示されているページやページ全体のスナップショットを保存したり編集する。JPEG、PNG、GIF、BMP形式での保存が可能)
  • Image Zoom (画像のズーム機能)
  • Picnik (選択した画像をPicnikに直接送り出す機能)
  • Pixlr (選択した画像をPixlrに直接送り出す機能)
  • Screengrab (ページ全体、見えている部分、選択した部分を画像として保存したりコピーする機能。JPEGとPNGに対応)
  • Talon (ページを画像として保存するとともに直接Phoenixに送り出す機能。クリップボードへのコピーも可能)

そのほかのツール

  • Firebug (Webページ/アプリ開発エクステンション。レイアウト・CSSインスペクタは特にWebデザイナにとって手軽に使える機能)
  • Font Finder (特定の要素のCSS情報を表示する。フォントを特定したい場合にとくに便利)
  • View Dependencies (ファイルの依存関係をツリー表示するツール。"Page Info"ダイアログに新しく"Dependencies"というタブが追加される)
  • Web Developer (インスペクタ、CSS無効化、グラフィック処理などデザインに活用できる便利なツール)
  • Window Resizer (異なるディスプレイ解像度へ簡単に切り替えるツール。640×480、800×600、1024×768、1280×800、1280×1024、1600×1200に対応)