1000ページ超の大規模サイトのサイトマップを1分で作成する方法

A.C.O.ではWebサイトのリニューアル案件を多く取り扱っているため、現状調査の一環として既存サイトのサイトマップ（サイト構造図）を作成するタスクが定期的に発生します。案件によってはサイトの規模が数百〜数千ページにのぼることも多く、手動で一つ一つのリンクを辿りながら作成する方法ではとても間に合いません。そのため、必然的に複数のアプリやツールを使って効率よくサイトマップを作ることになります。

情報設計業務の経験を重ねていく中で、もともと社内で確立されていたサイトマップ作成方法をさらに一歩進化させることに成功したので、今回はその方法をご紹介します。この方法のおかげで、数千ページ級のサイトであっても実作業時間1分足らずでサイトマップを作成できるようになりました。サイトマップ作成に手間取っている方がいたら、ぜひ参考にしてください。

今回はサンプルとして、Webデザインの業界ではおなじみのアプリ「Sketch」の公式サイト sketch.com のサイトマップを実際に作りながら、方法を説明します。

できあがりイメージ

下記のような表形式のサイトマップを作っていきます。

用意するもの

以下の3つのツールを使用します。

Integrity Plus

指定したページからリンクを辿り続けて、サイト内のページをごっそり洗い出してくれるアプリです。リンク切れチェッカーとしてもよく使われています。このアプリで全ページのリストを作成し、CSVファイルとして出力します。

Integrity Plus (※Mac版のみ)

Sitemap Converter

これは私の自作ツールです。先ほど出力したCSVファイルを、ただの「URLの一覧」から、サイトの構造が分かる「サイトマップ」に変換します。

ツールのファイル形式は、JavaScriptつきのHTMLファイルです。下記からダウンロードできるようにしておきました。（リンク先、右上のダウンロードボタンから保存してください）

Sitemap Converter

Google Spreadsheet

最後に、おなじみの表計算アプリです。ExcelやNumbersでもいいのですが、URL一つで共有できるのが便利なので、A.C.O.ではGoogleのものをよく使っています。

後の作業に向けて、タイトル行や書式設定などをあらかじめ設定したものをテンプレートとして保存しておきます。下記に私が作成したテンプレートサンプルを公開していますので、複製してご使用ください。

Sitemap Template – Google Spreadsheet

作業手順

では実際に sketch.com のサイトマップを作成する手順をご紹介します。

1. Integrity Plus で、サイト内のページを全て洗い出す

まずはIntegrity plusを開きます。ウィンドウ上部にURLを入力して「Go」ボタンをクリックするとスキャンが開始します。ページ内のリンクをくまなく辿って、サイト内の全てのページを洗い出してくれます。

スキャンにかかる時間はサイトの規模によって大きく異なります。小規模なサイトだと数秒で終わりますが、数千ページの規模になると数時間かかることもあります。長くかかりそうな場合はしばらく放置して他の作業をしましょう。Sketchのサイトの場合は4分ほどでスキャンが完了しました。

スキャンが終わったら「Sitemap」タブに切り替えて、取得したデータをCSVとして出力し、次のステップへ進みます。

2. Sitemap ConverterでCSVデータを一気に加工する

先ほど出力したCSVデータは、そのままではただの「URLの一覧」です。これをスラッシュの位置ごとに区切ることで、階層構造を可視化していきます。

CSVファイルなので、そのままGoogle Spreadsheetで開いて編集することももちろん可能ですが、毎回まったく同じ置換、列の削除、追加…を繰り返すのが面倒です。なので、1クリックで都合のいい形に加工できるように、変換スクリプトを作成しました。それがこのSitemap Converterです。

CSVファイルをテキストエディタで開き、全データをコピー。Sitemap Converterの画面左側のテキストエリアに貼り付けます。「2. Convert」ボタンを押すと、都合の良い形に変換されて右側のテキストエリアに出力されます。

あとは変換後のデータをクリップボードにコピーしたら、次のステップへ進みます。変換後のデータを全選択＆コピーする手間も省きたかったので、1クリックで変換後のデータがクリップボードにコピーされるボタンもつけました。「4. Copy」と書かれたボタンがそれです。

3. Google Spreadsheetに貼り付ける

コピーしたデータをGoogle SpreadsheetのテンプレートのA2セルに貼り付けます。

データはタブ区切りテキストなので、そのまま貼り付けるだけで自動的にセルごとにデータが分かれてくれます。（一部セルがグレーになっているのは、テンプレートにあらかじめ設定してある条件付き書式のためです。詳しくは後述）

この時点では順番がバラバラなので、最後に列A（URL）を基準に昇順で並び替えます。

4. 完成！

これでサイトマップの完成です。

できあがった実際のサイトマップはこちらから見ることができます。

Sketch.com – Sample sitemap

Integrity Plusのスキャン時間を除けば、ここまでの作業時間は30秒程度でしょうか。数百ページ規模のサイトのサイトマップを1分以内に作成できました。

なお、ページ数が増えてもかかる時間は基本的に同程度です。実際、最近8000ページを超えるサイトのサイトマップを上記の方法で作成しましたが、問題なく完了できました。（ただし、Integrity Plusのスキャン時間はかなり長くかかりました。またGoogle Spreadsheetの挙動が多少重くなります）

サイトマップを使って、サイト構造の特徴を調査する

サイトマップは完成しましたが、ほんとうに重要なのはここから。作成したサイトマップの特徴を使用してサイトの調査・分析を行うことが本当の目的です。このサイトマップをつかってどんなことを調査することができるのか少しだけご紹介したいと思います。

サイト内のページ総数が分かる

元々がURLのリストなので当たり前ですが、行数を見ればこのサイトにはページがいくつあるかがわかります。

1行目はタイトル行なので、最終行の行番号「318」から1を引いた「317※」が、 sketch.com の総ページ数ですね。

※ この数字はあくまで「Integrity Plusがカウントしたページ数」です。Integrity PlusはリンクURLの数を数えているため、同じページが異なるURLで記述されている場合、重複してカウントする可能性があります。また、サイト上のどこからもリンクが張られていないページを見つけることはできません。

サイトの階層構造が一目で分かる

一番のポイントはここです。URLをスラッシュごとに分割したD列-J列には、あらかじめ「一つ上の行と同じ内容だった場合、文字色と背景色をグレーにする」という条件付き書式を設定してあります。そのため、データを流し込んで並び替えるだけで、親階層部分がグレーアウトし、サイトの階層構造が一目で分かるようになっています。

たとえば赤枠部分を見ると、 extensions（拡張機能）の中に integrated-apps（アプリ連携）と plugins（プラグイン）があり、さらにその中にプラグインが3種類あることが分かります。

このように階層構造を見て、たとえば「昔はニュースが多かったのに、2年前から急に減っているな」「ん、ここだけやたら階層が深いぞ」「ここはディレクトリだけあってページが無いんだな」といった具合にサイトの分析をすることができます。

気になるページは実際にブラウザで確認する

B列にはページの <title>タグが記載されているので、そこを見るだけでも何のページなのか大体分かります。また、A列にはそのページのURLがリンクとして記載されているので、「あれ、これはどんなページなんだろう？」と思ったら、A列をクリックして実際にどんなページなのかを見に行くことも簡単にできます。