「サイトマップ」の作り方と「サイトマップ作成」の目的と役割

Webディレクターであれば誰もがやらなくてはいけない業務の一つである「サイトマップ作成」
現在、アシスタントで将来のWebディレクターを目指している方も先輩ディレクターの打ち合わせに同行し、コンテンツが決定したら「サイトマップまとめておいて」なんていう指示がおりてくるかもしれませんね!
そんな方は「初めてWebディレクターっぽい作業を任せてもらえた!」なんてちょっぴりうれしいかもしれません。
サイトの全体像を理解するためにとても重要なサイトマップですが、今回はサイトマップを制作する目的と、実際にどのように書くべきか?書き方のアイディアについて説明したいと思います。
(※サイトマップ作成のルールは各社ごとルール等があると思いますので、あくまでもここではアイディアとしてお話しさせていただきます。)
サイトマップって何のためにあるの?目的と役割を解説
Webサイトでサイトマップというと二つありますよね?
わかりますか?
一つはメニューなんかにもよくある、あの「サイトマップ」です。
アクセスすればサイト内にあるコンテンツがリンクでズラッと並んでいて、コンテンツを整理したページとでも言ったらいいでしょうか、あのサイトマップですね。(htmlサイトマップと言ったりします)
それと、もう一つのサイトマップ。
こちらはxmlサイトマップと呼ばれるものですね。
私たち人間が見るものではなく、サーチコンソールに登録して、googlebot(ウェブクローラー)に読み込んでもらうためのサイトマップですね。(こちらのサイトマップについては別記事で詳しく説明しますのでここでは割愛します。)
サイト制作の最初に作るサイトマップとは前者の「コンテンツを並べたメニューみたいなもの」と解釈していただけると良いと思います。
こんなイメージで私は作っています。

