「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について

2013/5/7に、Adobe Fireworks の事実上の開発終了が発表されました。
ただし、「バグ修正やセキュリティ関連のアップデートは継続する」とのことですが、いつまでも使い続けられることを保証するものではないので、Fireworks ユーザーの方はそう遠くないうちに別のアプリケーションに乗り換える必要があると思います。

Adobe、Web画像ツール「Fireworks」終了へ – ITmedia ニュース

移行先アプリケーションの候補の1つである Photoshop について、Twitterを見ていると「Photoshop でのWebデザインは制作効率が悪い」という方が多いようですが、私はそんなことはないと思っています。
なぜそう言えるのかについて、簡単にまとめてみました。

FireworksとPhotoshop、それぞれのメリットとデメリット

Webデザインカンプ制作の際に Fireworks と Photoshop を使用した場合のメリットとデメリットだと私が思っていることは以下のとおりです。

Fireworksのメリット

• 初期設定のままWebデザインカンプで使用しやすい
• パスの編集もある程度できる

Fireworksのデメリット

• メモリ管理が下手。「ページ」機能を使うなどして、ファイルが重くなると「メモリ不足」エラーが出る（これはPCに搭載されたメモリが少ないということではなく、Fwの問題）
• 光彩やドロップシャドウの美しさは Photoshop のレイヤースタイルに劣る

Photoshopのメリット

• レイヤースタイル（ドロップシャドウ、グラデーションなど）の種類が多彩で、どれも美しい
• 繊細な色選びがしやすい
• 動作が安定していて、（他の Adobe アプリケーションと比べて）バグが少ない
• PhotoshopでWebデザインカンプを制作している方が多いので、他の制作者とのデータの受け渡しがスムーズ

Photoshopのデメリット

• 初期設定は写真編集向けになっているので、Web用に設定変更する必要がある
• 操作が直感的でない。習得に時間がかかる

なぜ「Photoshopは効率が悪い」という方が多いのか

私は、はじめてWeb制作をした時は Fireworks を使っていたので、Fireworks ユーザーの方が Photoshop は効率が悪いと考えるのも理解できなくはありません。

しかし、今は「Photoshop によるWebデザインカンプ制作の制作効率は Fireworks に劣らない」と結論づけています。

Twitter やWeb系の勉強会で「Photoshop なんて効率悪い」という方を見かけるたびに「なぜそう思うのか」聞いていますが、大抵は以下の4つの理由のどれかです。

• 単純に、Photoshop の使い方が分かっていない
• Photoshop の使い方は分かっているが、写真編集の使い方しか分かっておらず、「Webデザインのための Photoshop の初期設定と操作」について知らない
• 古い Photoshop の話をしている（昔の Photoshop はWebデザインに向いていませんでしたが、最近は CS5 と CS6 を比べてもWebデザインに関する機能が大きく進化しています）
• 単なる思い込み

2つめの「写真編集の使い方しか分かっていない」という事に関しては、そもそも「Photoshop を使った効率のよいWebデザインカンプ制作」について書いた本がほぼ無く、一般のWebデザインスクールは Fireworks について教えているところが多いそうなので、ある程度仕方がないのかなと思っています。

そういった教材がないため、Photoshop を使って極めて効率の悪い方法でWebデザインカンプ制作している方を見て「Photoshop は効率が悪い」と思われるのも仕方ないのかなと思います。

初期設定について

Photoshop でWebデザインをするための初期設定について詳しく書こうかと思ったのですが、Design Color に既に詳しい記事がありましたので、そちらにリンクさせて頂きます。

初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6含む) | Design Color

あえて補足するなら、Photoshop の「環境設定＞ガイド・グリッド・スライス」で「スタイル」を「点線」にし、「グリッド線」を「100 pixel」、「分割数」をCS6以上の場合は「20」、CS5以下の場合は「100」にしておくことをおすすめします。

なぜCS6以上とCS5以下で設定が異なるかというと、CS5までの場合、長方形などのシェイプを選択し、Ctrl+T（自由変形）でドラッグでサイズ変更・移動した時に、位置やサイズに小数点が付いてボケて見えることがあるため、上記設定にしてから「表示＞スナップ先＞グリッド」をオンにしておくと、自由変形・移動時にボケにくくなるからです。
（100 pixelの100分割=1 pixelごとに見えないグリッドができ、そこにスナップする=留まるため）

