【無料】ホームページのサイトツリーを超簡単に作成できる「FlowMapp」の使い方を解説

自社のホームページを制作もしくはリニューアルしたいものの、社内にリソースがなくWeb制作会社に外注しようと検討している企業もあるはずです。

とはいえ、担当者自身にWeb制作に関する知見がない場合、どのように自社のホームページのイメージを伝えたら良いかわからず、依頼に踏み切れないという方もいるのではないでしょうか。

そこでオススメなのが、トップページ・会社概要ページなど、ホームページに必要なページと構造をWeb制作会社に伝えることです。細かな仕様は難しくとも、丸投げ依頼するのと比べて、大きくイメージと反れることはないでしょう。

今回、無料でサイトツリーを作成できる「FlowMapp」をご紹介します。HTMLやCSS、デザインのスキルが無くとも簡単に利用できるので、ホームページの外注を検討している担当者であれば参考にしてみてください。

FlowMappとは

https://flowmapp.com/

FlowMappは、ホームページのサイトツリーを簡単に図式化できるツールです。「トップページ」や「製品一覧ページ」などページの形式ごとにイラスト化されており、組み合わせるだけで完成するため、サイトツリーの経験がないWeb担当者でも簡単に作れるのが特徴です。

また、ブラウザで動作し、制作したサイトツリーはURLで簡単に共有できるため、作成した段階ですぐにWeb制作会社に共有することができます。もし、作成したサイトツリーが不完全な状態だったとしても、共同編集が行えるため、サイトツリーを通して相談をしながら制作の依頼が行えるでしょう。

基本機能や料金

FlowMappは、1プロジェクト分のサイトツリーであれば無料で利用することができます。複数のホームページのサイトツリーを同時進行で作成するには月額制に有料プランを利用する必要がありますが、自社のホームページ単体のサイトツリーであれば、Freeプランで十分と言えるでしょう。具体的な料金プランは下記の通りです。

【Free】
料金：0ドル/月
サイトツリー作成数：1プロジェクト
アップロード容量：100MB
共同編集者数：無制限

【Professional】
料金：8ドル/月
サイトツリー作成数：5プロジェクト
アップロード容量：10GB
共同編集者数：無制限

【Team】
料金：22ドル/月
サイトツリー作成数：25プロジェクト
アップロード容量：25GB
共同編集者数：無制限

【Agency】
料金：89ドル/月
サイトツリー作成数：無制限
アップロード容量：50GB
共同編集者数：無制限

FlowMappの会員登録方法

FlowMappは、トップページに表示されている「Get your free account!」もしくは「Sign up free」というボタンをクリックすることで会員登録が行えます。すると、フォームが表示されるので、自身で決めた名前、メールアドレス、パスワードを入力するだけで登録が完了します。

メールアドレスがあれば誰でも無料で登録できるため、共同編集者を招待する場合に手間が掛かりません。

FlowMappの使い方

FlowMappでサイトツリーを作成する基本的な手順をご紹介します。ブラウザ上ですべて完結するため、ホームページの大まかなイメージが固まっている状態であれば、最短10分程度で完成するでしょう。

プロジェクトを作成する

FlowMappにログインすると、プロジェクト作成画面が表示されます。中央下部に表示されている「Create Project」をクリックします。

プロジェクトは、白紙の状態から進めることもできますが、ネットショップ向け、コーポレートサイト向け、メディア向けのテンプレートが用意されています。目的のホームページと合っている場合や、初めてサイトツリーを作成する場合に活用できるでしょう。

この記事では、白紙の状態からサイトツリーを作成する手順を紹介します。テンプレート一覧から「Blank Project」を選択し、ホームページの概要を記載しましょう。概要を記載したら「Add Project」をクリックすると白紙のプロジェクトが生成されます。

任意のページを組み合わせてサイトツリーを作成する

FlowMappのサイトツリー編集画面がこちらです。中央の「+」マークをクリックすることでページを追加していくことができます。

「+」ボタンをクリックすると、トップページやブログ、会社概要をイメージした単体ページ一覧が表示されます。この中から、追加したい単体ページを選択し「Add Page」を選択します。ページにはそれぞれ名前を付けられるため、ページごとにわかりやすく記載してみてください。

はじめにトップページを選択しました。トップページに紐づくページを選択していきます。追加したページにマウスオーバーすると、ページ上に「+」マークが表示されます。

紐付いたページは上記の画像のように導線が表示されます。作成したいサイト構造に合わせてページ単位で紐付けていきましょう。

ひと通りのサイトツリーを作成した図がこちらです。トップページからそれぞれのページに分岐し、そのページからさらに細かくコンテンツが分岐させることで直感的にサイトツリーが作成できます。

ページごとのイメージを記載する

大まかなサイトツリーが完成したら、つぎに単体ページごとに具体的なイメージを記載していきます。単体ページをクリックすることで、概要やイメージ画像を挿入することができます。

Web制作会社へ依頼する場合、大まかな構造だけでなくそれぞれのページのイメージを記載することで、より伝わりやすくなるでしょう。

共同編集者を招待する

もし、作業途中で外注先や内部の担当者と連携してサイトツリーを作成したい場合、共同編集者として招待することができます。

編集画面上部にある「+」マークをクリックすると招待用のフォームが表示されるので、対象者のメールアドレスを記載して「Invite」をクリックしてください。

共同編集者を招待すると、単体ページごとにメッセージのやり取りが行えます。メッセージは、制作の進捗状況や具体的なサイト構造のすり合わせなどに活用できます。

作成したサイトツリーのURLをシェアする

完成したサイトツリーは、トップページ上部右側にある「Share」ボタンをクリックすることでURLをシェアできます。

まとめ

FlowMappは、Web制作未経験の担当者でも簡単にサイトツリーを作成することができます。また、単体ページごとのイラストイメージが揃っているため、どういったページが必要かを感覚的に選ぶことができるという特徴があります。

Web制作会社に依頼する場合、ホームページの構造に関する齟齬を生まないためにもページを組み合わせるだけでなく概要やイメージファイルを用いて具体的に作成するのがポイントと言えます。

また、メールアドレスのみで共同編集者を簡単にアサインできるため、自身だけで作成するのが難しい場合でも安心して利用できるのではないでしょうか。無料プランでは保存できるプロジェクトは1つまでですが、自社のホームページ用であれば十分に利用できるため、ぜひ活用してみてはいかがでしょうか