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

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

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

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

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

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

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

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

HTMLサイトマップ

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

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

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

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

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

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

必要ページを洗い出す

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

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

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

XDでのサイトマップの作り方

今回はコンポーネントを使用してシンプルに作る方法を紹介します。

【STEP1】アートボードを用意する
1280pxの幅のアートボードで作ることをオススメします。
左側のナビメニューからアートボードを選択すると、画面右側にサイズが出てくるので、ここで作成したいサイズを調整してください。

【STEP2】画面遷移図の作成
長方形ツールとテキストツールで各ページ名を入力し、Ctrl＋Rでリピートグリットを作成します。

必要なページで洗い出したページ群の関係性を、画面遷移図によって可視化します。

【STEP3】線でつなぐ
「Flowkit」というプラグインを使うのがおすすめです。
線ツールで各ページタイトルを繋いでいくより、断然楽ですので、ぜひ活用してみてください。

【STEP4】共有リンクの発行
共有URLを発行し、クライアントや社内メンバーと共有します。補足説明が必要な際には、発行したURLにコメントを書き込むこともできます。

おすすめプラグイン3選

プラグインを使用することでさらにその便利度が向上します。プラグインはAdobe Creative Cloudからインストール可能ですので、ぜひ活用してください。

Resize Artboard to Fit Content (Control ＋ F)

アートボードを選択してプラグインを実行すると、アートボード内にあるオブジェクトに合わせてアートボードをリサイズします。

Icons 4 Design

数多くのアイコンが無料で使えるありがたいプラグイン。 Font AwesomeやIONICなど複数のアイコンイラスト提供サービスと連携している。

Flowkit

XDでのサイトマップの作り方のstep3で紹介したものです。
オブジェクト同士を結ぶ矢印を１クリックで生成できるもの。

まとめ

・サイトマップには3つ種類がある
・ハイレベルサイトマップは、ECサイトの企画段階や提案段階、リニューアル時の初期段階では必須になる

サイトマップはサイト設計の中で重要な役割を果たします。サイトマップの作り方や表現の仕方に正解はありませんが、Adobe XDを活用することで効率良く作業できると思います。ぜひ活用してみてください。