Fireworks CS4ではじめるPDFワークフロー
今月号の記事
Webサイト制作において、情報設計やUI設計はとても大切な仕事です。その中でも、ユーザと直接関わることの多いユーザインターフェイスは、非常に重要な要素となります。このユーザインターフェイス部分は、クライアントと制作会社がよつに組んで、より良いものを作るために、何度も変更のやりとりが発生することが多いです。Fireworks CS4には、そんな変更の際に非常に便利な機能が含まれています。今日は、弊社が制作のお手伝いをさせていただいたWWFジャパン様のWebサイトデザインリニューアルでの事例をご紹介します。
現在公開中のサイト
仕事の進め方
弊社では、Webサイト制作を次のフェーズに大きく分けて作業を行います。
- 計画
- 要件定義
- 設計・開発
- テスト・移行
- 運用・保守
要件定義では、クライアントからの要件を聞き出し、設計・開発フェーズで、要件を元にサイトマップやディレクトリ構造の設計、デザイン設計や情報設計などを行います。そして、設計に基づいて制作・開発を行い、テスト・移行フェーズで成果物の動作確認やテストなどを行います。この中でも、要件定義・設計部分は、クライアントと密に行い、後の工程での変更などによって手戻りが発生しないよう、双方のコミュニケーションが非常に重要な役割を持っております。
リニューアルのポイント
WWFジャパン様のサイトは、2005年冬に全面的なリニューアルを行いました。これまでの日本独自のデザインから、WWFグローバルガイドラインに沿った形でビジュアルデザインを行い、それにあわせて日本独自のデザインテイストを盛り込みました。また、より多くのユーザにWWFジャパン様の活動を理解していただくために、視覚表現のみでの情報提供から、より多くの人がアクセスできるように、アクセシビリティにも配慮することを目標に掲げてページ制作を行いました。
これに伴い、日々追加されていく活動報告やプレスリリースで多くのページを管理する必要がありました。またアクセシビリティの確保も含めたページ更新の効率化のために、Dreamweaverテンプレートを効果的に使い、Contributeでの更新も視野に入れてリニューアルを行いました。
旧デザインの納品時サイトデータ
今回のリニューアルは、前回のリニューアルから3年以上経っています。サイトの管理についてはそれまで抱えていた問題をクリアしたものの、WWFジャパン様の活動をより広く知ってもらいたい、そして多くのユーザに活動を共にしてもらいたいという思いから、ユーザ毎に適切な情報発信を行いました。また、ビジュアルでの訴求効果を高め、活動に参加していただくための導線を強化することを目的として行いました。 したがって、ディレクトリ構造やページ構造の大幅な変更は行わずにデザインのみを変更することが、今回のリニューアルの要件となりました。デザイン変更を行うのは、トップページおよび第二階層のトップ部分 です。
リニューアルのワークフロー
弊社では、案件にかかわらず殆どの制作業務において、先述の通り決まったワークフローのもとで業務を行います。
今回のデザインリニューアルにおいても、基本的な業務フローは大きく変わっておりません。特に、デザイン作成の部分においては、いきなりデザインをカンプと称しておこすのではなく、あらかじめ画面内に必要な要素をこちらで洗い出し、それをワイヤーフレームとしておこしたものをまずは確認していただきます。
次の図が、今回のリニューアルで使用したワイヤーフレームです。OmniGraffleというMacintosh用の図形作成ソフトで作成しています。これを印刷してWWFジャパン様の担当の方と打ち合わせを行い、要素の過不足が無いか、おおまかな位置の合意をいただきました。このワイヤーフレームを元に、デザイナーへデザインの依頼を行います。
弊社では、Webサイトのデザイン制作には、Photoshop・Fireworksのどちらかもしくは両方を使っています。それぞれツールの特徴があるものの、デザイナーがもっとも効率的に作業を行えることを第一とし、どちらか一方のみを優先するということはありません。今回のデザインリニューアルでは、デザイナーがFireworksを使用してデザインしました。
通常、デザインが完成した後、画面デザインを高解像度のJPGで保存し、さらにセキュリティも考慮して暗号化zipファイルにしてクライアントへ送ります。または、社内で立ち上げたクライアントデモ環境よりデータをダウンロードしていただきます。そして、デザインのポイントなどをメールであらかじめ伝え、さらにそのデザインを印刷し、直接クライアントとの打ち合わせを行い、修正などの指示をいただくということが、一般的なデザイン作成フェーズとなっています。デザイン部分はサイトを使っていく上で非常に重要な要素のため、この部分の作業をおろそかには出来ません。基本的に双方がきちんと合意した上で、次の制作フェーズへ移行します。
今回は、デザイン変更とそれに伴うページのコーディングということで、全体的な作業ボリュームは少なめでした。が、その分短期間で作業を終えることで、リニューアルのタイミングをより早めることが可能なため、デザイン確認と修正に伴うやりとりを効率よく行わなければなりませんでした。
丁度このリニューアルのタイミングの際、Fireworks CS4のパブリックベータが公開されました。Fireworks CS4のPDFレビューが非常に気になったため、実際にこの機能を活用してみようと言うことになり、導入を試みました。
PDFワークフローの全貌
ビジュアルデザインを、離れた人との間で共有するときに最も重要なのは、デザインの意図やこれまでのデザインとの違いなどをきちんと伝えることだと思います。この部分がきちんと伝わらないと、確認などに余計な時間を費やしてしまいます。
そこで、今回Fireworks CS4のいくつかの機能を、デザイン確認で円滑なコミュニケーションを行うために使用しました。
Fireworks CS4では、デザイン画をPDFとして書き出す機能があります。PDFはご存じの通り、ファイルサイズを抑えながらも、クオリティを保持しつつ画面の情報を伝えるのには最適なフォーマットです。さらにコメント機能を活用することで、画面だけは伝わりにくい細かい情報を付与した上でやりとりすることが出来ます。JPGやTIFFなどで確認画像を送り、さらに説明をメールや付属の別添テキストなどで送って、それを見比べながら確認するよりも、イメージに直接説明がある方が理解しやすいと思い、PDFでの確認をしていただくことになりました。
このとき、デザイナーからFireworks PNGのファイルをもらい、Fireworksのページ機能を使って、ページの複製を行いました。さらに、ページを追加し、旧デザインをそこに貼り込みます。新デザインの複製については、デザインのみを見ていただくのと、デザインに説明を含めたものを見ていただくために行いました。
今回は、従来のデザインからの大幅な変更と言うこともあり、各要素がそれぞれどれくらいの幅や高さになっているのかをデザイン内で明示することも必要かと思いました。前回までのデザインは、デザインの幅を760ピクセルで固定していました。が、ビジュアル面を多くすることで、それまでのサイズではイメージでの効果が出にくいため、また、テキスト情報が埋もれてしまう危険性もあったため、近年増えている900ピクセルオーバーでのデザインにしました。そのため、従来のデザインとのバランスがわかりにくいと考え、要素毎にサイズを明示しておく必要があると判断しました。
これまでは、要素間にガイドラインを引いて矢印などを描き、ガイドラインの位置を差し引きして導き出した数値を当て込むといった作業が必要でしたが、Fireworks CS4のガイドツールにより、簡単にガイド間の数値を埋め込むことができるようになりました。
先ほどのコメントを入れるためのページに、このガイドツールを使って要素間の幅や高さを明示し、また比較用に旧デザインを当て込んだページにも各要素の幅を明示しました。
第二階層デザインの新旧をFireworksのページ機能でページ分けし、PDFページに割り当てたもの。
このファイルを、Fireworks CS4のPDF書き出し機能で書き出しておきます。このとき、セキュリティ設定が出来るので、パスワードを付加した状態で書き出します。この作業はAcrobatからでも可能なのですが、Acrobatから書き出す際にパスワードを忘れてしまわないように、この段階で追加しておきました。
パスワードが付加されたPDFファイルを開き、コメントを入れておきます。Acrobatのコメントツールは、引き出し線付きのコメントを付与できるので、非常に便利です。もともと、執筆時の原稿構成などでPDFを使用していたこともあり、この機能については非常に便利だと思っています。そして、一両日後にクライアント担当者より送られてきたのが次のPDFファイルです。
こちらから送ったPDFにコメントを付けて送っていただきました。このコメント付きPDFをさらに社内のデザイン担当者へ送り、修正を行い、デザインのFIX版においても先と同じようにPDFワークフローを用いて行いました。
クライアント担当者より送られてきたPDFファイル
修正を行い、ポイントとなる部分に説明を入れたPDF
このワークフローを、トップページおよび第二階層トップ部分の両方で行い、デザイン確認のフローをメールで行いました。
最終のトップページデザイン
最終の第二階層トップ部分デザイン
Firework CS4は、Webサイトデザインを行うためのグラフィックツールとしてだけでなく、ディレクションに必要な部分においても大変有用なツールとして利用できると思います。
神森 勉
アンカーテクノロジー株式会社
大学卒業後、商社営業マンを経て1996年に印刷会社へ転職。DTP業務およびWebサイト制作業務に携わる。2000年よりグローバルデザインで情報設計及び制作技術を学び、2004年アンカーテクノロジーへ入社。また、これまでにDreamweaverやFireworks、Contributeを活用した制作・運用業務の効率化などを社内外に提案。
