Web サイト構築設計における
Fireworks CS3 の役割を解く

今月号の記事

いよいよ Adobe Creative Suite 3 がリリースされました。中でも「Adobe Creative Suite 3 Web Premium」には、Web 制作者にとって必須のソフトウェアがいっぱい詰まっています。

その中の一員を成す Fireworks CS3 は1998年にマクロメディアより最初のバージョンがリリースされました。この年に開催されたイベントにおいて、日本で初めて Fireworks を紹介したのが筆者でした。その後も「Illustrator と Photoshop という2本のソフトを使わないで、これだけの事ができる」と、Fireworks のベネフィットをさまざまな書籍やセミナーなどを通じて長年語ってきました。

そして2005年のアドビとマクロメディアの合併。Fireworks は、競合関係にあったアドビ製品のなかで生き残ることができるのだろうか…。Illustrator や Photoshop に分散・吸収されてしまうのではないだろうか…。Creative Suite 3 発表の瞬間まで、そんな不安を抱いていました。しかし、Fireworks は見事に生き残りました。しかも Illustrator、Photoshop との関係をより明確にし、Web の制作フローにおいて欠かせないソフトウェアに位置付けられているのです。

今回は、Web サイト構築設計における Fireworks CS3 の役割をお話したいと思います。

Fireworks が担うのは、画面設計、アートディレクション、
インタフェイス設計

Webサイト構築のワークフロー。クリックすると拡大縮小します。

森川氏が推奨するウェブ制作のワークフロー
（シリコンカフェDVDチュートリアルより）

1998年の Fireworks リリース時、私はフリーランスの Web デザイナーでした。そして現在は制作会社のプロデューサーとして Web 制作に携わっています。この9年を振り返ると、Web はサイト利用者の増加に伴い、サイト所有者とネット社会が要求する内容は大きく変化しました。当然、要求を満たすには Web 制作者もサイト構築までのプロセスを見直さなくてはなりません。それぞれの工程では専門的な知識が必要になり、工程ごとに達成すべき目標が掲げられます。そして、この数年間で多くの制作者が「設計」という工程に最も時間をかけるようになりました。

私はよく Web サイト構築は、商業ビルやマンションなどの建築構造物と同じ例えをします。どんな建築物でも設計図があり、設計図のない建築物は存在しません。それは一般の家屋も同じで、いきなり大工さんがトンカチとノコギリを手に家を建てることはあり得ないのです。

建築物の工事は企画から始まり、面積、高さ、階数、フロアごと、あるいは部屋ごとに詳細な設計図がなければできません。さらに土台の基礎設計や構造設計も必要になります。それは Web サイトでも同じで、企画から始まり、インフラやサーバという基礎設計、情報分類のためのディレクトリの構造設計、さらにページ内の画面設計が必要になります。

ウェブサイト構築のワークフロー図

同時に、内装や外観など視覚的に利用者に訴求するもの、あるいは体験させる事も重要な設計要素です。アートディレクションやインタフェイス設計が同時に走ることによって、構造と視覚および体験を同時に設計しなくてはならないのです。これらの設計工程がしっかりと構築されていれば、製造現場での Web 制作者は、鉄骨を組むように HTML を記述し、内装を担当するように CSS で装飾面を実装することが可能になるのです。つまり、それだけ「設計」という工程は、Web サイト構築において需要なプロセスであるいうことです。

Fireworks CS3 は、ページ内の画面設計および、アートディレクション、インタフェイス設計という重要な部分を担います。もちろん、実装面で Dreamweaver CS3 とタッグを組み製造を担当することは言うまでもありません。

この数年、Web ブラウザの進化と社会的要求から、Web ページの記述に「Web スタンダード」に準拠することが一般的な仕様になってきています。(X)HTML と CSS をコントロールして実装を行うには、画面設計の段階で、ページ内での情報配置が明確である必要があります。Fireworks CS3 は、この段階からインタフェイス設計と密接に結びついて作業を進めることができ、インフォメーションアーキテクトとデザイナーが、設計段階で効率よくコミュニケーションできるツールとしても有効なツールです。さらに複数の画面設計を行う際には、Fireworks CS3 の新機能である「ページ」を使いこなすことによって、効率的に作業を進めることが可能です。

Illustrator、Photoshop との連携に見る
Firewoks CS3 の役割

Web サイトの実装や設計には、その前段階として Web におけるブランディングやプランニングが重要になります。そのためには企業の場合であれば、まず企業理念を理解し、そこからコンテクスト（文脈）を広げ、ビジュアルデザインやコンテンツに落とし込みます。

その企業理念は、目に見えるカタチとして CI（Corporate Identity）や VI（Visual Identity）で管理され、広告などによって露出します。Web も、CI や広告をルック＆フィールにして Web ブランディングとして展開していかなくてはなりません。つまり Web だけが突然変異的にデザインされることはないということです。

そうした CI 管理から広告表現のためのツールが Illustrator であり Photoshop です。ビジュアルコミュニケーションのコアな部分を Web に展開するためには、DTP の現場で InDesign が行っているように、シームレスなデータのやりとりが重要になります。ai 形式、psd 形式のファイルを直接読み込み、レイヤー構造もそのまま展開できる Fireworks CS3 は、ここで大きな役割を担います。

つまり CI や広告表現を直接 Web に落とし込めるということです。Web における InDesign 的な立場で考えると、Fireworks の役割は、より明確になると思います。

すべては Web サイト利用者のために

現在、私は「日本Web協会」という組織の理事長を務めています。日本 Web 協会は「日本語の Web の質を向上させよう」をスローガンに、多くの会員が集まり活動を行っています（ちなみにアドビシステムズ社も法人会員として参加されています）。

その活動を通して、Web が担っている社会的な責任が話題になっています。もはや Web は一部の IT リテラシーの高い人々のものではなく、水や空気のような必需品になろうとしています。そうであるならば、Web は水道の蛇口のように、誰もが使える道具でなくてはなりません。私たちは誰もが、どうやって蛇口を動かせば水が出るのかを知っています。しかし、まだまだ Web は使いやすい道具ではなく、どうやって使えば情報を引き出せるのか理解できないことも多くあります。

さらに、ネット人口の増加や家電製品の進化などによって Web の利用者が増え続ける今、私たち制作者は、誰もが使える Web を作っていかなくてはなりません。生活の道具として利用されるためには、制作会社はもちろんですが、情報を発信する個人や集団も「情報を伝える」ことを真剣に考えていかなくてはならないですし、サイト利用者に使ってもらうための制作を行っていなかくてはならりません。それを満たす事が、結果的に所有者や制作者を幸福にするのではないかと考えます。

そのためには、制作の現場はツールを使いこなす事が必須になります。今回の Creative Suite 3 で、Web に関するすべてのソフトウェアが足並みを揃えてバージョンアップしたのは、本当に嬉しく思いますし、今後もさらにツールが進化し続けていくことを希望します。

最後に、私も個人としてこれらのツールの使い方に貢献するため、シリコンカフェとしての活動を再起動しました。現在は DVD という映像メディアを使って、Fireworks CS3 のチュートリアルに取り組んでいます。ぜひサイトを見に来てください。

‹ 戻る

森川眞行森川眞行［Masayuki Morikawa］ http://www.siliconcafe.com/
シリコンカフェ主宰、日本Web協会・理事長。株式会社BAメガパワーズ（http://ba-mp.com）取締役プロデューサーや多摩美術大学情報デザイン学科非常勤講師も兼務している。