本記事は、アーカイブに保存されている過去の記事です。最新の情報は、公益社団法人日本印刷技術協会(JAGAT)サイトをご確認ください。

進化するWebツール

WebサイトはコーポレートサイトやEC,出版など,企業対企業あるいは企業対ユーザを結ぶコミュニケーションの道具として,欠かせないものとなっている。DTPによって写植の仕事がデザイナーに流れたように,Webデザインにおいてもエンジニアからデザイナーへと仕事が移っている。進化途中のWebでは,使いやすさやデザイン性が重視されるようになり,グラフィックデザインを手掛けるデザイナーに,Webデザインの仕事も要請される機会が増えてきている。

また,Webはブロードバンドに向けて,動画などのリッチなコンテンツの増加も予想される。そこで,動画編集を始め,データの自動更新をするデータベースとの連携や,ネットワーク上でコラボレーションして作業するツールなどが登場している。

WebのHTMLを編集するエディタには,IBMホームページ・ビルダーやMicrosoftのFrontPage,アドビシステムズのAbobe GoLive,マクロメディアのDreamweaverなどが発売されている。Webをデザインするプロが利用するツールは,グラフィックツールとの親和性や機能などから,アドビとマクロメディアの製品が主流になりつつある。アドビシステムズのマーケティング部Webパブリッシンググループフィールドプロダクトマネジャー・西山正一氏からGoLiveを,マクロメディアのプロダクトマーケティングマネジャー・阿部成行氏から,データベースと連携したWebサイトを構築するUltraDeveloperの概要について話を伺った。

デザイナーに使いやすい機能満載

紙媒体のデザインを手掛けているデザイナーには,今でもWebデザインに対して敷居が高いと考えている人が多い。以前は,Web制作のトップで活躍する人は,タグをエディタで直接書いて作るエンジニアが主流であった。Webサイトが急増して,よりデザイン性を重視したWebサイトが求められるようになった現在,紙のデザインを行うデザイナーに,Web制作の仕事が発注されるケースが増えてきた。

アドビシステムズのGoLive(1万8000円)は,他のグラフィックソフトとの連携がスムーズであるという点で,デザイナーがアプローチしやすいWebオーサリングツールである。
アドビシステムズはGoLiveについても,ツールやパレット類に,Adobe IllustratorやAdobe Photoshopなどと多くの共通性をもたせている。レイアウトグリッドの機能によって,DTPの感覚で画像やテキストの配置や,デザインをすることが可能である。HTMLのソースコードなどを意識する必要がないので,デザイナー本来の仕事であるデザインに集中することができる。
GoLiveの「スマートオブジェクト」機能によって,Adobe IllustratorやAdobe Photoshop,Adobe LiveMotionで作成されたネイティブファイルを,ドラッグ&ドロップで直接配置することも可能である。

デザイナーのなかには,WebのラフデザインをPhotoshopで作成する人も多い。GoLiveを使わない場合は,ラフデザインのデータから,ボタン画像を切り取るといった作業が必要となる。GoLiveならば,Photoshopのレイヤーを活用して,そのままオブジェクトとして配置することが可能なので,作業が効率化できる。

他のソフトとの連携を生かして,アドビシステムズでは,「Adobe Web Collection」というWebソリューションパッケージを提供している。パッケージにはAdobe GoLive,Adobe Photoshop,Adobe Illustrator,Adobe LiveMotionという4つの製品が同梱され,個々の製品を購入するよりも割安で購入することが可能である(17万8000円)。

コラボレーションによる制作

Web制作はグループ作業が重要となる。全体をプロデュースする人,プログラムやスクリプトを組む人,画面のデザインをする人などが集まり,分担して作ることが多いからである。担当者はそれぞれ自分が使い慣れたツールを使うケースが多い。GoLiveは,いろいろなWeb制作ツールで制作されたページをまとめるツールとしても適している。いくつかのWeb制作ツールは,制作者が意図しなくてもツール独自のタグを自動的に生成したり,書き換えたりするという癖がある。

例えば,AというWebツールで制作したページをBのWebツールで制作すると,構文の整合性がとれない場合もある。GoLiveは独自のコードを生成しないのはもちろん,360コードという機能でどのようなWebツールで制作したファイルを読み込んでも,そのソースを書き換えないという特長がある。このため,GoLiveは,Web制作をまとめるプロデューサー的な立場の人が使うツールに適しているといえるだろう。

