サイトマップ（構成図）の作り方【エクセルで簡単に作れる】

ユーザーと検索エンジンにとって利便性の高いWebサイトに仕上げるには、「サイトマップ」が必要です。

Webサイト運営者の目線に立ってもサイトマップが役に立つ場面は多いので、早めに作成しておきましょう。

とはいえ、

『サイトマップでどうやって作成するの？』
『Webサイト全体の構造図を作るのは難しすぎる』

そんな声も聞こえてきます。

今回のコラム記事では、Webサイト全体の構造図(サイトマップ)の作り方を詳しく解説します。

サイトマップ（構成図）を作るメリットから事前準備、初心者でも簡単にサイトマップ（構成図）を作成できる便利なツールまでご紹介します。

また、エクセルで作ったサイトマップ（構成図）のテンプレートを無料ダウンロードできますので必見です。

サイトマップ（構成図）とは？

サイトマップ（構成図）とは、Webサイトにある各Webページの階層をわかりやすくまとめたものです。

名前のとおり、構成図はWebサイトの地図のような役割があり、構成図を見るだけでどこにどんなコンテンツ・Webページがあるのかわかります。

構成図はホームページ（Webサイト）の制作を外注したときに、制作会社が構成図を資料の一つとして用意してくれることがほとんどです。

Webサイトの制作開始から完成に至るまで、この構成図を基に作業を進めていくので、構成図が悪いと効果や成果が出にくい中途半端なWebサイトができる可能性があります。

サイトマップ（構成図）のメリット

サイトマップ（構成図）の用意には、以下のメリットがあります。

1. Webサイトの成功につながる
2. 自社ホームページを制作会社に依頼しやすくなる
3. ホームページの管理を複数のスタッフで共有できる

Webサイトの成功につながる

サイトマップ（構成図）を作成することで、Webサイトの成功につながります。
ここでいうWebサイトの成功とは、主に集客のことを指します。

Webサイトの設計（ディレクトリ構造）は、SEO対策において大事な要素の一つです。

Webサイト内の構造が乱雑だと、検索エンジンが各Webページを正しく評価できず、結果的にSEOによる集客効果が期待できません。

また、Webサイト内の構造が乱雑の状態は、検索ユーザーからみても使い勝手が悪くて目的の情報が見つけづらいです。

サイトマップ（構成図）はWebサイトの構造を適切に整理でき、検索エンジンや検索ユーザーに使いやすいWebサイトになります。

つまり、サイトマップ（構成図）があることは、Webサイトの成功につながるのです。

制作会社に依頼しやすくなる

依頼者側がサイトマップ（構成図）を用意して制作会社に提出するのは、メリットがあります。

サイトマップ（構成図）があれば、制作会社に何を依頼するべきかが具体的にわかるため、制作会社は予算を立てやすかったり、見積もりが出しやすくなります。

ただ何となく『弊社のWebサイトのSEO対策をしてください』と依頼するよりも、サイトマップと一緒に提出して取り組むべきことをハッキリとさせるべきでしょう。

また、サイトマップがあれば制作会社が進めている内容がリアルタイムで把握できる点も大きなメリットです。

Webサイトの管理を複数のスタッフで共有できる

サイトマップ（構成図）があることで、Webサイトの管理を複数のスタッフで共有できます。

Webサイト内の状況を明確に把握できるので、SEOに効果が見受けられた場合もすぐに対応できるのです。

また、サイトマップ（構成図）を作成するツールにもよりますが、リアルタイムで連携を取りながら1つのWebサイトを複数人で操作できます。

Webサイトは作成したら終わりではなく、コンテンツの修正や追加が必要不可欠ですので、今後も複数のスタッフで管理し続けられるサイトマップ（構成図）を作っておくとよいでしょう。

サイトマップ（構成図）の作り方【3つの手順】

ここからは、サイトマップ（構成図）の作り方を具体的に解説していきます。

1. 重要なWebページを洗い出す
2. コンテンツをカテゴリーごとに分類する
3. Webページの階層（ディレクトリ）を決める

