Webデザイン

サイトマップの作り方!簡単にテンプレートで作成する方法

sitemaptemplate

Web制作をする際には、サイトマップを作る必要があります。初めての時は、サイトマップを作るにも四苦八苦することが多いです。

ただし、初めての人でもテンプレートを使うと、スムーズに作成することができます。

そこで今回は、実際に筆者が使っているテンプレートを今回紹介しようと思います。

そもそもサイトマップとは?

cacoo - サイトマップの作り方!簡単にテンプレートで作成する方法(出典:cacoo)

まず、サイトマップとは、上記のような画像のことをさします。

SEO関連の知識にも「サイトマップ」という用語が出てきますが、これとは違う意味合いのものが今回のサイトマップです。

ようは、サイト構造の全体像みたいなものです。

サイトマップがあることのメリット

なんでこんなサイトマップを作るのか?といった疑問を抱えている方の為に、サイトマップを使うことのメリットをお伝えします。

ユーザーフローが描きやすい

まず、サイトマップがあると、ユーザーフローが考えやすくなります。

ユーザーフローというのは、実際にあなたのサイトを訪れたユーザーが、どういう動きをするのか?といった流れみたいなものです。

最近は、「ストーリー」などのように表現されることも多くなりました。

実際のページ数が把握できる

続いて、実際にサイトマップにして、視覚化してみると、漠然と描いていたサイトの全体像が具体化されます。

何より、ページ数という数に落ちてくるため、非常に分かりやすくなります。

図にしてみると足りていないページがあることに気づくこともありますので、後々面倒なことにならなくて済みます。

同じようなページはデザインをまとめられる

cacoo2 - サイトマップの作り方!簡単にテンプレートで作成する方法

(出典:cacoo)

また、サイトマップでは、階層が表現されています。

階層というと分かりにくいですが、簡単に言えば、トップページから何回クリックしたら辿り着けるかみたいなものです。

大体の場合、階層が同じページはデザインも似てきます。

  • サイドバーが同じになる
  • ヘッダー・フッターが同じになる

サイトマップを作ることで、実際に作るデザインは何個必要かというのが大まかに把握できます。

全体のバランスが分かる

例えば実際にマップにしてみると、「”料金プラン”の欄だけがやたらページ数が多くない?」みたいなことに気づくことがあります。

イメージだけで話してしまうと、こういったページ数の偏りに気づいたりもしますので、メリットでしょう。

ただ、サイトが偏ってはいけないといった訳ではなく、何回もクリックしないとたどり着けないような構造になってしまうのは避けたいといった意味合いです。

(例えば、会員から退会するために、とにかく深くまで階層を行かないといけないサイトなどは、本当にユーザーのことを考えているかというと、そうではなかったりする場合もあります。。)

サイトマップ作成のためのテンプレート例

それでは、実際に使えるテンプレートの紹介です。

cacoo

cacooinc - サイトマップの作り方!簡単にテンプレートで作成する方法

URL:https://cacoo.com/lang/ja/examples/sitemap-software

まずはcacooです。

こちらは、サイトマップの作成に特化したツールです。比較的安いですし、14日間無料で使えたりするので、一度使ってみるのも手でしょう。

powerpoint

powerpoint - サイトマップの作り方!簡単にテンプレートで作成する方法

続いて、言わずと知れたパワーポイントです。

筆者がパワーポイントで作成する時は、「SmartArt」というものを利用して作成します。

パワーポイントなどのマイクロソフトオフィスに慣れている方は、こちらで作成するのも一手でしょう。

Xmind

xmind - サイトマップの作り方!簡単にテンプレートで作成する方法URL:http://jp.xmind.net/

最後に、Xmindです。

こちらはマインドマッピングツールですが、パワーポイントのSmartArtよりも軽く動きますので、個人的にはおすすめです。

サイトマップ作成でテンプレートを使うメリット

なんでサイトマップ作成でテンプレートを使うの?と疑問に思った方にむけて、メリットをお伝えします。

デザインを考慮する必要がない

まず、何よりもサイトマップを作る目的は「サイトを作るため」です。なので、サイトマップを綺麗にデザインしたところで、完成するサイトには何も影響しません。

デザイナーさんはこういったところでもデザイン力を発揮したくなるかもしれませんが、あまりここにはこだわらない方が時間削減にもなります。

なにより、テンプレートを使うと、何も考えなくてもある程度綺麗に仕上げてくれるので助かります。

丁寧に作った感が出る

また、これは例えば受託などをやっていると、クライアントとの関係を円滑に保つ上で大事です。

やはり、手書きでグチャグチャっと書かれるよりも(ぐちゃぐちゃには書いたつもりはなくとも)、何かそれなりのツールで作ってる感のあるものの方が、しっかりやってくれているという印象が出ます。

テンプレート以外でサイトマップを作成するには?

基本的にはテンプレートを利用するのがおすすめですが、それ以外の方法もご紹介します。

ペイントソフトを使う

まずは、普通のペイントソフトを使う方法です。

基本的にサイトマップは、四角形と文字と棒だけなので、描いて作ることが出来ます。

ただし、ペイントソフトを使うよりは、正直パワーポイントを利用した方が早いとは感じています。

紙とペンを使う

次は、紙とペンで書く方法です。手っ取り早く創れるので、筆者は好きです。

ただし、画像での共有がメインになるので、後から付け足しみたいなのがあるときは少し大変だったりします。

このようなデメリットを踏まえて使い分けるのがおすすめです。

サイトマップに関するまとめ

以上、いかがでしたか?

個人的には、サイトマップみたいな物は、分かりやすくて、意志共有ができて、それなりに綺麗であれば十分だとは思っています。

サイトマップがあることで、その後の議論がより生産的に成る方が重要です。

個人的なオススメとしては、特に指定がなければXmindで良いんじゃないかな?とも思います。

以上、最後までお読みいただきありがとうございました。