鷹野雅弘がオススメするFireworks CS5の新機能

Fireworks CS5では、パフォーマンスの向上や、他のアドビ製品群との連携・統合の強化に加え、より精度の高いグラフィック制作が行えるように様々な機能強化が施されています。本記事では、Fireworksコミュニティで活躍する株式会社スイッチの鷹野雅弘さんに依頼し、Fireworks CS5のオススメ機能を紹介していただきました。

ボタンやバナーなど部品にはじまり、1ページのデザインカンプ、ワイヤーフレーム、複数ページのプロトタイピングの制作まで、FireworksはWeb制作のワークフローにおいて確固たるポジションを獲得しています。
5月末にリリースされるFireworks CS5は目立った新機能は少ないものの、「現場が嬉しい」機能が満載です。

高品位なグラフィック制作のための改良

長らくFireworksユーザーである私にとって、もっとも嬉しいのが、より高品位なグラフィック制作を可能にするための「ピクセルパーフェクト描画」と「グラデーションディザ」です。新機能としては地味なんですが、日々の仕事のクオリティに直結しますので無視できません。

ピクセルパーフェクト描画

Fireworksは、Web向けのグラフィック作成ツールとして誕生したため、バージョン1.0からピクセルグリッドベースでの描画を行うことができました。しかし、113%のような数値で拡大を行うと、四角形のエッジにアンチエイリアス(スムージング)が生じてしまうことがありました。Fireworks CS5では、[ピクセルにスナップ]を利用して、オブジェクトのエッジやストローク(線)に生じるムダなアンチエイリアスを削除することができます。

ピクセルにスナップ

グラデーションの品質が向上

Illustrator、Photoshopと比べると、グラデーションの表現においてFireworksは見劣りしていました。Fireworks CS5では、グラデーションを適用後、[プロパティ]パネルにある[グラデーションディザ]をクリックすれば、「バンディング」と呼ばれる縞模様が出ることがなくなります。
これまでのように、「ぼかし」フィルタなどをかけることなく、高品位なグラデーションが可能です。

グラデーションディザ

豊富なテンプレート(デフォルトで26、追加可能)

Fireworks CS5には、デフォルトで5つのカテゴリに、合計26のテンプレートが用意されています。

なかでも960 Grid Systemは使われている方が多いのではないでしょうか? グリッドシステムに基づいたガイドやカラムが準備された状態からスタートすることができるのは魅力的です。

グリッドシステム

[ファイル]→[テンプレートとして保存]をクリックし、「Templates」フォルダ内に保存すれば、よく使うドキュメントをテンプレートとして登録することも可能です。 なお、「Templates」フォルダは、Fireworksがインストールされている階層内の「Configuration」内にあります。

これからFireworksをはじめてみようという方は、「Wireframe」や「Web」のテンプレートをじっくりと研究するところからスタートするとよいでしょう。

テンプレート

カラー共有

製品間だけでなく、複数人でのグループワークやマシンのリプレースなど、配色スキーム(スウォッチのセット)の共有は、ワークフローにおいて無視できない問題です。

CS4では各製品間の配色セットを、kulerを使って共有することができるようになりました。非常に便利な反面、1つのセットに登録できるスウォッチが5つまでという制限がありました。

Fireworks CS5では、IllustratorやPhotoshopで利用されているASE(Adobe Swatch Exchange)をサポートしました。ASEにより、スウォッチ情報をファイルとして書き出したり、読み込んだりすることができます。

スウォッチ情報をファイルとして

なお、細かい改良点ですが、カラーボックス内に新しいアイコンが追加されました。このアイコンをクリックすると、カラーピッカーからのカラー値(例:「#FFCC00」)を文字情報としてコピーすることができます。これまでも、カラー値を選択すればコピーできましたが、一手間減りますので、並行してDreamweaverでコーディングを行う際に重宝しそうです。

カラー値を文字情報としてコピー

フォント機能の強化

Fireworks CS4では、Illustrator/Photoshopと同等のテキストエンジンが採用され、高品位なレンダリングが可能になったり、Illustratorで組んだ文字組み情報をそのまま継承できたりなどの改良が行われました。
Fireworks CS5は、さらにフォント機能に関しての改良が施されています。

取り消し

地味ながら、歓迎したいのがテキスト編集の際に使う取り消し機能のサポートです。 既に入力されているテキストに再編集を行う際、Fireworksで「取り消し」を行うと編集開始時に戻ってしまう悲しい仕様がありました。Fireworks CS5では、ようやく1ステップずつの取り消し/やり直しが可能になっています。

テキスト内改行のサポート

Fireworksでのテキストボックス内の改行は、段落改行(パラグラフブレーク)しかサポートされていませんでした。せっかく[段落前のアキ/段落後のアキ]という機能がありながら、あえて使わずに空行を入れていたケースが多いと思います。
Fireworks CS5では、ようやくshift+enterでの段落内改行(ラインブレーク)がサポートされました。これによって、Webページの原稿と同様に、enter/shift+enterを意識しながら、段落前後のアキ(マージン)をシミュレーションしながらカンプ作りが可能になります。

テキスト内改行のサポート

同属性のテキストの選択

option+ダブルクリック(WindowsではAlt+クリック)の操作により、同属性のテキストを選択できるようになりました。例えば、キーワードを太字にしたい、といったケースに役立ちそうです。

ちょっとした改良

縦横比を保持してのサイズ変更

Webページのカンプを作成する際に、「このオブジェクトの横幅を300ピクセルにしたい」といった作業が多くあります。

これまでは[変更]メニューの[変形]→[数値を入力して変形](command+shift+Tキー/Ctrl+Shift+Tキー)を使う必要がありましたが、Fireworks CS5では、[プロパティ]パネル内の[幅]と[高さ]に[縦横比を固定]をクリックしておけば、[プロパティ]パネルで幅(高さ)に数値を入力し、縦横比を保持してのサイズ変更が可能です。

縦横比を保持してのサイズ変更

スライス間での属性のコピー&ペースト

Fireworksでは、スライスをオブジェクトのように扱い、[スライス]レイヤー内に管理しています。ドキュメント内でスライスごとにGIF/JPEG/PNGの種類、カラーやディザ、圧縮率など最適化設定を行うことができます。
これまでは「このスライスの最適化設定を、あっちのスライスに」がちょっと面倒だったんですが、オブジェクトの属性ペーストの要領で、スライスを選んで[コピー]、適用したいスライスを選んで[属性をペースト]で可能になります。

ストローク機能の強化

ストロークを設定したとき、パスに対して内側/中央/外側の設定を行うことができますが、これまで隠れていた設定が[プロパティ]パネル内に表示されるようになりました。

ストローク機能の強化

また、破線設定の方法も非常に簡略化されています。

関連情報


鷹野雅弘氏 写真鷹野雅弘
株式会社スイッチ

Webサイトの構築やコンサルティングを中心に、WebやDTPに関しての講演やトレーニングのほか、スクールなどのカリキュラム開発も手がける。テクニカルライターとして10冊以上の著書を持つほか、書籍の企画や編集なども行っている。

2005年から CSS Nite を主宰。 著書に『できるクリエーターDreamweaver独習ナビ』(インプレス)など。
6月8日、表参道The GalleryにてFireworksのフォーカスした CSS Nite in OMOTESANDO, Vol.1 に出演予定。