サイトマップというものをご存知でしょうか？
Web開発に携わる方以外では、なかなか耳にしない言葉かもしれません。

メインコンテンツではないため普段Webサイトを利用しているときには見過ごされがちですが、実はあるだけでWebサイトのクオリティに大きな影響を与える、縁の下の力持ちを担うページだったりするのです。
今回はそのサイトマップについて、詳しくご紹介していきたいと思います。

ECサイトのサイトマップはWebサイトの案内図

サイトマップとは、いわばWebサイトの案内図です。
例えばショッピングモールでは、「〇〇階のこの場所には〇〇という名前のお店があって、〇〇階のここにはフードコードがあります」というのをお客さんに知らせるために、入り口に必ず建物内の地図が貼ってあります。サイトマップはそのWebサイト版。その名の通り、「このURLにはこの内容のページがありますよー」というWebサイトの構成や階層をリストアップしてひとつにまとめあげた地図のようなものです。

そんなサイトマップには、役割や形式が全く異なる3種類が存在しています。
ひとつずつ順番に見ていきましょう。

HTMLサイトマップ

サイトマップと聞いて、一番最初に思い浮かべるであろうものがこのHTMLサイトマップです。
HTMLサイトマップは、ホームページを訪れたユーザーに見てもらうことを目的として作られるサイトマップです。サイト内のすべてのページのURLをまとめたページを作成し、それ自体を一つのコンテンツとしてサイト内に設置します。
これがあれば、サイト構造が少し複雑で見つけにくいコンテンツであっても、どのコンテンツがどこにあるかが一目瞭然です。もしユーザーがサイト内で迷子になってしまっても、サイトマップがあったおかげで目的のページに辿り着けるかもしれません。

（画像：ファンケルオンライン）

このようにHTMLサイトマップを作る目的は、主にWebサイトから得られるユーザー体験、ユーザビリティの向上にあります。

XMLサイトマップ

サイトマップが情報を伝える相手は、ユーザーだけではありません。先程のHTMLサイトマップとは異なり、XMLサイトマップはGoogleの検索エンジンへと向けて用意されるサイトマップです。
XML形式という特殊な形で書かれたファイルをサーバー上にあげることで、クローラーにサイトの構造を正確に理解してもらうことができます。

クローラーとは？

XMLサイトマップの役割を知るためには、まずGoogle検索の仕組みを知る必要があります。
クローラーというのは、インターネット上を巡回しているいわばロボットのようなものです。定期的にネット上を巡回して、世界中のありとあらゆるWebサイトの情報を集めています。
クローラーが集めたサイト情報はデータベースに格納されていき、Google検索の検索順位を決めるための判断材料として使用されます。

（画像：Google検索 – 結果画面）

しかし、クローラーがすべてのサイト・すべてのURLを常に把握できているわけではありません。サイトの規模がとても大きかったり、奥深いところにページがあったり、新しいサイトだったりすると、クローラーの巡回漏れが発生してしまうことがあります。XMLサイトマップは、このクローラーのマッピングを手助けするためのものです。クローラーに対してサイトの正確な構成を提示してあげることで、

• クローラーが認識しづらいページを正しく認識させる

• 新しく増設したページをより早く認識させる

といった効果をもたらします。クローラーからみたサイトの認識のしやすさをクローラビリティといいます。クローラビリティが高ければ高いほど、検索時により高い順位で表示してもらうことができます。

ハイレベルサイトマップ

HTMLサイトマップとXMLサイトマップはどちらも公開したサイトのために用意するものでしたが、ハイレベルサイトマップはプロジェクトメンバー内でサイト全体の外観を共有するためにサイト開発の初期に作られるものです。パワーポイントやスプレッドシートなどで、サイトの完成系のURL構造・階層構造を図示して作成されます。
自社内で開発するにしろ、Web制作会社に委託するにしろ、プロジェクトメンバーに可視化した情報を共有できるために、開発全体を円滑に進めることができます。特にECサイトのような大規模サイトを制作しようとしている場合には、必ずと言っていいほど用意すべきでしょう。

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

そんなサイトマップですが、ECサイトに導入することで具体的にどのような恩恵を得られるのでしょうか？
3つのサイトマップそれぞれが、それぞれに違う形で異なった利益をもたらしてくれます。

CV率アップに貢献

CV（コンバージョン）とはWebマーケティングでよく使用される用語の一つで、サイトを運営する主な目的や、サイトを運営することで得られる最終的な成果のことを指します。ECサイトの場合、シンプルにサイトでの商品の総売り上げ高と考えることもできます。
通常のWebサイトと比べて、ECサイトはCV率を大きく意識する必要があります。どのようなページを作ればユーザーの商品購入まで繋げられるか、ユーザビリティを向上するためにページ同士の導線をどのように配置するかといったように、売り上げを高めるための施策を立案段階からいろいろと用意しなければなりません。

そこでハイレベルサイトマップの出番です。ハイレベルサイトマップがあれば立案段階のアイディアを一つの図として統合し、可視化することができます。視覚的につながりが見えやすいのでどこに改善の余地があるかもわかりやすく、サイト構築を円滑に進めるためには必需品です。

