Webサイト制作において欠かせない骨組みとなるのがサイトマップです。

ユーザー側としても、大規模なウェブサイトでは「サイトマップ」というページを見る機会も多いでしょう。

サイトマップは、サイトの構築段階でも、サイト完成後にも重要な役割を発揮します。

この記事では、特にwebサイトの制作段階で使われる資料としてのサイトマップについて紹介します。

まずはなぜサイトマップを作る必要があるのかを考えるため、メリットを見ていきましょう。

それから、サイトの骨組みとしてのサイトマップの実際の作り方について詳しく解説します。

ウェブサイト制作の肝心なポイントですので、しっかり押さえておきましょう。

サイトマップはサイトの構成図

サイトマップは、ウェブサイト全体のページの関係性の構成図です。

さまざまなページが存在するウェブサイトですが、それぞれがバラバラにつながっていたのでは使いづらくなります。

そこで、ホームページから上位カテゴリーのページ、さらに下位カテゴリーのページへと階層を作るのが一般的です。

この階層構造をリスト形式で分かりやすくまとめるのがサイトマップの役割です。

また、公開するウェブサイト内にsitemap.xmlやsitemap.htmlのようなファイルとして保存することもあります。

今回はxmlやhtmlファイルの作り方は紹介しません。

しかし、制作段階で作った構成図はそのままこうしたファイル作成にも活用できます。

 

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

サイトマップを作成することにはさまざまなメリットがあります。

ここで紹介するのは、その中でも基本的な2点です。

Webサイト全体がわかる

サイトマップがあれば、サイト構築に必要なページの全体のつながりを俯瞰的に見ることができます。

ユーザーとしては順序よくリンク先に飛んで行って目的のページに効率的にたどり着けるサイトが使いやすいはずです。

製作側としては、サイトの全体像がわかればいかにそのような効率的に使えるサイトが作れるかを考えやすくなります。

また、後のサイト制作の指針としても役立ちます。

ユーザーにとって使いやすいサイトを構成するのに使えるというのがサイトマップの第一のメリットです。

チームの共通認識に役立つ

サイトマップは、製作チームの認識のすり合わせにも役立ちます。

製作過程においても、それぞれのページがどのようにつながるのかをすぐ確認可能です。

サイトマップには各ページのURLを記載するのが一般的です。このため、メンバーが各ページをチェックする際の目次にもなります。

チーム全体がサイトの全体像を把握することで、サイトの一貫性を保てるのがメリットです。

 

サイトマップの作り方

それでは、さっそくサイトマップの作り方の基本を見ていきましょう。

必須ページの選出

サイトマップを作るにあたって、まずはどんなページが必要かを考えます。

例えば、ソフトウェア会社のサイトに必要なページは何か、と考えてみてください。

以下のように様々なページが思い浮かぶでしょう。

• 製品Aの特長紹介
• 製品Aの料金
• 製品Aの注文ページ
• 製品サポート
• お問い合わせ
• FAQ
• 会社情報
• 沿革
• ブログ
• 採用情報
• 製品Bの特長紹介
• 製品Bの料金
• 製品Bの注文ページ　…

まずはこのように必要なページをずらっとリストにして挙げていきます。

リスト化する際には、競合他社の「サイトマップ」ページを参考にしてもOKです。

わかりやすいページを見つけて、これから構築するサイトにも使えそうなページ項目をピックアップしていきます。

思いつく限りのページを挙げて、不要だと感じたものは除外し、本当に必要なものだけ残します。

カテゴリー分けする

必要なページ項目のリストができたら、それをカテゴリーに分けていきましょう。

上の例では、製品Aや製品Bに関するページは「製品情報」としてまとめられそうです。

また、「会社情報」や「沿革」のページは「会社概要」としてまとめられます。

こうして複数のページを大きな上位カテゴリーにまとめていくのです。

図に表す

大きなカテゴリに分けたところで、それぞれのページの関係を図に表していきます。

例えば、一番左に「トップページ」を記載したとしましょう。

そのすぐ右側にはトップページにリンクを貼る以下のような一番大きなカテゴリーを記載します。

• 製品情報
• 会社概要
• サポート
• ブログ
• お問い合わせ

さらに、それぞれのカテゴリーのすぐ右側には、そのページのボタンからから飛ぶさらに細かく分けたカテゴリーを記載しましょう。

例えば、「製品情報」のすぐ右側には以下のようなカテゴリーを並べます。

