見積もり
ECサイトに必要なサイトマップの種類と作り方を初心者向けに解説【事例付き】【2024年最新版】
ECサイト制作にあたっては「サイトマップ」を作成することが重要です。サイトマップは、大きく3種類に分類でき、それぞれ目的と対象、作り方が異なります。
・ECサイトにおけるサイトマップの重要性を理解しておきたい
・ECサイトのサイトマップの参考例を見たい
・ECサイトのサイトマップの作り方を知りたい
本記事では、サイトマップの種類ごとの目的と作り方、参考例を紹介します。ECサイト制作を外注するときも、サイトマップについて理解してある程度作っておくと、要望に沿ったECサイトに仕上がりやすくなります。
※現在、ECサイトを作る制作会社を探している方は、Web幹事にご相談ください。予算や目的、ご要望に合わせ、最適な制作会社をご紹介します。サイトマップに関する相談がしたい方も歓迎です。相談料などは一切かかりません。
ECサイト構築に役立つ記事もご覧ください ECサイト構築を検討中の方はこちらもチェック！おすすめの会社まとめ
ECサイトのサイトマップとは？種類と目的
サイトマップとは、文字通り「Webサイトの地図」です。サイトマップでは、サイトを構成するページと、どのページがどのページの下に来るのかという階層を一覧化して示します。
サイトマップには、大きく次の3種類があります。
・【サイト制作者向け】設計図としての構成図サイトマップ
・【サイト訪問者向け】案内図としてのHTMLサイトマップ
・【検索エンジン向け】クローラーへの案内図としてのXMLサイトマップ
それぞれのサイトマップについて、対象や目的、様式などを解説します。
【サイト制作者向け】設計図として構成図のサイトマップ
▲【サイト制作者向け】設計図としての構造図サイトマップイメージ
家を建てるときに設計図が必要なように、ECサイトでは構造図のサイトマップが必要です。構造図のサイトマップは、サイト制作に関わる社内スタッフや制作会社のメンバーを対象としています。
作り方は後ほど詳しく説明しますので、構造図のサイトマップのイメージは上図を参考にしてください。構造図のサイトマップでは、サイトに必要なページと階層構造をすべて書き出します。これにより、制作しなければならないページが明確になり、漏れを防げます。
商品点数が多くページ数も多くなりやすいECサイトでは、ページ同士の位置関係を正確に把握するために、構造図のサイトマップがとても重要です。また、構造図のサイトマップがあることで、メンバー間での情報共有が簡単になり、サイト制作が効率化されます。
【訪問者向け】案内図としてのHTMLサイトマップ
画像引用：西武・そごうのe.デパート
実店舗に店内の案内図があるように、ECサイトに訪問者向けの案内図としてのサイトマップがあることで、訪問者が見たい情報があるページにたどり着きやすくなります。これにより、訪問者のページ離脱を防ぎ、商品の購入を後押しできます。
案内図としてのサイトマップは、サイトの他のコンテンツと同様に、Webページを作成する言語である「HTML」で作成するため、HTMLサイトマップと呼ばれます。
画像引用：西武・そごうのe.デパート
ECサイトでは、上画像の赤枠・赤字で示した箇所のように、ECサイトの上部（ヘッダー）やトップページの左または右の欄（左カラム・右カラム）などで、各ページへの案内を行います。ただ、スペース的に、ヘッダーや左カラム・右カラムでECサイトのすべてのページを案内することはできません。しかし、サイトマップがあれば、ECサイト全体のページを一覧化して案内できます。
【検索エンジン向け】クローラーへの案内図としてのXMLサイトマップ
Googleなどの検索エンジンでは、クローラー（ロボット）がインターネット上のWebページの情報を読み取り、検索に合致する結果を表示しています。そのため、検索結果に表示されるためには、クローラーに認識される必要があります。なお、検索エンジンにWebページが登録されることを、インデックスされるといいます。
クローラーに対して、Webサイトにどのような情報が掲載されたページがあり、ページの階層構造はどうなっているのかを説明するものが、XMLマップです。
XML形式という、機械にデータを伝えるための言語を使用しているため、XMLマップと呼ばれます。このサイトマップは、訪問者には見えません。
XMLサイトマップがあると、クローラーがWebサイトの情報を読み取る速度が上がり（クローラビリティ）、SEO対策になります。XMLファイルはすべてのECサイトに絶対に必要なものではありませんが、以下のようなサイトでは作成をおすすめします。
・サイトのページ数が500ページ以上ある
・内部リンクが少ない、サイト内のリンクが適切にできていない
・サイトを開設したばかりなどの理由で、外部からの被リンクが少ない
・画像や動画が多い
・サイトがGoogleニュースに表示されている
ECサイトのプラットフォームによっては、XMLサイトマップを自動生成できる機能があります。たとえば、Shopifyやカラーミーショップ、MakeShopなどは、XMLサイトマップを自動生成できます。また、XMLサイトマップを自動生成するツールもあります。
代表的なツールが『sitemap.xml Editor』です。XMLサイトマップはコードを書いて手動で作成することもできますが、知識が必要です。
構造図のサイトマップの作り方・例
構造図としてのサイトマップは、ECサイト制作で最初に必要なサイトマップです。ECサイトは商品ごとにページを作成するため、ページ数が多くなりやすく、ページの漏れや階層の混乱を防ぐために、構造図のサイトマップはとても重要です。
サイト制作を外注する場合も、構造図のサイトマップをある程度形にしておくと、作りたいサイトを伝えやすくなります。
構造図のサイトマップは、次の手順で作成します。
1.必要なページを書き出す
最初に、ECサイトにどのようなページが必要か書き出しましょう。この時点では、ページの階層を気にする必要はありません。ECサイトには、たとえば、以下のようなページがあります。
・トップページ
・運営企業情報
・特定商取引法に基づく記載
・プライバシーポリシー
・ご利用ガイド
・問い合わせ
・QA
・買い物カゴ
・マイページ
・商品一覧ページ
・商品カテゴリページ※商品カテゴリごとに作成
・商品ページ※商品ごとに作成
・特集ページ
・HTMLサイトマップ
上記は簡略化していますが、商品カテゴリページ・商品ページは商品カテゴリ・商品ごとにすべて書き出しましょう。
2.ページをカテゴリ別に分類
必要なページを書き出したら、ページの内容に応じてカテゴリ別に分類をします。先ほど書き出したページを例にすると、以下のようになります。ページを分類することで、ページの階層や、ヘッダーやカラムに案内を表示するときにどのページをどの位置に表示するかなどを考えやすくなります。
【ECサイトの必須記載事項】
・運営企業情報
・特定商取引法に基づく記載
・プライバシーポリシー
【サイト利用に関するページ】
・ご利用ガイド
・問い合わせ
・QA
【購入に関するページ】
・買い物カゴ
・マイページ
【商品に関するページ】
・商品一覧ページ
・商品カテゴリページ※商品カテゴリごとに作成
・商品ページ※商品ごとに作成
・特集ページ
【その他】
・トップページ
・HTMLサイトマップ
3.ページの階層を決め、サイトツリーを作成する
ページをカテゴリ別に分類したら、それを基に、どのページの下にどのページが来るのかという階層を決め、上図のようなサイトツリーを作成します。階層にはならなくても、同じ分類のページをまとめておくことで、サイトのヘッダーやカラムを作成するときにどのページが同じくくりなのか分かりやすくなります。カラムとは「列」のこと。1カラムは1列にコンテンツを縦に並べるレイアウトのことです。
ECサイトの場合、階層構造になるのは商品に関するページが中心で、その他のページは、トップページの下に並列する構造が一般的です。
また、商品点数が多い場合、商品ページや特集ページの部分を抽出して別に作成したほうが分かりやすい場合もあります。
参考：サイトマップ（構成図）をエクセルで簡単に作成する方法【テンプレート付き】 | Web幹事
HTMLサイトマップの作り方・例
HTMLサイトマップは、サイトを訪問するユーザーにとって分かりやすい案内であることが重要です。構造図のサイトマップをベースに、どのような見せ方をすれば、はじめてサイトを訪問するユーザーでも迷わず必要なページに行けるかを、考えましょう。
HTMLサイトマップは、次の手順で作成します。作成にあたっては、競合サイトのサイトマップもチェックしておくと、自社に欠けている点などを発見できます。
1.表示するページ・コンテンツを選別する
構造図のサイトマップを基に、どのページをHTMLサイトマップでユーザーに案内するか選別します。商品点数が数十点以上あるECサイトの場合、すべての商品ページをHTMLサイトマップで案内すると、逆に分かりにくくなります。そこで、カテゴリページのみを案内するなど、ページの選別が必要になります。
2.分かりやすいデザインを考える
HTMLサイトマップで案内するページを選別したら、それをどのようなデザインにするか考えます。基本は、以下のような階層構造の視覚化です。
画像引用：西武・そごうのe.デパート
デザインは、上画像や次に紹介する例のようにシンプルなものが多いですが、見やすくカテゴリ分けをすることが重要です。フォントや小見出しの色など、ECサイト全体に合わせましょう。
ECサイトのプラットフォームでは、サイトデザインのテンプレートが用意されているサービスも多く、テンプレートによってデザインできる範囲が決まる場合もあります。
参考：見やすくて使いやすいサイトマップページのデザイン例をご紹介 | Web幹事
参考になるECサイトのサイトマップ例
ECサイトの分かりやすいサイトマップの例を、以下に3サイト紹介します。
LOWYA
画像引用：サイトマップ | 【公式】LOWYA(ロウヤ) 家具･インテリアのオンライン通販
家具・インテリアのECサイト「LOWYA」のサイトマップ。中央にカテゴリ別の商品ページ案内、右カラムでサイト利用に関するページが案内されています。商品点数がかなり多く、サイトマップの情報量も多いのですが、分かりやすく整理されています。
パルシステム東京
画像引用：生活協同組合 パルシステム東京
食品宅配の生活協同組合 パルシステム東京のECサイトにおけるサイトマップ。左カラムの案内は、サイトの全ページ共通で表示されており、よく使うページにいつでも戻れるようになっています。サイトマップで使われているフォントやカラーなどが、サイトのテイストに合わせてあり、見やすさがあります。
DHC
画像引用：サイトマップ｜DHCオンラインショップ
化粧品・健康食品を中心に扱うDHCのECサイトのサイトマップ。ページのカテゴリ別分類が分かりやすいサイトマップです。一般的に、ユーザーの利用頻度が多そうなページが上のほうに案内されています。
XMLサイトマップの作り方
XMLサイトマップは、自動生成する方法と手動で作成する方法があります。手動で作成する場合はコードを書く必要があります。
ECプラットフォームのなかには、XMLサイトマップを自動生成する機能を備えているものがあります。また、XMLサイトマップを自動生成できるツールもあります。詳細は以下の記事を参考にしてください。
関連記事：XMLサイトマップ（sitemap.xml）作成&送信方法マニュアル【専門知識不要】 | Web幹事
ECサイトのプラットフォームの機能を使う
ECプラットフォームのなかで、Shopify、MakeShop、カラーミーショップなどは、XMLファイルを自動生成する機能があります。各プラットフォームの利用者向けヘルプページで、以下のように詳しい手順が解説されています。これらのプラットフォームを利用中または検討中の方は一度確認してみてください。
【Shopify】Shopify管理ドメインを更新する
【MakeShop】サイトマップの設定 | MakeShopオンラインマニュアル
【カラーミーショップ】SEO対策のためにXMLサイトマップを作成しましょう
自動生成ツールを使う
XMLサイトマップを作成できる代表的な自動生成ツールが『sitemap.xml Editor』です。無料で利用でき、最大1,000までのURLを取得できます。
1,000ページを超えるサイトの場合は、有料（月額3.49ドル）にはなりますが、『Xml-Sitemaps.com』などのツールがあります。
sitemap.xml Editorは、以下の手順で利用します。
1.XMLサイトマップを作りたいサイトのURLを入力する
2.オプションを設定する
3.サイトマップ作成をクリック
4.作成したサイトマップをダウンロードする
手動で作成する
XMLサイトマップは、手動で作成することも可能です。ただし、コードを書くための知識が必要な上、ページ数が数十・数百とあるサイトではかなり面倒な作業になるため、おすすめできません。
手動でのXMLサイトマップ作成では、メモ帳（Windows）や nano（Linux、MacOS）などのテキストエディタを使い、指定された形式で作成します。専門的な説明になるのでここでは割愛しますが、興味のある方は以下のページを参考にしてください。
参考：サイトマップの作成と送信 | Google 検索セントラル | ドキュメント
戦略立案・分析に役立つハイレベルサイトマップ
ここまで解説してきた3種類のサイトマップに加えて、ECサイト運用において「ハイレベルサイトマップ」というサイトマップが使われることがあります。ハイレベルサイトマップは、ECサイトの戦略立案・分析に関わる社内メンバー・外部パートナー向けのものです。
CVに至るまでの導線を明確化したもの
ハイレベルサイトマップでは、サイトを訪問したユーザーがCV（コンバージョン）に至るまでに、どのページを経由するのかを明示します。
ECサイト制作前の場合、構成図のサイトマップ作成後に、CVに誘導するために必要なページ内コンテンツや施策を考えるために使います。ECサイトをリリースしたら、実際のユーザーの行動を基に、サイトマップと照らし合わせ、コンテンツや施策の改善を行いましょう。
ハイレベルサイトマップがあることで、ECサイト全体のなかでどこを改善したら良いのか、俯瞰で考えやすくなります。
なお、ECサイトにおいては、CV＝購入とするのが一般的ですが、まずは会員登録やメルマガ登録をCVとして戦略を立てることもあります。ハイレベルサイトマップは、構造図のサイトマップを簡略化して、ユーザーのサイト訪問からCVに至るまでに関係するページ・コンテンツに焦点を当てます。イメージとして、上図を参考にしてください。
サイトマップはECサイト構築・運営に必須
サイトマップには以下の3種類があることを解説してきました。
【サイト制作者向け】設計図としての構成図のサイトマップ
【サイト訪問者向け】案内図としてのHTMLサイトマップ
【検索エンジン向け】クローラーへの案内図としてのXMLサイトマップ
ECサイト制作にあたっては、どのようなECサイトを作りたいのかを明確にするために、まずは構造図のサイトマップの作成に着手すると良いでしょう。サイト制作を外注する場合も、構造図のサイトマップを途中まででも作成しておくと、どんなサイトを制作したいのかが伝わりやすくなります。
ECサイトの制作会社であれば、当然、サイトマップについての知識やノウハウを持っています。サイトマップ作成に疑問や不安がある場合、ぜひ外部パートナーに相談してみてください。
自社に合った制作会社を探したいという方は、Web幹事にお気軽にご相談ください。予算や目的、ご要望に合わせ、最適な制作会社をご紹介します。サイトマップについて相談したい方も大歓迎です。相談料などは一切かかりません。
コンサルタントのご紹介
岩田
Web制作会社を設立し、
3年間で上場企業を含む50社以上制作に携わらせていただきました。
様々なお客様のWeb制作を実際に行ってきましたので、
初心者の方でも安心してご相談ください！
Q. ECサイトのサイトマップの作り方は？
ECサイトのサイトマップの作り方として、順番に「必要なページを書き出す」「ページをカテゴリ別に分類する」「ページの階層を決め、サイトツリーを作成する」作業が挙げられます。
Q. ECサイト制作において、サイトマップはなぜ重要ですか？
サイトマップはサイトの構成やページの階層を一覧化するため、制作の効率化や情報共有に役立ちます。必要なページが明確になり、ページの漏れや階層の混乱も防げます。
