Webデザインを進化させる「Adobe Creative Suite 5 Web Premium」(後編)

Webデザインのための製品群をワンパッケージにした「Adobe CS5 Web Premium」。その製品構成と、「CS5」における機能の進化を前編に続き、2回に渡り徹底紹介する。後編では、Adobe CS5 Web Premiumが提供している機能を「オペレーション」、「ワークフロー」、「ファイルフォーマット」という3つのキーワードで読み解いていく。

「Adobe CS5」体験版はこちらから

Adobe CS5 Web Premiumの本当の見所

Adobe CS5 Web Premiumの各構成ツールの新機能に注目すると、それらは、まるで魔法のように感じられるかもしれない。しかし、CS5 Web Premiumの本当の魅力は、実際の業務の中で必要となる素材とコードの管理・支援機能にあると筆者は考えている。

「CS3」や前作「CS4」が出た頃と比較すると、Web制作で求められる規模感や複雑さは、年々増してきているという印象がある。それに伴い、様々なクリエイターとのコラボレーションも欠かせない状況になっている。このような状況下で、制作というプロセスで必要となるファイルをどう管理していくかというのは、かなり重要な課題だ。これらの点に関してAdobe CS5 Web Premiumが提供している機能を「オペレーション」、「ワークフロー」、「ファイルフォーマット」という3つのキーワードから見ていこう。

オペレーション

オペレーションというのは、ここでは現場における作業を指す。今回は「今まで出来なかったことが出来る」というタイプの機能ではなく、「従来行なっていたクリエイティブな作業をいかに効率よく行なえるか」という機能に着目したい。CS5 Web Premiumでは、コーディング周りの機能が大幅に向上している。それも時代に合わせた機能だ。例えば「Dreamweaver CS5」では、PHP周りのコーディング環境が飛躍的に整備された。PHPはプログラム言語だが、たとえばWordPressのテンプレートを扱うデザイナーにとっては、避けて通れず、とっつきにくいテンプレート言語であった。

また、CMSテンプレートのコーディングで悩ましい問題のひとつであったプレビューも、動的なコンテンツでのプレビューがサポートされた本バージョンからは楽になるだろう。そのほか、Adobe CS Live オンラインサービスのひとつに「Adobe BrowserLab」というサービスがあり、これを使うことで、IEやFirefox、Safariといった主要ブラウザのプレビューが一度に行えるという機能もある。

同様に「Flash Professional CS5」のコーディング環境もかなり向上した。以前のバージョンでは、お世辞にもFlash上でのActionScriptコーディングは、ユーザーの手入力に頼る部分が大きく楽とは言いがたい状況だった。そのため、ActionScriptを専門に書く人々は、「Flash Builder」(旧「Flex Builder」)、「FDT」、「Flash Develop」といったActionScript専門エディタを使うことになった。だが、これらのエディタは開発者向けであり、デザイナーにとっては敷居が高い。今回のバージョンアップにより、自動補完やコードの自動生成といった機能が本格的にサポートされている。

これまでコーディング環境周りをみてきたが、デザイン制作面でも向上がある。それが「Fireworks CS5」のテンプレート機能だ。Dreamweaverは昔からテンプレート機能が存在していたが、実はFireworksは本バージョンで初めてテンプレート機能が追加された。テンプレートにはあらかじめ様々な用途に向けたものが用意されており、AIRのアイコン制作用、モバイルデバイス用の画面用、様々な解像度における標準の画面サイズといったものから、グリッドレイアウト用にあらかじめガイドがひかれたものや、ワイヤーフレーム用のテンプレートまで、これまではデザイナーが設定していたものが元から用意されている。おまけにテンプレートは自作することも可能。これをチーム内で共有することで、スピーディーに同一クオリティのデザインを仕上げることが可能になるだろう。

「Flash Catalyst」で変化するワークフロー

続いてワークフローというキーワードでCS5 Web Premiumを見ていこう。CS5 Web Premiumを使ったWebサイト制作のワークフローで最も変化しそうな部分はプロトタイプ作成に関する部分ではないだろうか。今回「Flash Catalyst」の登場により、Fireworksで静的コンテンツ、Flash Catalystでリッチコンテンツのプロトタイプ制作が可能な構成なった。どちらもコーディングなどを行うことなく、実際の挙動に近いプロトタイプの制作が可能なソフトだ。Fireworksは、グラフィックソフトとしてのイメージがいまだ強いが、CS3以降、共有ライブラリという形で様々なブラウザのボタンやコンポーネントをドラッグ&ドロップで配置できるようになったり、「Photoshop」に比べてオブジェクトのサイズ調整が融通が利くように進化していたりと、高いクオリティというよりはスピーディーな制作を可能にするアプローチが数多くとられてきている。

また、Photoshop、「Illustrator」、FireworksとFlash間の取り回しが容易になり、各ツールの連携がかなりスムーズになっている。これはFlash Catalystの登場によるところと、後述のフォーマットのサポートが大きい。これによりインタラクティブコンテンツのビジュアルデザインを、実際に挙動を確認しながらデザイナー主導で進めることができるようになるため、飛躍的に効率があがることが予想できる。

Flash Catalystの連携機能は、Flashコンテンツ制作時しか使わないような印象もあるが、Ajaxを使ったコンテンツのデザインにも使用できる。というのも実際の現場では、Flash Catalystから書き出されたものをそのままFlashコンテンツとして使用するということはあまり考えられず、やはりFlashエンジニアがFlash Catalystから書き出された素材を使って各自スクリプトを書き起こして実装することになると予想できるからだ。Flash Catalystは納品物を作るためのツールというよりは、デザインツールとして捕らえるべきだろう。

ファイルフォーマット

最後にファイルフォーマットというキーワードからCS5 Web Premiumを見てみよう。今回の特徴のひとつにフォーマットの移行がある。Flashの元ファイルも従来はFLAファイルというバイナリ形式であったが、今回よりXFLファイルというXML形式で保存が可能になった。

また、Photoshop CS5 Extended、Illustrator CS5、Flash Catalyst CS5、Flash Professional CS5、Fireworks CS5で出力可能なFXGというフォーマットもXML形式であり、今後はXML形式でのフォーマットが主流になっていくのではと推測される(ただし、FXG自体はPhotoshop、Illustrator、FireworksCS4でのみから出力可能)。

これには、2つの理由が考えられる。ひとつは各アプリケーション間での連携の問題である。従来はアプリケーションごとに固有のバイナリフォーマットが採用されていたが、これでは、どうしてもアプリケーション間でのやりとりに誤差が生じやすい。FXGで使われているXMLは、Flexフレームワークで使われているMXMLのサブセットであり、定義を厳格に行うことが可能になる。もうひとつの理由は、バージョン管理システムにおける差分管理を可能にする点である。これまでデザイン作業において単一のバイナリファイルで保存するしかなかったものが、テキスト形式+素材という形式になることで、細かく差分を管理できるようになるのだ。これは、複数人でのコラボレーションに威力を発揮するだろう。