• コーディング ファクトリーHOME
  • Coding Methodology
  • 第115回 直感的な操作でサイトマップやフロー図を作成できる「FlowMapp」の活用

コーディングメソドロジー

第115回 直感的な操作でサイトマップやフロー図を作成できる「FlowMapp」の活用

ツリー形式のサイトマップやフロー図を作るとき、PowerPoint やExcel を使う人は多いのではないでしょうか。しかし、サイト構造やタスクに変動があったとき、要素の追加や変更、それらを結ぶコネクタ(線)の修正などに手間をとられることがあります。今回は、ユーザビリティが高く、直感的な操作で簡単にサイトマップやフロー図を作成できる「FlowMapp」というツールをご紹介します。

■ 簡単なページ構造も追記できる「Sitemap」機能

■ 簡単なページ構造も追記できる「Sitemap」機能

FlowMapp は、サイトに登録(メールアドレス・パスワード)後、ログインしてプロジェクト名を入力すれば、すぐに利用できます。プロジェクトは2つの機能、「sitemap(サイトマップ)」と「user flow(フロー図)」でタブが分かれています。(図1-①)

「sitemap」では、図1-②のようなツリー状のサイトマップを作成することができます。最初の選択画面でトップページのビジュアルを選んだら、その後はトップページにカーソルを合わせて「+」をクリックするだけで、ページの追加が簡単にできます。また、ビジュアル面でも、そのページがどのようなページなのか直感的にわかりやすくなっています。図1-③をクリックすると、図2 のようなページ詳細を入力できる画面が表示されます。

Description(図2-①)

Description(図2-①)

このページ関する情報を入力します。案件に応じて、meta 情報・ワイヤー・指示書・その他資料の格納場所などをメモしておくと、すぐに確認ができるので便利です。デザイン画像を貼り付けることも可能です。

Page structure(図2-②)

ページ構造を縦積みに入力します。どんなコンテンツが入るページなのか一目でわかります。

Discussion(図2-③)

共有しているメンバーと進捗確認や、実装についてのディスカッションができます。コミュニケーションツールを別で使用していると、過去のコメントを探すのに時間がかかったりしますが、サイトマップとコミュニケーションツールをひとつにまとめることで、すばやくページ毎の状況を把握することができます。

■ コネクタの自動調整が便利な「user flow」機能

■ コネクタの自動調整が便利な「user flow」機能

もう一つの機能、フロー図が作成できるuser flow の特徴は、やはり操作性です。

● コネクタを結んだ先に、自動的に矢印マークがつく。(図3-①)

● フローが追加になったとき、コネクタ上に項目をドラッグすると割り込める。
(自動的にコネクタが2 つに分かれ調整される。)

● フローを移動させたいときに、コネクタも一緒についてくる

これらの意外と手間がかかる操作が自動になっているので、時間の短縮につながります。

図3は図 1 の sitemap で作成したページに紐づいた、ページの作業フローを図にしたものです。このように特記事項があるページに関して、2 つの機能を連動して使うこともできます。また作成したサイトマップの印刷、PNG 画像や PDF としてダウンロードすることも可能です。
複数のプロジェクトを管理する場合は有料版となりますが、1 プロジェクトだけなら無料版が使用できますので、ぜひ試してみてください。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム