こちらの記事には最新のまとめ記事があります。紹介している拡張機能の数も増えましたので、是非こちらをご覧ください。

Fireworksを使うひとつ理由は制作効率アップという人も多いと思います。今日はさらなる効率アップのために自分のFireworksに入っている拡張機能をすべて紹介します。

目次

忙しい人のためのしばっちが使ってよかっと思った拡張機能ランキング

操作が楽になる系

オートシェイプ、テクスチャ、スタイル系

おまけ・Fireworksを少しでも軽く使うポイント

インストールした拡張機能

文字やオブジェクトの「よく使う設定」を集めた「PI_Utility」

普段よく使う文字サイズやMSゴシックや新ゴなどを1クリックで設定できる拡張機能です。デバイスフォントに使うMS Pゴシックやバナーに使いやすい新ゴの設定ができたり、文字サイズもよく使うものが入っているので最近はこれで仕事の効率が上がっているような気がします。個人的に今もっともおすすめな拡張機能です。

配布&使い方ページ

ガイドがページをまたいで引けるようなったりする「Guides」

度々とりあげてますが、ガイドをページ間でコピペできたり、オブジェクトの四辺のガイドを引けたりする拡張機能です。最初のレイアウトを決めるときに便利です。

配布ページ

テクスチャやパターンを選ぶときに効力絶大「PI_TextureList」

テクスチャやパターンを選ぶとき、通常であればプルダウンでテクスチャ名にマウスを乗せてどんな模様かを確認してテクスチャやパターンを選びます。間違えて狙いのテクスチャのひとつ下のテクスチャを選択してしまったときの絶望感はたまりませんね。。。そんなお悩みを解決するのがこの拡張機能。テクスチャの一覧を見ることができ、テクスチャをクリックすると、選択したオブジェクトにそのテクスチャが乗るようになります。

配布&使い方ページ

スライスに連番が触れる「SequenceNumSlice」

スライス名を機械的に入れるようなときに便利な拡張機能です。とくにニュース用の画像のように文脈に依らない画像名を作るときには便利です。クリックの順番だけで、スライス名に連番を振ったスライス名をオブジェクトに挿入してくれます。

配布&解説ページ

キーボードショートカットでスライス名の変更が簡単に「1 Slice Name Changer」

スライス名をダイアログ形式で変更できるコマンドです。インストール後、ショートカットを割り当てると非常に便利です。スライス時にはこれがないと仕事ができないぐらいに使っている拡張機能です。

配布&使い方ページ

フォント選びがめちゃくちゃ簡単に「PI_FontList」

フォントをたくさんインストールして、フォントを選ぼうとプルダウンメニューから探す必要がありますが、これがしこたま面倒ですね。PI_FontListを使うと先のテクスチャと同様にパネルとしてフォントリストが出てくるので、落ち着いてフォントを選ぶことができます。またお気に入りのフォントリストも作ることができますので、自分でよく使うフォントリストを作っておいたり、特定の案件でよく使うものと区別して使い分けやすくできますね。

配布&使い方ページ

グラデーションの色調整を数値で調整できるようになる「Gradient Panel」

Fireworksのグラデーション拡張です。数値でグラデーションのスライダーを管理できるようにできるので、色が急激に変わるグラデーションも簡単に作れるようになります。
この拡張機能を開くとテキストの入力がおかしくなるので、細かいグラデーションを作るときだけ使うのがおすすめです。

配布ページ

オブジェクト名、スライス名を置換する「ReplaceName」

オブジェクトやスライス名を置き換えることができるパネルです。スライス名に「gnavi_」みたいな接頭辞を付け忘れてしまったときなどに、便利です。

配布&使い方ページ

テキスト入力が簡単に!「PI_TextGenerator」

テキストオブジェクトを作る拡張機能です。モックを作るときにはテキストを入力することがありますが、こちらで作るとタブと改行で区切ってそれぞれ違うオブジェクトで作り上げてくれるのです。グローバルナビみたいに文字が横並びになっているもの、簡単なテーブルを作るときにも重宝しています。

配布&使い方ページ

オブジェクトの種類で選択を絞り込み「Select Manager」

沢山のオブジェクトを選択したあとで、オブジェクトの種類を基準に絞り込みができる拡張機能です。Fireworksではオブジェクトをカンバスから直接選択することがかんたんにできる便利な面がある一方でレイヤーパネルは煩雑になりがちになりがちです。一区切りついたタイミングでレイヤーを整理すると思いますが、そのときによく使います。