また,サイトデザインも効率的に進めることができる。従来はIllustratorなどのイラストレーションソフトで,サイトのリンク構造や情報設計を行っていた。GoLiveにはサイト管理およびサイトデザイン機能を搭載しているので,サイト構造と情報フローを視覚的に設計することが可能である。完成したサイトデザインは既存のWebサイトに組み込むことも可能であるし,新たなサイトの場合はサイト構造に合ったページ,オブジェクトを生成することができる。

動画とアニメーションの編集

AdobeのWebソリューションの一つに,LiveMotionというWebアニメーションを制作するツールがある。これも,Photoshopなどのアドビソフトを利用した経験があれば,容易に使うことができる。

以前は,Flashなどのアニメーションページがあると,データが重くて表示が遅いという理由で,ユーザが別のページへ逃げてしまうケースが多かった。最近は回線環境も良くなり,動画のページに対して抵抗を感じないユーザが増えている。動画を使ったダイナミックなコンテンツを提供するWebサイト自体も増えてきている。

多くの人が,「アニメーション,動画,テキストのWebページは,それぞれ別のものだ」と考えている。しかし,GoLiveなら,Adobe Premiereで編集したムービーと,LiveMotionで制作したFlashアニメーションを組み合わせた,リッチコンテンツを制作することも簡単である。GoLiveで,ムービーの中のムービー上にFlashのボタンを配置して,そのボタンに触れるとムービーが動いたり,画面が変わるというコンテンツを編集できる。

インターネットは今やインフラである。アドビシステムズはNetwork Publishingに関するビジョンとして,「どこでも,どんなものでも,どんなデバイスを使ってもできるパブリッシング」を提唱している。Webページ,プリンタ,携帯電話,携帯機器,PC,インターネット機器など,インターネットを駆使してプラットフォームやデバイスに依存しない,魅力あるコンテンツの配信ができるソリューションの提供を目指している。そのなか,GoLiveはインフラの部分でクリエーターが頭を悩ませずに,表現したいものを直感的に作ることができるツールといえるだろう。

Web構築のポイント

Webサイトは転換期にある。一方的な情報提供を行う静的なWebサイトから,顧客とコミュニケーションを図る動的なWebサイトに主眼が移りつつある。マクロメディアはHTMLの編集ツールであるDreamweaverやUltraDeveloper,アニメーション制作を行うFlashなど,Web関連のアプリケーションを提供している。ここでは,データベースと連動した動的なWebサイトの構築に力を発揮するUltraDeveloper(5万8000円)を紹介する。

IDCの調査によると,2001年に全世界の約60%のサイトがダイナミックコンテンツを取り入れ,2003年には99%が取り入れると予測されている。単純なカタログサイトは消えてなくなり,データベースを活用したダイナミックコンテンツが急速に普及すると考えられる。

ユーザごとに適切な情報を提供するためには,デザインや情報量をコントロールし,PCや携帯電話など情報デバイスに合わせた配信も必要となる。プログラムも含めて,技術的なバックボーンが必要であるし,自動更新やユーザ情報の収集・分析システムも念頭におき,物流や社内のワークフローまで含んだ社内の情報化が必要になる。

Webサイト構築のポイントは3つある。第1はユーザビリティ,アクセシビリティの追求である。使い勝手を良くし,情報を理解しやすい形で提供する。
第2はコンテンツやメッセージの表現方法を吟味することである。訪問するユーザが望んでいるコンテンツを動的に発信する機能を提供していく。
第3は,データベースを中心にして,ユーザの情報をフィードバックする仕組みを展開することである。Webサイトの構築では,この3つのポイントを,限られたリソースで実現する環境を整えていかなければいけない。

最近は,情報を入れるテンプレートをデバイスに合わせて,複数用意することが一般化してきた。PCや携帯電話など,アクセスしてきたメディアに応じてテンプレートを選び,情報をそこに差し込んで配信する。このためには,サーバ側でテンプレートを構築するためのプログラミングやデザインが必要になる。

容易なデータベースとの連携

UltraDeveloperは,レイアウトを確認しながら編集できるHTMLエディタという機能だけでなく,データベースとの連携機能をもつ。検索サイトや認証ページを容易に作成することができる。

