Step4　サイトのリデザイン

今回からWeb標準的サイト作りの実践的な内容で進めていきます。シンプルかつイメージしやすい解説を行うため、「古いWebデザイン」の一例として「Spacer GIF付加型のテーブルレイアウト」をリニューアルの対象として扱っていきます。Step4は「リデザイン」、つまり再構築のためのプロセスについて解説します。

テーブルレイアウトとCSSレイアウトは「Web標準」準拠における議論でよく取り上げられますが、テーブルレイアウトのすべての手法が問題になっているわけではありません。もちろん、可能な限りCSSで構築した方が結果的に大きなメリットを得られますが、テーブルレイアウトでも音声読み上げソフトなどに配慮している例もあります。

問題にされるのは、まったく無意味な画像（「spacer.gif」というファイル名が付けられている場合が多い）がたくさん配置されているページです。「spacer.gif」は装飾画像でもありません。アクセシビリティの低下やHTMLの肥大化など、さまざまなデメリットが指摘されています。テーブルレイアウトのなかでもリニューアルの対象になりやすいのが、このような手法で作られたサイトだと捉えてよいでしょう。

Web標準的サイトへ移行させるための最初の作業は、まず視覚表現だけの目的で使われているtable要素、img要素などを排除していくことです。大まかな手順は以下の通りです。

1．現在のブラウザプレビューを記録しておく（キャプチャ画像などを保存）
2．基本デザインの情報を記録しておく
3．レイアウトの目的で使われているHTMLの要素を削除
4．その他、ブラウザ上の見栄えを指定しているHTMLの要素も削除
5．適用されているCSSファイルも無効にする

現在の姿（ブラウザに表示されるページのデザイン）を変えずに再構築する場合は、一からデザインし直すわけではありませんので、CSSの指定に置き換えていくような作業になります。建築に例えるなら「改装」、および「修繕」です（「Webサイトのリフォーム」というイメージになります）。

・改装（外装、内装の模様替え）
・修繕（設備の更新や外壁の修理）

リニューアル作業の進め方はプロジェクトの方針に沿って決められ、段階を経て移行する場合、「Spacer GIF」なしのボックスフレームとしてtable要素を残すという判断もあり得ます。過去のアセット（素材やテンプレートなど）を引き継ぐために互換性を維持しながら移行するのなら、HTML 4.01 Transitionlのまま進めることもあるでしょう。

この連載では、前回書いたように「XHTML 1.0 Strictを採用」と決めていますので、フルCSSのリニューアルで進めていきます。

サンプルの仕様は「ヘッダ＋コンテンツ（メインコンテンツ＋サブコンテンツ）＋フッタ」の2カラムレイアウトにしています。スモールステップで解説しやすいように、シンプルかつ標準的な仕様にしました。テーブルレイアウトで作成されていますが、リニューアル作業の解説はtable要素、img要素を排除したところからスタートします。

前回の復習ですが、解体前に決めておくことは以下の点でした。詳細については作業プロセスの中で取り上げていきたいと思います。

・移行方針
・採用するHTML／XHTML
・XML宣言の記述／省略
・id属性とclass属性の扱い方
・コーディングのルール（インデントや改行など）
・メニューバーのマークアップルール
・フォームのマークアップルール
・CSSハックを使う／使わない
・IE専用の条件分岐コメントを使う／使わない

・XHTML 1.0 Strictを採用する
・特定条件をクリアしてXML宣言は省略する
・CSSハックはIE 5、5.5、6に対する「* html（star html hack）」のみ使用
・条件分岐コメントは使わない

table要素、img要素を排除したHTMLページから「情報」だけを抜き出すと以下のようになります。上のサンプル（ブラウザプレビュー）と見比べてみましょう。

構造化について解説しておきましょう。物理マークアップによって作られたWebページというのは、見出しに対して「大きさ」や「太さ」などを直接指定しています。構造化が前提となる論理マークアップの場合は、h1要素を記述して、スタイル（大きさや太さ、色など）はCSSで指定することになります。構造化というのは、大見出し、中見出し、小見出し、記事の見出し、記事（段落）、箇条書き（リスト）などを適切に割り当てる作業だと考えてよいでしょう。

この作業は、プリントした紙に描いていく等、パソコンから離れて進めた方がよいかもしれません（もちろん、作図ソフトなどを活用してもかまいません）。

構造化の初期作業が完了したら、情報のまとまりをグループ化していきます。例えば、ヘッダの領域にサイトのタイトル、リード文、サブコピーなどをまとめたい場合は、1つのグループとして指定します。紙ベースで作業を進めている場合は、カラーペンで情報のまとまりを囲んでいきましょう。

