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

こんにちは、情報アーキテクトの曽です。主に情報設計の部分を担当しています。

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

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

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

できあがりイメージ

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

用意するもの

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

Integrity Plus

Sitemap Converter

Google Spreadsheet

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

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

作業手順

では実際に 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. 完成！

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

できあがった実際のサイトマップはこちらからご覧いただけます。

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

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

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

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

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

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

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

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

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

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

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

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

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

じっくり分析するために、さくっと作ろう

サイトマップを作るのは、あくまでも現状調査の「準備」に過ぎません。作ったサイトマップを見て、調査・分析していくのが「本番」です。その本番の方にかける時間や手間を捻出するためにも、サイトマップの作成自体は、さくっと終えたいものです。

ということで、1000ページ超の大規模サイトのサイトマップを1分で作成する方法をご紹介しました。いかがでしたでしょうか。サイトマップを作る必要のある方は、真似してみてください。あるいは、より良い方法をご存知の方がいらっしゃいましたら、ぜひご教示ください。

私は根が面倒くさがりなので、上記のような、単純作業の手間や時間を減らす工夫をしています。他にもいくつか小技を持っているので、また機会があればご紹介したいと思います。

Cover illustration by Megumi Ohashi, design by Hisashi Yoshitake

• #情報設計（IA）
• #リサーチ
• #Tips