【WEB制作効率化】サイトマップとは？作成におすすめのツール紹介

サイトマップでできること

サイトマップとは、サイトの構成図のことを指します。その名前の通り、サイトの地図(マップ)のようなものです。

• サイトの目的：最も焦点を当てたい項目や目的の確認
• ページ概要：総ページ数やどのページに遷移するか
• 使いやすさ：ユーザーを自然に誘導できるか

これらを決定するために用意するのがサイトマップです。つまり、サイトマップとはひと目でサイトの全体像を理解するために用いられます。

清書前の下書きのようにも思えますが、家を建てる前に土地を用意するようなイメージを持っていただけるとわかりやすいと思います。

Web制作をするにあたって基盤となる重要な要素の一つになるのです。

サイトマップはなぜ必要？

目的はあるにして、なぜサイトマップが必要なのか。第一に、サイト全体の理解を深めるためにあります。

どのページからどこのリンクに移って、どういう流れで目的のページに辿り着くのか。口頭でサイトの全貌を説明されても、なかなかイメージがつきにくいですね。

それを一度視覚化することで、情報の有無を確認することができます。これにより間違いなくクライアントと制作側の考えの擦り合わせがスムーズになるでしょう。

なお、もっと情報を1ページにまとめたい、このページは分けたい…。等、わかりやすく要望をもらえます。

これがサイトマップを使用する大きな理由です。

サイトマップ作成するには

おすすめツール紹介

実際にサイトマップを作ってみましょう。

ここでは簡単に作成できるツールを紹介します。マップ作成にあたり、必要なツールは自分が使いやすいもので構いません。

マップは自分でも見やすく、簡潔に示されていればいいのです。まずはどんなサイトにするのかを考えてみましょう。

Google スプレッドシート

Googleユーザーであれば使える上に、シンプルな仕様のスプレッドシート。誰にでも使いやすいツールとなっているので、特に初心者におすすめです。

下記のように、Excelと同じような感覚で図形を作成したりページの遷移を表すことができます。

どのように枝分かれしてサイトを行き来できるのか、シンプルに示すことができますね。

また、追加のページが増えてもすぐに挿入が可能です。対応が早くできるのは嬉しい機能ですね。他にも、複雑にページが分かれていても色をつけてジャンルを分けて表せます。

主に共有のリンクを作成して相手に送ったり、画像に起こすことも可能です。気軽に作成でき、時間がかからないことが特徴です。

詳細はこちら

Adobe XD

Web制作する上でよく使われているツールですので、ご存知の方も多いかもしれません。

主にワイヤーフレームの作成や、最終的にデザインカンプの作成まで使えます。

簡単に図形を作成したり、コピーして配置することができるのでサイトマップをかなり簡単に作成することができます。

また、元々デザイン用のソフトということもあり、どこを押せばどのページに移るかを線で結びつけることができます。

更に実際のサイトのように動かすこともできるので、クライアントと意見をすり合わせるのに最適なツールです。

詳細はこちら

cacoo

最後におすすめするのは「cacoo」です。

こちらは有料のツールにはなりますが、特にサイトマップ作成における使いやすさはかなり優秀です。

ページ数が多い場合など、特に詳細に作り込みたい際にはこのツールがおすすめです。

また、共有して共同作業も可能です。主に作業を並行して進める必要がある大きなプロジェクトに使えそうですね。

こちらも簡単に図形や矢印を表現できます。特にページ遷移を表現しやすいので、サイトマップに特化しています。

クライアントも見えやすいツールにもなるため、導入していて損はありません。

まずは無料トライアルもあります。ぜひ導入を検討してみてください。

詳細はこちら

まとめ

以上がサイトマップがどんな効果を持ち、どういう時に必要かの説明でした。

他にも、デザイン・コーディングにおいても必要な要素が多くあります。そしてサイトマップはそれらの基盤として、サイト制作をする上で重要な工程になるのです。

サイト制作の際には、どんな構成になるのかマップにして考えてみましょう。