• 製品A
• 製品B

続いて、「製品A」のすぐ右隣に記載するカテゴリーは以下の通りです。

• 製品Aの特長
• 製品Aの価格
• 製品Aの注文

このようにそれぞれのカテゴリー（ページ）からどんどん細かいページを分岐させています。

これを続けていくと、最終的にはツリー状の図ができあがるはずです。

全体の確認

ツリー状の図が完成したら、その構成が適切になっているかチェックしましょう。

ユーザーの目線に立って、目的のページまでのルートが遠回りになっていないかを確かめます。

ページ同士を繋げた方が便利だと感じた場合は、ショートカットリンクも書き入れていきましょう。

もしページのつながり方がおかしいときは、修正していきましょう。

サイトマップ作成に役立つツール

ここからは、実際にサイトマップを作成するにあたって役立つツールを場合に分けて5つ紹介します。

PowerPoint

プレゼン資料作成ツールとして有名なPowerPointは、サイトマップ作成にも使用できます。

単純な図形を使ってシンプルなサイトマップを作りたいときに有用です。

左から右に向かって階層を描くだけでなく、上から下に描いていくこともできます。

Excel

左から右に描いていくのであれば、表計算ソフトのエクセルも有用です。

セルを使って、図を描かなくてもサイトマップが制作できます。

普段の業務でエクセルを使い慣れているなら、一番スマートに処理できる方法です。

Adobe XD

デザインソフトを使い慣れているなら、UX/UIデザインソフトのAdobe DXも使えます。

囲み枠や直線を使って、自由度の高いサイトマップをスムーズに作れます。

実際のページのURLを図の中に配置することもできるのが便利です。

Cacoo

図形デザインソフトのCacooを使っても便利にサイトマップを作成できます。

テンプレートが用意されているため、ツールを使い慣れていない人でも扱いやすいのが特徴です。

また、ツール内にチームとの共有機能があるので、共同作業や共同管理に向いています。

Lucidchart

フローチャートを中心とした作図に便利なツールがLucidchartです。

このツールにも、Cacooと同じくテンプレートが用意されています。

中には、ページのデザインをそのままツリー状のマップに載せられるテンプレートもあって便利です。

ツール内では、作成途中のサイトマップをチームメンバーと共有することも可能です。

また、SNSやクラウドストレージでプレゼンテーションモードとして完成品を共有することもできます。

 

DX化の事例はこちら

 

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

ウェブサイト制作の世界でサイトマップと似た機能を果たすのがディレクトリマップです。

こちらも、サイト内のページをすべて網羅したリストという点ではサイトマップと同じ役割を果たします。

しかし、サイトの構造を図で表すのか文字情報で表すのかという点で両者は大きく異なります。

サイトマップは、ツリー状の図を使って視覚的にページ同士のつながりを示すものです。

これに対して、ディレクションマップにはファイル名やディレクション名といった情報を記入します。

サイトマップは完成形のサイトでユーザーが見る機会があるぐらい、初心者でもわかりやすいものです。

対して、ディレクションマップはウェブ関連の知識がある人向けの専門的なものだといえます。

 

サイトマップを見やすくするコツ

視覚的にわかりやすくサイトの構成を描くのがサイトマップです。

そのため、ウェブサイト制作に強くない人でもわかるように、わかりやすくまとめる必要があります。

ここでは、視覚的に見やすいサイトマップを作るコツを少しだけ見ていきましょう。

カテゴリーの色分け

1つのカテゴリーの中にたくさんページがある場合は、カテゴリーごとの色分けがおすすめです。

これは製作段階の資料だけでなく、サイトに掲載するhtml形式の「サイトマップ」ページにも応用できます。

ただし、あまり色を使いすぎてごちゃごちゃしてしまうと逆にわかりにくくなる危険性大です。

必要最低限の落ち着いた配色で、すっきりとした印象に見せられるよう心がけましょう。

イラスト・図・写真を適度に入れる

ページ数が少ないならば、具体的なページの画像やイラストを入れるのも効果的です。

実際のページのデザインを俯瞰して全体的に把握できるので、イメージがつかみやすくなります。

「このページには検索バーを配置する」というような内容を簡潔に表すアイコンを使うのもおすすめです。

こうした工夫をしたいなら、デザイン系のツールを活用しましょう。

しかし、あまり入れすぎてしまうと逆にわかりづらくなるのでほどほどにしましょう。

