
「どんなツールを使ってデザインをしているのですか?」とよく尋ねられます。その時、私は「Fireworksです」と答えています。そうすると、たいてい怪訝な反応をされるので、結構時間をかけてFireworksを使っている理由を説明しています。Fireworksは、業界標準のツールとは言い難いだけに、養護せずにはいられないのです。
私がコンサルティング会社「Cooper」で務めることになったとき、レイヤー機能が無い頃から愛用していたオールマイティのPhotoshopからFireworksに乗り換えることになりました。そのことに懐疑的で心配だったのですが、数週間後には、選択ツールの地獄から解放されたデザイナーへと生まれ変わっていました。実際、Fireworksはインタラクティブデザインを行う上で有効な機能を数多く持っており、私たちの作業プロセスにおいて大いに役立っています。この記事では、私たちがインタラクティブプロダクトのデザインを作成する上でどのようにFireworksを活用しているかを紹介します。
私たちがどのようにFireworksを使ってインタラクティブデザインやビジュアルデザインを作成しているのかについて興味ある方は、私たちの最新プロダクトを見ていただくとともに(後ほど記事で紹介します)、まずはこのショートビデオをご覧下さい。
Cooperでは、デスクトップやWeb、そしてモバイルデバイスなどのさまざまなプラットフォームに向けて幅広くインタラクティブプロダクトをデザインしています。私たちのデザインチームはそれほど多人数ではなく、通常、インタラクションデザイナー、デザインコミュニケーター、ビジュアルデザイナーから構成されており、ハードウェアコンポーネントをデザインするときにはインダストリアルデザイナーが加わるといった感じです。インタラクションデザイナーとデザインコミュニケーターは一緒になってインターフェイスのビヘイビアのデザインやドキュメント化を、ビジュアルデザイナーはインターフェイスのビジュアル面を担当します。インダストリアルデザイナーはハードウェアの物理形状要素を担当します。また、チームをマネージメントするengagement leadがいて、彼は契約を担当し、チームにガイドラインやディレクションを提供します。
一般的なプロジェクトにおいて、そのソリューション作成フェーズでは、デザインチームはホワイトボードにシナリオのストーリーボードを描いて、それらのスケッチをスクリーン上に落とし込みます。それから、そのスケッチ内容を繰り返し繰り返し見直して洗練させていきます。その後、デザインをクライアント向けにドキュメント化し、彼らがプロダクトを制作する際に参照できるようにします。
いいアイデアが生まれたら、インタラクションデザイナーは手早くFireworksに落とし込み、プロダクトの詳細を詰めていきます。他の会社では、インタラクションデザイン用のツールとしてVisioやOmniGraffleを使ったり、ビジュアルデザイン用のツールとして、Photoshopを使っていると思います。しかし、私たちの経験上、デザインプロセス全体をFireworksで作業することには多くのメリットがあります。
まず第一に、チーム間で作業ファイルをやりとりしながら問題解決を行う上で、コラボレーションしやすいということがあります。また、互いの作業ファイルに対して、エレメントを再作成したり、チェックしたりする必要がないので、効率よく素早く作業を進めることができます。さらに、バージョンが異なる複数ファイルを扱う必要がないので、ミスも減らすことができます。図1は、Fireworksを使ったデザイン作業プロセスにおける、異なるステージの作業ファイル例です。

図1: 左は、インタラクションデザイナーが作成したワイヤーフレームスケッチ。右は、その見た目をビジュアルデザイナーがブラッシュアップしたもの。

この記事は、Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported Licenseのもと提供しています。