エンタープライズIT環境でのFireworksの使用

コンピュータを使ったビジュアルデザインについて語る時、大半の人は「デザイン」という言葉で、ピクセル単位の操作が可能な人気の画像編集ソフトウェア、Adobe Photoshopを連想することでしょう。今では「Photoshop」という単語も、「Google」のように、普通名称化した商標として広く使われているほどです。本来、この２つの商標は固有名詞であったものの、最近では「答えをググってみる」や「画像をフォトショップしてみる」といった表現が使われるほどになっています。

筆者も「Photoshop」を動詞として使用する一員ではありますが、実際には相当な必要性がみられない限りPhotoshopを起動することはありません。では、Webサイトデザインを手がける情報アーキテクトの筆者が、Photoshopなしで、どうやりくりしているのかが疑問になることでしょう。答えは簡単、それはFireworksの存在です。

陰の英雄ともいえるこのグラフィックアプリケーションを、なぜ筆者が愛用しているのか。これを説明する間は、先入観や疑念を一時的に控えるようにしてください。なお、この記事はPhotoshopの有用性を否定するものではない点に注意してください。ここでは単に、同等の潜在能力をもち、いわば「従兄弟」製品ともいえるFireworksに秘められた、数々の可能性や特長を強調することに注目しています。ここで筆者が主張したいのは、Fireworksならワークフローの能率化とコラボレーションのスピードアップが実現できるので、エンタープライズ環境のデザイナーやデベロッパーにとって、非常に魅力的な選択肢だということです。

PNGで作業

Photoshopがプロフォトグラファー究極のツールであるかたわら、FireworksはWebデザイナー・デベロッパーに対して、無類の有用な機能群を提供します。

Fireworksの明らかなメリットの１つは、画像をPNG*ファイル形式（「ピング」と呼びます）でネイティブに保存できる点です。「Portable Network Graphics」の略であるPNGは、アルファ透過および24ビットカラーをサポートするロスレス方式の圧縮形式です。「レイヤーの扱いは？PNG形式はレイヤーが統合された画像ファイル用なのでは？」と心配する方もおられることでしょう。通常であれば、これは当を得た心配事といえますが、Fireworksの場合、作成したレイヤーはPhotoshopでの作業と同じように自動的に維持されます。

Fireworksで作成したPNGファイルを使用すれば、同様のPhotoshop文書よりはるかに小さなファイルサイズを実現できます。筆者が非科学的な検証テストを行ったところ、レイヤーの備わったファイルをPNGとPSDファイル形式で保存した場合、Fireworksファイルの方が実に61%も小さくなっていました。Fireworksのもう１つの特長は、グラフィックファイルを他のユーザと共有する際の優れた互換性です。

手軽に共有

原則的には、通常、JPGやGIFファイルを読み取れるアプリケーションはPNGもサポートしています。PNGファイルはPhotoshopが採用するPSD形式と異なり、市場に普及するさまざまなアプリケーションで読み取ることができます。この中には、いま最も重要度が高い、Webブラウザも含まれます。

Fortune 500企業のインターフェイスデザイナーとして勤務する筆者は、以前、作業ファイルを共有ネットワークドライブに保存していました。これにより、ユーザエクスペリエンスチームのメンバは筆者のPNGファイルに完全にアクセスできる一方で、社内の（多数の）関係者に対しては「読み取りのみ」のアクセス権限を設定することができました。このような体制を導入することで、筆者のチームは正常に作業を進めることができました。モックアップデザインの承認が必要になった時点では、数百ものPSDファイルをJPGやGIF形式でバッチ書き出しするのではなく、単に以下の体裁の手短な電子メールを送信するだけでした。

「プロジェクトカンプをこちらのアドレスで確認してください。 http://10.10.10.xx/uxd/project/」

承認担当のチーム側では、受け取った電子メールを基にインターフェイスのモックアップを自由に精査・閲覧することができました。この際、デザイン案が見られるようにするために、我々のチームが特別な追加作業を行う必要は皆無でした。また、電話会議が行われるようなケースでは、決裁担当者がブラウザ上で筆者のPNGファイルを閲覧しながら、会議中のフィードバックに応じて、筆者がデザインをリアルタイムで編集するといったことも可能でした。このワークフローによって節約できた時間は計り知れません。

