ここが違う！ 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の完成です。