SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

そこが知りたい! Web標準サイトの活かし方

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

そこが知りたい! Web標準サイトの活かし方(1)


  • X ポスト
  • このエントリーをはてなブックマークに追加

領域定義ルール

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

図5:領域定義のフロー
図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ガイドライン」を中心に解説していく予定です。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
そこが知りたい! Web標準サイトの活かし方連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 宮本麻矢(ミヤモト マヤ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3289 2009/06/22 18:37

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング