Webディレクター

【悩まない!】サイトマップの作り方からオススメのツール3選紹介

 

悩む人
Web業界に入社して、上司からサイトマップを作成してほしいと言われたけど、サイトマップって何?。サイトマップを作る目的や作成方法、役立つツールなどあれば教えてほしい。

 

こんな悩みに答えます。

 

本記事の執筆者

現在Webディレクターとして働いており、Web業界で7年ほど働いています。

 

結論から言いますとサイトマップは、サイト制作をする前に必要な資料になります。

 

サイトマップがあることで、カテゴリのまとめ方や必要なコンテンツの洗い出しができます。
KEI

 

またサイト全体を俯瞰してみることができ、プロジェクトメンバーとサイトのあるべき構成を共有でき、よりよいサイト作りに役立てられます。

 

そこで、本記事ではサイトマップとは?からサイトマップを作るメリットについて徹底的に紹介します。

 

また記事後半では、サイトマップの作り方やサイトマップ作成で使えるツールも紹介します。

 

サイトマップについて知りたい方は、ぜひご覧ください!

 

メモ

サイトマップと似た言葉で『ディレクトリマップ』というのがあります。

ディレクトリマップは、Webサイト全体のURL・タイトル・ディスクリプションをまとめた資料になります。ディレクトリマップについて知りたい方は以下からどうぞ!

関連>>ディレクトリマップとは?オススメのディレクトリマップ作成ツールも紹介

 

サイトマップとは?

 

サイトマップは、冒頭で紹介しましたようにサイト全体を俯瞰してみることができる構成図資料のことです。

 

Web業界にいると、Webディレクターがサイトマップを作ってプロジェクトメンバーにリニューアル後のサイト構造を共有することがあります!(メリットについてこの後詳しく紹介します!)
KEI

 

どんなページが必要で、必要なページをどんなふうに繋げるのが良いのか?』そんな悩みをサイトマップを作成して可視化してあげます。

 

ポイント

ちなみに、「サイトマップ」とネットで検索すると「HTMLサイトマップ」や「XMLサイトマップ」もあります。「HTMLサイトマップ」や「XMLサイトマップ」は、Webサイトの各ページへリンクを貼った案内図のようなもので、本記事で紹介するツリー状の資料とは異なります。

 

サイトマップを作る3つのメリット

 

結論サイトマップを作るメリットは、以下の3つです。

 

・ユーザーや検索エンジンに適切に情報を伝えられる

・サイト全体の構成を把握できる

・プロジェクトメンバーで共通認識を持てる

 

1つずつ順番に紹介します。

 

・ユーザーや検索エンジンに適切に情報を伝えられる

 

サイトマップがあることで、ユーザーや検索エンジンに適切に情報を伝えることができます。

 

というのも、資料で作ったツリー状のサイトマップを参考に、Webサイトの各ページリンクを貼った案内図(サイトマップ)を作ることがあります。

 

サイトマップがしっかりできていますと、ユーザーにサイト内の構造を適切に伝えられるだけではなく、Googleにも評価されて検索結果の上位表示も狙えます。

 

なので分かりやすいサイトマップ構造を提供することで、ユーザーにとっても親切になるだけではなく、検索エンジンに正確な情報を伝えることができるわけです。

 

・サイト全体の構成を把握できる

 

繰り返しになりますが、サイトマップがあることでサイト全体の構成を把握しやすくなりますし俯瞰してみることができます。

 

例えば、サイトマップを使ってクライアントにリニューアル後のサイト構成を説明するのに説明がしやすいですし、共通の認識を持ちやすくなります。

 

また、サイトの導線や重複したコンテンツがないかの確認もしやすくなるので、その後のプロジェクトがスムーズに進みます!

 

・プロジェクトメンバーで共通認識を持てる

 

ツリー状のサイトマップが手元にあるとプロジェクトメンバー間で共通認識を持つことができます。

 

というのも、このページはどこのページの階層にあるかを周知しやすくなりますし、プロジェクトメンバーがサイト制作を理解した上で進められます。

 

特に、大規模なプロジェクトになりますとページ数も多くなり、複雑になってくるのでメンバーが混乱してしまうこともあります。

 

そうならないように、メンバーで共通認識を持てるようにサイトマップを作成しておくのがオススメです!

 

サイトマップを作る3ステップ

 

サイトマップを作るステップは以下の通りです。

 

・①:必要な情報の洗い出し

