- Coding Methodology
- 第115回 直感的な操作でサイトマップやフロー図を作成できる「FlowMapp」の活用
第115回 直感的な操作でサイトマップやフロー図を作成できる「FlowMapp」の活用
ツリー形式のサイトマップやフロー図を作るとき、PowerPoint やExcel を使う人は多いのではないでしょうか。しかし、サイト構造やタスクに変動があったとき、要素の追加や変更、それらを結ぶコネクタ（線）の修正などに手間をとられることがあります。今回は、ユーザビリティが高く、直感的な操作で簡単にサイトマップやフロー図を作成できる「FlowMapp」というツールをご紹介します。
■ 簡単なページ構造も追記できる「Sitemap」機能
FlowMapp は、サイトに登録（メールアドレス・パスワード）後、ログインしてプロジェクト名を入力すれば、すぐに利用できます。プロジェクトは2つの機能、「sitemap（サイトマップ）」と「user flow（フロー図）」でタブが分かれています。（図1-①）
「sitemap」では、図1-②のようなツリー状のサイトマップを作成することができます。最初の選択画面でトップページのビジュアルを選んだら、その後はトップページにカーソルを合わせて「＋」をクリックするだけで、ページの追加が簡単にできます。また、ビジュアル面でも、そのページがどのようなページなのか直感的にわかりやすくなっています。図1-③をクリックすると、図2 のようなページ詳細を入力できる画面が表示されます。
Description（図2-①）
このページ関する情報を入力します。案件に応じて、meta 情報・ワイヤー・指示書・その他資料の格納場所などをメモしておくと、すぐに確認ができるので便利です。デザイン画像を貼り付けることも可能です。
Page structure（図2-②）
ページ構造を縦積みに入力します。どんなコンテンツが入るページなのか一目でわかります。
Discussion（図2-③）
共有しているメンバーと進捗確認や、実装についてのディスカッションができます。コミュニケーションツールを別で使用していると、過去のコメントを探すのに時間がかかったりしますが、サイトマップとコミュニケーションツールをひとつにまとめることで、すばやくページ毎の状況を把握することができます。
■ コネクタの自動調整が便利な「user flow」機能
もう一つの機能、フロー図が作成できるuser flow の特徴は、やはり操作性です。
● コネクタを結んだ先に、自動的に矢印マークがつく。（図３-①）
● フローが追加になったとき、コネクタ上に項目をドラッグすると割り込める。
（自動的にコネクタが2 つに分かれ調整される。）
● フローを移動させたいときに、コネクタも一緒についてくる
これらの意外と手間がかかる操作が自動になっているので、時間の短縮につながります。
図３は図 1 の sitemap で作成したページに紐づいた、ページの作業フローを図にしたものです。このように特記事項があるページに関して、2 つの機能を連動して使うこともできます。また作成したサイトマップの印刷、PNG 画像や PDF としてダウンロードすることも可能です。
複数のプロジェクトを管理する場合は有料版となりますが、1 プロジェクトだけなら無料版が使用できますので、ぜひ試してみてください。
