サイトマップについて|ファイル形式の種類や作成手順もあわせて紹介

サイトマップについて|ファイル形式の種類や作成手順もあわせて紹介

記事をお気に入り登録する

記事のお気に入りに登録

「記事のお気に入りに登録」のご利用にはログインが必要です。

会員登録がお済みでない方

無料会員登録

「サイトマップとはそもそも何だろう?」 「サイトマップにはどのような種類があるの?」 「サイトマップはどのような手順で作成していくの?」 Web制作に携わるなかでよく耳にする「サイトマップ」ですが、うまく活用する方法はご存じでしょうか。サイトマップとは一体どのようなものなのか、改めて確認しつつぜひ活用を検討してみると良いでしょう。

この記事では、サイトマップについての概要や必要性、サイトマップの形式の種類、サイトマップの基本的な作成手順などを中心に解説していきます。また、サイトマップ作成におすすめのツールも紹介します。

記事を読むことで、サイトマップがどのようなものか理解できるだけでなく、どのように活用するのか、どういった効果があるのかも把握することができるでしょう。

紹介するツールを使って、Web制作に重要とされるサイトマップを十分に活用して、素敵なWebサイトを構築していきましょう。

そもそもサイトマップとは?

「サイトマップ」とは、特定ドメイン内におけるサイトのページ構成が把握しやすい、地図のような一覧のことを指します。

この地図のような一覧によって、に、サイトの全体像を分かりやすく伝える役割があります。

構造が複雑で規模が大きめのWebサイト、コンテンツ量の多いWebサイトなどでは、サイトマップを作成・設置していることが多く、検索エンジンに対してページ構造の把握を促したり、ユーザーによるサイト内回遊の利便性を高めたりする効果があるでしょう。

サイトマップの必要性とは?

サイトマップは、Webサイト制作時に全体を俯瞰で確認できる資料としても用いられることが多く、ページの構成をツリー状に構造化させて、視覚的に分かりやすく作成されることもあります。

ここでは、Web制作側におけるサイトマップの必要性について解説します。

全体像をチームと共通で認識できる

多人数でプロジェクトを進めていく場合、サイトマップをあらかじめ作成しておくことで、サイトの全体像をチームと共通して認識しやすくできます。

トップページを頂点に置き、そのほかの各ページが下の階層でどのように繋がっているのかが視覚的かつ直感的に把握しやすいため、チーム内での認識を統一するための資料として現場で大いに役立つでしょう。

全体の構成を把握できる

「木を見て森を見ず」ということわざのとおり、Webサイトを制作する際、細かい各ページにフォーカスしすぎてしまい、Webサイトの全体像を見失うことが多々あるでしょう。

しかし、サイトマップをあらかじめ作成しておくことで、ページとページの導線が目に見て分かりやすくなるため、サイト全体の構成が把握でき、どのようにページを積み重ねていくか、どこに力を入れるべきかのメリハリがつけやすくなります。

サイトマップのファイル形式の種類

ファイルとして作成されるサイトマップには、「XMLのサイトマップ」と「HTMLのサイトマップ」の2種類があります。どちらも目的や意図が異なるため、明確に区別して理解しておく必要があるでしょう。

ここでは、サイトマップのファイル形式の種類についてそれぞれ解説していきますので、参考にしてください。

XMLのサイトマップ

「XMLサイトマップ」は、クローラビリティ向上を目的として用いられるファイルで、検索エンジンに対して作成されます。

サイトの規模が大きい場合やサイト自体が新しく外部リンクが比較的少ない場合には、XMLサイトマップの設置を検討すると良いでしょう。

また、内部リンクが充実しておらず、適切にリンク処理されていないページが大量にある場合にもXMLサイトマップが十分に役立つといわれています。

XMLでサイトマップを作る役割

XMLサイトマップは、Webサイトの各ページの存在を検索エンジン側に知らせる役割を持っています。

XMLサイトマップがあることで、検索エンジンが通常行っているクロール処理で検出できなかったページを適切に伝えることができたり、新しく作成したページをいち早くクローラーに把握してもらえたりもします。

ちなみに、検索エンジンに対してのファイルであるため、ユーザーが目にすることはないでしょう。

HTMLのサイトマップ

「HTMLサイトマップ」は、ユーザビリティ向上を目的として用いられるファイルで、Webページを閲覧するユーザーに対して作成されるものです。

規模が大きく複雑な構造を持つWebサイト場合では特に、ユーザーがサイト内で迷子になりやすいため、HTMLサイトマップの設置が望ましいとされています。

HTMLでサイトマップを作る役割

「HTMLサイトマップ」は、ユーザーが目的とするコンテンツを簡単に見つけられるように、各コンテンツを一覧で整理する役割を持っています。

一般的には、カテゴリーごとのリスト一覧で作成・設置することが多いでしょう。HTMLサイトマップは、ユーザーでも目にすることができるため、いくつかの企業のWebサイトを参考にしてみるのも良いでしょう。

サイトマップの基本的な作成手順

サイトマップは、はじめにどのような流れで作成していくものなのでしょうか。3つの工程に分けて考えていくと作成がスムーズに行えるでしょう。

