Step5　基本デザイン　その1

テクノロジー

コラム

2007.9.11 TUE

今回から2回に渡り、「基本デザイン」の作業について解説します。リニューアル対象となる既存ページから抜き出したテキスト情報をベースに、再構築していきます。まずは見出しや段落のマークアップ、情報のグループ化、そして基本デザインのスタイル指定までを行います。XHTMLとCSSの詳細な仕様まで解説していくと膨大な量になるため、重要な工程のみ詳しく解説しています。

（解説：境祐司）

［プロフィール］
さかい・ゆうじ●教育デザイナー。学校、企業の教育プラン、マネジメント、講演、執筆など。著書に『Making a Rule for Web Design』ソーテック、『XHTMLマークアップ＆スタイルシートリフォームデザインガイドブック』ソシム、『CSSビジュアルデザイン・メソッド』毎日コミュニケーションズ、『Webデザイン基礎』技術評論社など

デザインイメージの確認

【サンプル】テーブルレイアウトなどの手法で作成されたWebページ。これを“Web標準的”サイトにリニューアルする

作成するWebページの仕様は、固定幅の「ヘッダ＋コンテンツ（メインコンテンツ＋サブコンテンツ）＋フッタ」（2カラムレイアウト）です。段組みレイアウトの中でも難易度が低く、理解しやすい仕様になっています。ここでは（古い手法で作られた）既存ページ【図1】をベースにCSSで「再現」する作業になります。

プロセス1：見出しと段落のマークアップ

既存ページから抜き出したテキスト情報を確認します。ここで重要なのは「順序」です。通常の文書と大きく異なるのは、インターフェイスの要素が加わること、そしてアクセシビリティへの配慮が必要になることです。音声読み上げソフトは、文書の頭から順に読み上げていくため、メニュー項目の位置などを検討しなければなりません。

たとえば、大手のニュースサイトなどは30以上の項目が並んでいますが、これがすべて読み上げられていくわけです。このため、メニュー項目の下に新着記事などのユーザーの知りたい情報があると、目的の情報が読み上げられるまでに時間がかかってしまいます。

【図1】サンプルページのテキスト情報

ここで作成するWebページは「XHTML 1.0 Strict」を採用します。また、XML宣言は省略するため、文字コードをUTF-8にしています。下がそれらの条件のもとに記述したヘッダ情報です。

＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=utf-8" /＞
＜title＞common style: Topics＜/title＞
＜/head＞

余談ですが、Adobe Dreamweaver CS3で新規作成したXHTMLファイルは、デフォルトで「XHTML 1.0 Transitional」が採用され、文字コードはUTF-8、そしてXML宣言は省略されています。最近、XHTMLのページが増えているのはオーサリングソフトの影響も関係しているようです。

「XHTML 1.0 Transitional」は、Strictよりも許容範囲が広く、古い方法で作成されたWebページを引き継ぐことができますが、どうしても過去のアセットを使わなければならない場合を除き、Strictを採用して厳格な文法で作業を進めた方がよいでしょう。ただし、「Strictなマークアップ」自体が目的になってしまうのも問題ですから、あくまで「プロジェクトの方針」に沿って決めましょう。

文書のマークアップに進みます。まず最初は「見出し」です。見出しは＜h1＞から＜h6＞までのタグが用意されており、＜h1＞が最も重要な見出しとなります。サンプルページでは大見出し（h1）、中見出し（h2）、小見出し（h3）という表現で3つのレベルを決めていきます。大見出し（h1）は以下のように解釈します。

・サイト名もしくはページのタイトルなど
・ページ内の新着記事やメインとなる記事の見出しなど

最も多いのはサイト名やページタイトルをレベル1として判断し、＜h1＞でマークアップしているサイトですが、ここではページ内のメインとなる記事の大見出しをレベル1で表現してみましょう。見出しレベルは以下のように割り当てました。スポーツ新聞のトップ記事をイメージしてください。ここでは、一番目立ってほしいのがメイン記事の見出しになります。

・サイト名→レベル3
・サブコンテンツの小見出し→レベル3
・メインコンテンツの大見出し→レベル1
・メインコンテンツの中見出し→レベル2

見出しレベルの判断はサイトの内容によって異なりますので、まずは伝えたい「情報の優先度」を明確にします。企業サイトなどのHTMLソースを見て、どのような見出しレベルになっているのかチェックしてみるとよいでしょう。なお、レベル1の見出しは（最も重要な～という解釈ですから）1ページに1 つと考えてください。

記事本文はすべて段落の＜p＞タグでマークアップします。また、メニュー項目は段落ではなく＜ul＞と＜li＞タグでリスト定義しています。

【図2】見出し（h1、h2、h3）と段落のマークアップ

プロセス2：情報のグループ化

次は情報のグループを決めていく作業です。まずは「情報のまとまり」を判断していきます。作成しているページは、「ヘッダ＋コンテンツ（メインコンテンツ＋サブコンテンツ）＋フッタ」の2カラムレイアウトですから、ヘッダ領域、コンテンツ領域、そしてフッタ領域の3つのグループに分けることができます。コンテンツ領域は、メインコンテンツとサブコンテンツで構成されていますので、さらに2つのグループが追加されます。そして、これらすべての要素を含む一番大きなグループがあります。

・ヘッダの領域
・コンテンツの領域
・フッタの領域
・コンテンツ内のメインコンテンツ領域
・コンテンツ内のサブコンテンツ領域
・ヘッダ、コンテンツ、フッタすべてを含む一番大きな領域

これらのグループは、div要素でマークアップしていきます。たとえば、3つのレベルの見出しをヘッダ領域としてグループ化したい場合は、以下のように記述します。

＜div id="header"＞
＜h1＞大見出し＜/h1＞
＜h2＞中見出し＜/h2＞
＜h3＞小見出し＜/h3＞
＜/div＞

グループには、用途に合わせて2種類の名前（ID名とclass名）をつけることができます。まずID名を指定して、ページ内で何度も使用されるスタイル（記事の見出しなど）については、class名にしておくとよいでしょう。名前は、半角英数字で大文字と小文字は区別されます。記号は「-」（ハイフン）が使えますので「outer-group」のように記すことも可能です。大文字を入れて「outerGroup」とするか、ハイフンを付けるかは、サイト構築に関わるガイドラインで明確にしておけば、どちらでもかまいません。

ここでは、以下のID名に決めました。

・ヘッダ→ID名「header」
・コンテンツ→ID名「contentGroup」
・フッタ→ID名「footer」
・コンテンツ内のメインコンテンツ→ID名「content」
・コンテンツ内のサブコンテンツ→ID名「rightColumn」
・ヘッダ、コンテンツ、フッタすべてを含む一番大きなグループ→ID名「outerGroup」

階層構造で記すと下図のようになります。

【図3】div要素で「情報のまとまり」をグループにしていく

ここまでをブラウザでプレビューしてみます。どのブラウザ（InternetExplorer、Firefox、Opera、Safariなど）で見ても、以下のように表示されるはずです。見出しはすべて太字になっています。レベル1の見出しが一番大きく、上下の余白が広くなっています。これはブラウザが持っているデフォルトのスタイルシートが適用されているからです。つまり、WebデザイナーによるCSSデザインというのは「ブラウザのデフォルトCSSを上書きしていく」作業だと解釈することもできます。