第15回 XHTMLの設計～2つのアプローチ～

益子貴寛

2007.02.16

　XHTMLの設計アプローチには、「全体フィールド化からはじめるアプローチ」と「局所マークアップからはじめるアプローチ」のふたつがある。どちらにもメリットとデメリットがあり、さらに個人のスキルによってもどちらを採用するのが望ましいかが異なる。両者を比較してみよう。

全体フィールド化からはじめるアプローチ

　ワイヤーフレームやデザイン案に基づき、ページ内を「ヘッダー」「グローバルナビゲーション」「メインコンテンツ」「サイドバー」「フッター」といった大まかなフィールド（インターフェイス）に分け、名称とIDを割り振るという手続きからはじめる方法である。

　メリットは、通常の業務プロセス、つまりデザインワークからページ制作に入るという流れに沿っているので、既存のテーブルレイアウトからフルCSSレイアウトにリニューアルする際も比較的スムーズに取り入れられる点がある。まずワイヤーフレームやデザイン案に着目し、次にそれぞれのテキストや画像をどうマークアップするかという「森を見てから木を見る」というプロセスはテーブルレイアウトと変わらないため、多くの人が身につけやすいといえる。

　また、DreamweaverなどのWebオーサリングツールで「テンプレート」をつくる際、どの部分を編集不可領域（定型処理部分）とし、編集可能領域（ページごとに異なる部分）とするかという区別が、早い段階からつけやすいというメリットもある。テンプレート制作者と個々のページ制作者が異なる場合にも役割分担を明確にしやすい、というメリットにもつながる。

　デメリットとして、人によってはどうしてもデザインに意識が向いてしまい、「正しくマークアップする」という作業がおろそかになってしまう点が挙げられる。特にCSSスキルが低い段階では、各ブラウザがデフォルトで実装しているスタイル（ブラウザスタイルシート）に気を取られてしまい、目的とするレイアウトをCSSで実現することが不可能といった誤った判断を下してしまうケースが多い。

全体フィールド化からはじめるアプローチ
[画像のクリックで拡大表示]

局所マークアップからはじめるアプローチ

　コンテンツそれぞれをまずマークアップしてからフィールド化の手続きを行う方法である。いわば「木を見てから森を見る」というアプローチといえる。局所的なマークアップの積み重ね作業と、全体フィールド化の作業を最後に統合し、ひとつのページに落とし込むことになる。

　XHTMLは本来、テキスト中心で構成されるのを前提とした仕様設計であるため、この方法はそれとの親和性が高く、自然とクリーンなマークアップを書くように動機づけできるメリットがある。しかし、実際の業務ではテキスト中心のページデザインが要求されるケースばかりではないため、リッチなビジュアルデザイン中心のページ制作にはあまり馴染まないといえる。

　特にひとりの人間がデザイナーとコーダー両方の業務を兼ねている場合、デザインワークからいきなりマークアップ作業に入ってしまうと、全体像のイマジネーションがリセットされてしまい、混乱をきたす可能性もある。