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

FlowMappの使い方

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

プロジェクトを作成する

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

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

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

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

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

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

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

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

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

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

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

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

共同編集者を招待する

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

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

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

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

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