Web標準がWebデザインを変える

筆者はここ数年の間、公共施設のホームページ制作に関わることが多かった。そこで強く感じたことは、ダイナミック（動的）に生成されるホームページのデザインの難しさだった。従来のスタティック（静的）なページであれば、Webデザイナーが1ページ毎に表示される情報の配置を決めて制作を行なえばよかった。

しかし、ダイナミックなページの場合は、表示される情報の内容や量が特定できないため、従来の手法は通用しない。 Webデザイナーがサイトのデザインコンセプト（テンプレート）を作成し、そのコンセプトに基づいてプログラマがダイナミックにページを生成するアプリケーションを作成する。プログラマーの関わりが大きくなるため、Webデザイナーとプログラマーの意思の疎通が重要となる。これがなかなかに難しいのだ。

デザインとプログラミングの関係

デザインとプログラミングは性格の異なるものと感じる方は多いのではないだろうか。デザインはセンスに依存し、プログラミングはロジックを依存するという感じだ。確かにそれは間違っていない。Webページをデザインする場合の色使いや情報の配置などには非常にセンスが求められる。プログラミングでは処理の分岐などをロジカルに考えて、デジタルの世界に処理を落とし込んでいく作業が必要となる。

だが、優れたWebデザイナーと仕事をした経験のある人であれば、優れたデザインはセンスだけで作成されるものではないことに気付くはずだ。利用者にとって分かりやすいサイトをつくる場合、まず、何処にどのようなメニューやボタンそして情報を配置するかを検討する。そして、Webサイト全体で使う統一的なレイアウトを決定する。次に、その統一的なレイアウトの上に各ページ固有の要素を加えていくという手順で各ページを作成する。このように作成したコンテンツでは、そのコンセプトを理解していれば、何処に何を表示すべきかはかなりの場合おのずと決まってくる。

これは、オブジェクト指向プログラミングで、共通機能をスーパークラスから継承することによって実装する手法との共通点を感じる。こう見ると、Webデザインとプログラミングは似た要素を持っている。しかし、デザインコンセプトを十分に理解し、それに従った実装を行なえるプログラマーはまだまだ多くないというのが実態ではないだろうか。

CSSとレイアウトの現状

デザインコンセプトを実装するもっとも効果的な手法がスタイルシート(CSS)であることは皆さんもよくご存知であろう。本来はデザイン用の言語ではなかったHTMLにレイアウトまで任せるのをやめて、CSSにレイアウトなどのデザイン面を全て任せる。この方法はWeb標準のHTML4.0から採用された方式で、とくに目新しいものではない。

しかしながら、これまではWebデザインの現場でCSSがフルに活用されてきたかと言われると、それはかなり疑問が残る。 CSSによる細かなレイアウトのコントロールが魅力的であることを知りながら、部分的にしか取り入れてこなかったというのが実態ではないだろうか。

これは、ブラウザ側の対応が不十分で、レイアウトをCSSのみで表現するのは無理があるということが主な理由として挙げられるだろう。その結果、W3Cでは推奨していない、テーブルを併用したレイアウトがまだまだ多用されているというのが実態だ。

しかし、CSSでレイアウトの指定を全て行なえるようになると、デザインコンセプトを CSSの形で実装できるようになり、プログラマにとってはよりコンセプトに従ったページの作成が容易になる。つまり、CSSを通じてWebデザイナーとプログラマーのコミュニケーションがより確実なものとなるのだ。

Web標準がWebデザインにもたらすもの

こうしたCSSによるデザインを加速させる動きが今年になって出始めている。 Webコンテンツの製作現場にて、Web標準に準拠しようという動きが強くなってきているのだ。 Webサイトのメンテナンス性の向上と、CSS+XHTMLによるサイト構築、 web2.0への注目度の高まりなどが影響しているものと思われる。

これは、CSSによるレイアウトの推進へとつながり、WebブラウザなどのCSSへの対応環境普及を加速させる効果が期待できる。Dreamweaverなどのメジャーなオーサリングツールも、 Web標準への対応へ向けて動き始めている。

もちろん、Web標準はデザインのためだけの規格ではない。アクセシビリティへの対応など、Webサイトで実装すべき技術仕様を定めており、デザインに関する仕様はそのほんの一部に過ぎない。しかし、Web標準が普及することによって、Webデザイナーとプログラマーの意思の疎通がよくなり、結果としてより使いやすいサイトの制作が容易になれば、これにこしたことはない。近い将来にそのような状況になっていることを願いたい。

本文中のリンク・関連リンク：

World Wide Web Consortium
The Web Standards Project
本文中の用語の説明
- CSS（スタイルシート）： Webページのレイアウトを定義する規格で、レイアウト、フォントや文字の大きさ、行間などのWebページのデザインを指定できる。
- HTML4.0 ： 1997年に勧告されたHTMLのバージョン。HTMLに文書の論理構造を記述し、スタイルの記述はCSSを使って行なうように改められ、Webコンテンツのデータとデザインを分離することが可能となった。