Fireworksで組織的に効率アップ！Web制作者が押さえておきたい基本的な３つの機能とその重要性

2012/12/11(火) 14:01

読了時間3分

こんにちは！ソシャマノートのこのみです！最近はWebサイトのディレクションに携わるようになり、クリエイターとして修行中のこのみ。今日はWeb製作ソフトとしてお馴染みの、Adobe Fireworksについて、書きたいと思います。

Fireworksで個人だけでなく組織的に効率がアップ！

以前までこのみはワイヤーフレームからカンプに起こすまでをPhotoshopで行っていましたが、今ではもっぱらFireworks。一度使うとその便利さから離れられません。個人で利用する際の利便性はもちろんですが、どちらかというとチーム間での共有（ノンデザイナー含む）・フィードバック・制作物ブラッシュアップの効率が上がる事に魅力を感じています。（特にFireworksを使い始めて大きく変わったのはワイヤーフレーム作成時・ワイヤーフレームをカンプに起こすまでのフェーズ）では実際に何が便利だったのか？僭越ながらどんな機能がどう役立ったかをまとめてみたいと思います！<（=^=）ご参考になれば幸いです。では、早速行ってみましょーう！

【アジェンダ】

レイアウトのダイナミックな変更を可能にする「ページ機能」
ちょっとしたパーツの変更も「シンボル機能」でサクサクこなす
ワンクリックでグラフィックが反映される「スタイル機能」
３つの機能の重要性
その他の便利機能

１．レイアウトのダイナミックな変更を可能にする「ページ機能」

まずはずせないのがページ機能。こちらはとても有名な機能です。サイトにはいつも所定の位置にある共通パーツがあると思います。例えば下の画像で、タイトルロゴ・グローバルナビ・サイドバーのレイアウトはどのページでも表示位置やデザインが変わらない共通パーツだとします。

１．ページの基礎となる、マスターページを設定する

【ウインドウ】→【ページ】でページ機能を開き、固定したいパーツのみを表示して「マスターページとして設定」をクリックします。

これがサイトデザインのテンプレートのようになります。これを元にたくさんのページを作っていくことができます。

２．マスターページを編集すれば、すべてのページに編集内容が反映される。

やっぱりサイドバーは右じゃなくて左がいい！という時・・・そんなときはマスターページ１つを編集すればすべてに反映されます。

フレームができた後のカンプに起こす作業も、マスターページを更新すれば全てのページに反映されるのでとても作業効率が良いです。

2.ちょっとしたパーツの変更も「シンボル機能」でサクサクこなす

ページ機能の次にはずせないのが、シンボル機能！　オブジェクトをシンボルに登録すれば、1か所修正しただけで配置したすべての個所の該当パーツに修正内容が反映されるます。わー！（´▽｀）

１．まずはオブジェクトを選択→[F8]を押し、シンボルに変換

今回はボタンの背景画像をシンボルにし、コピペして４つのボタンを作成しました。

２．シンボルを編集　変更内容が一斉に反映される

ボタンを緑で作成しましたがやっぱり、青にしたい！ダブルクリックするとシンボルの編集画面になります。後はオブジェクトを選択し、普通に色を変えるだけ。一斉に変更が反映されます。

例えばコンバージョンのための重要なボタンは、検討を重ねることが多くその分修正もあると思います。バナーなども同様です。そういった変更が一か所ですべてに反映されるのは制作時間のカットになり効率がアップ！その分自分が作りこみたいパーツに時間をあてることができます。

3.ワンクリックでグラフィックが反映される「スタイル機能」

特定のカラー・特定の形・特定のエフェクトを使いたい時、スタイル機能はとても便利です。

１．保存したいオブジェクトを選択し、新規スタイル作成を作成

２．後はスタイルを反映させたいオブジェクトを選択し、パレットの中からスタイルをクリックするだけ

ひとつひとつスタイルを指定する手間が省けるだけ作業のスピードがアップします。

4.３つの機能の重要性

上記までに紹介した機能はＦｉｒｅｗｏｒｋｓを使っている人なら「当たり前すぎる機能」だと思いますが、わざわざ取り上げたのは単に作業者にとってだけ便利なものではないからです。重要なのは短時間に数パターンもの提案を作ることが出来るのはもちろんの事、効率よく大幅な変更が行える故にパターンの”幅”が広がり、より多くの案を生め、より多くの検討をする事ができるからです。やりたい事はきまっていてもそれに最適なレイアウト・機能要件が、一度の会議ですんなり決まる事はほぼありません。（本当は決められれば一番いいと思いますが）クライアントや上司からフィードバックをもらう→修正→フィードバック→修正・・・（繰り返す）と設計者（企画者・デザイナー等）はサイトの目的を叶えるために思案を重ねながら何回もアウトプットを行う事になります。そんな時、これら３つの機能は設計者を助けてくれます。結論として限られた時間でより多くの提案を吟味してサイトデザインと機能要件を練ることが出来るので、良質なサイトづくりの大きな手助けをしてくれるといえるでしょう。

ここまでページ機能・シンボル機能・スタイル機能とご紹介してきましたが、Fireworksには便利な機能がまだまだ沢山あります！ここで全て紹介しきることはできませんが、最後にとても参考になる記事をまとめて終わりにしたいと思います。みなさん最後まで読んで頂きありがとうございました！

5.その他の便利機能

共有ライブラリ

共有ライブラリには沢山のパーツが保存されています。ワイヤーフレームなどグラフィックにこだわらない時は、「とりあえずこんなようなものを入れます！」とアイコン画像やボタン等を置いておきます。（このみはフォームのイメージを作ったりする時によく使っています。）デフォルトでもいろいろとパーツが揃っているので大変便利です。オリジナルパーツを追加する事も出来ます。