サイト内検索ブログ

ECサイトに必要な3種類のサイトマップ(構成図)の作り方とメリットを解説


ECサイトに必要な3種類のサイトマップ(構成図)の作り方とメリットを解説

ECサイトの構築にはサイトマップが重要な役割を果たします。よくワイヤーフレームと混同されがちですが、役割が異なります。そもそも、サイトマップとは何か?を正確に理解していない方も多いのではないでしょうか?

サイトマップとは、ECサイトの構成図です。詳しくはこれから解説していきますが、この記事を読み終えると、サイトマップへの理解と今後のサイト作成や運営の役に立てる内容となっています。
ぜひ最後までご覧いただき、ECサイト構築の参考にしていただけますと幸いです。

ECサイト構築前に知っておきたい構築時に注意すべきポイントとは!?
現在、多くの企業が参入しているEC市場。 数多くの競合がひしめく中で、競争力のあるECサイトを構築するために押さえておくべきポイントとは!?

目次

サイトマップはECサイト全体の構成図

サイトマップはECサイト全体の構成図

サイトマップとは、ECサイトのページ構成を一覧表示したものです。サイトマップは、ユーザや検索エンジンにECサイトの構成をわかりやすく伝えユーザビリティやSEO対策にとって重要な役割を持っています。
この章では、サイトマップの種類を解説していきます。

サイトマップの種類

一口にサイトマップと言っても3つの種類があり、 それぞれ対象と目的が異なります。ひとつずつ解説していきます。

◾️|構成図サイトマップ
◾️|HTMLサイトマップ
◾️|XMLサイトマップ

【サイト制作担当向け】構成図サイトマップ

構成図サイトマップは、サイト制作側へ向けた設計図の役割を担います。具体的にはマインドマップのようなツリー状の表で作成し、どんなページがあり、どのような階層構造をしているかを一目でわかるようにしたものです。

例えば、アパレル系のECサイトの場合、構成図サイトマップには企業情報やプライバシーポリシーなどの基本的なページのほかに、女性向け商品のカテゴリや男性向け商品のカテゴリ、さらにはカテゴリ内での商品ページが細かく表にまとめられています。

構成図を作成することで、制作側での抜け漏れを防ぐことができ、正確で効率的にサイト制作を進めることができます。

【サイトユーザ向け】HTMLサイトマップ

HTMLサイトマップはECサイトに訪問したユーザ向けに作成されるもので、いわば実店舗における案内図です。ページ作成にはプログラミング言語の「HTML」を利用するため、HTMLサイトマップと呼ばれています。

ECサイトを閲覧した時に、トップ画面のヘッダやフッタ、左右どちらかのカラムと呼ばれるスペースにサイト内の案内を作成します。例えば、総合百貨店のECサイトではよく左側に商品カテゴリ(アウター/シューズ/食品/日用品など)が並んでいます。また、よく目にするのがサイト下部のフッタに、より網羅的にカテゴリを陳列しているサイトです。

HTMLサイトマップがあることで、ユーザが欲しい商品を探す時間が省け、購入までつながりやすくなります。しかし、現在ではHTMLサイトマップよりも、商品キーワードを入力しより早く欲しい商品を探せるサイト内検索がよく使われるようになっています。

≫≫ サイト内検索とは?3つのやり方・導入方法から活用事例までを解説

ECサイト構築前に知っておきたい構築時に注意すべきポイントとは!?
現在、多くの企業が参入しているEC市場。 数多くの競合がひしめく中で、競争力のあるECサイトを構築するために押さえておくべきポイントとは!?

【SEO対策】XMLサイトマップ

XMLサイトマップは、SEO対策に重要な役割を担っています。そもそもXMLとは、機械やロボットにデータ内容を伝えるためのマークアップ言語です。

GoogleやYahoo!などの検索エンジンのプログラムであるクローラというロボットへ、Webページの内容を伝え、検索エンジンに登録(インデックス)されることを目的として利用します。

XMLサイトマップがあることで、Webページがインデックスされやすくなり、クローラがECサイトの内容を理解しやすくなるため、SEO対策の有効な手段となっています。

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

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

この章では、ECサイトでサイトマップを作成することで得られる5つのメリットについて解説していきます。

  • ユーザビリティの向上
  • サイト内リンク構成の明確化
  • SEO対策
  • 階層構造の可視化
  • Web解析の精度向上

ユーザビリティの向上

1つ目のメリットは「ユーザビリティの向上」です。ユーザビリティとは、主にWebサイトの使いやすさを指します。ユーザ向けのサイトマップは、トップページ内で商品カテゴリや問い合わせ場所などがすぐにわかるように配置をすることが重要です。

ユーザがサイト内の構造を把握することで、目的商品がどこにあるのかが明確になり商品を探す手間を減らすことができるため、離脱率低下につながります。

≫≫ 離脱率を改善する7つの方法とは?原因から対策までを解説

サイト内リンク構成の明確化

メリットの2つ目はサイト内のリンク構成の明確化です。
ECサイトは商品ページが多くなりがちです。 サイトマップを作成することで、ECサイトの構造や階層関係を一覧化し、視覚的に把握することができます。ユーザやECサイトの管理者は、どのページにどの商品があるのかをすぐに把握することができ、ナビゲーションとして役立ちます。

≫≫ Webサイトのナビゲーションメニューの種類と役割を徹底解説

SEO対策

