技術は私たちの力。技術は私たちの楽しみ。 Creative Developer BLOG 技術部ブログ
Technology is our strength. Technology is what we enjoy.

使い勝手のよいサイト構成図(サイトマップ)がほしい!

2017-05-12 勉強会
サイト構成図(サイトマップ
弊社のWEBディレクターのひとりがサイトマップ作成で
早くて簡単に分かり易いマップが作れないはかを悩んでいるようでした。

現状は、サイト規模に応じて、エクセル、パワーポイント、イラストレーター又は市販のマイドマップで作成しているようです。

なかでも市販マイドマップのソフトを愛用しているようですが、10年前のソフト。そろそろバージョンアップしないと使えない品物です。
さらに言えば、結構高価なため、1ライセンスしか所有しておらず、
他のデバイスでは修正できないのが難点。要は共有できない・・・・



そこで、作成しやすくて見やすいサイトマップはないかとは旅(WEB)に出てみました。

作成しやすくて見やすいサイトマップはないか・・・・・・

しかし・・・調べるや否や、いきなり問題にぶち当たりました。
検索ワード「サイトマップ」で検索すると、sitemap.xmlが上位を占めており
そもそも、制作する上でのサイトマップとは、用語が違うのか?
試行錯誤した結果、「サイト構成図」がマッチングすることがわかりました。

主な検索キーワード

サイト構成図
ディレクトリマップ
サイトツリー
マッピング
マインドマップ

で調べたところ、全く主観ですが、2つ良さげなサイトマップツールに辿りつきました。

▼クラウドのサイトマップ作成ツール

SlickPlan

https://slickplan.com/

https://interparktest.slickplan.com/sitemap/edit/cjcim6l

BASICプラン $8.99/month(月約1,000円)のお試しで
登録してみました。

SlickPlan作成画面

作成画面は、日本語が対応してないのが残念ですが、直感的に触れて、非常につくりやすい。

Cacoo

https://cacoo.com
Web上でワイヤーフレーム、サイトマップ、ネットワーク図等の図を簡単に作成できる
有名オンラインサービス。
「Cacoo」は 「Backlog」でお馴染みのヌーラボが提供元。

Cacoo操作画面と特徴

図の作成用途が多彩で、いろいろとはじめは戸惑いますが、慣れると大変便利ではないかと思います。
今回はフリーだったので、4シートまでしか作成できないですが、日本語ページあるので心強い。エクスポートはフリー版は、PNGのみです。
プラスプラン (月約454円)だと 1000シートまで作成可能 エクスポートの種類も豊富です。
そして、図を共有して使えるそうです。

個人的感想

どちらも、直感的ですが、サイトマップに特化した形式だと、「SlickPlan」のほうが、パターンは決まってますが、シンプルで使いやすい。
コストを考えると「Cacoo」の方が、安く、図の用途が多く、使い勝手がいいです。
サイトマップ以外の用途でも使うなら、「Cacoo」がオススメです。(個人的感想)

▼でもやっぱり、お金がかかるのは、ちょっと・・・

無料のテンプレートは落ちてないか調べてみました。

UI TILES


https://pixelbuddha.net/ui-tiles/

72 Miniature Wireframes (AI, PSD, Sketch)
72種類のAI, PSD, Sketchのテンプレートがダウンロードできます。
デザインにもこだわってるので、サイトマップやワイヤーフレームです。
UIを意識した図をつくるなら、オススメです。

「UI TILES」は「PixelBuddha」が提供

テンプレート作成できる無料UIキットなどで有名な海外サイト「PixelBuddha」が提供しています。

https://pixelbuddha.net/

▼時間がないときは、エクセルで作るのが一番!

時間をかけずに、早くつくるのは、やっぱりエクセルかなと思います。
セルに直接文字が入れることができるので、分類は早く、切り貼りできる。
ただオートシェイプを使うと、ちょっと面倒になる。
ためしに、上記が改善できるサイトマップのテンプレートをエクセルで作ってみました。

サンプルタイプ1 図1

セルで第4層まで分けたサイト構成図を作成した。
入力は素早くでき、構造がわかります。

サンプルタイプ1 図2

図1の文字をオートシェイプに読み込せた図です。
セルの数式を読み込まるだけで、瞬時に型ができます。

サンプルタイプ1 図3

あとはこれに化粧をして完成です。

サンプルタイプ2 図1

タイプ1にちょっとだけ、自動生成したらもっと素早くできるのでは?
と思い、マクロを使用。
ボタンを押すと、図が生成されます。
ここで1~4層の項目を順番に生成し、貼り付け用シートで貼り付けます。

サンプルタイプ2 図2

貼り付け用シートに項目を貼り付け、体裁を整えて完成です。
マクロの知識が乏しいので、よくわかりませんが、ボタン一つでセルに並んだ
サイト構成文字を図することは可能と思います。
これは、また、知識あるスタッフに託したいを思います。

最後に

当初の目的は、うちのデレクターのためにと意気込んだのですが、
いろいろと調べてみた結果、一番は、自分が使い慣れているツールで質の高いパフォーマンスが発揮できれば、どんな作成ツールでもいいのかなと感じました。

ご参考程度で流していただけると幸いです。
記事一覧へ

Member

システム部開発ユニット
システム部SIユニット
クリエイティブ戦略部デザインユニット
クリエイティブ戦略部プランニングユニット
管理部