どーも、ネオごりら代表のKojiroooooooです。
ネオごりらのサイトをリリースしてもう１ヶ月を過ぎました。
記事も増えてきたし、ようやくブログサイトっぽくなってきたでしょうか？
さて、今回はサイトマップの制作ツールについてちょっと語ってみます。
「サイトマップ？ってなんやねん知らんわ。」って人は、とりあえずこの記事でも読んでみてください。
サイトマップとは？作り方からツール紹介までプロが解説します！｜大阪・東京のホームページ・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なら使い慣れている人も多いと思うので、最初にサイトマップを作るツールとしてはいいかと思います。
WEBで簡単フローチャート・サイトマップ制作「Cacoo」
次に紹介するのは、オンライン作図ツールの「Cacoo(カクー)」です。
Cacooはフローチャート、ワイヤフレーム、UML図、ネットワーク構成図等の各種図の作成に便利なツールです。
PCにインストールするタイプのソフトウェアではないので、Cacooのウェブサイトにアクセスしてログインするだけで使えます。
海外のツールですが、日本語でも使えます。
WEB上で使えるオンラインツールの利点を活かして、例えば他の制作メンバーやクライアントに提出する際も、データに共有設定にしてURLをメールやチャットツールで連絡する、とかのことができます。
作図の操作も簡単で、PowerPoint等の別のソフトを使った経験がある方ならマニュアル等を見なくとも感覚的に使えるでしょう(僕自身そうでした)。
また、デフォルトのテンプレートも豊富です。例えば下の図はサイトマップのテンプレート。これを設定して部分部分修正していけば、割とすぐにサイトマップを作れそうですね!
無料プランと有料プランがありますが、無料プランだと制作できるファイルや共有人数に制限があります。
フローチャートやワイヤーフレーム、プレゼン資料まで作れる | Cacoo(カクー)
https://cacoo.com/ja/
企画段階やロードマップ作りにも使える XMind
次に紹介するのは「XMind」。これは主にマインドマップを作成するツールです。
マインドマップとは、よくビジネスの場面で行われる手法で、頭が自然に行っている思考プロセスをノート等に記していくものです。
マインドマップとは、イギリスの著述家トニー・ブザン(Tony Buzan)が提唱した、自らの思考や発想を視覚的に捉えて脳内の情報を整理・解放し、新たな発想を得るための手法のことです。もともとは、「放射思考」と呼ばれる脳の仕組みがもとになっています。放射思考とは、ひとつの情報が別の情報と関連付けられ、またその情報が別の情報へと展開していくという流れを指し、中心の情報から放射状に思考が広がること。
マインドマップとは？今更聞けない書き方とおすすめツール | リクナビNEXTジャーナル
XMindを使ってのマインドマップ作成のサンプルはこんな感じになります。結構複雑なことができますね。
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つのツールで色々収まるので便利です。
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やスマートフォン上で動くソフトウェアです。なので動作を覚えたり大幅な修正がしたいとき、ツールの機能以上の使い方ができないため、「ああ、こここうしたいんだけどできねーよ!!」といった事態が起きることもあるかもしれません。
また、例えばとりあえずたたき台としてのサイトマップを、制作チーム内でサクッと用意しておきたい場合などは、「わざわざツールを使うってのも億劫だ・・・。」って気分になる時もあるかもしれません。
そんなときは、とりあえずノートに手書きで書いてしまうのもありだったりします。正直ツールを使っても手で書いても、よほど複雑なサイトマップででないかぎり見た目に違いはそこまでありません。
シャープペンと消しゴムとノートがあればいつでもどこでも場所を選ばずできますし、書き方も割と自由ですし。
書いた後はそれをスマホで撮影して、チーム内のグループチャットにでもアップしておけば共有としては充分かとも思います。
ただ、社内の制作チームだけで共有するなら手書きのサイトマップでもいいっちゃいいですが、クライアントや社内の偉い人に共有する場合は、流石に「舐めてんのか!?」って思われるかもしれないので、やっぱ初めから手書き以外のツールを使った方が二度手間にならずいいかもそれません。
ちなみに、僕は字や手書きの作図が壊滅的にヘタクソなので、チーム内でも手書きはやりません・・・。
以下、ネットで探してみた手書きのサイトマップ。手書きでやる人はいるといえばいるようです。
出展: 手書きでワイヤーフレームとサイトマップを作ってみた | 思考変換ブログ
出展: どんなWEBサイトを作るか決まったらサイトの構成図（コンテンツマップ）を作ろう – てふてふさんぽ
次回はワイヤーフレームの書き方とおすすめツールを紹介します、お楽しみに!!