上記の3つの手順でサイトマップを設置するまでの下準備が整います。

それぞれ順を追って解説するので見ていきましょう。

重要なWebページを洗い出す

最初に、Webサイト内に入れるページを洗い出しましょう。

具体例として、パーソナルトレーニングジムのポータルサイトを想定した構成図を作ります。

上記のようにWebサイトに必要と思うWebページをあるだけ洗い出します。

どのようなWebページが必要であるのか見当もつかない場合は、競合他社のWebサイトを参考にしましょう。

コンテンツをカテゴリーごとに分類する

次に、先ほど洗い出したWebページをカテゴリーごとに分類しましょう。

大きくカテゴリー分けをしたあとは、それぞれ適したWebページを分類します。

Webページの階層(ディレクトリ)を決める

最後に、Webページの階層(ディレクトリ)を決めてまとめるとサイトマップ（構造図）の完成です。

第1階層であるトップページの下の第2階層に「会社について」「ボディメイクコラム」「入会の流れ」「店舗紹介」「トレーナー紹介」「価格」の6つの大まかなカテゴリーがあります。

第2階層の下の第3階層に料金プラン内容だったり、ボディメイクコラムだったりそれぞれ並びます。

もちろん、カテゴリーに属しないWebページがあっても問題はありません。

「よくある質問」や「問い合わせ」などのWebページはカテゴリーに属しておらず、1ページで成り立っているWebサイトもよく見かけます。

サイトマップ（構成図）を作るさいの注意点

サイトマップ（構成図）を作るさいに、注意すべき点をまとめました。

• 階層を深くしすぎない
• ユーザー目線で考える
• ページの優劣をつける

詳しく解説するので、サイトマップ（構成図）を作成する前に押さえておきましょう。

階層を深くしすぎない

サイトマップ（構成図）を作成するさいに、階層を深くしすぎないことも重要なポイントです。

階層が深ければ、ユーザーが知りたい情報にたどり着くまでに何度もクリックをしなければならないので、ユーザーが面倒に感じて離脱してしまうでしょう。

ユーザーが求めている情報を最低でも3クリックでたどり着くように、階層を浅めに設定しておくことが大切です。

先ほどの例として挙げたパーソナルトレーニングジムのWebサイトは「3階層」です。

大規模なWebサイトでなければ「3階層」が理想だといえるでしょう。

Webページの優劣をつける

Webページに優劣をつけることで、読者をWebサイト内の「見てほしいWebページ」に誘導できます。

たとえば、商品を販売するECサイトであれば、商品一覧ページを読者に見てほしいはずです。

しかし、読者が検索結果に表示されたコラム記事などを観覧している場合、見てほしいページにはたどり着かずに離脱してしまうケースも少なくありません。

そのようなときに、Webページに優劣をつけて商品一覧ページが目に入りやすい構造にすれば、読者を誘導できる可能性が高くなります。

商品一覧ページは、格下の階層に設置するのではなく、トップページの次の階層に設置するとよいでしょう。

商品を販売するECサイトだけに限らず、企業のWebサイトであれば、求人募集のWebページを目立つ場所に設置するなどの工夫が大切です。

ユーザー目線で考える

Webページの優劣をつけることで、Webサイトの運営者が観覧してほしいWebページに誘導することができますが、それを第一にサイトマップ（構成図）を作ってしまうと、ユーザーの離脱率が高くなりやすいです。

『このページを見たあとは、どのような情報を知りたいのだろうか？』といったユーザーの思考になって考えるとよいでしょう。

たとえば、ハンバーガーショップのWebサイトでハンバーガーを選択したあとに、ドリンクやサイドメニューが選べると便利なはずです。

企業の公式サイトであれば、運営者側としては「企業理念」や「実績」などを観覧してもらいたいはずです。

しかし、ユーザーは求人募集の内容を知りたかったり、社員の1日の流れの情報が気になったりしているかもしれません。

Googleアナリティクスなどのアクセス解析ツールを使用すれば、ユーザーのニーズに応えられるWebサイトに仕上がるでしょう。