ここでは、サイトマップの基本的な作成手順について解説していきます。

必要なページを考える

まずは、必要なページを考えるところからはじめていきましょう。

たとえば、コーポレートサイトと呼ばれる企業のWebサイトであれば、「トップページ」「会社概要」「経営理念」「沿革」「社長挨拶」「商品やサービス紹介」「お問い合わせ」などのページが必要になります。

上記の項目はあくまで一部であり、そのほかの項目については競合する企業のWebサイトや同程度の規模のWebサイトを参考にして、必要なページを考えていくと良いでしょう。

書き出したページを分ける

次は、書き出したページを分ける作業を行っていきます。「トップページ」を先頭に置き、それ以外の項目をカテゴリーごとに分けていきましょう。

先ほどの例でいえば、「会社概要」のカテゴリーのなかに「経営理念」「沿革」「社長挨拶」をグルーピングすることができます。

このように、書き出したページに対して階層を意識して分けていくのがポイントです。

整理した後に全体像を見直して完成させる

書き出したページを分ける作業が終わったら、ページ間の関連性が把握しやすいようにツリー状に整理し、全体像を見直して完成させます。

もし、1つのカテゴリーの中身が多くなりすぎるようであれば、同じページにまとめるか項目を減らすといった作業もこのときに行うと良いでしょう。

また、ページの名称が適切かどうかもあわせて見直してみてください。

サイトマップをXMLで作成する手順

サイトマップには、XMLファイルとHTMLの2種類ありますが、まずはXMLサイトマップがどのように作成されるのかを確認していきましょう。

ここでは、WordPressで作成する場合とsitemap.xml Editorで作成する場合にフォーカスして作成手順を紹介していきます。

WordPressで作成する場合

WordPressでWebサイトを制作している場合には、初心者の方はプラグインをぜひ活用してみてみましょう。使用するプラグインは「Google XML Sitemaps」です。これを使えば、面倒なXMLファイルを自動で作成してくれ、手間やミスを軽減できるでしょう。

「Google XML Sitemaps」の使用手順は以下の通りです。

・「Google XML Sitemaps」をインストールして有効化 ・「設定」から「XML Sitemap」をクリック ・項目に沿って各種設定 ・更新をクリック

なお、事前にGoogle Search Consoleのアカウント作成をするのを忘れないようにしてください。

sitemap.xml Editorで作成する場合

「sitemap.xml Editor」というXMLサイトマップ自動生成ツールでもファイル作成が可能です。対象URLを入力して自動でページを取得できるため、このツールも作成に手間がかかりにくいでしょう。

以下が「sitemap.xml Editor」の使用手順です。

・sitemap.xml Editorを開く ・XMLサイトマップを作成したい対象URLを入力 ・対象URL入力フォームの下にあるオプション設定を確認 ・「サイトマップ作成」をクリック

作成されたXMLファイルについては、rootディレクトリにアップロードするのを忘れないようにしましょう。

サイトマップをXMLで作成した後の注意点

サイトマップXMLは作成しただけでは不十分なため、検索エンジンにファイルの存在を示す必要があります。

ここでは、サイトマップをXMLで作成した後の注意点として、どのように検索エンジンにファイルの存在を伝えるのか、2つの方法を確認していきます。

robots.txtを利用する

まずは、「robots.txt」を利用する方法です。「robots.txt」に作成したXMLサイトマップのURLを「Sitemap:」以降に記述していきます。

「robots.txt」は検索エンジンのクローラーを制御するファイルであり、サイトマップ以外にもクローラーに指示を出す専用の記述方法があります。あわせて基本的な記述方法も確認しておく必要があるでしょう。

Google Search Consoleを利用する

もう1つは、「Google Search Console」を利用する方法です。

・「Google Search Console」を開く ・「サイトマップ」をクリック ・作成したサイトマップのURLを入力 ・「送信」をクリック

サイトマップを送信後、ステータスが「正常に処理されました」と表示されるのを確認しましょう。

サイトマップをHTMLで作成する手順

次に、ユーザー向けのHTMLサイトマップを作成する手順を見ていきましょう。

ここでは、WordPressで作成する場合や手動で作成する場合にフォーカスして説明していきますので、ぜひ参考にしてみてください。

WordPressで作成する場合

WordPressで作成する場合には、先ほどのXMLサイトマップ同様に、WordPressのプラグインを使用していきます。使用するプラグインは、「PS Auto Sitemap」です。このプラグインでは、HTMLサイトマップを簡単に作成でき、また更新も自動で行ってくれます。

・「PS Auto Sitemap」をインストールして有効化 ・「固定ページ」から「新規追加」でサイトマップのページを作成 ・「設定」から「PS Auto Sitemap」をクリック ・「PS Auto Sitemap」の各種設定 ・下方のショートコード「」をコピー ・先にコピーしたショートコードを事前に作成したサイトマップページにペースト ・公開をクリック

これで記事を新規で追加しても自動更新してくれ、HTMLサイトマップの更新忘れを未然に防いでくれます。

手動で作成する場合

