WEBCIRCLE MEDIA

サイト制作を進行しなければいけないけれど、サイトマップの作成につまずくケースもあるでしょう。

作り方が分からなくても簡単につくれる自動ツールなどもありますが、まずは自身が作成しなければいけないサイトマップの種類を認識しなければいけません。

サイトマップの作り方に加えて違いについても解説しますので、サイトマップ制作に苦戦している方は参考にご覧ください。

サイトマップの作り方を知る前に、サイトマップが表す言葉を知っておきましょう。

「既に知っている」と思うかもしれません。

しかし実はサイトマップと一口に言っても3種類の意味合いがあり、種類によって作り方や得られるメリットは異なります。

「HTMLサイトマップ」「XMLサイトマップ」「構造図サイトマップ」について、詳しく解説していきます。

サイトに訪問したユーザーに向けて作られたマップです。ジャンルごとにページ名が並んでおり、本でいう目次のような構成になります。

人の目で認識できる、サイト内に作られたページのひとつです。

人間が見るページとして設置されるのではなく、サイトが設置されているサーバーにXMLというデータとして保管されます。

構造図サイトマップは他の2種類と異なり、サイトの構成案を考えるときなど製作前から準備しておくのが一般的です。ページ名やジャンルが書かれた四角を線で繋いだ図式になります。

サイトマップを作る前に、種類ごとで異なる目的と役割を認識しておきましょう。

目次の画面から目的のページ名のクリックで、直接該当ページにアクセスできるリンクを設置するのが一般的です。サイトの利用者が迷わずアクセスできるように利便性を高める目的で設置します。

訪問ユーザーに対して「利便性を高めるのが目的」のHTMLサイトマップに対し、検索結果に影響する「検索エンジンへの登録を促す」のがXMLサイトマップです。

XMLサイトマップがなければ検索エンジンに登録されないわけではありません。しかし活用すれば登録までの時間が短縮されやすく、サイトの構造も伝わるのでSEO施策に有効的です。

製作するサイトの全体像を把握するのが大きな目的です。訪問ユーザーではなく製作担当者に向けて、ページ量やジャンル分類などを認識してもらうために活用します。

HTMLサイトマップはHTMLデータなどサイトを構成するデータで作られるため、ページ名やURLを整理して手動で作成できます。しかし時間がかかるだけでなく打ち間違いの可能性などもあるため、ツールなどを使って作るのがおすすめです。

＜手動による作り方＞

手動で作成する場合は、ジャンル名とページ名の文字をカラーや背景色で違いを分かりやすくし、ページ名に直接URLリンクを設置するのが一般的です。注意点として過去に製作したサイトマップは自動的に変更されないため、削除や移動したページの情報を反映させなければいけません。

リンク切れが多いと、「古いサイトかもしれない」や「手入れがされてないサイト」というイメージをもたれてしまいます。訪問ユーザー向けに利便性を重視して製作しているはずなのに、逆効果になるので注意しましょう。

リンクや分類に問題がないかチェックするメンテナンス作業を毎月など、定期的に実施するようにスケジュールを決めておくのがおすすめです。

＜ツールを利用する作り方＞

CMSと呼ばれるシステムを活用していると、HTMLサイトマップを自動的に生成するツールが利用できる場合があります。CMSシステムの代表的なWordPressでサイトを製作しているなら、プラグインの利用がおすすめです。

記事の上部に表示される、サイト内における記事の位置を示すいわゆる「パンくずリスト」もHTMLサイトマップのひとつです。WordPressテーマと呼ばれるサイト全体のレイアウトを決めるシステム自体に、パンくずリストを生成する機能が搭載されているケースも多くみられます。

HTMLサイトマップを作るにはサイト内のページデータやカテゴリの上下も必要となるため、CMSを利用していない場合に対応する生成ツールはほとんどありません。

WordPressのプラグインでおすすめツールのひとつとして、PS Auto Sitemapが挙げられます。

＜PS Auto Sitemapの使い方＞

