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

制作運用ガイドライン

　「制作運用ガイドライン」は、Webサイトの基本方針をドキュメント化したものです。これから作るWebサイトがどのようなものなのか、プロジェクトメンバー全員がWebサイトの方向性を正しく理解しておくという目的があります。

　「制作運用ガイドライン」の構成例としては、以下の項目が挙げられます。

• Webサイトの目的
• サイト構造／ディレクトリ構成
• アクセシビリティ／ユーザービリティ／SEO指針
• ビジュアルデザイン基本方針

　それではこれらの各項目について、詳しく見ていきましょう。

Webサイトの目的

　Webという媒体は、ユーザーにとって、調べ物をしたり、買い物をしたり、コミュニティに参加したりといった「目的を達成するためのツール」です。ユーザーニーズを把握し、ユーザーを満足させることができてこそ、Webサイトとして機能します。従って、制作に入る前の、事前の準備（コンセプトメーキングを含むプランニング）がとても重要になってきます。本稿では、プランニングについては扱いませんが、こうした事前準備を行っているものとして話を進めます。

　さて、制作運用ガイドラインには、プランニングの結果、導き出された「Webサイトの目的」を記しておきます。サイトの趣旨を明文化しておけば、制作／運用の段階で何らかの迷いが生じても、事あるごとに原点に戻って確認できるからです。

　ここでは「Webサイトの目的」という大きな括りにしましたが、「Webサイトのコンセプト／ターゲットユーザーの属性／ユーザーニーズ／コンテンツの展開方法」などの細項目をコンパクトにまとめ、誰が見てもWebサイトの趣旨をすぐに理解することができる内容にしましょう。このとき、皆さんよくご存知の「5W1H」を利用して考えをまとめておくと便利です。

　この「5W1H」での考え方をベースにして、まとめたものが次の図 1になります。

図1：「Webサイトの目的」の記述例

サイト構造／ディレクトリ構成

　「サイト構造」は、Webサイトの構造を直感的に分かりやすくするためにアウトプットしておくものです。階層関係を把握できるよう、一般的には、第一階層にトップページ、第二回階層にカテゴリページというようにツリー構造で表されます。メニューとして表示されるカテゴリ名も明記しておくと良いでしょう。

　次のサンプルは、リンク関係を矢印で、テンプレートの種類を色別で示したものです。深すぎる階層は、ユーザービリティやSEOの観点から好ましくありません。ユーザーがWebサイトの構造を頭の中で描きやすくなるよう、単純なツリー構造であるのが理想です。

図2：「サイト構造」の記述例

　次に「ディレクトリ構成」ですが、これはファイルをどのように管理するかを規定するものです。図3のように、同時にディレクトリ／ファイル名の付け方も表記しておくと良いでしょう。膨大な量のファイルも、名前の付け方に一定のルールがあれば管理しやすくなります。

public_html
├ index.html  [トップページ]
│ 
├ css/ 【CSSフォルダ】
│ ├import.css [各CSSファイル読み込み]
│ ├common.css [サイト共通スタイル]
│ ├category-name.css [カテゴリ別スタイル]
│ ├pages.css [ページスタイル]
│ ├hack.css [CSSハック]
│ ├reset.css [リセットCSS]
│ └ print.css [印刷用スタイル]
│
├ img/ 【画像フォルダ】
│ └category-name/【カテゴリ別画像フォルダ】
│        └接頭辞_連番.拡張子
│
├ js/ 【JavaScriptフォルダ】
│ └common.js [サイト共通JavaScriptファイル]
│
├ category-name/ 【カテゴリ別フォルダ】
│ ├ index.html [カテゴリトップページ]
│ └ pagename.html [個別ページ]
│
├ contact/ 【お問い合わせフォルダ】
│ ├ index.html [お問合せページ]
│ └ contact.php [問い合わせフォームスクリプト]
│
├ privacy.html [プライバシーポリシー]
│
├ sitemap.html [サイトマップ]
│
└ err-no.html [エラーページ]

　ここでのポイントは、「ファイル名を見ただけで、そのファイルがどのようなものなのか推測しやすい名前を付ける」ということです。これは、制作／運用者の「管理のしやすさ」のためだけでなく「ユーザーへの配慮」にもなります。ファイル名は、ブラウザのアドレスバーや、ステータスバーにURLとして表示されます。これを頼りにリンク先の内容を予想したり、現在位置を確認したりするユーザーもいるため、ユーザービリティ向上のためにも、分かりやすいファイル名を付けておくのが望ましいのです。また、フォルダ名の付け方には、デファクトスタンダードとなっているものもありますから、次の表を参考にして、なるべく汎用的なルールを規定しておくと良いでしょう。

アクセシビリティ／ユーザービリティ／SEO指針

　「アクセシビリティ／ユーザービリティ／SEO」の3つの指針は、Webサイトの品質を確保するために規定しておく項目です。フォーマットに決まりはありませんが、各項目に優先度をつけてチェックできるようにしておくと便利です。

ビジュアルデザイン基本方針

　「ビジュアルデザイン基本指針」も、前節同様、そのWebサイトの品質を保持するために定めるものです。この項目は、あくまでデザインワークにおける基本方針を定めるものであって、そのWebサイトの完成されたビジュアルデザインを定義するものではない点に注意してください。デザインカンプやテンプレートなどのような完成されたビジュアルデザインは、「Webサイトに必要な情報をすべて洗い出す→情報を分かりやすく分類する」といった地道な段階を踏んだうえで、CI（Corporate Identity）やブランドイメージを盛り込みながら、ようやく目に見える形でアウトプットされるものです。

　次に示す3つの指針は、どのようなWebサイトにも汎用的に適用できるデザインの基本方針になります。

• 探しやすいデザイン：Webサイト上にある情報を、明確にグルーピングし、ラベリング（＊）を行い、ファインダビリティ（情報の見つけやすさ）を向上させる
• 操作しやすいデザイン：「位置」「配色」「大きさ」に配慮し、Webサイト全体で一貫したナビゲーションを提供する
• 理解しやすいデザイン：見た目にも文書構造が分かるように配慮し、テキストや画像の可視性と可読性を確保する