ホームページ構成図サイトマップとは?

ホームページの作り方

ホームページの構成図サイトマップとは?作り方の基本を紹介

今回の記事では、ホームページ制作の際にあると便利な「サイトマップ」の概要や作り方についてをご紹介していきたいと思います。

ホームページを自作する場合もサイトマップを作っておくことでサイト構成を整理できますし、これから制作会社やフリーランス制作者に外注する場合でも相手側の見積もりの精度向上や認識差異が少なくなります。

※なお今回のテーマで扱っている「サイトマップ」は「HTMLサイトマップ」や「XMLサイトマップ」といったものとは別物で、制作過程の初期段階で必要となるサイト全体の構成図のことを指していますのでご注意下さい

この記事を読むと分かること

  • サイトマップとはどういったものなのかについて
  • サイトマップを作成するメリットについて
  • サイトマップの作り方について

 

ホームページの構成図「サイトマップ」とは?

サイトマップとはサイト全体にどんなページがあって、どのような関係性で繋がっているかが分かるようになっている構成図のことを言います。

サイトの構成を表した「サイトマップ」

 

サイトマップを作成するメリット

次にサイトマップを作成するメリットですが、大きく以下の3つのメリットが挙げられます。

サイトマップを作成するメリット

  • 【自作の場合】サイト全体の構成が一目で分かりスムーズにサイト作成できる
  • 【制作代行の場合】作るべきページ数やサイト構成を顧客と意識合わせできる

 

【自作の場合】サイト構成が一目で分かりスムーズにサイト作成できる

1つ目のメリットは、サイト全体の構成が一目で分かりスムーズにサイト作成できるという点です。

サイトマップを作成せずにただ箇条書きにページ情報をまとめているだけだと、構想段階で重複しているページがあることに気づかなかったり、逆に必要なページが抜け落ちてしまっているといったミスが起きる可能性が高くなります。

よくあるのが初心者の方で、ただでさえ慣れないのに「サイトを作る作業」と「サイト構成を整理する」を同時並行で進めようとして、何を作るべきかが整理できなくなり混乱されていることがあります。

そういった意味でも先にざっくりでも「サイト構成を整理する」を事前に済ませた上で、「サイトを作る作業」に集中した方が、効率よくサイトを作成できることも多いと思います。
 
また、制作を外注する場合でも、予め依頼者サイドの方でサイトマップを作成しておくと、制作者サイドはより正確な見積もりを出すことができるのでより円滑にプロジェクトを進めていくことができます。
 

【制作代行の場合】作るべきページ数や構成を顧客と意識合わせできる

また、フリーランスで制作代行する方の場合でも、見積もり時にサイトマップを作って顧客にあらかじめ提案しておくことで、作るべきページ数やサイト構成を顧客と意識合わせできます。

当然ですが、サイト制作にかかる費用は作成するホームページの規模や工数によって異なります。

もし提案時にどんなページを・どのくらいのページ数を作るべきなのかあいまいなままサイト制作を請け負った場合、顧客と製作者の認識差異により、本来想定していない作業が必要になったり、余分な制作コストがかかってしまったりすることがあります。

そのため、どれくらいの規模・ページ数のサイト・どんなサイト構成になるのかをサイトマップを作成して共有することで、顧客と意識合わせすることができます。

サイト規模の把握
 

サイトマップの作り方

それではここからは実際にサイトマップを作る方法についてをご紹介していきます。

規模にもよりますが、最も一般的なやり方は「まずは手当たり次第コンテンツを書き出して」「取捨選択・グルーピング化して」「階層化してサイトマップに落とし込む」の3ステップのやり方です。

サイトマップ作成の3ステップ

  1. コンテンツ・ページを全て書き出す
  2. 書き出したページを取捨選択・グルーピングしていく
  3. 階層化してサイトマップに落とし込む

 

(STEP. 1)コンテンツ・ページを全て洗い出す

