ここが違う！ Adobe Fireworksで軽快プロトタイピング

　Adobe FireworksはWebアプリケーションデザイナーのためのデザインおよびプロトタイピングツールです。同社のPhotoshopやIllustratorと比較されることもしばしばありますが、それらが紙媒体主体のデザインツールとして進化してきたのに対し、Fireworksは「（デスクトップ、ラップトップ、モバイルといった）スクリーンベース」のデバイス向けデザインに特化したツールとして版を重ねてきました。そのためFireworksアプリケーションが扱うカラーモードにCMYKはなくRGBのみとなりますが、軽快な操作感やベクターもビットマップも扱えるという手軽さから、一部のUI／UXデザイナーに愛されています。

　Webアプリケーション開発プロジェクト全体を通して、UIデザイナーに求められる成果物の大半をFireworksで作成できます。

　ここでは、Webアプリケーション開発の流れの中で、デザイナーがほぼFireworksだけを使って作成できる成果物と、そのワークフローについてご紹介します。

■対象読者

WebアプリケーションのUIデザイナー UXデザイナー Webデザイナー 　特に、次のようなことを感じている人にオススメです。

Fireworksを使うメリット
こんな人にオススメ こう便利 Photoshopをメインで使っているけど、機能のすべてを利用しているわけではない（特定の機能しか使用していない）。 FireworksはスクリーンデバイスのUIデザイン制作に特化している。メニューも多すぎず迷いにくいし操作が軽快。 画面数、画面遷移、インタラクションの指定などが多いUIデザインを作るときにPhotoshopだと管理が大変だと感じているUIデザイナー。 Fireworksのページ機能を利用してペーパープロトタイプを管理できる。 IllustratorでUI設計書などのページ物を作成しているがページコピー時やシンボル化時の「ピクセルのズレ」が気になる。また、ページを増やすとどんどん動作が遅くなる。 Fireworksだとページコピー時のズレなどは起こらない。
■プレゼン用デザイン、プロトタイプの作成

●PDFに書き出す

　プリセールスやプロジェクトの初期段階で、クライアントにWebアプリのビジュアルイメージを持っていただくためのプレゼン用デザインを作成することがあります。数ページに渡る画面遷移のイメージを1つのPDFに書き出すことで紙芝居風のファイルにまとめることが容易です。

　例として、6ページのビジュアルイメージドキュメントを1つのPDFに書き出してみます（参考：サンプルファイルの「sample1_VD」）。



　メニューの［ファイル］-［書き出し］で書き出しの形式から「Adobe PDF」を選択します。

　そして「ページ」プルダウンメニューから［すべてのページ］を選択し「保存」ボタンをクリックすると、全ページを1つにまとめたPDF書類が書き出されます。

PDFでの書き出し


●インタラクティブPDF

　Fireworksからはさまざまな形式でファイルの書き出しができます。中でも「（インタラクティブな）PDF」「HTML」「AIRプロトタイプ」といった形式での書き出しを利用することで、デザイナー自らコーディングをすることなく、デザインから簡単なプロトタイプを直接作成できます。

　Fireworksは、少ない工数と予算で最終型を見積もるためのラピッドプロトタイピングツールとしても最適なのです。

　例として、先ほどのファイルに、簡易なリンクボタンをつけてみます（参考：サンプルファイルの「sample1_interactivePDF」）。





　Fireworksからの書き出しで［PDF］を選択すると、設定したボタン（ホットスポット）の押下で該当のページに遷移するインタラクティブなPDFの完成です。



■関連記事
OSSのERP「ADempiere」を使ってノンプログラミングで基幹業務システムを構築する
ここが違う！ Adobe Fireworksで軽快プロトタイピング
専門家からメインストリームの開発者まで　高度な並列化のパワーを提供する「インテルParallel Studio XE 2011」
Hadoop MapReduceプログラムを解剖する
ハイエンドなアプリケーションのためのツール・スイート「インテル Parallel Studio XE 2011」

■記事全文へ