[マイウェブ]フロート

Fireworks

Fireworksについて考える


PhotoshopとFireworksか、どっちが便利?

Webデザインにおけるメインのデザインツールとして多く使われているPhotoshopとFireworks。我々の業界内において、どちらの方がデザインツールとして便利か、という議論がよく行われますが、いずれか一つしか使いこなしていないユーザによる比較論ではあまり意味がないでしょう。日頃から使いなれているツールの方が使いやすい、と感じるに決まっているからです。ここで参考になるのは、両方のツールを同等に使った経験を持ち、かついずれにも過剰なこだわりや愛着を持ってないデザイナーの声なのではないでしょうか。

Fireworksの方が優れている10ポイント

その1:複数ページが一括管理できるページ機能

複数ページを管理できる機能です。Photoshopならレイヤーカンプという機能が近しい機能として存在しますが、ページ機能ではさらに柔軟に複数のページ管理をすることができます。ページ毎にそれぞれ違ったカンバスサイズを持つことができるので、極端な話、1つのpngデータの中にサイト全てのデザインを納めることも可能です。

その2:ピクセルに最適化されたレイアウト

Photoshopでベクターデータを扱う際、パスの位置によってピクセルのにじみが発生します。これはカーソル・マウス共に拡大時のパス調整はピクセルにスナップしないのが原因です。高精細な印刷データも扱わなければならないPhotoshopならではの特性といえるかもしれません。一方、Webでの用途に特化したFireworksは拡大時・縮小時と関係なく、常にピクセル単位での作業となり、オブジェクトが自動的にピクセルにフィットするため、パスのにじみやラインのズレなどがあまり発生しません。CS5から搭載されたCtrl+Kでパスをピクセルに最適化する機能も便利です。

その3:数値入力によるサイズと座標の指定

Fireworksはオブジェクトの幅、高さ、X座標、Y座標を数値入力によってコントロールすることができます。縦横比を維持したままWebのグリッドに合わせたサイズ調整も簡単にできます。また、配置すべきグリッドさえ決まっていれば、オブジェクトをドラッグやカーソルで移動させるのではなく、数値入力だけでレイアウトさせていくこともできます。FlashやDreamweaverなどのオーサリングツールで必要となってくる座標値の抽出も簡単です。

その4:レスポンスの軽快さと直感的な操作性

PhotoshopよりもFireworksの方が軽く、サクサクと作業ができる印象があります。また、操作の直感性もFireworksに分があります。今はPhotoshopも移動ツールの自動選択機能でオブジェクトを直接選択できますが、それでも沢山のオブジェクトの中から任意のオブジェクトをドラッグする作業は、Fireworksの方が素早く操作ミスも少ないです。特にFireworksにおける複数オブジェクトの選択や整列、コピー&ペーストなどは、PhotoshopよりはIllustratorに近い印象があり、レスポンスの軽快さも相まって、非常に使いやすく感じます。

その5:パス調整の容易さ

Fireworksを説明するときにしばしば「PhotoshopとIllustratorがくっついた感じ」という表現がされますが、それはFireworksが画像処理ソフトでありながら、Illustrator並みに柔軟にパスを扱えるからではないでしょうか。Illustratorほどのマニアックな機能は搭載されていませんが、Photoshopよりははるかに充実しています。よほど特殊なパスを扱わない限り、Illustratorを立ち上げずに、Fireworksだけで作業が完結します。

その6:精緻に調整可能なテキストレンダリング

Photoshopでは8ptまで小さくすると多くの書体では文字がつぶれてしまいますが、Fireworksならその小ささでも鮮明に美しく表示するよう調整することが可能です。

その7:検索と置き換え

Photoshopでもテキストの検索・置換は可能ですが、Fireworksはテキストはもちろんのこと、矩形オブジェクトのカラーを拾って置換したり、書体を入れ替えたりすることも可能です。これにより、デザイン上で使っているメインカラーやキーカラー、サブカラーといった特定の色群、あるいは特定の書体をあっという間に一括変更させることができます。

その8:Fireworksならではの表現

Photoshopで矩形をぼかす場合には、まずスマートオブジェクトに変換してガウスフィルタをかけることが一般的ですが、Fireworksはデフォルトでエッジをぼかすプロパティを設定できます。またこれらをマスクとして用いることでエッジのぼやけた矩形を持つ画像イメージを、パスを調整しながら作り上げることもできます。 Photoshopユーザーからは画像加工に弱いと言われがちなFireworksですが、よほど複雑な加工をしない限り、Fireworksで事足りることがほとんどです。

その9:スピーディーかつ柔軟なスライス機能

Webに特化したFireworksであれば、書き出しに必要な画像のスライス機能もかゆいところに手が届く作りになっています。Fireworksではスライスを、スライス用のレイヤー上でオブジェクトと同等に扱うことができるので、直感的かつ簡便です。

その10:コストパフォーマンス

Photoshopは非常に多機能で、Webデザインに限らず幅広い用途で使用できる究極の画像編集ソフトですが、その分高価(税込で99,750円)で、使わない機能が多いことを考えるとコストパフォーマンスが高いとは言い難い価格です。
一方のFireworksは半額以下(税込で39,900円)。Webデザインに特化したツールとしては不足ない機能を有し、上記のようなPhotoshopを凌駕する面を多数持ち合わせていることを考えると、圧倒的なコストパフォーマンスです。


まとめ

総合的に見て、PhotoshopよりもFireworksの方が制作効率が良い(効率が良い=クリエイティブに割く時間がより多く作れる)と判断しています。もちろんある特定の機能や用途だけを取り上げるとPhotoshopの方が有利な点もありますし、また正直なところFireworksには痛い不具合もチラホラ見受けられるのですが、それでもトータルの使い勝手ではFireworksの方がかなり有利なのではないかと考えています。現在Photoshopをメインに使っているデザイナーさんには、慣れるまで一時的にパフォーマンスが落ちたとしても、長期的なメリットを考えて、Fireworksを使ったワークフローを標準にすることを強くおすすめしたいところです。