Fireworks後のツールとワークフロー

カンプから始めるデザインプロセスからの変化が求められる中、Fireworks の開発中止の発表がありました。ワークフローをツールに合わせるのではなく、そのとき最適だと考えられるワークフローに合わせることができるツールを選ぶ時代の到来です。

Fireworks 以外の選択肢は?

Adobe Creative Suite が終了し、Cloud の一本化が発表されました。今回の新製品ラインナップでニュースになったのが、Fireworksの開発中止 のニュース。最新版の Fireworks CS6 の次期 OS へのサポートをすると宣言しているので、すぐに使えなくなるということはありませんが、視野を広げて別の選択肢を探さなければならなくなるでしょう。

Fireworks が数年後には使えなくなるかもしれないから、Photoshop に移行するべきなのかといえばそうでもありません。写真やグラフィックといったビットマップ画像編集であれば Photoshop は素晴らしいですし、ベクターシェイプやレイヤースタイルを使えばある程度柔軟性を保つことはできます。しかし、Webサイトデザインにふさわしいツールとはいえません。

Fireworks のすべての機能を補うことは出来ませんが、代わりになる選択肢は年々増えてきています。

ベクター画像
Sketch昨年のバージョンアップで大幅に機能と UI が改善された Sketch はおすすめ。デザイン素材も今年に入ってグッと増えてきています。既に Sketchgem のような素材を集めたコミュニティがあります。
デザインアセット
Slicyアイコンやボタンの書き出しに便利なのが Slicy。残念ながら Photoshop との連携になりますが、レイヤーの整理をするだけで、スライスなしで様々な画像を書き出してくれます。また、自動的に Ratina 画像の生成にも便利です。
ワイヤーフレーム
OmniGraffleこの分野は非常にたくさんあるので、Fireworks 以外でも出来たりします。VisioOmniGraffle のように昔からあるツールを使うのもアリですし、Wireframe.cc をはじめとした Web アプリでもいけます。Adobe製品が良いのであれば、Adobe Touch Apps でも良いですね。
プロトタイプ
Prototypesどの種類のプロトタイプを作るのかによりますが、Balsamiq のようなものから、Easel のようにドラッグ&ドリップ形式で UI を設計したあと、HTML を書き出してくれるものまであります。画像を動かしたいのであれば Prototypes も手段です。

もっとワークフローを柔軟にしよう

Fireworks は国内外で熱心なユーザーが多いので、開発中止のニュースに「なぜ?」と考える方も少なくありませんが、最近の Adobe の動向、今後の Web の姿を想像すると容易に判断できます。

ここ数年、このサイトでもカンプは生産的ではないという話を何度かしてきました。レスポンシブ Web デザインにしなかったとしても、今の Web は固定幅の『絵』でデザインの課題を解決するのは大変困難です。むしろ、絵を見せてしまうことで間違った期待を与えてしまい、開発フェイズでの負荷が肥大することもあります。

また、デザイナーは増え続ける利用者環境を考慮した 柔軟性のあるやさしいデザイン を考えなければいけません。こうした中、カンプという静止画をを作ってスライスを書き出すというワークフローでは柔軟性を考慮しにくくなります。

Automagic Podcastポッドキャスト の第55回目に対談したデザイナーの 山口有由希 さんは、Fireworks の熟練者ですが、カンプを作るというよりかはデザインアセットやスケッチ用に Fireworks を使っていると話していました。

もちろん、Fireworks は単にカンプを作るためだけのツールではありませんが、善くも悪くも Fireworks の存在がそこから抜けきれないところが、『脱カンプ』の今の時代にマッチしなくなってきているのかもしれません。

さらに今の Web とデザインの世界は、ひとつのワークフローで表現できるほど単純なものではなくなったのも忘れてはならない重要なポイントです。従来のようにオールインワンの多機能ツールを使いこなして、そのツールに合ったワークフローが構築されていました。 Drewamweaver と Fireworks の連携はまさにその典型的な例です。言い換えればツールのためのワークフローだったと言えます。

しかし、今は「Webサイト」と一言でいっても、デバイス、スクリーンサイズ、利用文脈など様々な要因で作り方が大きく変わることがあります。多機能ツールはすべてのことを工夫次第で無難にこなすことが出来ますが、最適な作り方ではないことが多々あります。これに Adobe も気付いており、最近では Edge Animate, Muse, Edge Reflow といった、小さいけど特化したツールを配布し、ツールを自由に組み合わせてワークフローを構築できるようにしています。

上記に挙げた Fireworks の代わりになる(かもしれない)ツールも、機能数は少ないですし、アプリをたくさん切り替えるのは面倒を感じるかもしれません。しかし、機能が特化された小さなツールなので、様々なワークフローで機能の最大限を活かした仕事の可能性を与えてくれます。明日、突然新しいワークフローを採用したとしても、小さなツールなので調整するための学習コストも高くありませんし、ワークフローのどこかにツールを適応させる『隙間』もあるはずです。

ワークフローをツールに合わせるのではなく、そのとき最適だと考えられるワークフローに合わせることができるツールを選ぶ・・・数年前は難しかったですが、今は現実的な話になってきたと思います。

作り方が変わってきている中、今回のニュースがありました。
これを機会に様々な小さなツールに目を向けて自分の道具箱を増やしてみてはいかがでしょうか。増すと、その分作り方の柔軟性が増して作りやすくなりますよ。

筆者について

Photo of Yasuhisa Hasegawa

組織の一員となるスタイルで一緒にデザインに関わる課題を解決するといった仕事をするなど、チームでデザインに取り組むためのお手伝いをしています。各地でデザインに関わる様々なトピックで講師をしています。