ユーザーがサイトの全体像を把握しやすくなる

HTMLサイトマップがあれば、サイト全体の構造をユーザーに伝えることができます。こちらでも述べましたが、もしユーザーが目的のページを見つけることができなくてもサイトマップがあれば探し当てることができるかもしれません。
ECサイトの使いやすさ（ユーザビリティの良さ）はそのまま売り上げに繋がることが多いため、ユーザーのサイトからの離脱率を下げることができます。HTMLマップの作成にはあまり手間がかからないので、用意しておくに越したことはないでしょう。

SEO対策に有益

XMLサイトマップがあれば、ない場合と比べて検索エンジンからの評価を上げやすくなり、結果としてSEO向上に繋げやすくなります。XMLサイトマップを作る意義が大きいサイトは、次のような特徴のサイトであるとGoogle公式から示されています。

• サイトのサイズが大きい。

  一般的にサイズが大きなサイトでは、すべてのページがサイト上の他のページ（少なくとも 1 ページ以上）からリンクされていることを確認するのは難しくなります。その結果、Googlebot が新規のページの一部を検出できない可能性が高くなります。

• サイトが新しく、外部からのリンクが少ない。

  Googlebot などのウェブ クローラーは、ページからページヘリンクをたどることによってウェブをクロールします。その結果、Googlebot が他のサイトからリンクされていないページを検出できない可能性があります。

• サイトに動画や画像などのリッチメディア コンテンツが多数含まれている、またはサイトが Google ニュースに表示されている。

  Google 検索でサイトマップの追加情報が考慮されます。

引用元：サイトマップについて | Google 検索セントラル | ドキュメント | Google for Developers

逆に言えば、規模の小さいECサイトであればサイトマップを作る必要がないと考えるかもしれません。しかし、ECサイトではSEO対策が肝要です。特に新規のECサイトを立ち上げる場合であれば、いち早くクローリングを受けるために作っておいて損はないでしょう。

注意しなければいけないのは、XMLサイトマップの役割はあくまでクローリングを受けやすくするという点にあることです。せっかくクローリングを適切に受けたとしても、元々のSEO対策がしっかり為されていなければ、あまり意味のないものになってしまいます。

Web解析の効果を上げやすくなる

XMLサイトマップの設置によってクローラビリティが向上することで、SEO対策だけではなくデータアナライズの面でも恩恵を受けることができます。近年ではWebマーケティングが浸透してきたことで、誰でも簡単にサイトの運用状況を分析できるようになりました。　中でもGoogleが提供している「Google Search Console」はサイトの状況を細かく確認できるサービスであり、検索結果への掲載順位・表示回数、検索されたキーワード、サイトへのユーザーの流入数、サイト内で発生しているエラーの確認など、多種多様なデータを閲覧することができます。

XMLサイトマップを作成して正確なサイト構成をサーチコンソールに渡していれば、分析結果もより正確なものになります。ECサイトを公開した直後や新しいページを追加したとき、そのページがサーチコンソールに認識されていなければ正しいデータが取得されません。星の数ほどあるWebサイトの中からユーザーに見つけてもらうために、サイトの分析を行うのは今や当たり前のことになっています。より効果的なマーケティングを行うためにも、データの取り扱いに注力してみましょう。

ECサイトのハイレベルサイトマップの作成方法

サイトマップを作るメリットについて一通り確認したところで、サイトマップの具体的な作り方について見ていきましょう。ECサイト制作の時系列順に沿って、まずはハイレベルサイトマップからです。

コンテンツを洗い出す

TOPページや商品ページ、商品一覧ページ、会員用のマイページ、決済画面など、まずは作ろうとしているECサイトにどんなページ・どんな機能が必要になるかを洗い出していきます。
ECサイトの構造は通常のWebサイトよりも少し複雑ですが、以前に別の記事で必要なページについて紹介しています。気になる方は以下のリンクから是非ご覧ください。
ECサイトに必要な機能7選と運営効率化におすすめの機能

コンテンツをカテゴリレベルに分類して構造化する

一通り洗い出しが完了したら、コンテンツを大まかな括りで分類していきます。

▼例
　　

CVページを明確化する

勿論コンテンツの豊富さは大事ですが、全てのページの扱いが同等になるわけではありません。
実装予定のコンテンツの中で最終的にユーザーにどうして欲しいのか、ユーザーをどのページに引き込みたいのかを明確にする必要があります。

マクロコンバージョンとマイクロコンバージョン

マクロコンバージョンはビジネス目標に直接繋がることになるユーザーの行動を、マイクロコンバージョンはその過程で発生し得るユーザーの行動を指します。つまり、メインの目標がマクロコンバージョン、サブの目標がマイクロコンバージョンとなります。
すべてのECサイトにおける最終的な目標は「商品の購入」です。また会員登録・メルマガの購読といった機能を持たせるサイトでは、これらも利益を得るための目標の一つとなります。
これらから、以下のように設定できます。

