ここが違う! Adobe Fireworksで軽快プロトタイピング
CodeZine / 2012年1月17日 14時0分
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」
■記事全文へ
トピックスRSS
ランキング
-
1トレエン斎藤さん「浮気写真」がSNSで流出!女芸人に晒されてしまう
秒刊SUNDAY / 2018年4月21日 9時26分
-
2見方を変えると読める文字!見た瞬間に読める人がいるらしい!
秒刊SUNDAY / 2018年4月21日 7時42分
-
3デル、新ゲーミングPC「Dell G」を国内投入 - 高性能ながら低価格目指す
マイナビニュース / 2018年4月24日 21時18分
-
4聯合ニュース「?????」 Yahoo!配信記事、丸ごと文字化けの珍事
J-CASTニュース / 2018年4月24日 19時47分
-
5UFOキャッチャーのカービィに「なんかすごいミラクル起こってる 」 声優・山村響さんのツイートが大反響
ガジェット通信 / 2018年4月24日 16時30分