BLOG

Webデザインのツールと言えば、PhotoShop？Illustrator？

2016/05/11
コージ
Fireworks-icon

Adobe Fireworksを使っていますが…

Adobe Fireworksというツールをご存知でしょうか。
Photoshop、Illustratorという２大グラフィックツールがある中でWebデザインという分野に特化したグラフィックツールです。
もともとはMacromediaという会社で開発されたものでしたが、Adobeとの合併で移行してからもWebデザインやGUIデザインの現場では割りと愛されてきたツールと言えます。

screen-fireworks
愛すべきポイントを箇条書きですが、以下にあげてみます。

ページとステート機能

  • 画面自体の数をページで、画面の状態をステートで作ることができるので１ファイルでGUI全体を作成・管理できるところ。

これ1本でベクターとビットマップを同時に扱える

  • ベクターとビットマップを同時に使うことができるのでPhotoShopとIllustratorの２つを使わなくてもこれ1本でOK。

Webに特化しているのでとにかく画面レイアウトがしやすい

  • Webに特化しているのでピクセル単位が基準（IllustratorやPhotoShopは、DTPや写真編集ツールとしての歴史があるので単位がmmがデフォルトだったりして初期設定が面倒）。
  • ピクセル単位で細かい配置、数値入力での配置・整列など、GUIを作る上ではこれほど整理され使いやすいものはないと思う。
  • レイヤーの入れ替えの操作性。
  • マスターページなんて機能も使う人も多いのでは。
  • ボタンスタイルやグラフィックスタイルのコピーと、ライブラリ化、、、など数えたらきりがないかも。

そんなFireworksともそろそろお別れか…

1998年の登場以来、使用頻度の波はあるにせよ、ここ最近はGUIデザインする上でも使いやすいため、さらに使用頻度もあがってきていたのに、そろそろお別れの時期がきたようであります。そのきっかけは、2013年のFireworksの開発終了。
それでも、普通にお使えていましたが、MacのOSを最新のOS X El Capitanにしてからというもの落ちる落ちる。
そしてお客さんからもPhotoshopやIllustratorのデザインデータありますか？と言われる機会も増えてきている日々。
そんなことなので、そろそろお別れを決意しなきゃダメかな、と思い始めました。

PhotoShopとIllustratorにダメ出し

しかし、、、IllustratorとPhotoShopはグラフィックツールとしての地位やブランド、そしてブラシやプラグイン等、ユーザが多いのですが、実際使ってみると何か違う。やはり両者とも、DTPや写真加工の歴史を背負ってきているのでデフォルトの単位がmmだったりする。
WEBやGUI制作での単位、ピクセルにすると小数点がでてきて、１ドットの線がぼやけたりして、FireworksがWeb制作やGUIのグラフィックツールとして細かな配慮ができたところができていない。
Fireworksとお別れしようにも、さてどうしようといった感じが正直なところ。

小数点の問題、線の問題、、、画像がぼやけるぞ。

まず繰り返しになりますが、特にIllustratorには大きな問題があって、DTPの単位であるmmやinchとの併用もできることから、単位をpixelに切り替えた時になんと小数点、、、これはFireworksではありえないこと。
これでは、GUIデザインデータとして、コーディング担当の人の配置時や、画像を切り出したときにぼやけたり、とにかく問題が多すぎる。と思う。
あと矩形の枠線のパスに対して、線を外側か内側にしないと線がぼやけるのだ（パスが線の中央がデフォルトになっている。。。）

Illustrator-line
デフォルトで線の配置が中央、、、1pxの線なのにぼやけていて2px分の幅をとってしまっている

このあたりの設定については、実際検索してみると、Webサイトを作る上でのIllustratorの初期設定をブログなどに皆さん書いてくれていて大変助かるのですが、、、前処理、設定があるのでしっくりこない。

PhotoShopのレイヤーの選択の操作や、複製とか入れ替えのショートカット

PhotoShopはレイヤーのコピペとかの操作が、やはりベクターツールと感覚が違いすぎる。
レイヤーの複製はCtrl+Jですか、、、

shortcut-ps
設定を変えないとしっくりこない

PhotoShopもベクターが扱えるけど、やっぱりIllustratorと併用しないと無理

あとはベクターツールのところ、パスファインダにあたる合成や切り抜きなど良く多様するのだけどちょっと使うかぎり、シェイプとパスの関係を理解して使わないと少しわかりづらい。やはりベクターはIllustratorにまかせると、、、スマートオブジェクトでやり取りね。。。

shape-edit
PhotoShopでもシェイプの合成や切り抜きはできるのですが、、、Illustratorのほうが使い勝手いいですね

結局、Fireworksひとつでできていたことが２つのツールを使わないとできないという。
なんだか後退したような気がしないでもない、、、

とはいえ、、、選択肢はPhotoShop+Illustratorしかないか。

Fireworksの後継ツールと言われているものでSketchというツールもあるのですが、こちらMac版しかなくしかも英語版のみで、社内での共有、コーディング担当の方に渡すデータとしてどうか、、、というのもあるし。
またAdobeからあらたにAdobe Experience Design CCというツールもPreview版がこちらもMacのみで先行でリリースされていますが。。。まだこれからですね。
やはり現時点ではいままでのワークフローを踏襲するなら、WebデザインやGUIデザインのグラフィックツールはPhotoShop+Illustratorという組み合わせが一番ハズレがないのでしょう。もともと、Macでグラフィックツールを使い始めたころは、PhotoShopとIllustratorで制作していたのであらためていくつかの設定をクリアして、Fireworksの操作に慣れすぎた目と体と頭、手先に鞭打っていこうと思います。

レスポンシブWEBデザインやプロトタイピングでのUIの操作感を確認しつつデザインする等、いままでのデザインのワークフローが変わっていっている昨今ですからグラフィックツールの立ち位置も変わってきていますしね。プロトタイピングツールなどを試しながら、Fireworksとは徐々にさよならできれば思います、、、それでは。

この記事を書くにあたり参考にさせていただいたサイト

Photoshop関連

Illustrator関連

Fireworks関連

Adobe Experience Design（XD）関連

Sketch関連

label