まずは、思いつくままウェブサイトに含めたいコンテンツ・ページを全て洗い出して書き出してみましょう。

何を書けばわからない場合は、同業他社など自分が作りたいサイトに近いホームページにどんなページ・コンテンツがあるかをを参考にすると、どんなコンテンツが自社ホームページに必要か把握しやすくなります。

ウェブサイトに含めたいページ・コンテンツを全て書き出す

下記は、よくあるホームページのコンテンツの例です。業種や業態にもよりますが、一般的によくあるページなので参考にしてみてください。

  • サービス(事業内容)
  • サービスAの詳細
  • サービスBの詳細
  • 製品情報
  • 製品Aの詳細
  • 製品Bの詳細
  • 料金表
  • お客様の声
  • 会社情報/プロフィール
  • 初めての方へ
  • 代表者あいさつ
  • 弊社の強み
  • 採用情報/スタッフ募集
  • 社員の声
  • 良くある質問
  • 実績(作品)
  • お問い合わせ
  • メディア掲載歴
  • お知らせ
  • ブログ(コラム)
  • アクセス

などなど

この段階ではサイトの階層構造などといったことは一切気にせず、とりあえず思い付くままに「会社概要」「Q&A」などといったページを全て書き出します。
 

(STEP. 2)書き出したコンテンツを取捨選択・グルーピングする

STEP. 1で含めたいコンテンツ・ページの書き出しが終わったら、書き出したページを取捨選択・グルーピングして整理してみましょう。

上で書き出した内容を元に例を挙げると、例えば「会社」のグループには、「会社概要」や「代表者挨拶」「アクセス」といったグループにまとめることができます。

書き出したページをグルーピングする
 

グルーピングしていくうちに、重複しているものや不要なものも見つかると思います。その場合は必要に応じて取捨選択しましょう。
 

(STEP. 3)階層化してサイトマップに落とし込む

最後に、STEP. 2で作成したグルーピング情報を元に、階層化してサイトマップに落とし込みます。

なお、サイトマップは並列ではなく階層的に作ります。階層構造を持つことで、ページ同士の関係性把握できます。

ホームページの正しい構造
 

何を上の階層に持ってきて何を下の階層にするかは、そのサイトの目的次第です。

 

小規模ホームページならPowerPointで作れます

パワーポイントに慣れている人で、小規模サイトのサイトアップを作成するのであればパワーポイントがおすすめです。

パワーポイントを開いて「挿入」タブの「SmartArt」→「階層構造」をクリックすると、サイトマップのテンプレートを追加することができるので、これを編集することで簡単にSTEP. 3で作成したようなサイトマップを作成することが可能です。

PowerPointの「挿入」タブの「SmartArt」→「階層構造」

ほかにもExcelが慣れている場合はExcelなど普段慣れているツールを使うと効率よく作成できるかと思います。

 

まとめ

まとめです。今回の記事では、ホームページの構成図「サイトマップ」の概要や作り方についてをご紹介しました。
サイトの構成を表した「サイトマップ」
 

ホームページを自作する場合もサイトマップを作っておくことでサイト構成を整理できます。また、これから制作会社やフリーランス制作者に外注する場合でも相手側の見積もりの精度向上や認識差異が少なくなりますので、是非一度作成してみると良いと思います。

なお、具体的なホームページの作り方については下記の記事で説明していますのでご参考いただけると幸いです。
【2021年ホームページの作り方総まとめ】ホームページ自作方法を解説
【2021年ホームページの作り方総まとめ】ホームページ自作方法を解説
 

今回は以上になります。最後までご覧頂き、ありがとうございました。

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【WordPressホームページの作り方総まとめ 12STEPで解説】

WordPressホームページの作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

【2021年版】WordPress(ワードプレス)の使い方総まとめ

WordPress(ワードプレス)の使い方  総まとめ版

今回は、これからWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方までまとめて説明していきます。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-ホームページの作り方