現在、Fluid*の主任クライアントサイドエンジニアとして活躍する、元同僚のCody Lindley*氏は次のように述べています。「アドビ システムズ社がMacromedia Fireworksを取得し、FireworksのPSDサポート機能を強化したことにより、全員のワークフローが改善されました。FireworksはAdobe ImageReady*が目指していたもの、そのものなのです。Photoshopがプロフォトグラファーのためのツールであれば、FireworksはWebプロフェッショナルにとって欠かせないツールといえるでしょう」。

すばやくプロトタイプ作成

Fireworksのもう１つの特長は、プロトタイプをすばやく作成できることです。最新リリースのFireworks CS3では、プロトタイプ作成をさらに高速に進められるようになっています。新機能の「ページ」を利用すれば、マスターテンプレートを作成し、そこから階層下にレイヤーをぶら下げることができます。Fireworksのページは、OmniGraffle*のキャンバスと同じように機能するといえば分かりやすいでしょう。ただし、これらの２つで異なる主な点といえば、Fireworksでプロトタイプを作成する場合は、Webアプリケーションの最終的なルック＆フィールを同時にデザインできるということです。

Fireworksでのプロトタイプ作成が完了したら、プロジェクトを手軽にHTMLへと書き出し、クライアントがプロジェクトをクリックスルーできるようにすることが可能です。（この機能は、最終版のコードを生成するためには利用しないようにしてください。）また、FireworksはAdobe Flashと完全に統合されているので、PNGデザインをFlashに読み込み、FLAのベクトルインターフェイスとしてシームレスに利用することもできます。さらに、Fireworksからは実際に機能するSWFアニメーションを直接、生成することも可能です。

業務仕様

画像をXHTMLとCSSレイアウトでの本運用向けにスライスする場合、Fireworksほど圧縮効率に優れたプログラムはありません。 大規模サイトで膨大な数の画像が使用されることを考えると、Fireworksでの最適化によるメリットは相当なレベルに達します。ページの表示速度向上や消費帯域幅の節約による金銭的なメリットなど、影響はさまざまな方面へと及びます。

Fireworksは、Adobe Flexプラットフォームのネイティブインターフェイス形式であるMXMLを書き出すこともできます。 Flexは、データベース連動型のリッチインターネットアプリケーション（RIA）サイトの原動力として活躍しています。FireworksとFlexの関係は、Microsoft Expression Blend*とSilverlight*の関係に似ています。つまるところビジュアルデザインツールであるBlendは、Windows Vista用アプリケーションインターフェイスファイル形式のXAMLを生成することができ、この際生成されたファイルはMicrosoftの.NET Framework*で使用することができます。

アドビ システムズ社では、Macromedia社の買収以来、両社の製品統合性を高めるために、さまざまな努力をはらっています。PhotoshopはPNG文書のレイヤーを認識できないものの、FireworksはPSDファイル形式を読み書きすることができます。また、PSDのレイヤーとクリッピングマスクに関して一部で問題があるとはいえ、PhotoshopからFireworksへの移動プロセスは、ほぼシームレスといえるでしょう。デザイナー間で互換性が問題になるようなことがある場合は、Fireworksユーザが仲裁者として活躍できるはずです。

他のユーザの声

本記事は、当初「Enterprise Fire-Flow」の題名でGeniantSandbox.com*に掲載されたものです。この際、他のWebデザイナーからは、多くの好意的なフィードバックが寄せられました。以下に、Fireworksを支持する他の業界プロフェッショナルの声を抜粋して掲載することにします。

私も、Fireworksに満足する（バージョン２からの）リピートユーザです。私が使用するiMac上ではFireworks CS3が一日中起動しており、情報アーキテクチャの整理からワイヤーフレームの作成、画像・Webサイトの編集、アプリケーションインターフェイスのデザインにいたるまで、あらゆる用途でFireworksを使用しています。また、Flexに書き出す機能は、作業生産性の大幅な向上をもたらせています。生成されたコードにやや手を加える必要があとはいえ、一般的には、Flexへの書き出し機能はとても有効な機能です。Fireworks CS3に収録された豊富な機能群を考慮すると、Thermo*の登場により、さらに優れた製品がインターフェイス・インタラクションデザイナーに提供されることでしょう。中でも、特にデータ統合機能に対して大きな期待を寄せています。リアルタイムのライムデータを利用しながらデザインを調整する。これを想像しただけでもワクワクします。– Geof Harries*

