第3回　自動化に向かうCSSデザイン

教育コンテンツの制作現場から

---

境祐司

教育デザイナーとして学校、企業の講座企画、講演などの活動をおこなう。著書「改訂新版 Webデザイン基礎」(技術評論社)、「XHTMLマークアップ&スタイルシート リフォームデザインガイドブック」(ソシム)など
url: admn.air-nifty.com/books/

---

第3回
実践！サイト制作のアセット管理
－自動化に向かうCSSデザイン－

Webデザイナーが「Web標準」を意識するようになってからサイトの制作方法も変化してきた。DreamweaverやGoLiveなどのオーサリングソフトもCSS機能を強化し、ある程度の環境は整ってきたが、ワークフローに関しては依然として試行錯誤が続く。ブラウザ対策など本来必要のない作業に追われているのが現状。ページビルディングのプロセスはいつ自動化されるのだろうか? これからのサイト制作について考えてみよう。


タグ手打ちの時代

CSS1がW3C勧告となったのは1996年12月だった。翌年の1月、HTML3.2も勧告される。CSSに関連したセミナーなども開催されるようになったが、ブラウザはNetscape Navigator 4とInternet Explorer 4がリリースされたばかり。概念中心でとても実践的なセミナーではなかった。一部の人たちの熱心な啓蒙活動も、Webサイトをつくるデザイナーには効果がなく、激化するブラウザ戦争によって掻き消されるといった状態が続く。そして、 タグと透明GIF画像を駆使したページレイアウト手法がはやり、CSSへの興味はさらに遠のいていった。

決定的だったのはHTMLオーサリングソフトに タグを使ったレイアウト機能が搭載されたこと。それまでは手作業でタグを入力しており、凝ったレイアウトになると何重もの入れ子タグを記述しなければならなかった。タグ挿入のユーティリティを使った効率的な作業も進んでいたが、ごく一部のデザイナーに限られていたのだ。


HTML記述の自動化

GoLive CyberStudio（現Adobe GoLive）やDreamweaver【1】、ホームページビルダーなどのメジャーソフトにテーブルレイアウト機能が搭載されたことで、Webページの視覚的なクオリティが大きく向上した。プロのデザイナーだけではなく、一般のユーザーにも広まった。HTMLの知識がなくても凝ったページデザインが可能になったのだ。


【1】Dreamweaver 8のCSS機能は操作性が向上したが、使いこなすにはCSSの知識が必要


このテーブルレイアウトはプロダクションの本格的なワークフローに取り込まれ、デザイナーにとって欠かすことのできない重要なスキルとして定着。グランドワーク（基礎作業）ではオーサリングソフトを使い、微調整があれば直接HTMLソースを書き替えるといった効率的な作業が生産性と品質管理を確かなものにしていた。このような作業の自動化は、大規模なWebサイト構築に威力を発揮する。さらに、自動化できないクリエイティブな作業（グラフィックデザインやレイアウトのプランニングなど）に多くのエネルギーをかけ、それが表現のクオリティアップにもつながっていった。


CSS手打ちの時代

2004～05年くらいから主流だったテーブルレイアウトもゆっくりと下降。CSSによるページデザインが重要視されるようになり、リニューアルするサイトも増えてきた。まだ多くの企業サイトはテーブルによる固定レイアウトを引き継いでいるが、つくり手の意識は「Web標準」に向かっている。「 タグを使った視覚表現（テーブルレイアウト）は非推奨」という認識は、プロの世界において当たり前のものとなった。XHTML+CSSを積極的に採用したブログの普及もCSSデザインを後押しすることになる。

DreamweaverやGoLiveなどのプロ向けのメジャーソフトも業界のニーズにこたえる形でCSSによる記述をデフォルトにした。これらのソフトでは設定を変更しない限り、HTMLタグで見栄えを整えることはできない。

では、これでCSSデザインの制作環境が充実したかというと、そうはなっていない。DreamweaverやGoLiveの新バージョンではCSS機能を強化したが、まだ「支援ツール」というレベルである。つまり、CSSの知識なしでは使えない機能なのだ。1998年ごろに完成した「テーブルレイアウトの自動化」の域には到達していない。まだ、一般のユーザーが簡単に扱える環境にはなっていないのだ（ブログが普及しているので、結果的にCSSデザインは増えているのだが）。

大きな問題は「ブラウザ対策」にある。ターゲットとするブラウザの閲覧を保証するには、CSSハックという裏技を使うことになる。将来は必要なくなる処置だが、今これを怠るとブラウザによってはレイアウトが壊れてしまうこともあるのだ。

DreamweaverやGoLiveなどのオーサリングソフトでは対応できないので、直接CSSを記述するしかないのが現状である。複数のブラウザを用意して（もしくはバーチャルな環境を使って）検証しなければならないので、かなり手間がかかる。


そろそろCSSデザインも自動化

CSSの普及は進んでいるが、まだまだ多くの現場では「手作業」の割合が多い。しかし、この状態が長く続くとは思えない。一部の制作会社はページビルディング（マークアップからCSSによるページ構築まで）のプロセスを自社開発のツールで自動化しており、その試みと評価が徐々に広まっている。Dreamweaverなどの次期バージョンもCSSレイアウト機能を強化するだろう。

現在、新しいタイプのWeb制作ツールが話題になっている。HTMLやCSSをまったく意識させず、直感的な操作で見栄えの良いWebページを作成できるソフトである。一般向けの安価な商品だが、W3Cの仕様に沿ったXHTMLとCSSで書き出せることから「モダンパブリッシャー」と呼んでいる。代表的なものは、Realmac Software【2】の「RapidWeaver」、Karelia Software【3】の「Sandvox」、Apple【4】の「iWeb」などである。


【2】Realmac Software「RapidWeaver」　www.realmacsoftware.com/rapidweaver/


【3】Karelia Software「Sandvox」　www.karelia.com/


【4】Apple「iWeb」　www.apple.com/jp/ilife/iweb/


これらのソフトの特長はXHTMLのマークアップ、CSSによるデザイン【5】、CSSハックを使ったブラウザ対策などを完全にブラックボックス化していることだ【6】。ユーザーは、視覚表現の作業に専念できる。実は、制作プロダクションの最新ワークフローはこの仕組みに近い。デザイナーとビルダーの役割分担を明確にして、ビルダーの作業（CSSでページを構築する作業）の大半を専用のアプリケーションで自動化している【7】。


【5】CSSマルチカラムのレイアウトも直感的に作業できる









【6】ブラックボックス化された「XHTML+CSS+CSSハック」はプロの手によってアップデートされるため、ユーザーはコンテンツづくりに専念できる。専用ダイアログでページ・コンポーネントのバージョンが確認できる


【7】ブログのテンプレートとは異なり、選択したデザインをカスタマイズするための専用インターフェイスが用意されている


RapidWeaverやSandvoxなどのモダンパブリッシャーは、一般ユーザー層向けに最先端の制作環境を提供していることになる。


本記事は『Web STRATEGY』2006年7-8 vol.4からの転載です
この号の特集など、ほかの記事の紹介はこちら！

『Web STRATEGY』最新号の情報はこちら！

Amazon.co.jpでの購入はこちら！
定期購読はMdN Squareで！