ウェブサイトを新規構築する仕事でクライアントにサイト構造を説明すべく、ツリー型のサイトマップを紙の書類で提出する訳ですが、Adobe Illustrator で作ってしまうとデータの再利用ができなくて勿体ないので何とかならんかな?と考えています。
Google に食わせるサイトマップじゃなくて、プレゼンとか打ち合わせとかで使う人様に見せるサイトマップの簡単な作り方を模索中…。
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
### HTML のリスト形式
わかりにくそう。
サイトマップを描くのに使えそうなソフト
———————————————————————-
[FreeMind](http://sourceforge.jp/projects/freemind/)
: 無料。Mac 版もある。
: テキストで書き出しできる。
: デザインはほとんど変更できない。
———————————————————————-
[XMind](http://jp.xmind.net/)
: 無料。Windows, Mac, Linux 版がある。
: テキストで書き出しできる。
———————————————————————-
[Dia](http://live.gnome.org/Dia)
: Windows and Linux
: フローチャート用?
: [ここ](http://dia-installer.de/index_en.html) から Windows のインストーラーがダウンロード出来る
: 日本語が使えない
———————————————————————-
[OmniGraffle for Mac](http://www.omnigroup.com/products/omnigraffle/)
: Mac のみで有料
: 単体ではテキストの書き出し機能がないみたい。OmniOutliner 形式には書き出せる。
参考にさせてもらったページ
———————————————————————-
– [泥臭いWEBの底から~WEBディレクター覚書~ 20070709](http://hamkatsuya.blog104.fc2.com/blog-date-20070709.html)
– [フォルダ内のファイル情報を出力するフリーソフト Filistry を使ってみた – まりふのひと](http://d.hatena.ne.jp/ogohnohito/20111031/p1)
– [またマインドマップネタ…マインドマップのフリーソフト「XMind」が良い!: ●●●プロデューサーズ!](http://producerscoltd.seesaa.net/article/127591853.html)
– [無料マインドマップソフト対決!『XMind』 VS 『Freemind』 – ライフハックブログKo’s Style](http://kosstyle.blog16.fc2.com/blog-entry-869.html)
– [サイトマップの作り方](http://www.shoshinsha.com/hp/tools/sitemap.htm)
– [窓の杜 – 【REVIEW】Webサイト全体の階層構造つきサイトマップを簡単作成「パッとHTML自動目次生成」](http://www.forest.impress.co.jp/docs/review/20090917_315858.html)
– [サイト調査:指定したサイトのサイトマップを自動生成 | コリス](http://coliss.com/articles/build-websites/preparation/88.html)
ありがとうございます!