ではコンテンツが並んだこのサイトマップにはどのような目的と役割があるのでしょうか。
私の経験上以下の3つがあると考えております。
1.コンテンツの全容を把握する
2.サイトの階層構造(ディレクトリ構造)を理解する
3.制作スタッフ・クライアントとの共有
文章で説明するならば、
「サイトにどんなコンテンツがあって、どんなカテゴリ構造になっていて、というwebサイト全体の構成を表現したもの」で、それを「制作スタッフやクライアントとも共有できるようにわかりやすく表現したもの」といった感じでしょうかね。
一つずつもう少し具体的に見ていくようにしましょう。
1. コンテンツの全容を把握する
つまりどんなコンテンツを制作するのか?を理解することを目的とします。
新規ウェブサイトであれば、ライティングやデザインが新たに必要となるコンテンツでしょう。
リニューアルであれば、既存サイトから継続するコンテンツもあるかもしれません。その際はリライトやリデザインが必要かどうかという精査が必要となりますね。
このように、どんなコンテンツがサイト内に存在するのかがわかれば、必要なリソースのアサイン、業務ボリューム、またワイヤーフレーム作成時にどんなメニューを配置する必要があるのかまでサイト制作の全体像を把握することができますよね。
サイトマップという「青写真」は、サイト制作の土台ともなる重要な役割を持つのです。
2. サイトの階層構造(ディレクトリ構造)を理解する
階層構造(ディレクトリ構造)とはカテゴリ構造と言っても良いでしょう。
WordPressであれば投稿タイプ(カテゴリ)と固定ページがありますが、コンテンツ毎に投稿タイプと固定ページに分類します。
また投稿タイプにはどんなページが入るのかも記載します。
この階層構造がわからなければwordpressの構築自体が進みませんし、階層構造を整理しておくことでサイトが管理しやすくなり管理者に優しいことに加えて、クローラビリティを上げることにも繋がりgooglebotにも優しいサイトと言えます。
カテゴリとは・・・記事を分類するための入れ物のようなもの。例えばこのブログであれば「ディレクター業務」というカテゴリの中に、この記事(サイトマップの作り方)やwebディレクターの業務内容といった記事が入っています。
ブログなんかは代表的な投稿タイプですね。ブログというページが存在するわけではなく、その中に書いた記事を入れるための入れ物でしかないわけです。
固定ページ・・・カテゴリとは違い、それ単体で存在するページの事です。例えば会社概要といったようなペライチのページはわざわざカテゴリを作る必要はなく、固定ページで作ればいいわけですね。
ただし何をカテゴリにするべきかや、何を固定ページにするべきかという明確なルールはないのでその辺りは結局自由でいいわけです。
だって会社概要だって、沿革、代表者挨拶はまったく別ページで作りたいということであれば「会社案内」みたいなカテゴリを作って、その中に記事(会社概要、代表者挨拶、沿革)など入れたい記事を投稿すればいいわけですね。
その辺りはクライアントと打ち合わせした上でどうすべきかをwebディレクターが決定すればいいのです。
3. 制作スタッフ・クライアントとの共有
サイトマップとは、これからこんなサイトを作るぞ!という青写真、つまり将来計画です。
これをディレクターだけが把握するのではなく、クライアントそして制作スタッフとも共有することで将来に向けて「何が終わっているのか」、「何が残っているのか」、コンテンツによってはクライアントが素材集めやライティングを担当するなどの「誰がやるのか」、といった部分まで、将来に向けて全員が、どのように歩みを進めていくべきか、進んでいるのかを共有するのに役立ちます。
こうした全体像を把握するサイトマップがきちんと出来上がっていれば、サイト制作中に迷うことがあっても原点に戻ることも可能です。
まさに全体のリーダーたるwebディレクターがやるべき業務と言えるのではないでしょうか。
サイトマップの作り方
作り方といっても会社によってはそれぞれのルールがあると思いますので、細かく私が指導すべきことではないと思いますが、注意していただく点は「わかりやすい」ということ、そして「全員と共有できる」ということです。
・わかりやすいサイトマップの作り方
わかりやすいということで言えばそのコンテンツはカテゴリなのか?固定ページなのか?色分けをするとか、省略することなくカテゴリの中に(納品の段階までで)どんな記事が入るのか?まできちんと表現するということでしょう。
その際カテゴリごとのURLまで記載しておくことでCMSの構築もよりスムーズに進みます。
・サイトマップの共有
大切なことは全員で共有することです。
そのために共有できる環境にてサイトマップを作ることが必要となります。
例えばサイトマップの作成ツールとしてはcacooやSlickPlanなど有名なツールがありますが、これって制作ツールであってクライアントと共有するには少し不便かなと感じています。(PDFで見てもらう分には問題ありませんが)
私のおすすめは圧倒的にgoogleドライブのスプレッドシートです。
エクセルを使っている方も多いかもしれませんが、これも同時編集とかができないので使い勝手が悪い・・・
でもgoogleドライブのスプレッドシートであればGアカウントを持っている者同士であれば共有でき、同時編集ができるためファイルのやり取りもなく大変便利です。
そもそもファイルをお送りする手間がないというだけで大きなメリットですし、こちらが編集した内容でも即座にクライアントに確認していただけるのでオンラインで打ち合わせしながらでも使いやすいという特徴があります。
あとは自動保存なので、保存してなかった!なんてこともないし、スマホからでももちろんアクセスできちゃう。
使い方はエクセルとほぼ同じですから、これまで使ったことなかったという方は業務管理の面でも非常に優れているのでお勧めです!
サイトマップ作成手順
①制作するコンテンツをカテゴリと固定ページで分類
打ち合わせにて決定したコンテンツをまずはカテゴリに入れるのか?固定ページとして作るのか?わかりやすいように分類し、色分けしてみましょう。

この場合A列に書いてあるコンテンツを制作することが決定した上で、それらをA列に記載。会社案内関連のコンテンツと商品案内関連のコンテンツはそれぞれのカテゴリに入れることとし、E列にカテゴリ名を記載。
ここでは薄黄色(カテゴリ内の記事)、緑色(固定ページ)、黄色(カテゴリ)と分類していますがそれぞれ右のセルに説明を入れています。
googleドライブ上でもご確認いただけます、以下をご覧ください。
②ツリー状のサイトマップ形式に清書
ツリー状のよくあるサイトマップの形に清書します。ツリー状にする目的はトップページからの階層構造(ディレクトリ構造)を整理するためです。

例えば新着情報のように、必要なカテゴリであることはわかっているがどんな内容が入るかは都度都度であるためカテゴリのみ用意しておくケースもありますし、今回会社案内と商品案内というカテゴリがありますが、その中にさらに子カテゴリが入るということもあります。
それはコンテンツを決定した上で、どういう階層構造がもっともユーザーにとってわかりやすいのか?を検討した上でできる限りシンプルになるようにサイトマップを設計しましょう。
googleドライブ上でもご確認いただけます、以下をご覧ください。
③コンテンツ制作を効率よく進めるためにコンテンツ一覧表を作っておきましょう
各コンテンツのタイトルやディスクリプション、URL、制作担当などがわかるような一覧表を作り全員で共有します。

誰が何をするかがこれで明確ですね!
googleドライブ上でもご確認いただけます、以下をご覧ください。
いかがでしたか?
サイト制作の土台となるサイトマップ。サイト制作スタッフとクライアントが共有する重要な資料ですから、わかりやすく、また簡単にアクセスできる環境にて作成するよう心掛けてください!