カテゴリー: WEBサイト制作・企画について の記事

サイトマップをつくる!制作するためのツールを、手書き含めていくつかまとめてみました。

WEBサイト制作・企画について

サイトマップをつくる!制作するためのツールを、手書き含めていくつかまとめてみました。

公開日:

どーも、ネオごりら代表のKojiroooooooです。
ネオごりらのサイトをリリースしてもう1ヶ月を過ぎました。
記事も増えてきたし、ようやくブログサイトっぽくなってきたでしょうか?

さて、今回はサイトマップの制作ツールについてちょっと語ってみます。
「サイトマップ?ってなんやねん知らんわ。」って人は、とりあえずこの記事でも読んでみてください。

サイトマップとは?作り方からツール紹介までプロが解説します!|大阪・東京のホームページ・WEB制作会社ジーピーオンライン

https://www.gpol.co.jp/blog/46

※サイトマップとは、XMLサイトマップとHTMLサイトマップ(サイトマップページ)がありますが、それらはサイト制作が完了してウェブサイトが公開されてからのものになります。今回の記事で扱うのは、ウェブサイトの制作段階においてのサイトマップ図の作り方です。

コンテンツの原稿を起こす作業に入る前に、 どのようなページが必要か洗い出す必要があります。 その手段として、サイトマップの制作を行います。

サイトマップの考え方 | 制作担当者が語る。経験から得た使えるネタ帳!

サイトマップ図を制作するのに便利なツール(WEBサービスとかソフトウェアとか)を、機能や使い勝手なんかを交えて簡単に紹介します。
それじゃいってみましょう。

定番はやっぱ「Microsoft PowerPoint」でしょ?

最初に紹介するツールは、資料制作・プレゼンツールの定番、Microsoft社のPowerPoint。
スライドショーとかでプレゼン資料をつくるのに便利ですよね。
これに関しては有名なんで、ツールの機能自体はあんまり説明いらないかな?
一応、以下に公式リンクを貼っておきます。

Microsoft PowerPoint | プレゼンテーション資料作成 | Powerpoint 無料

https://www.microsoft.com/ja-jp/microsoft-365/powerpoint

ちなみに、ネオごりらのサイトのサイトマップ図は、このツールで作りました。
PowerPointなら、図形や直線・曲線の挿入が直感的にできるので便利ですね。

ネオごりらのサイトマップ
ネオごりらのサイトマップ図。これくらいのサイトのページ規模ならPowerPointでサクッと作れます。

PowerPointなら使い慣れている人も多いと思うので、最初にサイトマップを作るツールとしてはいいかと思います。

WEBで簡単フローチャート・サイトマップ制作「Cacoo」

次に紹介するのは、オンライン作図ツールの「Cacoo(カクー)」です。

Cacooはフローチャート、ワイヤフレーム、UML図、ネットワーク構成図等の各種図の作成に便利なツールです。
PCにインストールするタイプのソフトウェアではないので、Cacooのウェブサイトにアクセスしてログインするだけで使えます。
海外のツールですが、日本語でも使えます。

WEB上で使えるオンラインツールの利点を活かして、例えば他の制作メンバーやクライアントに提出する際も、データに共有設定にしてURLをメールやチャットツールで連絡する、とかのことができます。

作図の操作も簡単で、PowerPoint等の別のソフトを使った経験がある方ならマニュアル等を見なくとも感覚的に使えるでしょう(僕自身そうでした)。

また、デフォルトのテンプレートも豊富です。例えば下の図はサイトマップのテンプレート。これを設定して部分部分修正していけば、割とすぐにサイトマップを作れそうですね!

Cacooのサイトマップテンプレート
Cacooのデフォルトテンプレートの1つ。これちょっと編集すればそのまま使えますね!!

無料プランと有料プランがありますが、無料プランだと制作できるファイルや共有人数に制限があります。

フローチャートやワイヤーフレーム、プレゼン資料まで作れる | Cacoo(カクー)

https://cacoo.com/ja/

企画段階やロードマップ作りにも使える XMind

次に紹介するのは「XMind」。これは主にマインドマップを作成するツールです。
マインドマップとは、よくビジネスの場面で行われる手法で、頭が自然に行っている思考プロセスをノート等に記していくものです。