ツールを使ってサイトマップ（構成図）を作成する方法

ツールを使用すると、簡単にサイトマップ（構成図）を作成できます。

ここでは、サイトマップ（構成図）を作成するさいに使えるツールを紹介します。

• エクセル
• パワーポイント
• Cacoo
• Adobe XD
• Xmind

各ツールの特徴やおすすめのポイント、どのようなWebサイトに適しているかを解説するので見ていきましょう。

エクセルで作成する

エクセル（Excel）は、セルをうまく活用すると図形なしでも構成図が完成します。

カテゴリーを追加したり削除したりしやすい点が最大の魅力です。

また、構成図に加えてWebページのURLやコンテンツの概要、ページタイトル、メタディスクリプションなどの情報もまとめて管理できます。

パワーポイントなどのツールでは、Webサイトの規模が大きくなると扱いづらくなりますが、エクセルならば100ページほどであれば問題なく管理できる点もうれしいポイントです。

エクセルは、操作に慣れている方が多いメリットもあります。

パワーポイントで作成する

パワーポイント（Power Point）は図形を用いるため、視覚的にWebサイト全体の構造を把握しやすくなります。

プレゼンテーションのさいに使用されるツールですので、使い勝手のよさも魅力の一つです。

エクセルと同様で、パワーポイントは制作会社にWebサイトの制作依頼をするさいに共同での編集や情報の共有をしやすくなります。

ただし、図形を用いるため大規模なWebサイトをひとまとめにするのは至難のワザです。

50ページ以内の中規模なWebサイトにパワーポイントを使用するとよいでしょう。

Cacooで作成する

Cacooは、サイトマップ（構造図）にピッタリなテンプレートを使用できるツールです。

SlackやGoogleドライブなど、Cacoo はほかのツールと連携を取れる機能が搭載されています。

Cacooにしかない魅力は、下記のとおりです。

• リアルタイムで共同作業ができる
• メンバーの編集履歴を残せる
• リアルタイムで会話ができる

なお、Cacooは無料版と有料版が用意されており、無料版では6シートまでしか作成できないので、大規模なWebサイトを運営している方は有料版を使用するとよいでしょう。

Adobe XD

Adobe XDは、ホームページ関係者と連携を取りながら作業を進められるツールです。

Adobe XD はWebデザイン専用のツールですので、視覚的にクオリティの高いサイトマップ（構成図）を作成できます。

同じサイズの形を複数作るサイトマップ（構成図）向きの機能が整っているので、ストレスなく作業ができると好評です。

• パスワードによる保護
• ビデオを録画
• ドキュメントの履歴管理
• デザイントークン
• コメントとメンション

Adobe XD は機能性に優れているので、サイトマップ（構成図）以外の作業にも活躍します。

Xmind

Xmindは、自動でバランスを微調整してくれるので、初心者でも作成しやすい点が最大の魅力です。

『パワーポイントではうまくサイトマップ（構成図）を作成できなかった』という方は、Xmindを使用するとよいかもしれません。

構成図用のテンプレートが複数そろっているので、あとは文字を入力するだけで完成します。

ハイクオリティのツールを完全無料で使用できることもXmindの魅力の一つです。

まとめ

サイトマップ（構成図）を詳しくまとめました。

サイトマップ（構成図）は、Webサイトの完成度に大きく関わってくる重要なものです。

一度作成しておけば自社サイトを複数のスタッフで管理するときにも連携が取れます。

最後に、サイトマップ（構成図）のおさらいをしましょう。

• ユーザー目線に立ってサイトマップ（構成図）を作ること
• 階層は浅くして検索ユーザーにとって利便性の高いWebサイトにする
• サイトマップ（構成図）を作るツールはエクセル・パワーポイントがおすすめ
• ハイクオリティなサイトマップ（構成図）を作るにはAdobe XD・Xmindなどのツールを使用する

リアルタイムで共同作業ができたり、デザイン性が高く、視覚的にWebサイトの構造を理解しやすかったりといった優れたツールもあるので使用してみましょう。