CS4でWeb制作のワークフローを棚卸し
今月号の記事
いよいよAdobe CS4が今月から出荷されます。すでにダウンロードできる体験版をインストールされた方もいれば、当面は様子見を決めている方もいらっしゃるでしょう。
実際のところ、どんなに新機能が素晴らしくてもバージョンアップを行うと、制作環境の構築、トレーニングの時間や「慣れ」、過去のバージョンのファイルとの互換性検証など、作業能率は一時的にダウンしてしまいます。
とかく愛着のあるアプリケーション、手慣れた手順で作業を進めてしまいがちですが、そもそものアプリケーション選択は適切なのか、機能を知らないばかりに無駄な時間をかけていないかなど、現在のワークフローの中でボトルネックになっている部分を見直す機会として最適なのがバージョンアップのタイミングです。
さらにDreamweaverやFireworksの新機能が、そのボトルネック解消につながるのでしたら、バージョンアップは真に価値があるものになるでしょう。
この記事では、Dreamweaver CS4/Fireworks CS4がワークフローに与えるインパクトという切り口でお話しします。
ライブビューの真価は「スピーディに修正箇所を特定すること」にあり
Dreamweaverでの制作フローでは「デザインビュー／コードビューでコーディングを行い、ブラウザプレビューで確認する」という作業を繰り返すのがセオリーでした。
この作業を軽減するものとして注目されているのがDreamweaver CS4の新機能「ライブビュー」です。
ライブビューをオンにすると、デザインビュー内でマウスオーバーなどのアクションを確認できるようになります。
図：ドキュメントツールバーの［ライブビュー］をクリックすると、デザインビューでJavaScriptが実行され る
Edge 2008年7月：Dreamweaver CS4 パブリックベータ 第2回 ライブでJavaScriptの動作と動的HTMLソースを確認可能
なお、ライブビューでは、SafariのレンダリングエンジンであるWebKitが使われています。WebKitといえ ば、iPhoneのSafariや今年9月にリリースされたGoogle Chromeのレンダリングエンジンとしても利用されてい ます。ただし、ライブビューによってDreamweaver内でブラウザと同等の検証が行えるからといって、Internet ExplorerやFirefoxなどの検証が省略できるわけではありません。
さらに、ライブコード機能を使うと、JavaScriptによって書き換えられるHTMLやCSSがコードビューに反映されます。F6キーを押して停止（フリーズ）させれば、これまでは不可能だったマウスオーバー時のHTML/CSSの状況を確認することができます。
このようにライブビューの意義は、Dreamweaver内でJavaScriptを実行することにより、よりスピーディに編集箇所を特定し、修正を容易にする、というところにあります。
ファイルの共有とバージョン管理は、これからの必須の課題
コーダー同士だけでなく、デザイナーとプログラマー、制作会社と外注・パートナー、制作会社とクライアントなど、いろいろなシーンでファイルを共有する機会が増えています。「分業」、「コラボ」の時代では、ファイル共有やバージョン管理などのルール作りとその徹底、システマチックな環境作りなどが不可欠です。
図：同じデータをさまざまな関係で扱う機会が増えている
これまでDreamweaverでは、チェックイン・チェックアウトと同期、または、Contributeを絡めたグループワークへの対応が基本でした。
Contributeを使えば「ロールバック」（過去のバージョンに戻ること=バージョニング）が行えますが、Dreamweaverのみでは、何かしらの工夫を行わない限り、手元のデータもサーバ上のデータも、以前のバージョンに戻すことは不可能でした。
図：たとえばAさんがチェックアウトして作業している間は、ほかの人間が作業できないというのが
「チェックイン・チェックアウト」の基本的な使い方
Dreamweaver CS4では、プログラマー間のバージョン管理としては標準ともいえるSubversion（サブバージョン）が搭載されました。
これによってSubversionクライアントとしてDreamweaverを利用し、作業時にはリポジトリ（Subversionでのファイルの管理場所）にアップ（=コミット）し、テスト公開時にはサーバに切り替えて利用するといったワークフローが実現します。なお、Subversion利用時には、従来のチェックイン・チェックアウト機能は使えなくなります。
図：FTPによるサーバ接続は仮アップ／本アップ用、Subversionによるリポジトリ接続は
作業ファイルの進捗管理用と2つを使い分ける
Dreamweaverに搭載されているSubversionの機能は、Subversionクライアントに特化したもので、バージョン同士の差分比較やマージなどの機能はありませんが、必要十分と言えるでしょう。
Mac OS Xでは標準でインストールされているSubversionリポジトリを使ったり、Backlogなど無料でSubversionリポジトリを使えるサービスがいくつかあります。セットアップには少し手間がかかりますが、ぜひトライしてみてください。
図：［サイト定義］ダイアログボックスに、新しく［バージョンコントロール］のカテゴリが追加されている。
たとえばリポジトリのURLが「https://cssnite.backlog.jp/svn/SITE」の場合、図のように設定する
図：ファイルパネルでは、［サイトファイル］アイコン（左側）と
［リポジトリファイル］アイコン（右側）を クリックして、接続を切り替える
ワイヤーフレーム、カンプ、モックアップとワークフローを分断しないFireworks
マクロメディアがアドビに買収され、単体売りがなくなるなど存続を心配されていた方も多いFireworksですが、CS4では、Photoshopとの棲み分けをしながらWeb制作のワークフローの中で新たなポジショニングが行われています。
ワイヤーフレーム制作はFireworksで
Webページに掲載するコンテンツの領域を長方形で書き込み、ざっくりとした位置や大きさなどを確認するワイヤーフレーム制作には、PowerPointやIllustratorなどのいわゆる「ドロー系」のアプリケーションを使っている方が多いことと思います。
それぞれの持ち味や優位性はありますが、PhotoshopやFireworksでカンプ作りを行う場合には、ゼロから作り直さなければなりません。さらに、PowerPointやIllustratorで作ったワイヤーフレームを実際のページに落とし込んでみたら横幅が広がり過ぎてしまったり……といった、Webページを前提としたときの寸法感覚のズレなども無視できない問題です。
図：ワイヤーフレームの例
Fireworks CS4では、従来からある「ルーラーガイド」や整列機能に加え、「ものさしツール」「スマートガイド」「ツールヒント」などの新しい機能により、ワイヤーフレーム制作アプリとして充実したものになっています。重要なのは、そのままカンプ作りに移ることができる点です。
複数ページを1つのドキュメントで管理
グラフィックデザイン感覚のページの完成度よりも、ページ遷移という観点でのWebサイトのUI設計に着目している方は少なくないでしょう。トップページと下層のページを1ページだけのカンプとして制作するケースよりも、複数の下層のページまでカンプとして制作するケースが増えていくことが予想されます。
図：Fireworks CS4の［ページ］パネル
Fireworks（正確にはCS3から搭載）のページ機能を利用すれば、複数ページを1つのドキュメントで管理することが可能になります。ロゴやナビゲーション、ページ背景などの共通パーツはページをまたぐ共通パーツとして作っておけばよいですし、「1ページ1ファイル」の場合には面倒だったカラー、シンボル、スタイルなどの同期に気を配らなくて済むようになります。
EFO（エントリーフォーム最適化）
サイトへの流入を増加させるためのSEO、検索エンジンから来たユーザのサイト内の動線を考えるLPO（ランディングページ最適化）に加え、最近、耳にする機会が増えているのがEFO（エントリーフォーム最適化）です。
たとえば、「問い合わせを行う」「カタログ請求を行う」「注文する」などのユーザからの接触機会において、フォームの出来不出来はコンバージョン（成約率）に大きな影響を与えます。
Fireworks CS3/CS4の共有ライブラリには、Mac、WindowsそれぞれのOSでのフォームパーツが用意されており、ドラッグ&ドロップで配置しながら、フォームのデザインを作り込むことができます。
見た目だけで完結するわけではありませんが、これまでカンプベースでは非常に面倒だったフォームの仮デザインを行えることは非常に心強いです。
もちろん、EFOという観点では、実際に操作する上でのユーザビリティを追求することも忘れずに。
図：Fireworks CS4の［共有ライブラリ］パネル。
ドラッグ&ドロップでドキュメントにフォームのパーツを配置できる
FireworksからPDFに
制作したカンプをJPEGに落としたり、紙ベースで印刷したり、といったカタチでプレゼンするだけでは、ページ遷移を実感できませんし、何よりどこがクリッカブルな領域なのか、といった情報もクライアントによっては理解できません。
Fireworks CS3では「ラピッド・プロトタイピング」というキャッチで、複数ページを、クリッカブルマップ付きのJPEGを貼ったHTMLに書き出すことで、ページ遷移を実感できるプロトタイプ制作が提案されました。
Fireworks CS4では、これをさらに進めPDFへの書き出しが可能になりました。複数ページを1ファイル内で作っている場合、ページ間のリンク情報を保持したまま、1つのPDFとして書き出すことが可能です。つまり、モックアップをPDFで行うことでパスワードによるセキュリティ設定を行ったり、Acrobatの注釈を使って校正指示を書き込んでやりとりしたり、といったワークフローが実現します。
図：Fireworks CS4の［書き出し］で「Adobe PDF」を選択すると、
［ドキュメントを開くためのユーザパスワード］などを設定することができる
Photoshop？Fireworks？
このようにFireworksは、Webグラフィックの制作だけでなく、ワイヤーフレーム、（フォームを含む）カンプ、モックアップなど、ワークフローの初期段階において、シームレスに使えるツールとして機能強化されていることがご理解いただけると思います。
しかし、やはりカンプ制作には、手慣れたPhotoshopを使いたい、という方も少なくないでしょう。Fireworks CS4では、Photoshop（PSD）の読み込みが強化されているので、当面はPhotoshopとの併用という流れも可能です。
なお、Fireworksから「MXMLと画像」を書き出してFlexで再編集したり、先日のMAX USでお披露目されたFlash Catalyst（コードネーム:Thermo） と連携したりするなど、「カンプ作りはPhotoshopでなくFireworksで」という流れが、今後、さらに強まってくることは確実です。
まとめ
Dreamweaver CS4/Fireworks CS4がワークフローに与えるインパクト、という観点で新機能をご紹介してきました。アプリケーションの機能強化というと、クリエイティブな方向性や効率化などがクローズアップされますが、Web制作という中で無視できない「クライアントへの提案」や「ユーザの使い勝手を高めるための部材作り」といったテーマがベースにあるように感じました。
Web制作は、単に「見た目ページ」をデザインしたり、コーディングを行ったりという手仕事から、クライアントのビジネスに結果をもたらすためのツールとしての側面が、今後、さらに重要になってくるでしょう。
バージョンアップを機会にワークフローを見直し最適化することで生まれる時間をどこに使うべきか、ワークフローだけでなく、私たちの仕事のあり方にも棚卸しのタイミングが訪れているのかもしれません。
お知らせ
1月29-30日に開催されるAdobe MAX 2009 Japanにて「C7：1月30日15:50-16:50」に、Fireworksのセッションを担当します。Fireworksのセッションとしては、MAX唯一のものです。ご興味ある方はぜひお立ち寄りください！
