サイトマップを作ってみる

固定ページや投稿記事など関連が複雑化してきたので、ここらでサイトマップでも作って記事構成をルール化してみたいと思う。Inkscapeなどのお絵描きソフトで作っても良いけど、折角なのでワイヤーフレーム作成系のソフト（サービス）で作ってみることにした。はじめにcacooを試してみたけど、オンラインのドローソフトなだけでやれることはInkscapeの方が多かったのでやめた。ただWEBデザイン系のテンプレートが豊富なので、楽をしたい人にはお勧め（チャットが使えるのでチーム開発向けなのかも）。

ドローソフトではなくワイヤーフレーム作成に特化したものが良いなーと探していたところ、Mock Flowを発見。日本語対応はしていないけれど、かなり感覚的に使えて好感触。ただ、ただ……作り込んでるうちに細かい箇所まで設定したくなり、結局Inkscapeで作成することにしました。(笑)

準備

デザインはcacooやMock Flowのテンプレートを参考に。また、以下のページで凄くハイセンスなサイトマップが紹介されていたのでこれも参考に。

コリス

 

421 users

Web制作の参考になる！サイトマップやハイレベルサイトマップ、フローチャートなど...

他の人のサイトマップやフローチャートってなかなか見る機会がありませんよね。 そんな時は世界中のクリエイターが集まるDribbbleです。Dribbbleからサイトマップやハイレベルサイトマップ、フロー

この中で、UX KITSという海外のショップで有料販売されていたテンプレートがとても格好いいので似たようなものを目指そうと思う（cacooでも似たようなものがあった）。

アイコンはUI TitlesからDLした。個人でも商用でも、クライアントのプロジェクトでも無料らしい。.aiファイルのベクター画像がセットになっているため、これをInkscapeで開いて使用する。

作成

紙でさーっとデザイン描いて、Inkscapeで作り込み。まずさっきDLしたアイコンをInkscapeで読み込んでみる。.aiファイルはIllustratorの専用拡張子だが、PDF形式として読み込むことが可能らしい。読み込みに際して以下のPDFインポートダイアログが現れたので、初期設定のままOKとした。

まずui_titleのオブジェクト色を変更。Mock Flowで良かったものをわざわざ自作しようとしているのでこだわりたい。

完成。色んなサイトマップを参考にして良い案を寄せ集めた。Inkscapeのスキルも上がった気がする（一番作るのが難しかったモノはファイルアイコン）。