CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/12/08 14:00

目次

制作運用ガイドライン

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

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

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

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

Webサイトの目的

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

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

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

「5W1H」ベースで考えるWebサイトの趣旨の例
5W1H 回答例
What:Webサイトの目的は何か? 料理を通じてコミュニティを形成し、毎日の料理を楽しくさせる
Who:誰のためのWebサイトか? 料理が面倒だと思っている20代から30代の主婦
When:いつWebサイトを利用するのか? 毎日の献立を考える時、レシピを知りたい時
Where:どんな環境でWebサイトを利用するのか? 自宅からPCにて
Why:なぜWebサイトを利用するのか? 料理の作り方や、毎日の献立に悩んでいるから
How:どのようにWebサイトを利用するのか? 投稿レシピの検索→作った料理の感想を投稿→(コミュニティの形成→料理が楽しくなる!)→レシピの投稿

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

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

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

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

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

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

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

図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として表示されます。これを頼りにリンク先の内容を予想したり、現在位置を確認したりするユーザーもいるため、ユーザービリティ向上のためにも、分かりやすいファイル名を付けておくのが望ましいのです。また、フォルダ名の付け方には、デファクトスタンダードとなっているものもありますから、次の表を参考にして、なるべく汎用的なルールを規定しておくと良いでしょう。

一般的に使用されるフォルダ名
フォルダ名 格納するファイルの種類
common Webサイトで共有するファイル
img/images 画像ファイル
css CSSファイル
js/datalib JavaScriptファイル

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

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

「アクセシビリティ指針」の記述例
番号 優先度 対象要素 項目
1 A 全体 すべてのページに内容を的確に示すタイトルをつける
2 A 全体 ページ内で記述する基本言語を明示する
3 A 全体 文字色と背景色のコントラストを十分に取る
~ 略 ~

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

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

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

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

 *)ラベリング:ある項目(カテゴリーやリンク)についての名前を付けること。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

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

もっと読む

著者プロフィール

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

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

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

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

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5