マインドマップとは、イギリスの著述家トニー・ブザン(Tony Buzan)が提唱した、自らの思考や発想を視覚的に捉えて脳内の情報を整理・解放し、新たな発想を得るための手法のことです。もともとは、「放射思考」と呼ばれる脳の仕組みがもとになっています。放射思考とは、ひとつの情報が別の情報と関連付けられ、またその情報が別の情報へと展開していくという流れを指し、中心の情報から放射状に思考が広がること。

マインドマップとは?今更聞けない書き方とおすすめツール | リクナビNEXTジャーナル

XMindを使ってのマインドマップ作成のサンプルはこんな感じになります。結構複雑なことができますね。

Father’s Day | Give your father a hug. Say thank you to your…

Father's Day | Give your father a hug. Say thank you to your…

出展: https://www.flickr.com/photos/142471992@N07/27685609142/

このXMindですが、機能が豊富なのでマインドマップ以外にもロードマップやフローチャート、サイトマップも作成可能だったりします。

また、マインドマップはウェブサイトやアプリケーションの企画・設計段階でも多々行うものです。
なので、企画段階ではxmindでマインドマップやロードマップを作成し、実際のウェブサイトのデザイン段階になったらまたxmindを使ってサイトマップを作成する、といったことを行えば、1つのツールで色々収まるので便利です。

Mac OS版のXMindのテンプレート一覧。
Mac OS版のXMindのテンプレート一覧。ツリー構造のやつを選べばサイトマップを作りやすそうです。

PCダウンロードはこちらから。

ダウンロード | XMind

https://jp.xmind.net/download/

あ、スマートフォンアプリ版もあるようです。僕は使ったことありませんが。

「XMind」をApp Storeで

https://apps.apple.com/jp/app/xmind/id1286983622

XMind マインドマップ – Google Play のアプリ

https://play.google.com/store/apps/details?id=net.xmind.doughnut

さて次で最後です。

やっぱり「手書き」が自由度最強じゃないかな?

さて、最後ですが自由度最強可能性無限大のツールを紹介します。
それは、「手書き」です!!!

先述した3ツールはあくまでPCやスマートフォン上で動くソフトウェアです。なので動作を覚えたり大幅な修正がしたいとき、ツールの機能以上の使い方ができないため、「ああ、こここうしたいんだけどできねーよ!!」といった事態が起きることもあるかもしれません。

また、例えばとりあえずたたき台としてのサイトマップを、制作チーム内でサクッと用意しておきたい場合などは、「わざわざツールを使うってのも億劫だ・・・。」って気分になる時もあるかもしれません。

そんなときは、とりあえずノートに手書きで書いてしまうのもありだったりします。正直ツールを使っても手で書いても、よほど複雑なサイトマップででないかぎり見た目に違いはそこまでありません。
シャープペンと消しゴムとノートがあればいつでもどこでも場所を選ばずできますし、書き方も割と自由ですし。

書いた後はそれをスマホで撮影して、チーム内のグループチャットにでもアップしておけば共有としては充分かとも思います。

ただ、社内の制作チームだけで共有するなら手書きのサイトマップでもいいっちゃいいですが、クライアントや社内の偉い人に共有する場合は、流石に「舐めてんのか!?」って思われるかもしれないので、やっぱ初めから手書き以外のツールを使った方が二度手間にならずいいかもそれません。

ちなみに、僕は字や手書きの作図が壊滅的にヘタクソなので、チーム内でも手書きはやりません・・・。

以下、ネットで探してみた手書きのサイトマップ。手書きでやる人はいるといえばいるようです。

手書きでワイヤーフレームとサイトマップを作ってみた

出展: 手書きでワイヤーフレームとサイトマップを作ってみた | 思考変換ブログ

https://www.tefutefusanpo.net/entry/2016/09/30/160412

出展: どんなWEBサイトを作るか決まったらサイトの構成図(コンテンツマップ)を作ろう – てふてふさんぽ

次回はワイヤーフレームの書き方とおすすめツールを紹介します、お楽しみに!!

著者情報: Kojirooooooo

ネオごりらの代表。 コミュ障で陰キャでぼっちで引きこもりがちで社会適応能力に欠けるが、ITやプログラミングを少し覚えてなんとか生きている。

この著者の記事一覧

この記事の登録タグ一覧