以前にFireworksの拡張機能のまとめを書きましたが、あの記事を書いてから1年近く経ちました。この1年でFireworksもCS5.5からCS6にバージョンアップしたり、コマンドを積極的に使うようになったり、新しく使い始めた拡張機能もあったので、改めてしばっちが現在会社のマシンで動かしている拡張機能やコマンド、すべて紹介していきます。

目次

文字入力・テキスト処理系

レイヤー・スライス系

カンバス操作系

一覧系

オブジェクト操作系

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

文字入力・テキスト処理系

[NEW]ショートカットと文字入力を混同させない「IME Killer」

ショートカット「v」キーで選択ツールに切り替えたいのに、日本語入力がONになっていてIMEウィンドウに「v」と入力された状態になっていてがっかりした経験ありませんか?そんなときに便利なのがこちらの拡張機能。

この拡張機能パネルを開いて[日本語入力モード 強制OFF]にチェックを入れると、強制的にOFFにするようになります。

Macの場合は[英数]・[かな]キーを押すとなぜか手のひらツールになってIMEのON・OFFの切り替えがやりにくいと感じてる方も多いと思います。この拡張機能を使うとショートカットがきちんと動かせるようになるので、ショートカットを頻繁に使うMacユーザーにはおすすめです。

[NEW]Fireworksで混植が少し楽になる「Font Mixer」

Fireworksで混植ができるようになる拡張機能。IllustratorやInDesignの合成フォントには届かないものの、2種類のフォントをひらがな・カタカナ・アルファベッド・数字・約物を区別してフォントを変更ができます。

また混植の際にベースラインが崩れにくくするために、流し込むフォントの大きさやベースラインの高さ調整も相対的に指定できるのもいいところ。この拡張機能で気兼ねなく混植ができるようになりました。

[NEW]テキストボックスを改行で分割するコマンド

連続改行区切りでテキストボックスに分割するコマンド。こちらはすでにカンバス上に配置してしまったものを整形する際に使っています。

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

タブ・改行区切りなどの区切り文字から複数のテキストオブジェクトを挿入する拡張機能。グローバルナビやサイドカラムなどの短いテキストをエディタで入力し、PI_TextGeneratorに貼り付けて、テキストオブジェクトを一気に作ります。

大量のテキストオブジェクトを作るにはとても便利です。

レイヤー・スライス系

[NEW]オブジェクトの大きさや属性値が丸わかり「SPECCTR」

スライスしてCSSで値を入れる際に、「オブジェクトの幅や高さはいくらだっけ?マージンはいくら取ろうと思ったんだっけ?」とFireworksに戻って適当な矩形を作って値を取っていたという人もいるのではないでしょうか?

SPECCTRは要素の幅や高さ、通常のオブジェクトなら線や塗りの色・エフェクト、
テキストオブジェクトなら、使用フォント・文字サイズ・文字色・エフェクトを違うレイヤーに自動的に書き出す拡張機能です。

こちらの拡張機能は49$の有料バージョンと無料バージョンと2種類あります。僕は有料バージョンを購入して、アプリケーションを行き来する時間を減らすことができました。

[NEW]スライスの際の連番挿入・一括置換が一つに!「PI_Slice」

スライスはショートカットを覚えると楽になります。さらにもっと楽にするにはこちらの拡張機能。スライス名への連番挿入はもちろん、改行区切りの文字を流し込んでスライス名として設定できるのはこの拡張機能だけです。接頭辞に加えて「_on」「_off」のような接尾辞もつけられます。僕の中ではスライス時はメインで使う拡張機能になりました。

Webシステムでボタンを画像で作らなくてはいけない場合は、1ページ1ページでボタンを作るのではなく、別のファイルとしてボタン画像をまとめています。ルールを統一しやすくなるのでこの方法を採用しています。このときに通常時、ロールオーバー時の似ているけど、ちょっと違うスライス名というときに役に立ちます。

[NEW]空のレイヤーフォルダを削除するコマンド

不要になって空になったレイヤーフォルダーを一括削除するコマンド。普段は使うことが少ないですが、モックを変更・修正すると必ず不要なレイヤーが出てきますね。ひとつひとつ削除するのが面倒なのでこちらを使っています。