サンプルページは前述した通り、「ヘッダ＋コンテンツ（メインコンテンツ＋サブコンテンツ）＋フッタ」の2カラムレイアウトを採用していますので、大きく3つの領域で構成されています。書き出すと以下のようになります。

・ヘッダ（header）の領域→グループA
・コンテンツ（contents）の領域→グループB
・フッタ（footer）の領域→グループC

実際のコーディングでは、div要素を使ってグループ化を進めていきますが、いきなり始めるのではなくラフな設計図を描いてから行った方が結果的に手戻りがなくなります。

●ヘッダのグループ化（group A）／div要素でまとめていく
＜div＞
＜h1＞大見出し＜/h1＞
＜h2＞中見出し＜/h2＞
＜h3＞小見出し＜/h3＞
＜/div＞

このようにコーディングしていきますが、いきなり始めず、最初にスケッチレベルのラフな設計図を作成しておきましょう。

文書の構造化はまだ終わりません。基本マークアップのあとは、レイアウトデザインのためのグループ化、そしてIDおよびclassの指定という作業があります。機械処理のためのHTMLページであれば、基本マークアップだけでOKですが、人間に対しての視覚表現（ブラウザに表示されるページの見栄え）があります。

例えば、ヘッダ領域に背景画像を表示したい場合は、CSSで指定しなければなりませんので「名前」が必要になります。「header」というグループ名にした場合は、「＜div＞ヘッダ領域＜/div＞」が「＜div id="header"＞ヘッダ領域＜/div＞」のようになります。

●ヘッダのグループに名前（ID名）を付ける
＜div id="header"＞
＜h1＞大見出し＜/h1＞
＜h2＞中見出し＜/h2＞
＜h3＞小見出し＜/h3＞
＜/div＞

レイアウトは、ヘッダ、フッタ付きの2カラムレイアウトと決めていますが、バリエーションは1つではありません。ヘッダ、コンテンツ、フッタをすべて大きなボックスに収めてしまうレイアウトもあれば、ヘッダとフッタは可変、コンテンツ領域のみ固定幅にするというレイアウトもあります。ここでは、前者を選択しますので、すべての情報のまとまりをグループ化するという作業が必要になります。

●基本マークアップ
＜div id="header"＞
ヘッダ領域のグループ
＜/div＞

＜div id="content"＞
コンテンツ領域（メインコンテンツ＋サブコンテンツ）のグループ
＜/div＞

＜div id="footer"＞
フッタ領域のグループ
＜/div＞

すべての情報のまとまりをdiv要素でグループ化して、名前を「building」と付けた例を示しておきます。

●レイアウトのためのマークアップ
＜div id="building"＞

＜div id="header"＞
ヘッダ領域のグループ
＜/div＞

＜div id="content"＞
コンテンツ領域（メインコンテンツ＋サブコンテンツ）のグループ
＜/div＞

＜div id="footer"＞
フッタ領域のグループ
＜/div＞

＜/div＞

このように構造化の作業には「基本マークアップ」と「視覚表現のためのマークアップ」があります。視覚表現のためのマークアップですが、font要素やb要素などを使う物理マークアップ（HTMLで直接見栄えを決める）と異なっていることは理解できると思います。

構造化作業の最後は、CSSレイアウトの仕様をどう反映するかを決めることです。CSSの勉強を始めたばかりの人は、まずこの考え方に戸惑うかもしれません。コーディングとブラウザプレビューを繰り返しながら、学んでいくのが近道と思いますが、やはりここでも視覚的に確認できるツールが役立ちます。

以下の図のようにXHTMLのグループごとの色分けとブラウザ上に表示されるページレイアウトの色分けをセットで描いておくと把握しやすくなります。カラーリングによってデザインワークを効率化するツールを「カラーチェック」と呼んでいます。

第4回のまとめです。

・リデザインの作業を建築に例えるなら「改装」、および「修繕」
・レイアウトの目的で使われているtable要素、img要素などを排除していくことから始める
・基本マークアップ（1）
大見出し、中見出し、小見出し、記事の見出し、記事（段落）、箇条書き（リスト）などを適切に割り当てる
・基本マークアップ（2）
情報のまとまりをグループ化していく
・視覚表現のためのマークアップ
レイアウトデザインのためのグループ化、IDおよびclassの指定
・いきなりコーディングを始めるのではなく、最初にラフな設計図を描いてみる

ラフスケッチやカラーチェックなどは作成するのが面倒かもしれませんが、コーディングの作業に入ってからも役立つ資料になりますので、可能な限り進めておきましょう。

さて、次回はHTMLのコーディング作業です。前回書いた通り、Dreamweaverなどのビジュアルエディタは対象としません（ただし、コードビューでの作業は可能）。一般的なエディタを使用して、直接記述するハンドコーディングで進めていきます。