【Web制作】―第3章―サイトマップの作り方

設計書作成

はじめに

こんにちは、内定者の鈴木です。
前回は、Webサイト制作の「要件定義」と「スケジューリング」について紹介いたしました。
今回は、Web制作の3回目です。「サイトマップの作り方」について紹介いたします。

サイトマップとは

サイトマップとは、Webサイトにどのようなページがあり、それはどこにあるのかWebサイトの構造(どこにリンクが貼ってあるのか )を表でまとめたものです。
いわば、Webサイトの住所録のようなものです。

Webサイトは、ページごとに階層が分かれています。トップページは第1階層です。トップページから、1つ先の別ページに進んだページを第2階層といいます。また、第2階層からさらに進んだページを第3階層といい、その先もリンクがある場合は階層が深くなっていきます。

1~3階層

 

このようにサイトマップを見れば、サイト全体の構造が分かるようになっており、サイトマップはWebサイト制作には欠かせないものです。

サイトマップの重要性

サイトマップは、Webサイト制作において、またサイト制作後(テストアップ、本アップ)のサイトチェックにおいて必要不可欠な情報です。

サイト制作において、「作りそびれているページはないか?」「無駄なページを作っていないか?」をチェックする際に使われます。
また、サイト制作後においては、リンクやページが合っているかの確認でも使用することができます。
大規模なサイト制作の場合、必要となるページ数は膨大です。サイトマップでページの管理をし、制作漏れやリンク切れを起こさないようにしましょう。

サイトをWordPressで作成する場合に「固定ページ」「投稿ページ」のどちらで作成するのか決定・確認する際にも、サイトマップは必要不可欠な情報です。

既存サイトのサイトマップ洗い出し

既存のWebサイトは、どのような構造になっているかを洗い出す作業です。

サイトマップとは」でも述べたように、既存サイトのページを階層ごとに洗い出します。

弊社のホームページを例に、既存サイトの洗い出しについて詳しく見ていきましょう。

 

1. まず弊社のホームページを開きます。
ここがトップページとなり、サイトマップでいうと「第1階層」にあたります。

mrfhp1


2. 次にトップページに、いくつリンク先があるかを確認します。

この場合、トップページ(スクロールはしない状態で)からのリンクは9つあります。この9つのリンク先のページ は、「第2階層」にあたります。

mrfhp2

3. そして、トップページからリンクを1つ選びクリックします。(下記画像では、②「サービス一覧」を選択。)

mrfhp3 mrfhp10

そうするとリンク先ページには、またクリックできるリンク先が出てきました。このリンク先ページが「第3階層」です。(上記画像、「現状分析」「CROコンサルティング」の部分。)
※第3階層にもリンク先がある場合、次のリンク先ページが「第4階層」となります。

mrfhp5

 

mrfhp6

 

4. 上記2~3の工程を繰り返し、サイトの洗い出しを行います。洗い出した既存サイトのサイトマップは以下のようになります。

既存サイトマップ拡大


以上を参考に、まずは既存サイトの構造を洗い出してみましょう。

新サイトマップ

既存サイトの洗い出しでは、実際のWebサイトを見ながら階層を分けることができました。
一方、新サイトマップを作成する場合は、既存のWebサイトマップ をもとに自らページを考えていく必要があります。

それに伴い、新サイトマップの作成で重要となるのが、「カテゴリー分け」です。
カテゴリー分けをすることで、次回の設計書の作成がしやすくなります。設計書で「メニュー」を設置する場合、予めこの段階で「カテゴリー分け」をしておくと、メニューの項目を決めやすくなります。

また、新サイトマップの階層は多くても3~4階層におさめるようにしましょう。あまりにも階層が深いと、ユーザーは何回もクリックをすることになり、本当に知りたい情報を得るまでに時間がかかってしまうからです。

弊社のホームページを例に、新サイトマップを作成いたしました。

新サイトマップ1

↓一部拡大

新サイトマップ拡大

以上を参考に、新サイトマップを作成してみましょう。

既存サイトマップと新サイトマップの使い分け

 

  • 既存サイトマップ=現在の構造を洗い出し、新規Webサイトの構造を考える際に参考にする。
  • 新サイトマップ=新規Webサイトの構造を考える。制作中・制作後の構造チェックに使用する。

 

既存サイトマップの作成では、構造を考える必要はありません。実際のWebサイトを見ながら、構造を分けていきます。既存サイトにページを追加する際や、既存サイトをリニューアルする際に使用します。

新サイトマップの作成は、既存サイトマップを参考に、自ら必要なページ・構造を考えなければなりません。ここで、構造を考えておくことで、後の設計書作成の段階では必要なページ・構造を考えながら同時に作業を進めなくてすみます。新サイトマップは、新規でWebサイトを制作する際や、Webサイトをリニューアルする際に使用します。

サイトマップとディレクトリマップの違い

 

  • サイトマップ=ユーザーが実際に閲覧できるページのみで構成したもの
  • ディレクトリマップ=画像や外部CSS,PHPなどのファイル(ページファイル以外)の居場所まで全て記述したもの

 

質の良いサイトを作るためには、サイトマップの作成だけでは不十分です。「どのファイルがどこのフォルダに入っているのか?」が分かるようなディレクトリマップの作成が必要です。

ここでは、ディレクトリマップについて見ていきましょう。

ディレクトリとは

英語で住所録という意味です。

Web制作では、

各種ファイル(htmlや画像)が格納されたフォルダ

のことを言います。

「ディレクトリ構成は、どうなっているの?」という質問は、「どのファイルがどこのフォルダに入っているのか?」という質問と同じです。

例えば、架空のページで「○○○パンケーキ材料」というWebサイトが存在するとします。このサイトのディレクトリマップは、以下のようになります。

ディレクトリマップ架空

 

↓拡大

ディレクトリマップ架空3

 

  • pancake.com/public_html/home/pancake/index.html
  • pancake.com/public_html/home/sp/pancake/index.html
  • pancake.com/public_html/home/pancake/powder/index.html
  • pancake.com/public_html/home/pancake/powder/flour/index.html
  • pancake.com/public_html/home/pancake/powder/sugar/index.html


上記のように、フォルダは「/」で区切ります。

理想のディレクトリは、URL(ディレクトリ構成の記述)を見ただけで、どんな内容のページかすぐわかるものです。

ディレクトリマップを作成することで、上記のようにファイルや画像データの収納先が分かります。Webサイト制作の途中や完成後に修正が出た場合でもファイルや画像データをすぐに追加、変更することができます。ディレクトリマップがあると、ファイルやデータを一から探してくるという手間を省けます。

おわりに

今回は、Webサイト制作「サイトマップの作り方」について述べてまいりました。いかがでしたでしょうか?

  • サイトリニューアルの際は、既存サイトマップの洗い出しを行い、それを参考に新サイトマップを作成しましょう
  • サイトマップは、サイト制作中や作成後の確認の際に役立つ情報です
  • サイトマップだけではなく、ディレクトリマップも同時に作成しましょう

 

これで、Webサイトの制作に必要な準備は整いました。質の良いサイトを作るためのツールとして、ぜひサイトマップとディレクトリマップを正しく作成し活用していきましょう。

次回は、いよいよ「設計書の作り方」についてご紹介いたします。

設計書作成

参考になったらシェアをお願いします!