また、Photoshopでもらったモックはグループ化=Fireworksでいうところのレイヤーフォルダー1つ作成になってしまうので、PhotoshopのデータをFireworksで開くと必然的にレイヤー数が多くなってしまいます。僕はもらったPSDデータのレイヤー構造を簡略化して、スライスにしていきます。そのときにグループ化していくと、空のレイヤーが山ほどできてしまいます。そんなときに便利なコマンドです。

スライス名の変更が簡単に「1 Slice Name Changer」

デフォルトの設定だとスライス名の変更する際はクリック操作でしかできません。こちらの拡張機能は、スライス名を変更する際にダイアログボックスを開いてスライス名を入力することができるようになります。拡張機能をインストールとすると、コマンドメニューに表示されるので、キーボードショートカットと組み合わせて使っています。

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

オブジェクトの名前やスライスの名前を検索置換する拡張機能。正規表現での検索置換もできます。画像の名前を変えなくちゃいけないとき、Dreamweaver上からファイルをリネームしてしまうと、その後画像そのものに変更が入って書き出してもブラウザでうまく反映されない…みたいなことが多々あったので、画像のファイル名を変更したときは、スライス名を変更して書き出すということをしています。

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

選択した複数のオブジェクトからテキストや矩形などの基本図形・グループ化したオブジェクトなどとさらに絞り込んで選択することができる拡張機能です。これを使って、レイヤー整理をざっくりやってしまえば、重なっているオブジェクトでも選択しやすくなります。

クリックでスライスに連番が振られる「SequenceNumSlice」

スライス名に連番を振る際に便利な拡張機能。同様の機能ではPI_Sliceのほうが便利ですが、PI_Sliceはレイヤーの重なり順を気にする必要があります。

こちらの拡張機能では、クリックした順番に連番を振るので、ちょっとした連番を振る場合にはこちらのほうが便利です。

カンバス操作系

[NEW]カンバスカラー切り替えられるコマンド

カンバスカラーを透明・白に切り替えるコマンド。最近では半透明のPNGで書き出すことも多くなってきましたね。

モックの制作時点ではカンバスカラーを白色にして、画像を書き出すときには透明にして、変更・修正が起こったときにまた白色に戻してということがサイトの運用をしているとよく起こります。そんなときのコマンドです。

キーボードショートカットと組み合わせて、ワンタッチでカンバスカラーを切り替えることができます。

[NEW]グリッドのスタート座標を変更するコマンド

グリッドの座標(0,0)の位置を選択したオブジェクトの左上に変更するコマンド。
ロールオーバー用の画像を大量に作るときには別のファイルで一気に作りますが、ボタンの大きさが変わったときに上の文字の部分の位置を合わせようとすると、よく間違えてしまってマウスオーバー後のボタンのテキストが1pxズレてたという経験があります。

このコマンドで、正確な座標にテキストを数値で指定すると、1pxもズレずにオブジェクトを配置することがしやすくなります。

ガイドまわりの拡張機能の決定版!「Guides」

選択したオブジェクトに沿ってガイドを引くことができたり、前のページ・マスターページからガイドをペーストすることもできるガイドの拡張機能。この他にも選択オブジェクトの中線を引くこともできます。パネルでできることが多くて詳細な使い方は割愛しますが、長年使っている拡張機能です。

一覧系

[NEW]多様なプレビューが可能なテクスチャ一覧パネル「Texture Panel」

インストールしているテクスチャが一覧できる拡張機能。以前同じような拡張機能で「PI_TextureList」を紹介しましたが、こちらの拡張機能に移行しました(PIXEL LABさん、ごめんなさい><)。動作が軽いことと、リピートしたときにどのような画像になるのかのプレビューをすることもできるので便利です。

フォントの一覧を見ることができる「PI_FontList」

使用できるフォントを一覧をパネルで表示する拡張機能。

フォントのプレビューをプルダウンから選ぶと、じっくり選ぶことができないのですが、こちらの拡張機能はフォントのプレビューがパネルに反映されるので、比較しながら使用フォントを選ぶことができます。ちょっと重たいのが難点ですが、選ぶ際にはよく使う拡張機能です。

オブジェクト操作系

[NEW]選択部分の矩形を作成する 「 Copy Same Rectangle 」

選択したオブジェクトがびったり埋まる矩形を作るコマンド。
どういうときに使うというと、あとで紹介するPlaceholderオブジェクトに実際の写真を挿入する際にマスク用の矩形を作るときに使っています。また、上で紹介したくずれた角丸を元通りにするコマンドで対応できなくなってしまったパスで角丸になってしまったオブジェクトもこちらで矩形を作って角丸を作っています。