WordPressでWebサイトを運営していない場合には、手動でHTMLサイトマップを作成します。作成の際には、HTMLやCSSの知識が必要です。「ulタグ」や「liタグ」を使って、Webページがカテゴリーで階層状になるように箇条書きでリンクリストを表示させると良いでしょう。

作成したWebページが漏れないように抜けに注意して記述していくようにしてください。

サイトマップがSEO対策でもたらす効果

XMLサイトマップは、Webサイト上にどのようなコンテンツがあるのかを検索エンジン側に伝える目的で作成されるものです。これにより、内部リンクが少ないWebサイトでもサイト全体ヘのクロールを促進し、インデックス処理も促すことができます。

HTMLサイトマップは、Webサイト内にあるコンテンツをユーザーに提示するのが目的ですが、サイトマップのページ内には各Webページへの内部リンクが貼られていきます。

クローラーが内部リンクをたどりやすくなるため、検索エンジンがWebサイト全体を把握しやすくなるでしょう。

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

「ディレクトリマップ」とは、Webサイト内にあるすべての「ページURL」「タイトル」「記事内容」がまとまった一覧表を指します。一般的には、Webサイト制作側の管理や作業の情報共有を目的に作成されます。

そのため、ディレクトリマップはサイトマップとは異なり、Webサイト上にあがらず、ユーザーや顧客が目にすることはありません。

サイトマップは検索エンジンやユーザーに向けて作成されますが、ディレクトリマップはWebサイト制作や運営する際の利便性を高めるものとして作成されます。

サイトマップ作成におすすめなツール

続いて、サイトマップ作成におすすめのツールを紹介します。

サイトマップ作成にはいくつかのツールがありますが、ここでは7つのツールをピックアップして紹介していきます。環境に応じて、自身に合ったツールを使ってサイトマップを作成していきましょう。

Cacoo

「Cacoo」は、図を用いながら頭のなかをリアルタイムで共有できるオンライン作図ツールです。頭のなかに湧いてきたイメージやアイデアを形にしていきます。

月契約、年契約の有料プランが用意されていますが、無料トライアルもついているため、まずは使い勝手を試してみることもできます。

Google スライド

「Google スライド」には、色々なプレゼンテーション用テーマが用意されており、多数のフォントやアニメーション、埋め込み動画を使って、イメージを分かりやすく表現できます。

ビジネス用のアカウントでは、チームで利用可能な管理機能やセキュリティ機能が搭載されています。

Microsoft PowerPoint

プレゼンテーション資料作成に特化した「Microsoft PowerPoint」は、サイトマップ作成に十分な機能が備わっています。

作成中に自分がどこのスライドにいるのが把握しやすく、共同作業機能で仲間がくわえた変更点や修正点も把握できます。

Adobe XD

「Adobe XD」は、サイトマップ作成だけでなく、Webサイトのデザインでも活躍するツールです。直感的に使いやすく、多くのWeb制作の現場で使用されています。

サイトマップ作成後でもWebデザインを構築しやすいツールであるため、無償体験版を活用して使い心地をチェックしてみると良いしょう。

Google スプレッドシート

ビジネスシーンで多く活用されている「Google スプレッドシート」は、リアルタイムでの作成や編集、共同編集が簡単に行えるツールです。

場所を問わず仲間と共同作業が行えるのが強みであるため、綿密に相談しながら質の高いサイトマップ作成に貢献してくれるでしょう。

Microsoft Excel

「Microsoft Excel」はマス目にデータを入力していくため、ツリー状のサイトマップを配置しやすいツールです。

写真からデータ化する機能も使えるようになったため、使い方によっては効率的なサイトマップ作成が可能となるでしょう。

Lucidchart

無料でも使用できる作図・資料作成ツール「Lucidchart」は、複雑になりがちなサイトマップもスマートかつスピーディーに形にしていくことができます。データや情報を一瞬で可視化したいという方におすすめのツールです。

コメント機能やリアルタイム編集機能もついているため、共同で作業する場合にも適切な意思疎通ができるでしょう。

サイトマップの必要性や役割を理解して作成しよう

この記事では、サイトマップの概要や必要性、サイトマップのファイル形式の種類、サイトマップの基本的な作成手順などを中心に解説してきました。

サイトマップには大きく分けて2種類あり、「XMLサイトマップ」と「HTMLサイトマップ」があります。

XMLサイトマップは、検索エンジンに対して作成するもので、クロールの促進やインデックス登録の効率を促す役目があります。また、普段Webサイトを閲覧するユーザーが目にすることはありません。

一方、HTMLサイトマップはユーザーに対して作成するもので、ユーザーがWebサイト内のコンテンツを見つけやすくする役目があり、規模の大きいWebサイトでは特に設置が望ましいとされています。また、内部リンクを貼ることでSEOにも効果があります。

このように、サイトマップの必要性や役割を理解して作成することで、検索エンジンやユーザー目線での適切なWebサイトの構築が可能になります。この記事で紹介した内容を参考に、ぜひサイトマップの作成に取り組んでいきましょう。

この記事を友達におしえる!

LINEで送る ツイートする シェアする URLをコピーする

この記事を読んだ人はこんな記事も読んでいます