CVページまでの導線を検討する

さて、マクロコンバージョンとマイクロコンバージョンが明確になったならば、次はそこに至るまでの導線を考える必要があります。
たとえば、マクロコンバージョンの「商品購入」について考えてみましょう。ユーザーが最初にホームページに訪れて、商品の購入が完了する「決済完了ページ」に辿り着くまでには、次のようなページの遷移があると想定できます。

「TOPページ」⇒「商品一覧」⇒「商品詳細ページ」⇒「カート」⇒「決済情報ページ」⇒「決済完了ページ」

サイトによっては、「TOPページ」と「商品一覧ページ」の間に「商品カテゴリーページ」があったり、「カート」と「決済情報ページ」の間に「会員特典ページ」があったりする場合も考えられますが、基本的には上の流れに則っていると思われます。

このように、それぞれのマイクロコンバージョンやその他ページについてもページの移り変わりを考えていきます。それらをすべて統合したものが「ハイレベルサイトマップ」です。

例）

ECサイトのHTMLサイトマップの作成方法

HTMLサイトマップは会社情報やプライバシーポリシーといった通常のWebページと同様、サイト上に設置してユーザーに見てもらうことを目的としています。サイト内に、サイトマップという一つのコンテンツを追加するイメージです。
既にハイレベルサイトマップを作成済みであれば、そこまで作成の手間はかかりません。

サイトマップの目的や顧客層を明確化する

HTMLマップの目的ははじめに述べたように、ユーザーにWebサイトの案内図を提供することです。
どのページにユーザーを誘導したいのか、を意識して記載順やレイアウトを考えましょう。

必要なページを洗い出す

ハイレベルサイトマップを作成済みであれば、それに沿ってサイト上のページ構成を確認します。
HTMLサイトマップは一通りサイトの構築が完了したのちに作成します。制作の過程で仕様が変更されていたり、ページ構成が修正されていることもあるので、ハイレベルサイトマップと実際に作成したサイトと照らし合わせながら確認していきます。

HTMLサイトマップにはすべてのページURLを記載する必要はありません。各商品の個別ページや新着情報の一つ一つなどは省き、一覧ページや固定ページだけをピックアップしていきましょう。

ページをカテゴリ別に分け、サイトツリーを作成する

実際のサイト上での導線に完全に沿う必要はなく、あくまでユーザーがわかりやすいようにまとめれば問題ありません。そのため、こちらの例のようにある程度カテゴリ別に分けて書き出していきましょう。
ある程度グループ分けが完了したら、改めてこちらのようなサイトマップやサイトツりーを作成します。

ECサイトのXMLサイトマップの作成方法

最後にXMLサイトマップの作り方についてのご紹介です。
これまでの２つとは異なり直感的に理解しづらいですが、実はそこまで難しくありません。

自動作成ツールを使った作成方法

XMLサイトマップを最も簡単に作成する方法は、「sitemap.xml Editor」というサイトで公開されている無料の自動生成ツールを使用することです。このサイトでは会員登録やアプリケーションのインストールは不要で、Web上でサイトマップを作成することが可能です。

いくつか簡単な設定をするだけで、誰でも簡単にXMLサイトマップを用意できます。

CMSの機能を利用した作成方法

ECサイトの作成方法の1つとして、「オープンソース型」と呼ばれるものがあります。
ECサイトの作成費用の相場を比較！ 構築方法別・予算別に紹介！
オープンソース型のECサイトは、WordPressやEC-CUBEといったCMS（コンテンツ・マネジメント・システム）を利用してサイトを構築していきます。これらのCMSには、誰でも簡単にXMLサイトマップを作成するためのプラグインが提供されています。

WordPress

WordPressには、「XML Sitemap Generator for Google」というプラグインが用意されています。
プラグイン導入時にはいくつか設定をする必要がありますが、一度設定を完了すれば自動的にXMLサイトマップを書き出してくれます。そうして作成したXMLサイトマップをGoogle Search Consoleに登録すれば、クローラーに正確なサイトの情報を受け渡すことだ出来るので、より適切なクローリングを受けることができます。

EC-CUBE

EC-CUBEでは、「Sitemap XML Generator」というプラグインでXMLサイトマップを作成することができます。WordPressの「XML Sitemap Generator for Google」よりも視覚的に分かりやすく、簡単にXMLサイトマップを出力できるのが特徴です。

まとめ

最後までご覧いただきありがとうございました。
サイトマップの必要性と作り方について一通り理解していただけたでしょうか？実際のECサイト作成にお役立てていただけていれば幸いです。

BRISKのブログでは、他にもECサイトにまつわるいろいろな情報を発信しています。
ECサイトの制作に興味をお持ちの方は、是非他のブログもチェックしてみてください。
売れるECサイトの商品画像とは？写真撮影と作成のコツ
【完全解説】ECサイトをリニューアルする時に抑えておきたいポイント

ECサイトの制作でお悩みの方は是非こちらからお気軽にご相談ください！
ECサイト制作ならBRISKにお任せ！