プラグインの検索で「PS Auto Sitemap」を検索し、インストールして有効化します。設定画面よりPS Auto Sitemapを選択するとHTMLコードが表示されているので、HTMLサイトマップを掲載したいページに該当コードを入力するだけで完了です。

変更されていなければ、下記コードが掲載されていると思います。

<!– SITEMAP CONTENT REPLACE POINT –>

ビジュアルモードではなく、テキストモードで入力する点に注意しましょう。

掲載するページに制限はありませんが、通常はサイトマップ専用の固定ページを作成し、サイトマップのみ掲載するのが一般的です。

デザインや表示階層を変更したい場合には、コードを確認した設定画面のPS Auto Sitemapを確認すると、細かい設定ができます。

XMLサイトマップはXMLと呼ばれるデータで作成します。HTMLと同様にタグを理解していれば手動でも作成できますが、あまり現実的ではありません。更新頻度や更新日を入力し、ページの追加など更新がある度にXMLデータを更新しなければいけないためです。

できればページ更新と同時に自動的にXMLサイトマップが生成されるツールの活用しましょう。手動でやる場合には、更新頻度を決めておくのがおすすめです。

＜手動による作り方＞

XMLにて下記の情報が分かるタグを記載します。

• 以下を囲むタグ（<urlset></urlset>）
• URL（<url></url>）
• ページの更新日（<lastmod></lastmod>）
• ページの更新頻度（<changefreq></changefreq>）
• ページの優先度（<priority></priority>）

上記のファイル名は「sitemap.xml」とするのが一般的ですが、xmlファイルならファイル名は問いません。

＜ツールを利用する作り方＞

HTMLサイトマップと同様に、CMSのプラグインなどを活用して作成もできます。手動で作成する場合と同じ項目が含まれたファイルができていれば問題ありません。

HTMLサイトマップとは異なり、CMSを利用していなくても簡単に作れるサービスがあります。

手動とツールで作成しただけではGoogleなどの検索エンジンには伝わらないため、検索エンジンへ登録しなければいけません。

XMLサイトマップをGoogleに伝える方法は2つあります。

・検索エンジンのサイトマップを登録するサービスに登録する

・検索エンジンがクロールする情報を記載するファイル、「robots.txt」を活用する

どちらかの方法を実施し、しばらくすると検索エンジンがサイトマップのデータを読み込んで登録してくれます。

まず準備として作成したxmlのデータを、サイトデータが保管されているサーバーのドメイン直下に設置します。

＜Google Search Console＞

Googleの検索エンジンに通知できるサービスがGoogle Search Consoleです。

https://search.google.com/search-console/index?hl=ja

上記URLからGoogleアカウントにてログインすると、サイトのURLを登録する画面になるので登録して進みます。登録が完了したら左側のメニューにある「サイトマップ」の項目を選択すれば、URLを入力できます。

登録したサイトのURLがすでに入力されているため「sitemap.xml」など設定したファイル名を入力し、送信ボタンを押せば登録完了です。

もし「サイトマップを読み込めませんでした」というエラー文面がでた場合、ファイル名やデータ、設置場所に間違いがないか確認しましょう。特に手動で作成した際にはスペルミスなどが起きやすくなります。

Google以外の検索エンジンにも登録しない場合、BIngは下記URLから登録できます。

https://www.bing.com/webmasters/about

なおYahooはGoogleの検索エンジンを利用しているため登録は不要です。近年プライバシー情報提供を懸念する方の利用が増えているDuckDuckGoにおいては、現状xmlサイトマップを通知するツールはありません。

＜robots.txt＞

DuckDuckGoなどの通知ツールがない検索エンジンなどを含めて、自発的に通知できない検索エンジンに対しては「robots.txt」のファイルを活用します。

「robots.txt」とは検索エンジンがサイトの登録データを訪問する、クロールという作業をコントロールするファイルです。手動でも作成できますが、CMSに自動生成する機能があるケースが多いので、作り方が分からない場合はツールを利用しましょう。

「robots.txt」に「Sitemap:」と記載すればサイトマップを記述するタグとなるため、xmlサイトマップのURLを記載します。後は検索エンジンがクロールを訪れた際にはxmlファイルを参考にサイトマップデータを参照してくれるので、以上で作業は完了です。