私もFireworksオンリーのWebデザイナーです。つい最近まで、これほど多くのWebデザイナーがFireworksを使用しているとは知りませんでした。正直なところ、Photoshopユーザの数があまりにも多いので、間違ったツールを選択したのではないかと考えることもありました。 しかし、Webプロフェッショナルの多くがFireworksを使用していることに気付いてからは、このツールが他のベストツールと十分に渡り合えるものであることを再認識しています。根っからのベクトル派である私は、ロゴ、Webサイトモックアップおよび各種アートの作成にFireworksを使用しています。Adobe Illustratorのベクトル形状をFireworksにダイレクトにコピーできる機能は、（CS3以外での動作はよく分かりませんが）脱帽ものです。私は、Fireworksを他のユーザに押しつけるほどの熱狂ユーザではありません。Photoshopが用途にあっているのなら、それはそれで良いでしょう。しかし、私の場合は、Fireworksを使用することに、かなりの愛着を覚えています。また、アドビ システムズ社によってFireworksがさらに改良されていることを喜ばしく思っています。
– Rogie King*

Fireworksはすばらしいツールです。私もFireworksを使用して、初めてのWebデザインを作成しました。ファイル形式について詳しくなるまでは、PhotoshopがなぜPNGファイルをレイヤーの統合された画像としてレンダリングするのかが理解できませんでした。 標準的なPNG形式に対する内蔵のレイヤー機能を利用する方が、PSDをあちらこちらで、さまざまな用途用に変換するよりはるかに有用です。
– Ben Carlson*

Fireworksは、もっと取り上げられるべき存在です。少なくとも、私にとっては欠かすことのできないツールです。Photoshopは、写真を編集する時にだけ使用しています。FireworksファイルをWebサーバに配置し、これをクライアントに提示することは考えつきませんでした。すばらしいアイデアだと思います。
– Dave Lowe*

Photoshopはフォトレタッチ用の最高峰ツールです。しかし、Webデザインを手がけるのであれば、Fireworksがユーザのために尽力してくれます。
– Craig Erskine*

Fireworksがとても気に入っています。バージョン１の時代からFireworksを使い続けています。Fireworksはフォトレタッチツールとして優れているわけではありませんが、Webデザインの現場では、Fireworksにまさるツールは考えられません。Fireworksには、すばらしいコンビネーションの機能が収録されています。
– Jonathan Snook

最近Fireworksに移行しましたが、このツールを（Web関連の作業で）使い込むに連れ、Photoshopと比べての長所が明らかになっています。
– Jonathan Christophe*

この記事の意見に大いに賛同します。私も常にFireworksを支持してきたユーザです。作業の最初から最後まで、Webに特化した機能がもたらす、すばやくしかも柔軟な制作作業性を満喫しています。
– Andy Rutledge*

Dreamweaver 1.2の時代からFireworksを使用していますが、この統合環境を利用することのメリットは当初からすぐに理解できました。 今でもFireworksを愛用し続けています。レイアウトを行うようなケースでは、Photoshopユーザに大差をつけることさえ可能です。軽視されるようなこともありましたが、Macromedia社が終焉を迎えた時点でも、必ずアドビ システムズ社の製品として維持されることを確信していました。
– Brandon Richards*

次のステップ

クリエイティブチームの作業を改善する選択として、Fireworksが検討に値することをご理解いただけたでしょうか。Adobe Creative Suite 3 Web StandardまたはWeb Premiumをご所有の場合、Fireworksはすでにインストールされているかもしれません。一度、時間をつくって、Fireworksの多彩な機能性を探索してみるようにしてください。

Fireworksをすばやく習得できるよう、以下のオンラインリソースもあわせて参照してください。

• Fireworksデベロッパーセンター Adobe
• Fireworksの学習*（Craig Erskine）（英語）
• Senocular掲載のFireworksチュートリアル*（Trevor McCauley）（英語）
• SixThings: Rapid Fire Fireworks*（Erwin Simpauco）（英語）
• スクリーンキャスト: Ajax読み込みアニメーション*（筆者提供）（英語）