どうも、まさとらん（@0310lan）です！

Webサイトを作る時に、ページの構成図を可視化して複数人と情報共有するときに便利なサービスが公開されているのでご紹介します！

国内では、サイト構成図、サイトマップ、サイトツリー…などと呼ばれていますが、このサービスを使えば誰でも短時間で見栄えの良いマップ図を作成できるのでオススメです！

【 FlowMapp 】



「FlowMapp」の使い方！
それでは、実際に「FlowMapp」を使いながらどのようなサービスなのかを見ていきましょう！

まずはサイトにアクセスして、トップ画面にあるボタンをクリックします。



ニックネーム・メルアド・パスワードを入力して、ユーザー登録を済ませておきましょう。



すると、自分専用の「ダッシュボード」が表示されます。

この画面上で、基本的な設定やプロジェクトの管理が行えます。


新規にプロジェクトを作成するには、画面中央にあるボタンをクリックします！



これから作成するWebサイトのジャンルを選択できるのですが、今回は「Blank Project」を選択してゼロから作ってみたいと思います。



「①プロジェクト名」「②概要」を入力して、最後に「③Add Project」ボタンをクリックします。



すると、「マップエディタ」が表示されます！

あとは、この画面上で自分が構想しているWebサイトの構成図を自由自在に編集できるようになるわけです。


サイト構成図（マップ）を作ってみよう！
「マップエディタ」が表示できたら、早速サイトの構成図を作ってみましょう！

作り方はとても簡単で、まずは「＋」アイコンをクリックします。



すると、Webサイトを構成するのに必要な「テンプレート図」が一覧で表示されます！

「①ページ名」を入力して、好きな図を「②選択」します。


これで「トップページ」が出来ました！



次に、マウスを近づけると「＋」アイコンが出現するので、これをクリックします。



すると、トップページの階層化に配置するページをさらに選択できるようになります。

そこで、例えば「About」ページを設置してみましょう。


こんな感じで配置されます！



そして、さらに同じ階層にページを配置したければ、右側に出現する「＋」アイコンをクリックします。



そして、テンプレートを選んでいけば同じ階層に複数のページをどんどん追加していけます。



そして、あっという間に自分が思い描くWebサイトの構成図が完成するでしょう！

このように、とてもシンプルな操作で誰でも素早く見栄えの良いサイトマップが完成するので便利です。


プロジェクトをシェアしてみよう！
作成したWebサイトの構成図は、簡単に不特定多数にシェアすることも可能です。

「マップエディタ」の画面右上にある「Share」ボタンをクリックしましょう！



すると、シェア用のURLが表示されます！

あとは、このURLをSNSやメールなどでシェアすれば、誰でもブラウザ上から閲覧することが可能になります。（スマホからでもOK）


また、「FlowMapp」のユーザー同士であれば、チャットで会話したりサイトの構造を一緒に考えてコラボすることも可能！

例えば、Webサイトの制作を依頼されて、クライアントとオンラインで構成図を考えるような場合にも利用できるでしょう。


「FlowMapp」の便利な機能たち！
「FlowMapp」は、とてもシンプルな操作で素早く作業ができるわけですが、便利な機能も多数搭載されているのもユニークな点です。

例えば、作業中に構成図の全体像が把握したくなったとしましょう。



そんな時は、「Altキー」をポンと長押しするだけで瞬時に全体像が表示されるのです！

この機能は、実際に作業を進めていると非常に便利だなぁと感じられるようになるはず！


また、各ページの詳細画面で「ラベル」を選択することも出来ます。

（ラベルには、NEW・IN PROGRESS・DONE…などがあります）


ラベルを設定しておけば、各ページの制作状況や進捗確認などにも利用できるので便利です。



ボタンを切り替えるだけで、ビジュアルを除外したシンプルな構成図を表示することも可能です！

他にも、テキストベースの「ツリー構造」を確認できたり、閲覧したページ部分だけフォーカスを当てるような機能も用意されています。

このような便利機能を活用すれば、さらに素早く簡単な操作で作業を進めることが出来るようになるでしょう！


まとめ
今回は、「FlowMapp」の基本的な使い方について駆け足でご紹介しました！

類似のサービスはいくつかあるのですが、ここまで簡単で見た目も良く複数人と連携ができるサービスは珍しいと思います。

プロジェクト数に制限はありますが無料プランも用意されているので、まずは自分が作りたいWebサイトを可視化してみてはいかがでしょうか！


＜参考＞
・「FlowMapp」公式サイト


written by まさとらん（@0310lan）