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コンテンツのデータとデザインを分離することが可能となった。