Web制作にあたり全体像を把握するためにサイトマップは非常に重要で、効率的な制作・管理をするためにはほぼ必須と言っていいツールです。
しかし、サイトに新しい項目や新着ページなどが増えれば増えるほどサイトマップは細分化され膨大な量に膨れ上がります。それら全てを手作業でまとめるとなったら気が遠くなるような時間がかかりますよね。

VisualSitemapsHPより

「重要なのはわかっているけど、制作に直接関わるものじゃないから時間はあまり掛けたくない…」、そんな風に思っていませんか？
そこで便利なのがVisualSitemaps（ビジュアルサイトマップス）です。本記事ではVisualSitemapsで使える機能や料金プランなど、詳しく解説していきます。

VisualSitemapsとは

VisualSitemapsHPより

VisualSitemaps（ビジュアルサイトマップス）は、Web制作におけるサイトマップを自動で作成したり、非常に簡単なサイトフローの作成を可能にしてくれる便利ツールです。

サイトマップを作成したいサイトの該当URLを入れるだけで数秒でスクリーンショット付きのサイトマップを自動で作成してくれるため、他社のサイトマップを調査し参考にするのはもちろん、自分のサイトのサイトマップを作成し管理・編集・プレゼン等、役立てることができます。
デザイン最前線にいるWeb、UI・UXデザイナーを始め、企業の運営者までが便利に活用でき、業務の効率化が期待できるツールです。

VisualSitemaps Inc,とは…
2019年にニューヨークを起点に2人のエンジニアによって設立された、Web制作におけるサイトマップに特化したサービスを提供する企業。

機能一覧

  • 無料で使用できる機能
    • URLからサイトマップの自動作成
    • サイトフローの手動作成
  • 「Mini」プランで使用できる機能
    • [無料で使用できる機能＋]
    • PDF、CSV、JSON形式での書き出し
    • 作成されたサイトマップ上にコメントを挿入し、チームやクライアントと共有
  • 「Freelancer」・「Team」プランで使用できる機能
    • [無料・「Mini」プランで使用できる機能＋]
    • 作成されたサイトマップの編集
    • 指定したURLの定期的なサイトマップ作成及び変更点比較・進捗確認
    • カスタムタグ作成
    • コンテンツ＆SEOの計画を追加

各機能の料金プランによる違いの詳細は、当記事内「料金プラン」の項目をご確認ください。

機能詳細

URLからサイトマップの自動作成（Automated Crawling）

VisualSitemapsHPより

サイトマップの自動作成を行うには、サイトマップを作成したい該当サイトのURLを貼り付けます。その際に、「Max Pages（最大ページ数）」や「Max Depth（最大階層深度）*1」を設定する事で、どのくらいのサイズのサイトかわからない状態で行っても、自分の加入している料金プランで作成できるページ数をオーバーする事なくサイトマップを作成する事が可能です。

*1　「Max Depth（最大階層深度）」は、該当サイトをどの階層まで掘り下げてサイトマップ化するか、限度を設定できる項目です。「階層」については、以下の画像2点をご参照ください。

VisualSitemapsHPより
VisualSitemapsHPより

※無料プランでは、月25ページ・2階層までの制限があるので注意しましょう。

サイトフローの手動作成（Flow Boards）

VisualSitemapsより

自動でサイトマップを作成してくれる、というのがVisualSitemapsのメイン機能ですが、計画段階などで便利にな手動でサイトフローを作れる機能もあります。サイトフローを作成するのに特化しているため、非常に簡単に且つ感覚的にフローを作成できるような機能が豊富にあるのが特徴です。

なかでも特徴的なのが、ワイヤーフレームの作成とそれらを繋ぐラインの作成のスムーズさです。ワンクリックで新しいワイヤーフレームとラインの作成ができ、ワイヤーフレームを動かす際はラインが勝手に追従してくれるようになっています。是非以下の動画をご確認ください。

VisualSitemapsHPより

この機能以外にも、
・GIFの貼り付け
・種類の豊富なワイヤーフレーム
・フローをグループで区切るセクション機能
など、様々な便利な機能が備わっています。以下の動画で機能の紹介が簡潔にされているので、是非ご確認ください。

VisualSitemapsHPより

指定したURLの定期的なサイトマップ作成及び変更点比較・進捗確認（Scheduled Crawls）

新たにサイトを制作している際、どのくらいの進捗があって、どこに変更が加えられたか、全てを記憶して管理するのは難しいですよね。

VisualSitemapsでは、任意の頻度を設定し、定期的に変更点の比較・進捗確認ができます。また、前回から変更が加えられた点を赤くハイライトして表示してくれるため、視覚的に確認する事が可能です。（以下の画像参照）

VisualSitemapsHPより

カスタムタグ作成（Custom Tags）

サイトマップが膨大になってしまい、どこのプロジェクトを進めていたか、どこに修正が必要だったか、管理が大変になる事がありますよね。VisualSitemapsでは一目でコンテンツ管理ができるように、カスタムタグを設定する事ができます。ページ１つ１つにはもちろん、セクションごとや、複数のページにわたってタグを設定する事も可能です。

コンテンツ＆SEOの計画を追加（Content & SEO Planner）

サイトマップの中に、制作における計画を文章で記すことも可能です。また、こちらにはGoogle DocsやSpread Sheet、画像ファイルなども追加する事ができるため、さらに詳細な計画や方針などにすぐにアクセスでき、プロジェクトを円滑に進める手助けをしてくれること間違いなしです。

他にもSEOにおけるキーワードなども記載しておくことで、そのプロジェクトでは何が重要なのか、何を意識して制作を進めたらいいか、一目でわかるようにすることもできます。

料金プラン

VisualSitemapsの料金プランには「Free（無料）」「Mini（ミニ）「Freelancer（フリーランサー）」「Team（チーム）」と、企業向けの「Agency（エージェンシー）」の５つがあります。

プランによって、作成できるサイトマップのページ数や作成できる階層の数に限度があったり、使用できる機能に制限があります。そのため、自分の使用頻度や使用用途に合わせてプランを選びましょう。

無料で使える範囲は以下の通りです：
　・サイトマップ作成：25ページ/月
　・1URLにつき作成できるページ数：25ページ
　・Flow Boards：無制限
　・ユーザー数：3人
　・作成できる階層数限度：2階層

詳細はVisualSitemapsの「Pricing」ページ（こちら）をご確認ください。

VisualSitemapsHPより

まとめ

Web制作において全体を見通すために重要なサイトマップ作成に特化した便利ツール「VisualSitemaps」をご紹介しました。「サイトマップは重要なものの、サイト制作に直接関わってくるものではないためできるだけ時間を掛けずに作りたい」、そんなデザイナーの願いを叶えてくれるVisualSitemaps。時短はもちろん、サイトマップを作成しておくことによって、さらに質の高いWeb制作を可能にしてくれること間違いなしです。
無料で25ページ分自動作成ができますし、「Flow Boards（サイトフロー手動作成）」は無制限で使用することが出来るため、是非試しに使用してみてください！