・②:グルーピングをする

・③:ツリー状にまとめる

 

1つずつステップを紹介します!

 

step
1
必要な情報の洗い出し

 

まずは、サイトに必要だと思われる情報の洗い出しをしていきます!

 

例えば、「採用サイト」ページを作るとして、採用サイトに必要なコンテンツをどんどん盛り込んでいく感じです!
KEI

 

・採用TOP

・社員の声

・社員の1日の流れ

・募集要項

・事業紹介

・お問い合わせ

 

こんな感じで、必要なコンテンツを思いつくだけとりあえず出していきます。

 

ちなみに、コンテンツの洗い出しは、1人で出すよりプロジェクトメンバー(複数人)で出し合うのがオススメですよ!
KEI

 

また、コンテンツを抽出する場合には、競合サイトがどんなコンテンツを提供しているのか参考にしてみるのもアリです。

 

必要そうなコンテンツをたくさん出せましたら、続いてグルーピングをしていく作業です!

 

step
2
グルーピングをする

 

必要なコンテンツを出すことができましたら、似たような情報をグルーピングしていきます。

 

  • 採用トップページ
  • 社員紹介
    ∟社員の声(インタビュー)
    ∟社員の1日の流れ
  • 事業紹介
    ∟事業紹介
    ∟事業の強み
  • 採用
    ∟求める職種
    ∟求める人物像
    ∟採用説明会
  • お問い合わせ

 

上記のように、グルーピングをしていきます。

 

グルーピングをしてみて『このコンテンツはこのカテゴリじゃないな〜』といったことを考えながらプロジェクトメンバーと話して構造を決めます!
KEI

 

ちなみに、カテゴリー分け(グルーピング)していて、不要と思われるコンテンツや重複するコンテンツがあれば削除もしていきます。

 

ここまでくれば、後はツリー状にまとめる作業です!

 

step
3
ツリー状にまとめる

 

ここまできましたらサイトマップに必要なツールを使ってツリー状に落とし込んでいきます。

 

ツリー状に落とし込むことができたら、『コンテンツの抜け漏れがないか?』『カテゴリー分けは分かりやすいか?』をメンバー同士で話し合います。

 

サイトマップに必要なツールはこの後詳しく紹介します!

 

サイトマップ作成に使えるオススメのツール

 

最後に、サイトマップ作成に役立つツールを紹介します。

 

・PowerPoint(Google スライド)

・Excel(Google スプレッドシート)

・Adobe XD

 

・PowerPoint(Googleスライド)

 

サイトマップのツールでどれにしようか迷ったら、とりあえずパワーポイントを選んでおけば間違いありません!

 

現場では、PowerPoint(パワーポイント)を使ってハイレベルサイトマップを作ることがよくあります。
KEI

 

パワーポイントは、図形や線などを簡単に作成できますので、ツリー状に図で表すサイトマップには最適なツールといえます。

 

PowerPoint(パワーポイント)の他に、簡易的なハイレベルサイトマップを作りたい場合にGoogleスライドも役立ちますよ。

 

・Excel(Google スプレッドシート)

 

Excel(エクセル)も簡単に図を生成できたり、全体を俯瞰するのに役立てられるのでオススメのツールです。

 

ただ、エクセルを使う機会は、どちらかというと「ディレクトリマップ」を作成するときに使うことが多いです。

 

関連>>ディレクトリマップとは?オススメのディレクトリマップ作成ツールも紹介

 

・Adobe XD

 

Adobe XDもサイトマップ作成にオススメのツールです!

 

Adobe XDは、WF(ワイヤーフレーム)を作るときにも有効的ですし、各サイト間での遷移を誰かに説明したい場合に大変便利です。

 

制作するサイトの規模に合わせて、使えそうだと思ったツールでサイトマップを作成してみてください!
KEI

 

サイトマップを作ってより良いサイトを作成しよう!:まとめ

 

以上で、サイトマップについて紹介しました。

 

サイトマップはサイトを制作する初期段階で作成しておくことで、その後のプロジェクトがスムーズに進むだけではなく、サイトの全体像を俯瞰してみることができます。

 

特に、大規模なサイト制作ですと、ページの必要性や洗い出したりサイト全体を俯瞰して見ることができるので作っておくことを強くオススメします。

 

本記事を読みサイト制作に必要なサイトマップが分かりましたら幸いです。

 

ここまで読んでいただき有難うございました!

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-Webディレクター