So2019.09.11こんにちは、UXIA部の曽です。情報設計の部分を担当しています。A.C.O.ではWebサイトのリニューアル案件を多く取り扱っているため、現状調査の一環として既存サイトのサイトマップ(サイト構造図)を作成するタスクが定期的に発生します。案件によってはサイトの規模が数百〜数千ページにのぼることも多く、手動で一つ一つのリンクを辿りながら作成する方法ではとても間に合いません。そのため、必然的に複数のアプリやツールを使って効率よくサイトマップを作ることになります。情報設計業務の経験を重ねていく中で、もともと社内で確立されていたサイトマップ作成方法をさらに一歩進化させることに成功したので、今回はその方法をご紹介します。この方法のおかげで、数千ページ級のサイトであっても実作業時間1分足らずでサイトマップを作成できるようになりました。サイトマップ作成に手間取っている方がいたら、ぜひ参考にしてください。サイトマップを実際に作りながら、方法を説明します。できあがりイメージ下記のような表形式のサイトマップを作っていきます。用意するもの以下の3つのツールを使用します。Plus指定したページからリンクを辿り続けて、サイト内のページをごっそり洗い出してくれるアプリです。リンク切れチェッカーとしてもよく使われています。このアプリで全ページのリストを作成し、CSVファイルとして出力します。Converterこれは私の自作ツールです。先ほど出力したCSVファイルを、ただの「URLの一覧」から、サイトの構造が分かる「サイトマップ」に変換します。ツールのファイル形式は、JavaScriptつきのHTMLファイルです。下記からダウンロードできるようにしておきました。Spreadsheet最後に、おなじみの表計算アプリです。ExcelやNumbersでもいいのですが、URL一つで共有できるのが便利なので、A.C.O.ではGoogleのものをよく使っています。後の作業に向けて、タイトル行や書式設定などをあらかじめ設定したものをテンプレートとして保存しておきます。下記に私が作成したテンプレートサンプルを公開していますので、複製してご使用ください。サイトマップを作成する手順をご紹介します。ウィンドウ上部にURLを入力して「Go」ボタンをクリックするとスキャンが開始します。ページ内のリンクをくまなく辿って、サイト内の全てのページを洗い出してくれます。スキャンにかかる時間はサイトの規模によって大きく異なります。小規模なサイトだと数秒で終わりますが、数千ページの規模になると数時間かかることもあります。長くかかりそうな場合はしばらく放置して他の作業をしましょう。Sketchのサイトの場合は4分ほどでスキャンが完了しました。スキャンが終わったら「Sitemap」タブに切り替えて、取得したデータをCSVとして出力し、次のステップへ進みます。ConverterでCSVデータを一気に加工する先ほど出力したCSVデータは、そのままではただの「URLの一覧」です。これをスラッシュの位置ごとに区切ることで、階層構造を可視化していきます。Spreadsheetで開いて編集することももちろん可能ですが、毎回まったく同じ置換、列の削除、追加...を繰り返すのが面倒です。1クリックで都合のいい形に加工できるように、変換スクリプトを作成しました。Converterです。CSVファイルをテキストエディタで開き、全データをコピー。Converterの画面左側のテキストエリアに貼り付けます。Convert」ボタンを押すと、都合の良い形に変換されて右側のテキストエリアに出力されます。あとは変換後のデータをクリップボードにコピーしたら、次のステップへ進みます。変換後のデータを全選択&コピーする手間も省きたかったので、1クリックで変換後のデータがクリップボードにコピーされるボタンもつけました。Copy」と書かれたボタンがそれです。SpreadsheetのテンプレートのA2セルに貼り付けます。データはタブ区切りテキストなので、そのまま貼り付けるだけで自動的にセルごとにデータが分かれてくれます。(一部セルがグレーになっているのは、テンプレートにあらかじめ設定してある条件付き書式のためです。詳しくは後述)この時点では順番がバラバラなので、最後に列A(URL)を基準に昇順で並び替えます。完成!これでサイトマップの完成です。できあがった実際のサイトマップはこちらから見ることができます。Plusのスキャン時間を除けば、ここまでの作業時間は30秒程度でしょうか。数百ページ規模のサイトのサイトマップを1分以内に作成できました。ページ数が増えてもかかる時間は基本的に同程度です。実際、最近8000ページを超えるサイトのサイトマップを上記の方法で作成しましたが、問題なく完了できました。Plusのスキャン時間はかなり長くかかりました。Spreadsheetの挙動が多少重くなります)サイトマップを使って、サイト構造の特徴を調査するサイトマップは完成しましたが、ほんとうに重要なのはここから。作成したサイトマップの特徴を使用してサイトの調査・分析を行うことが本当の目的です。このサイトマップを使ってどんなことを調査することができるのか少しだけご紹介します。サイト内のページ総数が分かる元々がURLのリストなので当たり前ですが、行数を見ればこのサイトにはページがいくつあるかがわかります。Plusがカウントしたページ数」です。PlusはリンクURLの数を数えているため、同じページが異なるURLで記述されている場合、重複してカウントする可能性があります。サイト上のどこからもリンクが張られていないページを見つけることはできません。サイトの階層構造が一目で分かる一番のポイントはここです。URLをスラッシュごとに分割したD列-J列には、あらかじめ「一つ上の行と同じ内容だった場合、文字色と背景色をグレーにする」という条件付き書式を設定してあります。そのため、データを流し込んで並び替えるだけで、親階層部分がグレーアウトし、サイトの階層構造が一目で分かるようになっています。plugins(プラグイン)があり、さらにその中にプラグインが3種類あることが分かります。このように階層構造を見て、たとえば「昔はニュースが多かったのに、2年前から急に減っているな」「ん、ここだけやたら階層が深いぞ」「ここはディレクトリだけあってページが無いんだな」といった具合にサイトの分析をすることができます。<title>タグが記載されているので、そこを見るだけでも何のページなのか大体分かります。A列にはそのページのURLがリンクとして記載されているので、「あれ、これはどんなページなんだろう?」と思ったら、A列をクリックして実際にどんなページなのかを見に行くことも簡単にできます。Compressorより引用じっくり分析するために、さくっと作ろうサイトマップを作るのは、あくまでも現状調査の「準備」に過ぎません。作ったサイトマップを見て、調査・分析していくのが「本番」です。その本番の方にかける時間や手間を捻出するためにも、サイトマップの作成自体は、さくっと終えたいものです。いうことで、1000ページ超の大規模サイトのサイトマップを1分で作成する方法をご紹介しました。いかがでしたでしょうか。サイトマップを作る必要のある方は、真似してみてください。良い方法をご存知の方がいらっしゃいましたら、ぜひご教示ください。私は根が面倒くさがりなので、上記のような、単純作業の手間や時間を減らす工夫をしています。他にもいくつか小技を持っているので、また機会があればご紹介したいと思います。OhashiA.C.O.では、大規模サイトの情報設計を一緒にしてくれる人を募集しています。sitemapお悩みや課題など、お気軽にお問合わせください。案件のご相談A.C.O.で一緒に働きませんか。作業効率アップツール1000ページ超の大規模サイトのサイトマップを1分で作成する方法...MindNode(マインドノード)で情報が発見につながり、「考える」仕事が変わる...差分比較ツールDeltaWalkerで、終わらないデバッグ作業を超速で解決...サイト調査にかかる時間を10分の1以下に削減する方法...Recommended作業時間を短縮する。insightsUXやデザインのトピックからグローバルレポートまで、最新の情報をお届けします月1–2回ぐらいで届けます。いつでもキャンセルできます。Policyをご覧くださいConnectお悩みのことがあれば、お気軽にご相談ください。東京A.C.O.は、世界中で素晴らしいデジタルプロダクトをつくるモンスター・ラボグループの一員です。