プラカンブログSTAFF BLOG

2016.01.21

WEBデザインにおけるPhotoshopとFireworksの比較

FireworksPhotoshop

こんにちは、WEBデザイナーの(ひ)です。 私はWEBのデザインカンプを作成する際、ずっとFireworksを使い続けてきました。そしてそのFirewokrsへの愛情は人並み以上と自負しております。
そんな私が新しいiMac(レティーナ5K)に買い替えと同時に、ついにPhotoshopに乗り換えました。
(その決定的な理由は以前の記事『WEBデザイナーが「Retina 5Kディスプレイ」でデザイン作業をするメリット・デメリット』で記載しております。)

この決断は世間のWEBデザイナーに比べると遅い方だと思いますが、Fireworksから離れない人がまだまだ多いのも事実です。
今回は、そんな愛すべきFireworksユーザーに今一度心の整理をして頂く為に、PhotoshopとFireworksのメリットを比較してみようと思います。 元Fireworksユーザーなので、決してえこひいきはしませんのでご安心を。

Fireworksのメリット

Fireworks

オブジェクトが選択しやすく操作が直感的。

選択の可視化

まずFireworksはオブジェクトを選択したり移動する際、「選択ツール(黒矢印)」を使います。オブジェクトを選択すると、選択している事がわかるように、四隅に印が付きます。Fireworksユーザーにとっては至極当然の事であり、基本中の基本なのです。
Photoshopの場合、まず選択したり移動する際に「移動ツール(十字矢印)」もしくは「パスコンポーネント選択ツール(黒矢印)」の二種類あります(そもそもこれを一つに統一してくれと声を大にして言いたいのですが)。「移動ツール(十字矢印)」の場合、デフォルトでは視覚的に選択しているかどうかカンバス上ではわかりません。

そこで選択を可視化する方法として、「バウンディングボックスを常に表示する」方法と「レイヤーの境界線を表示する」方法があります。「バウンディングボックスを常に表示する」方法を使う人もいますが、私の場合この方法だと、カーソルをオブジェクトの四隅に近づけるだけで、オブジェクトが回転してしまったりするとイライラするので使いません。私の場合は後者の「レイヤーの境界線を表示する」方法を使います。ちなみに、「表示 > 表示・非表示 > レイヤーの境界線」から設定します。ただ現時点ではなぜか、Photoshopを起動する度にこのチェックが外れるので毎度毎度設定が必要ですTT

「パスコンポーネント選択ツール(黒矢印)」の場合は、名前の通りパスを選択する為のツールであり、写真やビットマップオブジェクトは選択できません。これがすべてのオブジェクトが選択できるようになれば、上記の「移動ツール」は不要になるので、Photoshopにはここを改善して頂くように強く要請したい気持ちでいっぱいですw

選択のしやすさ(選択判定範囲)

Fireworksはオブジェクトの選択判定範囲(アソビ範囲)が約5pxと広く選択しやすくなっています。これはわかりやすく言うと、1pxの線を選択する場合、Photoshopの場合はその1px上にマウスカーソルを乗せないと選択できないのに対して、Fireworksはマウスカーソルが、1pxの線とその周り5px範囲内に入った際に、選択する事ができます。

さらにFireworksの場合は、オブジェクトの5pxの範囲にマウスをホバーしただけで、オブジェクトがハイライトします。これらの仕様のおかげで作業スピードは大きく変わります。

逆に、となり合ったオブジェクトが5px以内に密集して並んでいる場合は、選択しづらいというデメリットもありますが、比較した場合はやはり、多少のアソビがあったほうが作業が楽だといえます。私が最もFireworksを愛した理由がこれらの直感的な操作感にありました。

Fireworksの簡易グループ化

Fireworksはグループ化してパーツを移動したりする作業も軽快に行えますが、Photoshopにおけるグループ化は、レイヤーをフォルダで管理する形式であり、移動ツールでグループを選択するか、レイヤーを選択するかのチェックをしながら使い分けるという、1アクション無駄な操作が必要と感じてしまいます。その回避策としてPhotoshopではグループ化の代わりとして、グループしたものをスマートオブジェクト化して、ひとつのレイヤーにしてしまうという方法もあります。

スライスが使いやすい

スライスの使いやすさはFireworksのお家芸とも言えるでしょう。複数選択したオブジェクトを一気にスライスしたり、スライス名やスライスした画像の保存形式なども、プロパティパネル内で一括で簡単にできます。
もちろんPhotoshopでも似たような事ができるようになっていますが、やはり1アクション多かったりと、Fireworksの使いやすさに及びません。しかしPhotoshopも昔に比べるとスライス機能はどんどん改善されています。スライスの使いやすさが追いつくのも時間の問題かもしれませし、Photoshopには「画像アセット」という「スライスをしない」という概念もあり、これを極めるとスライスするより早いという人もいます。

Fireworksは右クリックのメニューが豊富