配布&使い方ページ

どんなサイトにも使えそうな汎用性の高いテクスチャ144枚「PI_TextureCollection」

Fireworksユーザーならテクスチャーは当たり前のようにつかいますが、拡張機能として144枚を一括でインストールすることができます。

配布ページ

癖のない矢印が便利「Arrow Iconset」

矢印アイコンを集めた拡張機能です。案件ごとに矢印やリストアイコンを1から作るのは面倒…。インストールをすると、共有ライブラリとして矢印アイコンが追加され、ドラッグアンドドロップで矢印をカンバスに配置することができます。

配布ページ

黄金比ガイドをが作れる「Geometry Guides」オートシェイプ

黄金比を表示するオートシェイプです。意味もなく幅と高さを決めないといけないときに使っています。

配布ページ

アタリ画像を簡単に作ることができる「Placeholder」オートシェイプ

商品写真がこないけど、画像はサイズはこの程度に抑えておきたいということが制作しているなかでよく起こります。この拡張機能はアタリ画像を一発で作ることができます。さらにスゴいところは幅や高さを変更したら自動的に中に入ってるサイズの文字も一緒に変わります。ECサイトやCMSでテンプレートのデザインをするときに便利です。

配布サイト

ランディングページのデザイン作成時に便利なFireworks スタイル135

ボタンのデザインって悩みますよね。とくに納期がカツカツでやってくるランディングページに関しては、ビジュアルに時間をかけてしまって肝心なボタンの部分がおざなりになってしまうことも。そんなときに便利なのがこちらのスタイル。ランディングページによくあるわかりやすいボタンを1クリックで作ることができます。600種類もあるとどれを使おうかって迷ってしますね。拡張機能ではないのですが、とっても便利だったので紹介させてもらいます。

インストール方法&配布ページ

使いやすいシンプルな4476種類のテクスチャ!

あと拡張機能ではないですが、テクスチャも大量に公開されています。グリッドから斜線、ドットや編目などなど、模様の荒さも細かい単位で入っていて何かと便利です。こちらも拡張機能ではないのですが、とっても便利だったので紹介させてもらいます。

インストール方法&配布ページ

Fireworksを少しでも軽く使うポイント

使わないFireworksの拡張機能は無効にする

ざーっと拡張機能をまとめてみましたが、使わない拡張機能はExtensionManagerで無効にしています。ちなみに僕は下の拡張機能を無効にして使ってます。もちろん無効にするとFireworksが動かなくなることも考えられるので、無効にするものは慎重に選びましょう。

  • Alt Text Commands
  • Add Picture Frame
  • Convert Color Commands
  • Twist and Fade
  • Adobe AIR Extenstion for Fireworks
  • Layers Commands
  • Resize Selected Objects

状況に応じてワークスペースを設定する

今回紹介した拡張機能を全部使おうとすると、それだけで画面が埋まってしまいます。画面が埋まってしまっては本末転倒ですね。というわけで不要なパネルは非表示にするのが一番ですが、一つ一つパネルのOn/Offを切り替えるのは面倒なのでワークスペースを設定しましょう。
ちなみに、会社で使っているワークスペースは4つです。

  • デザインフル4(今回紹介した拡張機能のほとんどを表示しているとき用・本気出してるとき。デュアルディスプレイ必須)
  • デザインフル2(ワイヤーや実サイトのように何かを参照しながらFireworksを動かすとき用。デュアルディスプレイ必須)
  • バナー制作用(軽さ重視でほとんどの拡張機能を非表示にしてます。シングルディスプレイ用。)
  • 書き出し用(最適化パネルとレイヤーパネルぐらいしかなく、片側のディスプレイでDreamweaver、片側のディスプレイでFireworksで。シングルディスプレイ用。)

デザインフルって名前は最初全部入りって感じだったんですが、どんどん拡張機能を入れているうちにバージョンが上がってきてという感じです。半年にいっぺん、案件が落ち着くタイミングでこっそり見直しています。

以上16個の拡張機能と、2つのスタイルファイルの紹介でした。ここまでインストールするとなんでも来いって感じになってしまいますね。作者の方には本当に感謝です。ありがとうございます。