プレゼンとか打ち合わせとかで使うサイトマップを簡単に作りたい！

ウェブサイトを新規構築する仕事でクライアントにサイト構造を説明すべく、ツリー型のサイトマップを紙の書類で提出する訳ですが、Adobe Illustrator で作ってしまうとデータの再利用ができなくて勿体ないので何とかならんかな？と考えています。

Google に食わせるサイトマップじゃなくて、プレゼンとか打ち合わせとかで使う人様に見せるサイトマップの簡単な作り方を模索中…。

この記事の目次非表示

Adobe Illustrator でサイトマップを作る時の問題点
サイトマップデータを利用してやりたい事
サイトマップの資料はどんな形式・ソフトで作ると再利用しやすいか？
サイトマップを描くのに使えそうなソフト
参考にさせてもらったページ

Adobe Illustrator でサイトマップを作る時の問題点

Illustrator でサイトマップを作ると見た目は綺麗にできるんですが、次の問題点があります。

ひとコマ（ページ）の追加・削除で隣接するオブジェクトの移動が大変。
テキストとかが抽出しにくいので、データの再利用がやりにくい。
他の人が修正する時、Illustrator を持っているとは限らない。

サイトマップデータを利用してやりたい事

サイトマップからページの雛形を作りたい。
- ページタイトル・パン屑リスト・ナビゲーションリンクなんかも書き出したい。
サイトを制作する時は、進捗管理用ページとしてテーブルにて一覧表を出力したい。
- ページ名でソートしたい。
- ページ ID は付けておくと便利かも？

サイトマップの資料はどんな形式・ソフトで作ると再利用しやすいか？

サイトマップの資料はどんな形式・ソフトで作ると再利用しやすいか考える。

マインドマップ

マインドマップソフトを使う方法。フリーソフトが沢山ありそう。ただ、枝の表示順とか、任意の位置にオブジェクトを配置するとか、見た目のコントロールが難しい。

Excel, Power Point

Microsoft Office は定番なので捨てがたい。でも、サイトマップが書きづらいし、出来れば、フリーのソフトが良いなぁ。 TSV 書き出しとかを考えるとエクセルが良いかも？

テキストファイル

こんな感じのテキストファイルを使う？マインドマップから書き出せんかな？

トップページ      index/html
├ 企業情報       company/index.html
│ ├ 会社概要    company/profile.html
│ └ 沿革        company/history.html
├ 製品情報       product/index.html
│ └ ○○製品    product/marumaru.html