第一回では、Webディレクターの役割や、知っておくべき用語、あとWebサイトの種類などについてお伝えしました。Webディレクターの役割は、主に人員のアサイン、スケジュール管理、品質管理、予算管理でしたが、忘れてはいけないのがWebサイトを具体的にイメージできる「設計図」です。主に「サイトマップ」「ワイヤーフレーム」「ディレクトリマップ」と呼ばれるものですが、1つずつ解説していきます。

Webサイトの全体像を把握するための「サイトマップ」

　サイトマップとは、Webサイトを構成する全てのページ名を書き出してまとめたものです。実際にどのようなページを用意するかを決めながら、このサイトマップをパワーポイント等のツールで書いていきます。
　一般的には、どのようなページが必要になるでしょうか。Webサイトの玄関であり、本来は企業等が明示するURLを入力して最初に開くページを「トップページ」といいます。他にも、製品などを扱うメーカーであれば「製品情報」、サービス業であれば「サービス内容」、事例や実績などを見せるための「事例・実績」、企業情報を掲載するための「企業情報」などがあります。また、企業の「プライバシーポリシー」とか、ECサイトであれば「特定商取引に基づく表記」や「利用規約」などが必要でしょう。あと、忘れてはいけないのが、顧客が企業にアクションするための「お問い合わせフォーム」です。このように必要と思われるページをどんどん書き出していきます。
　次に書き出したページを、カテゴリごとに分類していきます。弊社のWebサイト（https://fujiplus.jp/）を例として、「サービス内容」のカテゴリの中には「企画」「クリエイティブ」「ワークフロー」「印刷プロダクション」「マーケティング」「デジタルコンテンツ」「物流・配送」などがあります。
　そして最後に、これらのカテゴリを踏まえて、ページを階層構造にして基本的な訪問者の遷移がイメージできるようにします。ページを階層構造にしてまとめることから、サイトマップのことを別名で「ツリー図」と呼ぶこともあります。

ページごとの内容を具体的に決める「ワイヤーフレーム」

　ワイヤーフレームとは、Webページごとのレイアウトやコンテンツの配置を決める枠組みのことです。先程のサイトマップで決めたページの内容を、具体的にしていく作業になります。
　ワイヤーフレームを作成する際、最初に一番上に配置されるのがヘッダーです。ヘッダーには、全ページに同じ位置に共通して配置されるグローバルナビゲーションなるものを用意し、サイト内のあらゆるページを回遊しやすい機能を求めます。ユーザーはこのグローバルナビゲーションがあることで、より目的の情報に辿り着きやすくなります。また、ページ数が数百と多い場合は、グローバルナビゲーションには第三階層までを配置しつつ、第四階層以降はサイドナビゲーションを配置して誘導する方法などもあります。
　次に、ヘッダー・グローバルナビゲーションの下には、メインビューを入れることが多いです。トップページの場合だと、メインビューに動画やスライダーを配置して動的に見せることで、情報量も多く活動的なWebサイトに見えるでしょう。他にも、その下にニュース一覧を優先度に応じて配置したり、特に注目してもらいたい（顧客を誘導したい）カテゴリページのバナーを何等分かにして（マルチカラムにして）配置したりすると、より機能的なWebサイトになります。
　あと、コンテンツエリアにおいては、どのような見出し（大見出し・中見出し・小見出し等）で構成するかを想定して配置を考えていきます。また、写真などを配置する場合のパターンなども、この段階で想定していきます。コンテンツエリアは、CMSを使う際に誰でもメンテナンスがしやすいようにスニペット（繰り返し登場するレイアウトの断片、またはそれをすぐに呼び出せるように管理する編集機能）を想定しておくと、より自由度が上がります。
　そして最後に一番下に配置されるフッターは、ヘッダー同様にナビゲーションとして機能させることが多いです。ただし、ヘッダーと異なる点としては、単純にリンクテキストの羅列で構成されることが殆どです。

Webサイトの全体設計を明確にするための「ディレクトリマップ」

　ディレクトリマップとは、Webサイト全体のコンテンツを一覧化したもので、関係者への情報共有のために利用されるものです。一覧表の一番左には、項番（ID番号）をつけて管理番号とします。項目例として、ページタイトル、ディレクトリ名、実際の予定URL、ファイル名、メタ（meta）情報であるディスクリプション（description）やキーワード（keyword）などを入れます。また、この一覧表がディレクトリマップと呼ばれる本質を考えると、ページが階層構造になっていることが分かるようなカラム（第一階層・第二階層・第三階層・・・）での記載が望ましいです。
　ディレクトリマップを用意することで、いくつかメリットがあります。全体のページ数が一目で把握でき、ページそれぞれの役割や内容が分かりやすくなります。また、タイトルやメタ情報を記しておくことで、どのようなSEO対策のための設定を行なうのか明確になります。一覧化することで、似たページの重複を防いだり、不要なページを精査ができます。
　なお、ディレクトリマップの一覧表は、制作進行管理などにも活用できます。デザイン、コーディング、あるいはシステムエンジニアが関わる作業のタイミングをスケジューリングしたり、どのページをいつ確認したかを明記したりできます。

---

　今回ご紹介した「サイトマップ」「ワイヤーフレーム」「ディレクトリマップ」の作成は、実際に構築するWebサイトと異なったものにならないための大事な作業となります。この作業を丁寧にしておくことで、Webサイトの構築当初に想定している目的からズレることなく確実に進行することができるでしょう。

（株式会社フジプラス）

Webサイト制作の基礎知識③へつづく