シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
注目記事ピックアップ
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
share0
スマホのタッチ操作に最適化されたWebアンケートが作れるサービス「Wyzerr」を使ってみた!
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
share0
「docs・Wiki・task」が融合した超軽量Webエディタ「Notion」の潜在能力が高過ぎる件!
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
share0
コピペ一発!どんなWebサイトもチャットサポートを無料で導入可能な「Crisp」を使ってみた!
1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
share0
1枚の画像に好きな情報を埋め込んでマッピングできるWebサービス「Pictogon」を使ってみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
share0
ブログ感覚でWebアプリやサイトの更新履歴を作成&公開できる「Barelog」を使ってみた!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
share0
ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
share0
編集ソフト不要!アップロードした画像のURLをいじるだけで多彩な加工編集を実現する「Scaley.io」が登録不要で無料公開中!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
share0
1枚の写真だけで超リアルな3D顔面をWeb上で高速生成できる「3D Face Reconstruction」を使ってみた!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
share0
JavaScriptでマインクラフト風の建造物が作れる無料Webアプリ「Web Blocks」で遊んでみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
share0
今すぐブラウザ上に「ライブ配信」のスタジオ環境をタダで構築できる「Lightstream」を使ってみた!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2017/10/16 18:30

ブラウザ上でサイト構成図(マップ)を作成して複数人とコラボ連携可能な「FlowMapp」を使ってみた!

flowmapp-01 どうも、まさとらん(@0310lan)です!

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

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

【 FlowMapp 】
flowmapp-02

「FlowMapp」の使い方!

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

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

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

すると、自分専用の「ダッシュボード」が表示されます。
flowmapp-05 この画面上で、基本的な設定やプロジェクトの管理が行えます。


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

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

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

すると、「マップエディタ」が表示されます!
flowmapp-09 あとは、この画面上で自分が構想しているWebサイトの構成図を自由自在に編集できるようになるわけです。


サイト構成図(マップ)を作ってみよう!

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

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

すると、Webサイトを構成するのに必要な「テンプレート図」が一覧で表示されます!
flowmapp-11 「①ページ名」を入力して、好きな図を「②選択」します。


これで「トップページ」が出来ました!
flowmapp-12

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

すると、トップページの階層化に配置するページをさらに選択できるようになります。
flowmapp-14 そこで、例えば「About」ページを設置してみましょう。


こんな感じで配置されます!
flowmapp-15

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

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

そして、あっという間に自分が思い描くWebサイトの構成図が完成するでしょう!
flowmapp-18 このように、とてもシンプルな操作で誰でも素早く見栄えの良いサイトマップが完成するので便利です。


プロジェクトをシェアしてみよう!

作成したWebサイトの構成図は、簡単に不特定多数にシェアすることも可能です。

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

すると、シェア用のURLが表示されます!
flowmapp-20 あとは、このURLをSNSやメールなどでシェアすれば、誰でもブラウザ上から閲覧することが可能になります。(スマホからでもOK)


また、「FlowMapp」のユーザー同士であれば、チャットで会話したりサイトの構造を一緒に考えてコラボすることも可能!
flowmapp-21 例えば、Webサイトの制作を依頼されて、クライアントとオンラインで構成図を考えるような場合にも利用できるでしょう。


「FlowMapp」の便利な機能たち!

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

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

そんな時は、「Altキー」をポンと長押しするだけで瞬時に全体像が表示されるのです!
flowmapp-23 この機能は、実際に作業を進めていると非常に便利だなぁと感じられるようになるはず!


また、各ページの詳細画面で「ラベル」を選択することも出来ます。
flowmapp-24 (ラベルには、NEW・IN PROGRESS・DONE…などがあります)


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

ボタンを切り替えるだけで、ビジュアルを除外したシンプルな構成図を表示することも可能です!
flowmapp-26 他にも、テキストベースの「ツリー構造」を確認できたり、閲覧したページ部分だけフォーカスを当てるような機能も用意されています。

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


まとめ

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

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

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


<参考>
「FlowMapp」公式サイト


written by まさとらん(@0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る