例えば,MicrosoftのInternet Information Serverのwwwrootに,Microsoft Accessでデータベースを作る。UltraDeveloperでWebサイトをデザインし,このデータベースと接続することが可能である。

データベースと関連づけされたWebサイトはシンプルなものが多いが,UltraDeveloperではデザイン性の高いものを作ることも可能である。モジュール化されたものの埋め込みや取り外し,色の変更などを自由にレイアウトすることができるし,編集画面の中でリアルタイムにデータを表示することができるので,表組みなどもスムーズに確認できる。UltraDeveloperによって,ユーザのニーズに合わせたデザインを行いながら,データベースの運用を行うWebサイトを構築できる。

これまでの静的なWebサイトの場合,Webに掲載している商品情報を更新する際,その都度HTMLのソースコードを変更する必要がある。1週間に1回程度ならそれも可能かもしれないが,毎日内容を更新したい場合,静的な情報では手間が掛かりすぎる。UltraDeveloperでは,このような従来型のページから,データベースに連携させた動的なページに作り替えていくことが可能である。

例えば,ボタンのGIF画像をデータベースに格納されているデータに指定すると,更新が楽になる。ボタンを繰り返し表示させる場合は,サーバサイドスクリプトと呼ばれるプログラムや,ColdFusionであればCFML,マイクロソフト系ならASP,Java系ならJavaのプログラムで可能となる。また,基本的な機能は,ライブラリに登録すれば,流用や自動更新ができる。

データベースと連携したページ作成でも,専門知識は必要ない。ライブデータをクリックすれば動作確認ができる。
例えば「ログイン」機能をつける場合,ユーザIDやパスワードが入った項目と連動させる。入力フォームにビヘイビアというモジュールをつければ,認証機能をつけられるので,役員以上だけが見るという設定も可能である。ログインに失敗した時のメッセージページにリンクすることもできる。

認証の必要なWebサイトを作る場合,制作者側にはデータベースサーバが必要である。社外にサーバを置いている場合は,ホスティングを担当している会社にセットアップされたマシンを置き,それに対してUltraDeveloperでアカウントを作る。そのように接続できる環境を整えれば,通常のオペレータでもログインして作業ができる。

基本機能はモジュール化されているが,ユーザのニーズによってはプログラミングの必要性も出てくる。社内にプログラミングのできる人がいない場合は,外部に発注することになり,コストが掛かる。また,その仕組みの更新作業はだれが行うのかという問題も発生するだろう。UltraDeveloperで最初から,きちんとしたプラットフォームを作れば,このような問題を避けることができるだろう。

さらに,UltraDeveloperのインタフェイスはHTMLで定義されているので,カスタマイズすることが可能である。常に同じロゴを入れたり,月ごとに数字が変わるという部分は,毎回オペレータが作業するよりは,モジュール化によって効率化することができる。

今後のWeb

今後,情報や技術が進んでいくなかで,Webサイトを構築する重要なポイントはデータベースである。標準化されたプラットフォームを用意して,そこに資産をきちんと蓄えておくことが大切になる。

Webを構築するためのツールは,まず目的に合わせて検討する。そして,カスタマイズの自由度やコラボレーションしているエンジニアが開発しやすいツールかどうか,などを選択基準にして選ぶ。一度導入されたシステムは,その後も利用していかないと無駄になるため,その選別は慎重に行わなければいけない。

データベースを利用している代わりに,簡素なデザインになってしまった,というのはもはや通用しなくなりつつある。ユーザにとって使いやすいインタフェイスをもち,デザインが美しく,さらにデータベースと連携がとれているサイトが求められている。コストを抑えてそれを実現するためには,人と時間を効率的に利用できるツール選びをしていくことが必要である。

マクロメディアではWebを制作するための製品をいくつか提供している。そのなかで,動的なデータ処理やデータベース連動型の高度な情報提供をしたい場合はUltraDeveloper,データベースの必要がないWebデザインをする場合はDreamWeaver,新商品の疑似体験ができるような高度なシミュレーションを目指す場合は,FlashやDirectorという製品が適している。

■出典:プリンターズサークル 2002年1月号

2002/01/27 00:00:00


公益社団法人日本印刷技術協会