Webサイトの制作／運用の効率化を図る
「ガイドライン策定」のすすめ（前編）

そこが知りたい！ Web標準サイトの活かし方（1）

領域定義ルール

　Webページの設計段階に入ると「ワイヤーフレーム」というものが作られます。ワイヤーフレームとは、Webページの中にどういう要素がいくつ入るかを示すWebページの設計図となるものです。（X）HTMLで領域定義を行う際は、このワイヤーフレームと連動させることでスムーズに作業を進めることができます。一般的には、ヘッダやフッタなどの各領域をdiv要素でグルーピングし、id属性で名前を付けて領域を定義していきます。

図5：領域定義のフロー

　この時少なからず迷いが生じるのが、id名の付け方ですが、「left」や「right」といった表示位置を示すような名前の使用は避けましょう。例えば、サイドバーに「left」や「right」というような名前を付けると、レイアウト変更でサイドバーの左右を差し替えたときに、表示位置とid名が矛盾して、おかしなことになってしまいます。「globalnav」や「menu」のように、id名を見ただけで、その役割や構造を理解することができるような名前を付けるようにしましょう。

　厳密に言えば「header」や「footer」といった名前も、表示位置を示しているように感じられるかもしれませんが、これらは「内容識別のために使用される本文以外の情報」という意味として捉えることもできます。例えば印刷されたドキュメントには、ヘッダ情報として日付や表題／管理情報などが入ったり、フッタ情報としてページ番号が振られたりしますが、これらは位置というよりも定型の情報として扱われます。

head要素内ルール

　head要素内の記述は、「SEO」や「アクセシビリティ」に直接関わってくる部分です。このことを踏まえたうえで、head要素内に包括する要素や記述順序などのルールを明記しておくと良いでしょう。また、コードの記述例を作成し、テンプレートとしておくのも有効です。

　以下にルールの例を示しますが、あくまでサンプルですので、内容については参考程度にとどめ、Webサイトの方針に従って、オリジナルのルールを規定するようにしてください。

　まず「記述順序のルール」について、次のようなサンプルを挙げておきます。

head要素内に包括する要素の記述順序

1. 文字化け回避のため、必ず最初にmeta要素のcharset属性で文字コードセットを指定する
2. その直後に、title要素を記述する
3. 続いて他のmeta要素、link要素、script要素の順で記述する

　続いて、その他「head要素内に包括する要素のルール」の一例を示します。

head要素内に包括する要素についてのルールの例

• title要素では、ユーザーが、ひと目で理解することができる適度な文字数で、ページの内容を明確に示すタイトルを付ける
• タイトルには、「サイト名」「カテゴリ名」「ページ名」を明記する。カテゴリページは「カテゴリ名-サイト名」の順、個別ページは「ページ名-カテゴリ名-サイト名」の順で記述する
• meta要素のname属性とcontent属性を使用して「ページの説明文（name="description"）」および「キーワード（name="keywords"）」を記述する
• ページの説明文は、ページごとに適切な説明文を簡潔に記述する
• キーワードは、同義語、類義語を含め、重要度の高いものを10個前後までとする
• link要素のrel属性とhref属性で明確なナビゲーションリンクを提供する

　これらルールを踏まえた「ソースコードの記述例」を作っておくと、テンプレートとして利用できるので便利です。

［リスト 1］head要素内の記述例

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- 文字化け回避のため、最初に文字コードセットを指定する -->
  <title>ページ名 - カテゴリ名 - サイト名</title><!--ページの内容を明確に示すタイトルをつける -->

<!--  以下、他のmeta要素、link要素、script要素の順で記述 -->
  <meta name="description" content="ページの説明文"><!-- ページごとに、ページの内容を簡潔に説明する -->
  <meta name="keywords" content="キーワード, 単語, 語句"><!--  同義語、類義語を含め、重要度の高いものを10個前後まで -->

  <!--  明確なナビゲーションリンクを提供する -->
  <link rel="start content" href="sitemap.html" title="目次" />
  <link rel="help" href="help.html" title="ヘルプ" />
  <link rel="prev" href="prev.html" title="前のページ「○」へ戻る" />
  <link rel="next" href="next.html" title="次のページ「○」へ進む" />

  <link rel="stylesheet" type="text/css" href="css/style.css" media="all">
  <script type="text/javascript" src="/js/common.js" charset="utf-8"></script>
</head>

body要素内ルール

　（X）HTMLの制作で悩ましいのは、「どの要素を使って、どのようにマークアップするか」という判断です。（X）HTMLで用意されている要素・属性の種類は限られており、決して豊富とは言えません。また、仕様書には「～してもよい（May）」とされている曖昧な部分もあり、どう解釈すればよいのか判断に迷う部分もあります。

　例えば、ロゴやナビゲーション、フォームなどのマークアップの仕方、見出し要素の扱い方、IDとクラスの使い分け、dl要素の応用範囲などは、実際にコーディングする際に迷いの生じやすい部分です。その都度悩むことにならないよう、あらかじめ基本的な方針を定めておくと良いでしょう。前項の「head要素内ルール」同様、以下に簡単なサンプルを示しておきます。

body要素内ルールの例

• ロゴ画像は、トップページは「h1要素」、その他のページは「div要素」で囲む
• グローバルナビゲーションは、箇条書きリスト（ul要素）でマークアップする。サブカテゴリは、ul要素を入れ子にして階層を示す
• フォームのコントロールをform要素の直接の子要素とするのは不可とする。コントロールは、dl要素（定義型リスト）で囲む
• div要素は、汎用要素であるが乱用は避ける。どの要素でもマークアップすることのできない場合の使用に留める
• id属性は「要素に固有の識別子を与える」場合に使用する。ページ内で一意な要素はclass属性ではなく、id属性を使用する
• class属性は、「複数回登場する要素を分類する」場合に使用する。見栄えを指定する目的（CSSのセレクタとして機能させる）で、class属性を多用することは避ける（CSS側で、積極的に子孫セレクタを利用する）
• id/class属性の値には、構造や役割を表す名前を付ける

　なお、この部分については、本連載の第3回以降のテーマとし、さらに掘り下げて説明していく予定です。

まとめ

　今回は、「制作運用ガイドライン」および「（X）HTMLガイドライン」の策定において決めておきたい事項について、Web制作のワークフローで無駄の発生しやすい部分を中心に一通り触れてみました。実際には、Web制作の現場によって、定めておきたい項目はそれぞれだと思いますが、ガイドライン作りに夢中になりすぎたあまりに、さほど重要ではない部分まで細かく規定してまうようなことのないよう気をつけましょう。決め事を増やしてしまったあまりに、ルールに縛られて、実際のワークフローに支障をきたすようでは逆効果です。

　さて、次回は、今回紹介しきれなかった他のガイドラインについて、「CSSガイドライン」を中心に解説していく予定です。