今すぐ使える！Adobe XDでのサイトマップの作り方【ECサイト向け】

Excelやテキストエディタを使用し、テキストベースでサイトマップを作成している方が多いのではないでしょうか。Adobe XDを活用する事で、より導線のイメージが分かりやすくなります。

そこで今回は、Adobe XDでECサイトのサイトマップの作り方について紹介します。過去には、Adobe XDでのワイヤーフレームの作成方法について紹介しましたのでこちらもぜひチェックしてみてください。

1 ECサイトのサイトマップとは？
2 ハイレベルサイトマップの作り方
3 おすすめプラグイン3選
4 まとめ

ECサイトのサイトマップとは？

サイトマップとは、Webサイトの全体構造をイラストで示したもののことを指します。

ECサイトにおけるサイトマップは、大きく分けて3つあります。
・ハイレベルサイトマップ
・HTMLサイトマップ
・XMLサイトマップ

ハイレベルサイトマップについて

ECサイト制作の企画段階で作成します。
サイト全体の構造を俯瞰したサイトマップです。プロジェクト関係者全員とサイトの全体像のイメージ共有することで、サイトの目的や必要なコンテンツを明確にすることができます。
Webサイトは階層構造のため、主にツリー図で作られています。

上の図のように主要コンテンツのみをシンプルな動線でつなげます。すべてのページが書かれているわけではなく、主要コンテンツが何か、それらがどういった構成になっているかが俯瞰で見られる資料です。

HTMLサイトマップ

閲覧者向け。ECサイトで興味を惹かれるページや知りたい情報がありそうなページなどに閲覧者がストレスなく飛ぶことができます。常にユーザー目線を意識し、カテゴリやジャンル分けなど、情報を探しやすくなっていることが大切です。

XMLサイトマップ（sitemap.xml）

検索エンジン向けにサイトの構成をわかりやすく伝え、評価してもらいやすくするために作成するサイトマップです。XMLサイトマップを設置することによって、更新頻度や更新日時、記事の関係性などを効率的にクローラーに伝えることで、SEO効果も期待できます。XMLサイトマップは、HTMLサイトマップとは違い、閲覧者は確認することができません。

ハイレベルサイトマップは、ECサイトの企画段階や提案段階、リニューアル時の初期段階では必須と言ってもよいでしょう。特に大規模なサイトを構築する場合には、間違いなくCVページへ誘導できるように、閲覧者をどう誘導すべきかを「動線」をしっかりと意識することが重要になってきます。

ハイレベルサイトマップの作り方

・必要ページを洗い出す
・グルーピングする
・ツリー状に整理する（図に落とし込む）
・全体を俯瞰して確認する

必要ページを洗い出す

例えば以下のようなページを洗い出します。
・トップページ
・商品一覧
・商品個別ページ
・利用規約・プライバシーポリシーページ
・ショップ情報
・支払い・配送
・お問い合わせ
ここでは要不要はあまり考えず、考えられるだけ書き出すのがコツです。

グルーピングする(カテゴリ分け・階層分け)

ページの書き出しが終わったら、それらをカテゴリで分類します。分類していくうちに、いらないページが出てきたら削除し、足りないページが出てきたら追加します。カテゴリ分けが終わったら、階層に分けて整理します。上が親ページ、その下に子ページをぶら下げるイメージで、なるべく3階層程度で収まるように仕分けをしてください。階層分けが済めば、サイトの構成図はほとんど完了します。