XMLサイトマップが作成、通知できるツールをご紹介します。手動作成が難しい場合に活用してください。

＜sitemap.xml Editor＞

URLを入力するだけで自動的にxmlサイトマップを生成してくれるWebツールです。

CMSを利用していない方や、CMSのプラグインがセキュリティ上使えないケースなどに向いています。

使い方は簡単で、まず下記URLにアクセスします。

http://www.sitemapxml.jp/

上部にURLを入力し、いくつかのオプションを設定してサイトマップ作成ボタンを押してしばらくすると、ファイルがダウンロードできるようになります。

後は必要があればファイル名を変更し、ドメイン直下にアップロードして通知作業を行なうだけです。

＜サイトマップメーカー＞

Windowsにて利用できるソフトをインストールするタイプの有料xmlサイトマップメーカー作成ツールです。ローカル上でも作成できるため、セキュリティ上インターネットにつながっていないパソコン上で作業したい場合や、Webツールを自由に使えないケースなどに向いています。

ソフトをインストールして「サイトデータ取得」のボタンでURLまたはローカルファイルを指定してサイト情報を読み込ませ、リンク一覧の書き出しから「URLリスト」を選択するとデータが作成されます。

なお「リンクリスト」を選択すれば、htmlサイトマップに利用できるファイルが作成可能です。

＜XML Sitemapsプラグイン＞

XML SitemapsプラグインはWordPressのプラグインなので、WordPressでサイト更新しているケースにおすすめです。

WordPressのプラグインから「XML Sitemaps」を検索し、選択してインストールします。

インストールが完了すると、設定に「XML Sitemaps」が追加されているので選択します。基本的には初期状態のまま進んで問題ありません。

インストールされた状態で「通知を更新」の部分にそれぞれチェックが入っていれば、記事更新ごとにxmlサイトマップを自動的に作成した上で通知してくれるので、他に作業することはありません。

構造図サイトマップは、製作者向けの仕様書に近いイメージなので作成方法は自由です。紙に書くほうが捗る方は最初はアナログでも構いません。

ただし最終的に製作者へ伝える際には、見やすくかつ修正しやすいデジタルデータで整理させるのがおすすめです。

作り方としては、トップ画面から下層ページがそれぞれ細分化されるように四角などのブロックが連なっていくようにつくります。

横に広がるパターンではトップが一番左で下層へ下がるごとに右に増えていきます。上から下に広がるパターンでは、上がトップで下層に下がるたびに下へ増えるように作りましょう。

数が多くなりすぎないように同じジャンルのオエージはまとめて記載したり、ジャンルごとにカラーリングしたりといった工夫するのがポイントです。

例えば通販サイトなら商品紹介ページとして下記のページを全て作成するとします。

• カバンA
• カバンB
• カバンC
• ポーチA
• ポーチB

上記をすべて記載すると5ページ分作らなければいけませんが、グループごとにまとめると下記2ページ分で済みます。

• カバンA〜C（3P）
• ポーチA、B（2P）

5Pならあまりサイトマップ作成に影響はありませんが、規模が大きいサイトだとデータが数百Pを羅列することになりかねません。

サイトマップを作った担当者は理解できていますが、渡されたスタッフからすると迷いやすくなります。見やすさ、分かりやすさを重視して作成しましょう。

デジタルで作成するツールには、表計算ソフトやグラフィックソフトなど図式を作成できるツールが中心です。他にもアイディアをブロックでつなぐマインドマップツールも活用できます。

特にブロックとブロックをつなぐ際にわざわざ線を引く必要がありません。

またブロックをまとめる機能があれば、カテゴリごとのページを簡略化した状態と全て表示させる状態をすぐに切り替えられるので便利です。

構造図サイトマップの作成に役立つ図形描画ツールをご紹介します。

＜パワーポイント（Google スライド）＞

パワーポイントやGoogle スライドなどプレゼンテーションなどで活用するスライド作成ソフトを使った方法です。