3つ目にクローラに向けたSEO対策におけるメリットです。
クローラとは前項でも説明したように、検索エンジンのプログラムであるロボットです。SEOはこのクローラに対して、ECサイトの各ページを理解してもらい、インデックス登録されることで検索結果の上位に表示されることを目的としています。そのため、XMLサイトマップでクローラへECサイトの存在と構成を認識してもらうことが重要です。

階層構造の可視化

4つ目のメリットは階層構造の可視化ができる点です。
階層構造とは1つの階層(親)の中にいくつもの階層(子)が入り、それぞれが枝わかれをしていく構造で、ECサイトは基本的に階層構造になっています。

サイト制作において、管理者はECサイトのメンテナンスや修正、紹介文のリライトなどの管理が必要なため、階層構造を把握しておく必要があります。また新しいECサイトを構築する際にも構成図サイトマップを用いて制作を進めるため、階層構造の可視化は運用を効率化するメリットがあります。

Web解析の精度向上

5つ目のメリットはWeb解析の精度向上です。
管理者側はECサイトの運営において、定期的にWeb解析が必要です。Google Analyticsなどのアクセス解析ツールを利用して、PV数やユーザの回遊率、CVRなどの数値データから改善点を見つけ、新たな施策を打ち出していきます。

構成図サイトマップやHTMLサイトマップを用意しておくことで、数値データとサイトの構成を照らし合わせながら視覚的なWeb解析が可能になります。

≫≫ ECサイト分析で重要な3つの指標とは?分析の方法からツールまでを紹介

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

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

前項までは、サイトマップへの理解を深めるための解説をしてきました。ここでは実際にECサイトのサイトマップの作成方法を紹介します。

  • サイトマップの作成手順
  • サイトマップの作成に必要なツール
  • サイトマップの更新方法

サイトマップの作成手順

まずは構成図サイトマップの作成手順です。作り方は以下の3ステップです。

  1. 必要ページの書き出し
  2. ページをカテゴリで分ける
  3. 階層を決めてツリー状に作成

構成図は必要ページの抜け漏れがないように書き出すのがポイントです。ExcelやGoogle Sheetsを使いツリー状に作成に作成していきましょう。

スプレッドシートサイトマップ

次にHTMLサイトマップです。

  1. ユーザへ案内するページの新規作成
  2. デザインの決定

構成図サイトマップを参考に、各ページやコンテンツをどこにどのように配置するかを決めます。

商品が多い場合にはカテゴリのみを表示して内部リンクで誘導するなど、自社の商品に応じた案内の記載方法を決めることがポイントです。また、ユーザにとってわかりやすいデザインを選びます。

Amazonのサイトマップ

参考:Amazonのサイトマップ

最後に、XMLサイトマップを作成します。
XMLサイトマップは手動で作成することもできますが、基本的にはECサイトのプラットフォームや自動生成ツールを使うことが多いです。ECサイトの代表的なプラットフォームの種類は以下です。

◼️|Shopify
◼️|MakeShop
◼️|カラーミーショップ

自動生成ツールの詳しい解説は次の項目で紹介します。

サイトマップの作成に必要なツール

ここではサイトマップ作成に必要なツールを紹介していきます。

HTMLサイトマップ

◼️|PS Auto Sitemap

PS Auto Sitemapは、HTMLサイトマップを自動生成するプラグインです。
特徴は固定ページや投稿ページをサイトマップで一覧表示できる点です。HTMLサイトマップを自動で効率的に生成することがすることができます。

XMLサイトマップ

◼️|XML Sitemap
◼️|sitemap.xml Editor

XML Sitemapとは、Wordpressで使える無料プラグインのひとつです。インストールするだけでXMLサイトマップの自動生成が可能です。また、Webサイトの情報更新や新しいコンテンツが公開されるたびに自動で更新が行なわれる機能を搭載しています。

sitemap.xml Editorも同様のXMLサイトマップ自動生成ツールです。
生成されるXMLサイトマップに大きな違いはありませんが、認知度が高いのはXML Sitemapです。

サイトマップの更新方法

サイトマップは基本的にはインストールしたプラグインにより自動更新されます。

XMLサイトマップも自動で更新されますが、記事の新規投稿やページの修正、追加などが反映されないことがあります。 その場合、手動で更新を行なう必要があるため、定期的にチェックをしておきましょう。

まとめ

まとめ

今回はECサイトに必要な3種類のサイトマップについて解説しました。

サイトマップは制作者向け、ユーザ向け、検索エンジンのクローラ向けがあり、それぞれが重要な役割を担っています。現在はサイトマップの自動生成ツールもあり、よりECサイトが管理しやすくなっています。
また、サイト内検索も上手に活用をすることで、より成果につながるサイト運営ができます。

サイトマップの役割を理解して、正しく効果的に利用していきましょう。

ECサイト構築前に知っておきたい構築時に注意すべきポイントとは!?
現在、多くの企業が参入しているEC市場。 数多くの競合がひしめく中で、競争力のあるECサイトを構築するために押さえておくべきポイントとは!?

サイト内検索のオススメ記事


「導線改善ツール」を導入して
ユーザビリティ実現した事例集


資料ダウンロード

ENIEE SEARCH編集部

GENIEE SEARCH編集部
(X:@BST_hoshiko

ECサイトや企業サイトにおける快適なユーザ体験を実現するための導線改善方法から、ECマーケティングの手法まで幅広く情報を発信しています。

診断シミュレーション

新着事例

株式会社カンパネラ様

いいね!で最新情報を受け取る

「導線改善ツール」を導入して
ユーザビリティ
実現した事例集


資料ダウンロード

TOP