Webサイトの品質管理に使うルールドキュメントとは、いわゆる「ガイドライン」のことです。適切なガイドラインを持つことにより、Webサイトのコンテンツをユーザーにとって使いやすく、運用しやすく、成果が上がりやすい状態に保つことができます。
あさみ「鈴木先輩、ソーシャルメディア運用ガイドラインの虎の巻、ありがとうございました！ あれを見れば、運用に関わるルールや決まりごとが一目瞭然でした。とっても助かりました」
鈴木「役に立ったようで良かったよ。ソーシャルメディアに限らず、運用品質を維持するためのルールを決めておくことは、とても大事だよね」
あさみ「確かにそうですね。普段のWeb制作・運用でも、私が入る前から色々なルールやガイドラインが用意されていました。それが業務のよりどころになっていましたね。でも、どんな種類のガイドラインがあって、何の目的であるのかは、正直あまり理解できていません……」
鈴木「よし、よい機会だ。ガイドラインについて講義しようか」
あさみ「よろしくお願いします！」
3-1-1 品質管理に使うルールドキュメントの全体像
「ガイドライン」とは、Webサイトの品質基準や仕様を定めたドキュメント
Webサイトをリニューアルすると、気の利いたWebベンダーであれば「ガイドライン」と呼ばれるドキュメントを一緒に納品してくれます。Webサイトのリニューアルと運用の担当ベンダーが異なるとき、運用ベンダーが欲しがる資料には必ず「ガイドライン」が入っています。ガイドラインとは、Webサイトを更新するときに守ってほしい、Webサイトの品質基準や制作仕様を記述したルールドキュメントで、運用には不可欠な資料になります。
企業のWeb担当者の方は、詳しく中身を見たことがないかもしれませんが、ガイドラインを開いてみると、Webサイトのデザインやコーディングのルールが記述されていることが分かります。企業によっては、文章の用字・用語のルールや、障がい者・高齢者配慮（アクセシビリティ）のルールが記述されていることもあるでしょう。ガイドラインに絶対に欠かせない項目というものはいくつかありますが、どこまで詳細なルールを定めるかは企業ごとに異なっています。
自社のWebサイトの品質は、自分たちで担保する。そのためのガイドライン
HTMLの知識があれば、Webページの更新自体はそれほど難しくありません。何十ページ（場合によっては何百ページ！）にもなるガイドラインは、なぜ必要なのでしょうか？ それは、大勢のスタッフ、大勢のステークホルダーがWebサイトの更新に関わる中で、サイトの品質を守っていくためです。
雑誌のインタビューを受けたとき、用字・用語の適切さなど、インタビュー記事の品質は雑誌の編集者が担保してくれます。街角に広告を出稿したとき、法律違反の記載がないかなど、広告のクオリティは広告代理店が担保してくれます。でも、企業のWebサイトでコンテンツを公開したとき、その品質は誰も守ってくれません。自社サイトの品質は、自分達で管理しなくてはならないのです。それには、守りたい品質基準や制作仕様をきちんと決めておく必要があります。
個人のホームページであれば、自分でデザインやコーディングの基準を決めて、自分で守っていけば済みます。品質基準や制作仕様は、その人の頭の中だけにあれば十分です。しかし、企業サイトには大勢のメンバーが関与します。企画のスタッフも制作のスタッフも複数人が関わります。各事業部や広報部、人事部など、依頼側のステークホルダーも多種多様です。全員がルールを守って運用していくためには、ルールはドキュメントとして明示されなくてはならないのです。これが、ガイドラインと呼ばれるドキュメントが必要な理由です。
ガイドラインのルール項目はWebに対する企業姿勢を映す鏡
様々な企業のガイドラインを見ていると、気がつくことがあります。それは、ガイドラインのルール項目が、その企業がWebサイトをビジネス上どう位置づけているか、誰にどんな風にWebサイトを使って欲しいのかという姿勢を反映していることです。
例えば、ECサイトのガイドラインはコピーライティングの品質やSEOに関するルールが手厚くなっています。激しい獲得競争に勝ち抜きたい、自社サイトを買い物場所に選んでもらいたいという思いが伝わってきます。銀行や電力・ガスなど社会インフラとなる企業のサイトでは、アクセシビリティに関するルールが手厚くなっています。自社のサイトを使えない人がいてはならないという、使命感を表しているのでしょう。グループガバナンスを重視する企業のサイトでは、デザイン・コーディング仕様を厳しく統制し、さらに違反ができないようにCMSで実装を縛っています。逆に、最低限のこと以外は各事業部に委ね、成果を競わせているような企業もあります。
ガイドラインでルール化するということは、自社にとって「良いWebサイトとは何か」を定義していることでもあります。ガイドラインを作るというと、ルールを統一することや項目を網羅することに意識が向きがちですが、メンバー全員が「守る意義がある」と感じられるルールを作る方が大切です。それを突き詰めていくと、ガイドラインがWebに対する企業姿勢を示すようになっていくのでしょう。ガイドラインを作るときは、ベンダー任せにせず、自社に必要な品質基準・制作仕様を自分達で考えるようにしたいものです。
品質管理のルールは、品質基準・制作仕様・チェック方法の3タイプ
品質管理に使うルールドキュメントは、図3-1-1のような体系で整理できます。
（1）品質基準に関するルール
Webサイトが本当に満たしたい品質を定義します。例えば、特定商取引法や景品表示法を遵守していること、自社のCI（コーポレート・アイデンティティ）やVI（ビジュアル・アイデンティティ）のルールを守っていること、個人情報の漏洩やウイルス感染のリスクがないこと、ユーザーにとって使いやすいこと、障がい者や高齢者に配慮していること、検索エンジンから正しく検索できることなどが、代表的な品質基準です。ちなみに、Webの世界では使いやすさを「ユーザビリティ」、障がい者・高齢者対応を「アクセシビリティ」、検索エンジン対応を「SEO」と呼ぶことがあります。
品質基準に関するルールは、Webサイト用に新しく作るよりも、「Webサイトも既存のルールに準拠する」という形で定義することが多いようです。法律はもちろんですが、ブランドルールも既存のCI・VIガイドラインに準拠するべきですし、Webアクセシビリティに関してはWCAG2.0（日本ではJIS X 8341-3という公的標準に採用）という国際標準ルールがあります。WebユーザビリティやSEOについては、一般に出回っている知見を参考にしつつ、注力するルールを独自で定める必要があるでしょう。
なお、品質基準はWebサイトに関する上位ルールであると同時に、その他のルールを守る理由付けとしても使われます。例えば、「サイトのナビゲーションのデザインをこのように統一する」という制作仕様のルールを守る理由として、「使いやすさのために一貫したナビゲーションを使う」というユーザビリティのルールを挙げることができます。
（2）制作仕様に関するルール
Webサイトの制作時に守るべき仕様を定義します。Webサイトを更新するには、更新するコンテンツの情報整理のフォーマット（コンテンツモデル）、Webページの視覚表現（デザイン）、実装手法（コーディング）を決める必要があります。もちろん、毎回好き勝手な仕様を決めてもいいのですが、（1）の品質基準に関するルールを守ることや、チームでの運用を効率化することを考えると、統一の仕様を決めておくことが合理的です。
いわゆるデザインガイドラインやコーディングガイドライン、原稿開発ガイドラインなどが、ここに含まれています。
（3）チェック方法に関するルール
コンテンツの品質基準や制作仕様のルールが守られていることを担保するための、品質チェック方法を定義します。（1）の品質基準、（2）の制作仕様は、Webサイト・Webページという「モノ・成果物」に関するルールでしたが、ここだけは品質チェックという「タスク・業務」のルールになります。
チェックシート（チェック項目）、チェックツール、チェックプロセス（いつ、誰が、どのチェックを行うか）の３つを定義しておくことが大切です。
まとめ
- 品質管理に使うルールドキュメントとは、いわゆるガイドラインのこと。Webサイトの品質基準や制作仕様を記述した、運用に不可欠なドキュメントである。
- ガイドラインに必須のルール項目はあるが、必須以外の項目や各項目のルール記述の細かさは企業ごとに異なる。
- 自社のWebサイトの品質を、自分達で担保するために、ガイドラインがある。
- Webサイトで守りたい品質基準・制作仕様は、自分達できちんと考えて決める。
- 統一性や網羅性より、スタッフ全員が守りたいと思えるメリハリのあるルールにする。
- 品質管理のルールには、品質基準・制作仕様・チェック方法の3タイプがある。
3-1-2 品質ルールドキュメントの事例紹介
それでは、実際に品質管理に使われているルールドキュメントを見てみましょう。ここではサンプルとなるルールドキュメントの事例を紹介します。自社でガイドラインの過不足を考える場合などに活用してください。
ユーザビリティ・アクセシビリティガイドライン
| 目的 | Webサイトが満たすべきユーザビリティ・アクセシビリティ品質の明確化 |
|---|---|
| 対象者 | 主に企画スタッフ、設計スタッフ、テンプレート開発スタッフなどが利用 |
| 内容 | Webサイト運用の経験から得られた、サイトのユーザビリティを高める（ユーザーが、より確実に、速やかに、快適に、目的を達成できる）ためのルールを記述します。また、アクセシビリティに関する国際標準WCAG2.0の、どの項目にどんな方法で準拠するかを記述します。 ユーザビリティ・アクセシビリティガイドラインを作るのであれば、単にWCAG2.0の引き写しではなく、使いやすいように項立てを工夫してください。できれば制作仕様のガイドラインと対照しやすいように項立てして、制作仕様を守れば品質基準も自動的に守られる関係にしておくとよいでしょう。 |
| 目次（例） |
|
アクセシビリティ対応原則
マークアップ言語と文書構造
テキスト
ナビゲーションシステム
SEOガイドライン
| 目的 | Webサイトが満たすべきSEO（検索エンジン最適化）品質の明確化 |
|---|---|
| 対象者 | 主に企画スタッフ、設計スタッフ、テンプレート開発スタッフなどが利用 |
| 内容 | Webサイト運用の経験から得られた、サイトのSEO効果を高めるためのルールを記述します。基本的にキーワードに依存しないSEO内部施策（サイト内の施策）のルールが中心で、特定キーワードのための施策や、SEO外部施策（外部からリンクを得るための施策）は除外しています。これは、ガイドラインによる統一的対応が有効か否かで分けています。 |
| 目次（例） |
|
検索エンジンの仕組み
URL変更時の対応
宣言とメタ情報、Open Graph Protocol
ウェブマスターツールの設定
コンテンツモデル・ガイドライン
| 目的 | コンテンツの目的、掲載情報の分類・構造・導線、画面フォーマットなどの統一 |
|---|---|
| 対象者 | 主に企画スタッフ、設計スタッフ、制作スタッフなどが利用 |
| 内容 | Webサイトには、製品・サービス情報、サポート情報、セミナー情報、ニュースリリースなど、定型で多数のページがある「カタログのような」コンテンツがあります。そういった定型コンテンツのフォーマットを定義するのがコンテンツモデルのガイドラインです。 そのコンテンツの目的・ターゲットユーザー・サイトマップ上の位置づけ、コンテンツ内に掲載される情報の分類とラベル（分類につける名前）、分類した情報をどういう構造でサイトに掲載するか、どのような導線でコンテンツに出入りさせるか、画面のフォーマットはどのように統一するかなどが記載されます。 これにより、似たようなコンテンツなのに、ページによって情報の分類も見た目もバラバラで使いにくいという問題を防止します。また、新製品が出る、新しいセミナーを告知するといったときに必要な情報の種類が決まるので、毎回パンフレットなどの情報ソースを見て、載せる情報を探す手間が不要になります。地味ですが、更新頻度が高いときはコストや情報の正確さを大きく改善でき、効果的です。 |
| 目次（例） |
|
●●カテゴリーの基本構造・導線
掲載情報と構成、必須情報・禁止情報とラベル、情報ソース
固有の画面パターン、ナビゲーション項目
固有の運用ルール、システム連動、その他
デザインガイドライン
| 目的 | Webページの視覚表現、デザイン、レイアウトなどの統一 |
|---|---|
| 対象者 | 主に設計スタッフ、制作スタッフなどが利用 |
| 内容 | Webサイトには、製品の外観写真やプロモーション用の画像など、ページ固有のデザイン要素と、ヘッダ、フッタ、ナビゲーション、見出し、ボタンなどサイト共通のデザイン要素があります。デザインガイドラインでは、サイト共通のデザイン要素、レイアウト、視覚効果など、画面に表示される視覚表現のルールについて定義します。ページ固有の要素でも、トップページのキービジュアルや各ページにあるバナーなど仕様を統一したい場合は、デザインガイドラインに記載します。 テキスト原稿開発のルールについては、デザインガイドラインに掲載する場合と、別に原稿開発ガイドラインを作る場合があります。別冊とするか否かは、事業部の担当者などWeb専門でない人がWeb用のライティングを行うか否かと、原稿書き起こしの頻度で決まってきます。 |
| 目次（例） |
|
基本レイアウトパターン
ローカルナビゲーション
原稿開発ガイドライン
| 目的 | Webページのテキスト原稿・メタ情報などのライティング品質の統一 |
|---|---|
| 対象者 | 主に原稿開発スタッフ（特にWeb専業でない方）が利用 |
| 内容 | テキスト原稿のライティングルールを定義します。「デザインガイドライン」で述べたとおり、事業部の担当者などWeb専門でない人がWeb用のライティングを行うことが多い場合は、原稿開発ガイドラインを定めた方が便利です。 |
| 目次（例） |
|
原稿の提出方法
文体、送り仮名、用字・用語の統一
コーディングガイドライン
| 目的 | Webページの実装手法の定義、HTML・CSS・JavaScriptなどのコーディングの標準化 |
|---|---|
| 対象者 | 主に制作スタッフが利用 |
| 内容 | マークアップ言語の種類やコーディングに関する規約、HTMLや画像などのファイルの持ち方、その他Webページの実装に必要な技術のルールを定義します。システム開発で言うところの開発標準に該当します。 HTMLは比較的コーディングの自由度の高い言語ですが、それだけに制作スタッフ個々人が勝手にコーディングを行うと、書き方やリソースファイルの持ち方がバラバラになり、メンテナンスしにくくなってしまいます。それを防止するためには、ガイドラインで標準のコーディング手法を決めてしまうことが有効です。 |
| 目次（例） |
|
マークアップ言語仕様
個別ファイル命名規則
HTML設計ルール/head部の定義
| No | 要素 | 指定 | タグ |
|---|---|---|---|
| 1 | 文書タイプ宣言 | 固定 | |
| 2 | htmlタグ | 固定 | |
| 3 | head開始 | 固定 | |
| 4 | HTMLの文字コード告知 | 原則固定 | |
| 5 | title | ページごと | |
| 6 | meta description | ページごと | |
| 7 | meta keywords | ページごと | |
| 8 | スマホの電話番号リンク無効化 | 固定 | |
| 9 | viewportをデバイス幅に固定 | 固定 | |
| 10 | og:title（投稿見出し） | ページごと | |
| 11 | og:type（投稿属性） ※ | パターン | |
| 12 | og:url（投稿本籍） | ページごと | |
| 13 | og:image（投稿サムネイル） | 原則固定 | |
| 14 | og:sitename（投稿元サイト名） | 原則固定 | |
| 15 | og:description（投稿リード） | 任意 | |
| 17 | サイトインデックス指定 | 原則固定 | |
| 18 | ファビコン指定 | 原則固定 | |
| 19 | WebClipアイコン指定 | 原則固定 | |
| 20 | 共通CSS読込 | 必要分 | |
| 21 | 個別CSS読込 | 必要分 | |
| 22 | 共通JS読込 | 必要分 | |
| 23 | 個別JS読込 | 必要分 | |
| 24 | Google Analytics非同期コード | 原則固定 | |
| 25 | head終了 | 固定 | |
| ※TOPは、 | |||
品質チェックマニュアル＆チェックシート
| 目的 | Webページの品質チェック項目・方法・ツールの標準化、チェック手順の明確化 |
|---|---|
| 対象者 | 主に制作スタッフ、品質管理スタッフなどが利用 |
| 内容 | 各種ガイドラインが遵守されていることを検証するため、パターンごとの品質チェック項目の一覧と、各項目をチェックする方法、使うツールなどを定義します。また、それぞれ、どんなときにどんな手順でチェックを行うか、どんなフォーマットで報告するかについてもルールを定めます。 制作スタッフと、検品を行う品質管理スタッフの検証基準を合わせることで、確実かつ効率的な品質チェックが可能になります。 |
| 目次（例） |
|
HTML制作時のテスト/テンプレート・モジュール開発時のテスト手順
HTMLチェックシート
まとめ
一般的なWebコンテンツのガイドラインには以下のようなものがある。
- ユーザビリティ・アクセシビリティガイドライン
- SEOガイドライン
- コンテンツモデル・ガイドライン
- デザインガイドライン（原稿開発ガイドラインを分冊する場合もある）
- コーディングガイドライン
- 品質チェックマニュアル＆品質チェックシート
ガイドラインをどのように分冊するかは、ルールを定める目的と、ルールの対象者（ガイドラインを使う人）を勘案して決める。
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：Webサイトのガイドライン6つの事例集＋品質チェックマニュアル&チェックシート | Web制作・運用現場のための「課題解決」の教科書 | Web担当者Forum
Copyright (C) IMPRESS CORPORATION, an Impress Group company. All rights reserved.