本来動画や映像の切り替えなどに活用するため、構造図サイトマップの作成には最適ではないものの、ページ数が少ないサイトや仮状況として作成する際に利用するケースもあります。

四角などの図形と線を組み合わせて作るのは大変なので、Smart Artを選択して組織図を活用すると効率的です。

TOPから各下層ページをつないでいきましょう。

＜エクセル（Google スプレッドシート）＞

エクセルやGoogleスプレッドシートなどの表計算ソフトでも作成可能です。

作成方法もスライド作成ソフトと同様で組織図やツリー作成の機能を利用します。

Google スプレッドシートではルールを活用して親子関係を設定し、ツリーマップグラフを活用する方法もあります。

各ページ名をエクセルにて管理する必要がある際には、ツリーマップグラフを使う方法が便利です。

＜Adobe XD＞

インターフェースの設計、試作に役立つAdobe XDでも構造図サイトマップは作成できます。

長方形ツールにページ名を入力し、長方形同士を線ツールでつなぐだけです。

同じジャンル同士のページはグループ機能を活用すればまとめて表示を消したり移動したりといった作業も簡単になります。

Adobe XDを利用している社内スタッフやクライアントに対して共有でき、コメント機能を活用すれば訂正部分も簡単に伝えられて見落としにくい点も便利です。

＜Cacoo＞

クラウドにてフローチャートを作成できるCacooも構造図サイトマップが作成できます。

クラウドベースなので、複数人が同時に同じファイルを編集できるのが大きなメリットです。

＜Lucidchart＞

Cacooと同様にフローチャートを作成できるクラウドサービスです。

特徴的なのはブロック内にアイコンや画像を設定できるので、各ページの内容が認識しやすいように作成できる点です。

URLも記載できるので、参考にしてほしいサイトや記載や既存ページで類似にならないように作成してほしいページをメモとして記入できます。

＜Illustrator＞

図形描画ソフトのIllustratorでも、図形と線を利用すれば構造図サイトマップを作成可能です。

しかし本来フローチャートを作る機能はないため、スライド作成ソフトと同様に簡単なサイトや仮として作成するのに向いています。

ただしカラーリングやデザインは自由にできるので、クライアントへ提示する際にサイトの印象なども含めたデザイン作品として作成したい場合には最適なツールです。

最後に各種サイトマップを作成するメリットを再確認しましょう。

いずれもサイト制作の際には作っておくのが望ましいですが、状況や対応できる作業リソースに合わせて取捨選択してください。

作成したページを訪問ユーザーに認識してもらえます。

検索ではなかなか上位に上がらないけれど見てほしいページや、サイト内で目的ページにすぐ辿り着けるように配慮したい場合に作成するのがおすすめです。

また規模が大きいサイトでも全体像を認識してもらえるため、複数ブランドなど異なるジャンルを扱うサイトにも効果的です。

XMLサイトマップを活用すればサイトの更新状況を検索エンジンに早く伝えられるようになります。

SEO施策を手掛けているなど、検索エンジンからの流入を増やしたい場合には必ず作成しておくべきサイトマップです。

サイト制作のプロジェクトが円滑に進みやすくなります。

顧客目線ではなく、製作者のスタッフ目線で導入を検討すべきサイトマップです。

下準備がしっかりできているとサイトの完成度も高くなるだけではなく、将来的に更新や修正が必要になったときもスムーズに作業できます。

3種類のサイトマップの違いと作り方をご紹介しました。

いずれもサイト運営に伴い作成しておきたいものですが、うまく作成できないケースもあるでしょう。

特に手動の場合は時間がかかりながらもミスが発生しやすいため、自動的に製作できるツールを活用するのがおすすめです。

サイト製作のプロジェクトは、実際に作業を進めてみると壁に当たったりなかなか検索上に上がらなかったりといったケースは珍しくありません。

企業にとって利益を大きく左右するサイト製作が難しい状況と判断した際にはノウハウを豊富にもつプロへ依頼するのがおすすめです。

WebサークルではSEO施策からコンテンツ作成まで、サイト製作をサポートしています。お困りの方はお気軽にご相談ください。

https://media.webcircle.co.jp/contact/