時代を担うWebクリエイターたち
Adobe GoLive 5.0が築くハイクオリティWebデザイン
Adobe製品の連携が高いパフォーマンスを実現

GoLive 5.0でハイクオリティなWebデザインを追求
新井美里（Webデザイナー）

DTPデザイナーとして数々の雑誌広告を手がけてきた新井氏。これまで日興證券、トヨタ自動車、ソフトバンク、富士通など大手有名企業のWebサイトを制作してきた。新井氏は、クライアントの様々な要望を忠実に表現し、さらに個性あるWebサイトをつくりあげていくという、Webクリエイターとしての姿勢にも定評がある。

４年前からWeb制作を始めた新井氏。当初はハンドコーディングだったが現在ではオーサリングツールを使うようになったと話す。GoLiveを選んだ理由は、もともとPhotoshopなどAdobe製品の使用経験がありインタフェイスに慣れていたこと、イメージしたものを簡単にデザイン化し、Web制作を進めていきやすいことをポイントとして挙げている。
実際にサイトをつくる上でGoLiveをどのように使用しているのか、株式会社クオンツ在籍時に作成したサイトの制作過程の例をみてみよう。

最初はIllustratorで完成形をデザインする。そのグラフィックやテキストレイアウトイメージを忠実に再現するため、ガイド線を引き、ガイドに沿ってテーブルを組み合わせるといった方法で、デザインを行う。次に組んだテーブルにテキストを入力。画像はPhotoshopでWeb書き出し(※２)を行い、それをGoLiveのテーブル上に配置するという方法をとっていた。つまり、Illustrator、Photoshop、GoLive 4.0の３つのソフトを切り替えながらフル活用して制作していたわけだ。しかし、これがGoLiveのバージョン5.0を使うことにより、作業効率が飛躍的に向上したという。実際にGoLive 5.0でつくられたのが、大和證券のサイトだ。

ソフトパブリッシング株式会社「べるまが」は、GoLiveのバージョン4.0で制作された

GoLive 5.0で制作された大和証券のWebサイト。グラフィックデザイナーから画面イメージデータを受け取り、そのデータを元に忠実にコーディングしていく。ソフト間の連携がよく、効率よく作業が進む

Photoshopでデザインされたデータの配置をピクセル指定(※３)。各画像は一つひとつレイヤーごとに分割して保存する。次にそのPhotoshopファイルを、GoLive 5.0のスマートオブジェクトとして目的の画像を選択すると、自動的にWebセーフコピーを生成し、GoLiveに読み込む。この時点で、デザイナーが指示したレイアウトを保持したまま、Webに最適な画像ファイルが完成したことになる。

今までは複数のソフトを連動させて作業しなければならなかったものが、GoLive 5.0を使うことにより短時間で制作が進められた。

またリンクの作業は、リンクウィンドウからサイトウィンドウにリンクしたい画像ファイルを、直接目で確認しながらポイント＆シュートで簡単に設定することができる親切な機能だ。テキストリンクの色もカラーパレットから自由に指定できる点は、特に新井氏のお気に入りの機能だと言う。このように作業効率が飛躍的にアップし、リンクミスなども減らすことができるようになりクライアントの要求に着実に応えることができる。

そしてデザインが完成したら構文チェック。GoLive 5.0では、例えば「<OBJECT>タグはNetscape 4Ｘではサポートされていません」、などタグの不適当な部分を表示し、修正を促してくれる。ハンドコーディングでは、そのつどプレビューしてチェックし、ソースの不具合箇所を修正するという作業を繰り返し行い、エラーのチェックに時間がかかっていたのだが、今は非常に便利になったと話していた。また、サイトレポート機能を活用すれば、実際にアップロードする前に十分にテストでき、ミスを減らすことができる。

このように新井氏はGoLiveを古くから使っていたわけだが、5.0になって益々手放せなくなったと語る。他のAdobe製品との連携が強化されたので、かなりの作業過程が簡略化しWebデザインのクオリティが上がったのがその理由だ。サイトフロー構成からアップロードと、サイト構築におけるすべての作業ができるGoLive 5.0は、新井氏にとって欠かすことのできないオーサリングツールであるということは間違いないようだ。