こんにちは、カズキです。
早くWebディレクターに昇格したいな～…。
でも、サイトマップの作り方がイマイチ分からないんだよね。。
ネットで色々調べているんだけど頭に入らない、、どうしよう…。
本記事を読んで欲しいのはこんな方😌
今回は、現役Webディレクターでもある僕が「サイトマップの作り方」を丁寧に解説します。
本記事を読んでサイトマップをさくさく作れるようになってくれれば幸いです♪( ´θ｀)ノ
記事の最後に「サイトマップのテンプレート」を用意しましたので、良かったら使ってください♪
現在、Webディレクター歴4年目のフリーランス。
過去に制作プロダクションほか、大手広告代理店、メディア事業会社等でディレクション経験があり、今まで数十～数百（ペラ一も含む）程度のサイト制作に関わってきました。
その為、サイトマップも同じ数だけ作ったことがあります。
また、現在もフリーランスでWeb関係の仕事をしているため、一定の信頼性は保証できるかと思います。
それでは早速まいります。
サイトマップの作り方を現役Webディレクターが丁寧に解説！【アシスタントディレクター必見の記事です】
サイトマップは三つあります
サイトマップにはざっくり「3つの種類」がありますので、まずはそちらを説明します。
（1）サイト制作前に用意する「サイトマップ」
（2）HTMLサイトマップ
（3）XMLサイトマップ
（1）サイト制作前に用意する「サイトマップ」
サイト制作前に用意する「サイトマップ」の主な役割は「サイトに必要なページを洗い出すこと」、
そして、洗い出したページに対して「優先順位を付けて階層分けすること」です。
※上記画像は赤でナンバリングしてます
サイトによって優先的に見せたいページやコンテンツは変わりますよね。
そんな時、サイトマップを作らないでワイヤーフレームやデザインを進めてしまうと、
など、クライアントから質問が入ったときに答えられなかったり、お互いの認識もズレの元。
それから、指摘が入るたびにページを追加していたら、ハリボテのようなサイトになってしまいますよね。
なので、サイト制作前に「サイトマップ」を用意することは、お互いの認識を合わせるためにも大切ですし、サイトの情報を整理するためにも非常に重要な作業です。
（2）HTMLサイトマップ
「サイトマップページ」とも呼ばれます。
サイト内にあるページのリンクをまとめたページのことでして、
主な目的は、ユーザーに「どのようなページがあるのかを伝える」ことです。
サイトマップページがあれば、ユーザーはこのページを見るだけでどんなページがあるのか分かるので便利です。
SEO的な利便性向上のため、サイトマップページを用意することが多いですね😌
（3）XMLサイトマップ
HTMLサイトマップがユーザーのために用意するページだとすれば、XMLサイトマップは「検索エンジンのために用意するページ」になります。
Googleのクローラーに対して、
と、このように、Googleのクローラーに対して自分のサイトにどんなページがあるのか知らせます。
SEOに対する「XMLサイトマップ」の重要さは、Googleが公式で言及していたので、まず用意しておいて間違い無し。
バズ部さんのサイトで「HTMLサイトマップとXMLサイトマップ」について丁寧に解説してましたので参考までにリンクを貼っておきます。
本記事で解説するのはサイト制作前に用意する「サイトマップ」です！
本記事はWeb制作をディレクションする「アシスタントディレクター」さん向けなので、サイト制作前に用意する「サイトマップ」の作り方を深掘りしていきます。
サイト制作前に「サイトマップ」が必要な理由
繰り返しですが、サイト制作前に「サイトマップ」を作る理由はこの通り
・「サイトに必要なページを洗い出す」
・洗い出したページに対して「優先順位を付けて階層分けする」
こちらの作業は、サイトの軸を決めるためにも大切。
また、これをしないと「方向性が決まらないチグハグなサイト構造」になってしまいますし、
なにより「ユーザーがすぐに離脱してしまうような質の低いサイト」になりかねません。
それからクライアントワークなどをしている方の場合、サイト制作の見積もりを出す際にも役立ちます。
大抵「1Pに付きいくら」、「デザインパターンに付きいくら」など定めている会社が多いはずなので、サイトマップを作っておけば概算見積もりを出すときも使いますね。
そのため、サイトマップ作成は「サイト制作に取り掛かる前に固めておきたい重要な作業」の一つと言えますね。
なにで作ればいい？ツールの指定とかあるの？
作りやすいツールであればなんでもOKですが、よく使われているツールは以下の通りですね😌
Googleスライド（もしくはパワーポイント）
ページ数やページ階層がそこまで深くないサイトであれば、Googleスライドにツリー状で書く感じで問題ないでしょう。
Googleスプレットシート （もしくはエクセル）
一方、「製品サイト」や「不動産サイト」など階層が深くなりがちなサイトを作る場合は、Googleスプレットシート でまとめる形がベスト。
またページに対する説明なども、捕捉できるワークスペースの広さがメリットですね😌
サイトマップ作成のコツ→それは「ページの精査」と「階層」をキチンと決めることです
新規のサイト制作なのか、既存のサイトをリニューアルするのか、
によっても「必要なページの精査」や「階層決め」は変わりますよね。
ここの章では、その辺りを解説しようと思います。
ページの精査を抜け漏れなく行う方法【既存サイトの場合】
まず、既存サイトのリニューアルの場合、既存サイトにあるページを全て書き出しましょう。
書き出し終わったら、「元々あるページを残す」か、「削除するか」の観点で進めていきましょう。
残す場合は「そのページに対して追加するコンテンツ（情報）があるか？」、もしくはそのコンテンツ（情報）は「他のページに含められないか？」などを順序立てて決めて整理します。
ページの精査をする際は、競合サイトを見ながら「自分たちのサイトの情報は競合に比べて足りているか？」、
と見比べながらチェックすれば、抜け漏れはなくなるはずです。
競合サイトを見た際に「自分たちのサイトにも、新規ページとして追加したほうが良いページ」が発生すれば、それもまとめておきましょう。
競合サイトを探す際は、以下のサイトが便利です。
ページの精査を抜け漏れなく行う方法【新規サイトの場合】
新規サイトの場合は「コンテンツ案を決めること」からスタートします。
こんな感じで、サイトに必要なページやコンテンツを考えます。
※クライアント側かサイトのページ候補を頂ける場合もあるので、この辺りは臨機応変に対応しましょう。
まず、コンテンツ案の考え方の基本として元々ある情報を深掘りしましょう。
扱っている商品やサービスが何にせよ、その商材の強みはどこかしらあるはず。
そして「その強みに対して補足する情報はあるか？」と問いかけてみましょう。
たとえば、商品ページを作ることがすでに決まっているなら、
1：商品ページ（商品の基本情報を掲載）
▼
what：次にユーザーが知りたいことって何だろう？
▼
2：商品詳細ページ（商品の性能、寿命やメンテナンス方法などを掲載）
▼
HOW：では、実際にどのように商品を使うのかな…？
▼
3：HOW TOWページ（商品の使い方を丁寧に掲載）
▼
Why①：なぜこの商品を買わなければならないのか
▼
4：「商品開発のステップ」、「作り手の想い」等のクロージングページ
▼
Why②：なぜこの商品を買わなければならないのか（最後の一押し）
▼
5：ユーザーボイスページ（実際のユーザーの声を掲載）
▼
こんな感じで商品に対して、
「What（何）」が「HOW（どうやって使えて）」、「Why（なぜ必要で）」、「Action（どうすれば買うのか）」をベースに自分に問いかけながら考えてみましょう。
商品購入を落とし所にしてるサイトばかりではないと思いますが、サイトを公開するなら「そのサイトのゴール」は定められているはず。
なのでそのゴールに対して、情報を補足していくイメージになります。
そして、その補足情報が「ページ」なのか、「コンテンツとして他のページに含められるのか」を考えていきましょう。
ページの洗い出しが済んだら、階層を決めよう！
階層を決めるポイントは深くなりすぎず、浅くなりすぎず、のバランスで考えましょう。
階層が深くなりすぎるのも、ユーザーにとっても利便性が悪く、著しく深いのもSEO的に宜しくないと言われています。
理想は三階層めで目的のページにたどり着ける構造が好ましいといった感じです😌
たとえば
https// www.hogehoge,com / product / details / あと一つぐらい
このぐらいでしょうか。
「長くなったからSEOで悪い評価を受けた」という報告は今の所聞いたことありませんが、
明らかにページ階層が深い場合はユーザビリティが悪いと思うので検討は必要かもしれませんね。
準備ができたら→「さっそくサイトマップに入力してみよう！」
必要なページとコンテンツ、そしてページの階層が決まったら、実際にサイトマップに入力しましょう。
その際「ページの内容」までは考えなくて大丈夫です。
そちらの作業はワイヤーフレームを作成する段階に固めていきます。
そのため「制作前のサイトマップ」からワイヤーフレーム作成後に「引き直したサイトマップ」でページ数が変わることもあります。
※今作っているのは、あくまでサイト制作前の「サイトマップ」なので、現時点ではサイト全体のボリューム感や、概算の見積もりが分かればOK。
「サイトマップのテンプレート」はこちらからコピーお願いします！
上記ボタンをクリック。
Googleスプレットシートからコピーで自分用にカスタマイズしてください。
入力方法はカンタン！
「ID名」、「ページ名」、「URL」、「備考」の項目に入力しましょう。
その他、必要に応じて任意で情報を付け足してください。
ページの種類によっては背景色で分けてあげても分かりやすいですね。
不要ページはブラックアウトしましょう
ページ精査を行った段階で「不要になったページ」はブラックアウトしておきましょう。
それから、「外部サイトへのURL」、「PDFなどのダウンロードURL」はページに含まないので、
赤文字でマーカーするなど、一定のルールをもって入力しておくとベストですね。
終わり
以上、現役Webディレクターが解説する「サイトマップの作り方」でした。
どうでしょうか？しっかりと「サイトマップの作り方」をマスターできそうでしょうか？😌
記事を読んで頂いてわかったと思うのですが、サイトマップ作りは難しくありません。
実際の作業としては、必要なページを入力していくだけです。
大切なのは、入力する前に「ページを精査して、どのように階層付けをすれば、ユーザーにとって使いやすいサイトになるか」と徹底したユーザー目線に立てるかどうか。
そのため、勝負は入力前であって、「事前準備と調査」がメインなんですよね。
ここを勘違いしてしまうと、タダの作業になってしまうのでディレクションを楽しめません。
それは大変もったいないことです🙇♂️
→ディレクションの楽しいところはサイト設計に携われることなので♪( ´θ｀)ノ
それでは記事は以上です♪( ´θ｀)ノ