CS6以上の場合、自由変形・移動時にボケることはほぼありません。
そのため、1 pixelごとにスナップさせるより、5 pixel（100 pixelの20分割=5 pixel）ごとにスナップさせたほうが役に立つことが多い、ということです。

なお、点線グリッド100分割の設定は、CSS Nite で黒葛原 道さん（eater）がお話されていたものです。

基本図形の制作について

Fireworks の場合、数値を指定して長方形などを制作する場合、長方形ツールで適当にドラッグしてから「プロパティインスペクタ」で幅・高さを指定することになると思います（もっと良い方法をご存じの方がいらっしゃったら教えて下さい）。

Photoshop は、CS5までは幅と高さを指定して図形を作成するのが面倒だったのですが、CS6では Illustrator 同様、長方形ツールでカンバス内をクリックすると長方形の幅・高さを指定するダイアログが表示され、Enterキーを押すと指定された幅・高さの長方形が作成出来ます。つまり、Fireworks より1ステップ少ないです。

なお、最初からサイズだけでなく位置まで指定したい場合やサイズと位置をまとめて修正したい場合のために、私は JSX（Photoshop 用のスクリプト）を自分で制作して使用しています。
Illustrator や、Fireworks のプロパティインスペクタ風にサイズを修正したい場合にも役立つと思います。

PhotoshopでのWeb制作効率を向上させる「JSX」とは | Stocker.jp / diary

ガイドを指定した位置に引きたい場合も、Fireworks だと適当にガイドを引いてからダブルクリックして位置を指定することになるかと思いますが、Photoshop だと「表示＞新規ガイド…」から指定した位置に一発でガイドを引くことができます。

複雑な図形の制作とIllustratorとの連携について

「Photoshop では複雑な図形が作れない」という方がいらっしゃいますが、私は、それは Illustrator の役割だと思っています。

それを申し上げると、今度は「2つのアプリケーションを使い分けるのが面倒」とか「時間がかかる」「効率が悪い」といわれる方がいます。

私は、「Photoshop と Illustrator の2つを使い分けるから効率が悪い」のではなく、「Photoshop と Illustrator の2つを連携させるから効率が良い」と考えています。

おそらく、「効率が悪い」と考えている方は、「Illustrator で図形を作成→Photoshop に貼り付け→図形を修正したい場合は Illustrator で以前制作したファイルを開き、修正してコピーし、再び Photoshop に貼り付け」なければならないと考えているのではと思います。

しかし実際は、図形を修正したい場合にいちいち Illustrator で該当ファイルを開いて修正してコピーなどという作業は必要ありません。

最初に Illustrator で図形を制作して Photoshop に貼り付ける時、「スマートオブジェクト」としてペーストしておけば、以降その図形を修正したい場合は、Photoshop で該当レイヤーの「レイヤーサムネール」をダブルクリックすれば、Illustrator で該当のスマートオブジェクト（元ファイルではなくそのスマートオブジェクトだけ）が開かれます。
Illustrator で修正し、Ctrl+S キーを押して保存すると、Photoshop では自動的に修正されたものが反映されています。

私は、「バナーやデザインカンプを制作している時」と「図形を制作したり修正している時」では使いたいパネルが違いますので、このようにダブルクリックで切り替わってくれることにはメリットがあると思っています。

もちろん、Fireworks でもワークスペースの切り替え「ウィンドウ＞ワークスペース」で同じようなことができます。

シンボルについて

「Photoshop にはシンボルがない」と言われますが、前述したスマートオブジェクトは、シンボルと似たようなことができます。

Photoshop で、レイヤーを右クリックしてスマートオブジェクトにしておくと、拡大縮小回転で荒れなくなるだけでなく、複製後レイヤーサムネールをダブルクリックし、修正して保存するとまとめて修正できたりします。

スライスについて

「スライスは Fireworks の方が便利」とよく言われますが、私は一長一短だと思っています。

以前、CSS Nite に来られた方で「普段は Fireworks ですが、スライスはやっぱり Photoshop の方がいいですね」と言われた方がいて驚いたことがありましたが、どちらが便利と感じるかはワークフロー次第なのだと思います。