目的で分ける

内容が複雑なwebサイトの場合は、ユーザーの使う目的別に分類するのもおすすめです。

これは、完成したサイト上のhtml形式の「サイトマップ」ページの作成に特に役立ちます。

豊富な製品を扱う企業のwebサイトの場合、1つの製品を1つのカテゴリだけに収めるのは困難です。

例えば美容系製品を扱う企業のサイトを考えてみましょう。

まずカテゴリ分けの際に、「美容器具」や「食品」というカテゴリに分けたとします。

しかし、ユーザーはこうした分類ではなく、「ダイエット」という目的で製品を探しに来た可能性があります。

そのため、最初に分類したカテゴリのほかに、ユーザーの目的を考えたカテゴリもまとめると親切です。

この分類にも、色分けやアイコンを活用しましょう。

 

DX化の事例はこちら

 

サイトマップはSEO対策になるのか

サイトマップの作り方次第で、SEOを強化することはできます。

SEOを重視してサイトマップを作るなら、各ページにキーワードを盛り込むことを意識しなければなりません。

ページのタイトルに、よく検索されるワードを意識的に取り入れていくのがよいでしょう。

また、公開するサイトにHTMLやXML形式の「サイトマップ」ファイルを設けることもSEO対策に効果ありです。

特にxml形式のサイトマップは、Googleのクローラーにサイト内容を把握させ、検索結果に表示されやすくする効果があります。

SEO対策をしたいならこうしたファイルも作ることを念頭に置きましょう。

こうしたファイルの作成にも、ここで紹介した資料としてのサイトマップ（構成図）は設計図として役立ちます。

サイトマップのアレンジ方法

階層構造をツリー状に示したサイトマップは、以下のようなアレンジを加えることでさらにわかりやすくなります。

• 同じデザインテンプレートを使うページは1つの項目にまとめる
• 階層通りの順序でユーザーがページを移動しない場合の導線も詳細に記載する

まず、たくさんの製品の紹介や販売を行うサイトの場合、類似するページを大量に製作することが必要です。

これを「製品A」や「製品B」といってすべて項目として書き出すしていてはキリがありません。

こうした場合は、同じテンプレートのページを1つの項目とするのがおすすめです。

また、同一テンプレートのページがいくつ必要なのかという数も記載すると親切です。

また、トップページのメニューから順々にクリックしてリンクをたどっていくだけがユーザーの通る唯一の道ではありません。

使いやすさの観点から、サイト内に検索バーやタグを用意する場合も多いはずです。

こうした検索やタグからページ一覧に飛んで、そこから各ページに移動するという導線も盛り込みましょう。

この導線を表すのにもアイコンを活用できます。

 

サイトマップを作るなら

ここまで記事を読んで、実際にサイトマップを作ろうと考えた方もいることでしょう。

基本的な考え方や作成の仕方は、ここで紹介した内容を参考にして進めていけばOKです。

しかし、製作を進める中で、新たな疑問も出てくることでしょう。

具体的なSEO対策やサイトマップページをサイトに公開するときの手順などここでは紹介しきれなかった内容もあります。

また、ここでは一般的な例しか挙げていませんが、サイトの種類によってサイトマップの構成はかなり異なります。

例えば、ショッピングサイトとコーポレートサイトではページ数の規模の差が歴然です。

サイトマップ作成に関して悩むことやもっと知りたいことがあれば、コンサルタントへの相談がおすすめです。

あなたのサイトに合わせた問題の解決や効果的な制作につながります。

デジマクラスでは専門家による相談を受け付けているので気軽にお問い合わせください。

 

DX化の事例はこちら

 

まとめ

ここまで読んだらおわかりの通り、サイトマップ作成はウェブサイト制作の重要なスタート段階です。

構成のしっかりしたサイトを作ることはサイトをユーザーに見てもらう際にも重要です。

逆にこの構成図がしっかりしていないと、ユーザーにとって分かりづらくなってしまいます。

つまり、サイトマップ作成に失敗すればせっかく良いコンテンツを作っても台無しになってしまう危険性があります。

こんな話を聞くと不安になってしまいそうですが、ご心配なく。

初めての作成には不安もあるかと思いますが、迷ったら抱え込まず、プロのアドバイザーも頼りにしてください。

たくさんのユーザーに見てもらえる効果的なサイトを作成するため、工夫していきましょう。