こちらはコマンド集となっています。他にも、カンバスサイズを100px伸ばす・縮める、トラッキング値をテキストオブジェクト選択時でも変更できるコマンドなど、便利なコマンドがたくさんです。

[NEW]選択オブジェクトの左上にペーストする「Paste In Place」

選択したオブジェクトの左上にペーストするコマンド。Fireworksは基本的にコピー元のオブジェクトと同じ位置にペーストします。ただし、他のアプリケーションでコピーしたものをペーストするときには、画面表示領域の真ん中にペーストされてしまいます。配置する場所は決まっているのに、マウスやキーボードでオブジェクト移動をするのは時間がもったいないです。

IllustratorからFireworksにテキストオブジェクトをコピペするようになってものすごく使用頻度が上がったコマンドです。

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

モックを作る上でよく使うフォントや色・文字設定を一つのパネルに集約した拡張機能。
一つのパネルにまとまっているので、基本設定はこのパネルで一通り作って、そのあとに詳細部分を普段のプロパティパネルで作り込むといった進め方ができます。

Fireworksでくずれた角丸を元通りにするコマンド

矩形を作って角丸設定をしたあとに幅や高さを変更すると、角丸の半径が崩れてしまいます。その崩れた角丸をリセットすることができるコマンドです。ランディングページなどで、コンテンツを囲むことが多いのですが、これを使うとお客様確認のあとの変更・修正でコンテンツの増減が起こっても心が折れなくなりました。

グラデーションの色調整を小数単位で調整できる「Gradient Panel」

グラデーションの数値を設定することができるようになる拡張機能。CS6になってからはあまり使わなくなりましたが、グラデーションの色の位置を小数点単位まで指定できるところは魅力です。とくに、大きめのオブジェクトでグラデーションを作るときに便利です。

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

Fireworksで使えるパターン16,000種類のテクスチャ

シンプルなテクスチャの模様の大きさを並べたテクスチャ。一枚一枚PNGファイルになっているものと、スタイルファイルになっているものの2バージョン存在します。スタイルファイルになっているものが便利です。

[NEW]ソーシャルボタンの共有ライブラリ「socailbutton」

Facebookの「いいね」ボタンやTwitterのツイートボタンなどを集めたソーシャル系を共有ライブラリに登録する拡張機能。もうスクリーンショットを撮って切り出して…ということもしなくて済みそうなボタン揃えです。

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

比較的よく使いそうなテクスチャを集めた拡張機能。インストールすると、テクスチャ選択画面から選ぶことができます。上で紹介しているindigo noteさんのテクスチャに比べると数こそ少ないのですが、グリッド系であればざっくりとこちらでテクスチャを決めて、大きさの調整のindigo noteさんのテクスチャセットを使うようにしています。

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

よく使いそうそうな矢印をあつめたシンボル集。案件ごとに矢印やリストアイコンを1から作るのは面倒…。インストールをすると、共有ライブラリとして矢印アイコンが追加され、ドラッグアンドドロップで矢印をカンバスに配置することができます。

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

写真はあとで決めるといったときに一旦場所だけ確保しておくためのアタリ画像を作るオートシェイプ。このツールですばらしいのは「200 x 200」というように、アタリ画像の大きさを自動的に入力してくれるところです。

いざ写真を入れる際に大きさを把握する際にいちいちプロパティインスペクタから幅と高さをみなくて済むので便利です。

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

黄金比のガイドを作ることができるオートシェイプ。スライダーをクリックすると、黄金比だけでなく、3等分したグリッドなども引けます。

ボタンの装飾スタイルが1クリックで!便利なFireworks スタイル600

ランディングページ用のテカテカなボタンを作るのに便利なスタイルファイル。無彩色のグラデーションスタイルも中には入っているので、基本形を作って自分なりのカスタマイズも加えることができるので便利です。

あとがき

以上、全部で28の拡張機能やコマンドを紹介してみました。
CS5.5→6に乗り換えたときに「バージョンアップしてる拡張機能もあるのでは」と、拡張機能を一度0から全部入れ直しました。そのときに1年前の拡張機能のまとめがとても役に立ちました。当たり前ですが配布されているURLがまとまってませんからね…。

定期的にバックアップがてらに、Fireworksのまとめはやっていこうかなと思います。