私が Photoshop のスライスで便利だと思うところは、レイヤーに基づく新規スライス（レイヤーを選択し、「レイヤー＞レイヤーに基づく新規スライス」）です。

レイヤーに基づく新規スライスは、レイヤーのサイズが変わったり、移動すると自動追従します。
ということは、テキストを配置してレイヤーに基づく新規スライスを作成し、テキストを修正して内容が増えたり、フォントサイズを大きくしても自動追従するということです。

あと、まれに「Photoshop のスライスはいじったり整列することができない」と思われている方もいるようですが、レイヤーに基づく新規スライスの場合はスライス選択ツールのオプションバーの「変更」ボタンを押して「ユーザー定義スライス」に変更すれば通常のスライスと同じように移動することが可能になり、スライス選択ツールで複数選択すればオプションバーから整列もできます。

「スライスの時、カンバスに余計なもの（グレーの自動スライスのこと）が表示される」という方もいますが、スライス選択ツールのオプションバーで「自動スライスを隠す」をクリックすると非表示になります。

その他の効率比較について

数値の増減

例えば、フォントサイズを少しずつ増減したい時、線幅を少しずつ増減したい時、Photoshop や Illustrator は、カーソルキー↑↓を押すごとに数値が1ずつ増減できます。

自動処理・大量一括処理

Photoshop の「アクション」は、Fireworks の「コマンド」より高機能です。ダイアログを表示し、ユーザーの入力を待ったりすることもできます。

Fireworks は、「ヒストリー」パネルの右下のアイコンから「コマンドとして保存」できますが、Photoshop は「アクション」パネルの「記録開始」ボタンで操作を記録することができます。

さらに、Photoshop には「ScriptingListener」という Adobe 純正のプラグインがあり、これを使うと、Photoshop で行った作業を JavaScript（JSX）としてデスクトップに保存することができます。

詳しくは、こちらのページに書いてあります。

操作を自動的に記録する | クリエイター手抜きプロジェクト (Photoshop編)

この JavaScript を編集し、必要な部分を変数に置換し、ダイアログから入力させた値を変数に代入することで、簡単に複雑な作業を自動化する JSX（スクリプト）を作成することができます。
私が制作した「シェイプ作成.jsx」もこの方法で作っています。

さらに、大量のファイルを読み込んで一括処理したい場合は、64bit 対応の Photoshop は大きなファイルをたくさん開いても安定して自動処理してくれることはもちろん、「変数」を定義することで、CSV ファイルを読み込み、内容を差し替えながら大量のバナー画像などをまとめて制作することも可能です。

詳しくは下記ページに書いてあります。

Photoshopで変数を使って見出し画像リソースを管理する | A Day in the Life

最後に

というわけで、Photoshop でWebデザインするなら

• 初期設定をWeb用にきっちり変更する
• サイズを指定して長方形を作成、移動などの基本操作をきっちり習得する
• 複雑な図形の制作は Illustrator と連携する

ということをやれば、Fireworks と比べて、特に効率が落ちるということはないと思います。
もし足りない機能があれば、アクションやスクリプト（JSX）を活用します。

追記: Photoshop CC からは、長方形や角丸長方形などのシェイプ作成・変形・移動はスクリプトを使うよりも「属性」パネルを使用したほうが効率良くなりました。

あと、「Fireworks に比べて Photoshop や Illustrator の操作に慣れず、使いづらい」と感じるのであれば、キーボードショートカットの設定を Fireworks 風に変更してしまうというのもありかなと思います。

Photoshop によるWebデザイン制作ができるようになると、例えば、イタリア旅行記: Caffè Laguna みたいな、写真を多用したデザインができようになり、表現の幅も広がるかと思います。

追記

私が執筆した「プロになるためのWebデザイン入門講座」という書籍が7月24日に発売されました。
その中には Photoshop と Illustrator を使った作例や、機能比較表（Fireworks のこの機能にあたるのは、Photoshop ではどれかなど）も掲載していますので、Fireworks ユーザーの方が Photoshop に乗り換えるときの参考になるかもしれません。

詳しくは、下記の記事をご覧ください。
「プロになるためのWebデザイン入門講座」を執筆しました