Fireworksは現在選択中のものに対する、右クリックメニューが豊富であると思います。例えば私がよく使う右クリックメニューとして、スライス選択中に「選択したスライスの書き出し」という項目があります。現時点ではPhotoshopにはこのような項目は出てきません。これに限らずPhotoshopでは、なぜいまこの右クリックメニューが出ないんだ!と憤りを感じる場面が多く感じます。

右クリック

Fireworksは「プロパティ」パネルが超絶イケている。

Fireworksの場合、選択しているオブジェクトに対する情報や編集作業が「プロパティ」パネルに集中しており、「プロパティ」パネルを使う事で完結してしまうことが多く、非常に便利であり明快です。しかしPhotoshopの場合、選択中のオブジェクトに対する情報や編集作業を行うパネルが多岐に分かれています。最近Photoshop CCにおいて、ようやく「属性」パネル上でシェイプオブジェクトの色やサイズの変更が可能になりましたが、それでもまだまだFireworks「プロパティ」パネルには遠く及びません。

ツールバー

Photoshopのメリット

Photoshop

ツールボックスをカスタマイズできる。

Photoshop CCの2015年11月のアップデートでツールボックスがカスタマイズできるようになりました。よく使うツールを上部に配置したり、以前は展開しないと出なかったツールをあらかじめ外に出しておいたり、不要なツールを非表示にしたりする事も可能になりました。個人的にはこれが一番感動しました。

ツールバー

シェイプにて角丸が、各コーナー毎に設定できる

Fireworksの角丸設定は、全コーナーに対して一括指定だったのに対して、Photoshopでは各コーナー毎に設定できる上、バウンディングボックスで変形しても角丸が歪みません。(Fireworksでも一応「9スライスの拡大縮小ツール」を使えば変形しません)これにより、矩形の上部のみ角丸で、下部は鋭角といったデザイン処理も簡単に行えることになります。

kado

PDSファイルをリンクとして埋め込む事ができる

これはつまり、デザインパーツなどを別ファイルとして保存して、リンクする事ができるという事です。これはFireworksにも似たような機能がありましたが、正直あまり使えない感じでした。

例えば一つのWEBサイトのデザインカンプを複数ページ作成する場合、ヘッダーパーツやフッターパーツ、バナーエリアなどのパーツ毎に保存して、外部ファイルのリンクとして配置する。すると、そのパーツに修正が入った場合は、パーツだけを一つ直せば、全ページに反映される事になるのでとても便利です。

テキストが美しい

Photoshopの方が小さいテキストが美しく感じます。また、Fireworksではアンダーラインツールでアンダーラインを引くと文字サイズによっては、アンダーラインが滲んでしまいますが、Photoshopのアンダーラインツールは常に綺麗なアンダーラインが引けます。

写真の加工力

これは言うまでもありませんので詳細は割愛しますが、Photoshopの専門分野である写真の加工は、Fireworksでも可能ですがやはりPhotoshopにはかないません。

メモリの管理ができ、安定している。

Photoshopは環境設定からメモリの管理が可能ですが、Fireworksは使用メモリ設定ができない上、メモリ不足によりフリーズする事があります。これにより長時間の作業を無駄にして泣いた人は多いでしょう。

メモリ

レイヤーを色分けする事ができる。

Photoshopはレイヤーを色分けする事ができます。個人的にはあまり使いませんが色分けする事でレイヤー管理がしやすくなるのではないでしょうか?

Photoshopは常にアップデートされる

Photoshopは現在進行形のソフトです。今回の記事はあくまで現時点のPhotoshopとFireworksの比較であり、今後改善される事も大いにありえますし、実際不便に思っていた点が随分改善されてきました。

そしてFireworksのユーザーは、このPhotoshopのアップデート内容を知らなかったり、Fireworksでできる事はだいたいPhotoshopでも同じような事ができるようになってきているという事実を知ろうとしない人が多いと思います。
実際私もPhotoshopに乗り換えてから「Photoshopもこんな事ができるんだ!」といった沢山の驚きや感動がありました。

そこで「Fireworksユーザーが気になる、Photoshopでもできる!WEB制作時に使える機能のまとめ」は次回の記事で書きたいと思いますので、乞うご期待!!

結局PhotoshopとFireworksどちらがいい?

現時点では一長一短ですが、Photoshopがどんどんアップデートされていくという点と、Fireworksの開発終了という点、さらにjavaのバージョンの問題(OSのサポートするjavaのバージョンとCSシリーズのjavaのバージョン)で、いずれはFireworks(CSシリーズ)が使えなくなるという点を考えると、早めにPhotoshopへ乗り換えを検討すべきであると言えます。

しかし結局のところ、どのソフトにも言える事ですが、使いこなせているか・使いこなせていないかの問題が大きいと思います。
これを機にPhotoshopに乗り換えてみるもよし、まだFireworksを使い続けるもよしだと思います。
また移行期間として、Fireworksで作成したものをPhotoshopでpsd化するという技もありますので、以前の記事「FireworksでPhotoshopデータを作る方法」を参考にしていただければ幸いです。

 

参考記事 

この記事は、HISADA が書きました。