ワイヤーフレームはFireworksがベストか。意外とInDesignが次点か。

()
ワイヤーフレームって何で作ってますか?


これまで私はワイヤーフレームはイラレで作ってました。
大枠となるページだけ作る分にはこれでもさほど問題ないんです。


ただ、全ページ作る必要に迫られた場合、ナビゲーション部分などの共通部分に後から変更が生じたとき、イラレにはページ概念がないので、すべてのファイルもしくはアートボートのナビゲーション部分を変更し直さなければならず、とても厄介です。


前回の案件でそうなって、大変な目にあったので、次こそなんとかしたいと思って、最近InDesignのマスターページ機能に着目し、実際やってみたら結構よかったんです。もう今後これでいいじゃんと。


ところがそんな矢先、CSS Nite in Omotesando, Vol.1にて、Fireworksでのワイヤーフレーム(デザインカンプ)作成方法が紹介されていて、間違いなくワイヤーフレームはFwだと実感しました。


ワイヤーフレームどころか、デザインカンプ、プロトタイプまでFwでいけそうです。ワークフローを見直した方がよさそう。Fwいい。



デザインカンプについてはPhotoshopとどっちがいいのか、次回のCSS Nite in Omotesando, Vol.2でそこんとこ、もっと深い話が聞けそうです。


今回のvol.1はUstreamで録画されていました。
http://www.ustream.tv/recorded/7519483


今までFw以外でワイヤーフレーム、カンプ、デザインされていた方、特にデザインはPhotoshopと思い込んでいる方は見なきゃ確実に損すると思います!(笑)


Fwのページ機能が便利すぎます。
これはInDesignにもあるマスターページ機能があるということなんですが、ナビゲーションなどの共通部分をマスターページに配置しておけば、後からそのページを編集することで、全ページのナビゲーションを一斉に変更することが可能なんです。


MTでいう共通部分のモジュール化、オブジェクト指向でいう継承みたいなもんでしょうかね。


調べてみたら
AdobeのFireworksヘルプに「Web サイトとアプリケーションインターフェイスのプロトタイプ作成」と題してまさにワイヤーフレームやデザインカンプ作成に関するチュートリアルが掲載されていました。意外です。


さらに、Fwでワイヤーフレームやデザインカンプを作るにあたって、マスターページ機能以外にも便利な機能がありました。


それはpdf書き出しと、共有ライブラリ


ナビゲーションにリンクを設定すればpdfに書き出した際に、そのナビにリンク機能が保持されるんです。pdfなのにボタンクリック出来るんです。すげーいい。クライアントに確認してもらいやすいです。


そして共有ライブラリには、フォームや検索ボタン用虫メガネ、ボタンなどWebページのパーツが用意されていて、これを使えばサクサク制作できます。


どういうことかは超簡易サンプルを試しに作ってみたんで、ご覧いただければいいかなって感じです。

http://sen-i.jp/images/entry/fw-wireframe.pdf


他にもたくさん便利な機能を鷹野さんがCSS Niteで紹介してくださったので、興味ある方はUstをご覧ください。


Fwという宝の持ち腐れをしていたことに気づくかもしれません。CS5ではCS4よりすごくよくなってました。


InDesignでもワイヤーフレームレベルなら、イラレやフォトショで作るよりかなり効率的に作ることが可能でした。ただ、さすがにデザインはしんどいですね。


やっぱりFwはWebクリエイティブのためのアプリケーションですから、当然ですが、その点でDTPメインのInDesignより分があります。


ちなみにポートフォリオならInDesignで作るのがよいです。ノンブルや柱の設定もできますからね。

イラレやフォトショで作るのは効率が悪すぎます。

なぜってやっぱりページ概念がないから。共通部分の変更に手間がかかるから。


次のvol.2も楽しみだな。またUst中継してくれるようなので。


ってか、こんな情報を無料で家で仕入れることが出来ることが素晴らしい。

戦意

© 2012 戦意