無料利用でも人数制限なくチーム内で共有可能なサイトマップを作れる「Flowmapp」を使ってみた

無料利用でも人数制限なくチーム内で共有可能なサイトマップを作れる「Flowmapp」を使ってみた

  • GIGAZINE
  • 更新日:2017/12/06
No image

ウェブサイトを設計するとき、必ず考えないといけないのがサイトマップです。ウェブサイト内のページを優先度の高いものと低いものに分けて、ユーザーがあまり多くの操作をせず、必要なページにアクセスするために、ページをどのように配置するかを書きます。サイトマップの出来次第では、ユーザビリティが良いサイトになって、リピーター増えることも。しかし、大規模なウェブサイトを作るとなれば、一人では大変。「Flowmapp」を使えば、サイトマップを作りつつ、チーム内で共有も可能とのことなので、試しに使ってみました。

FlowMapp is UX planning tool for creating a visual sitemaps

https://flowmapp.com/

◆登録

Flowmapp」にアクセスし、「Get your free account!」をクリック。

No image

「First Name」に名前、「E-mail」にメールアドレス、「Password」に登録するパスワードを入力し、「Sign Up!」をクリックします。

No image

問題と画像の選択画面が表示されるので、問題の趣旨にあった画像を、すべてクリックして該当する画像がなくなったら「確認」をクリックして、登録は完了です。

No image

◆サイトマップをつくる

「Flowmapp」にログインしたら、「Create project」ボタンをクリックして……

No image

ECサイトや企業のプロジェクト、ニュースポータル用のテンプレートも選択できますが、ここでは「Blank Project」にマウスポインタを合わせて、「Add Project」をクリックします。

No image

左上の入力フォームにプロジェクト名を入力し、ロゴ画像がある場合には「Add cover」をクリックして画像を選択、共同作業者がいる場合は「E-mail or Name」に追加する人の名前またはメールアドレスを入力。プロジェクトの説明を入力するなら「Add description」に説明文を入力して、「Add Project」ボタンをクリックします。

No image

ここでは「GIGAZINE」のサイトマップを作るプロジェクトとして、共同作業者を1名追加した、以下の形で設定して、「Add Project」ボタンをクリックしました。

No image

サイトマップの作成画面が表示されるので、GIGAZINEのトップページを作ってみます。まず、「First Page」をクリック。

No image

追加するページ情報の入力画面が表示されるので、「New Page」と書いているフォームにページタイトルを入力し、「NEW」や「ASAP」(なるはや)などのラベルを付ける場合は、「NO LABEL」をクリックすると、ラベルを選択することができます。ページに説明を追加する場合は「Add description」をクリックして入力。「Choose Page Cover」では追加するページに近いイメージのものを選択します。設定が終わったら「Add Page」をクリックします。

No image

ここでは、ページタイトルに「Topページ」、ラベルに「New」、説明に画面の特徴を入力し、カバーに「News grid」を選択しました。

No image

追加したページの内容を編集するには「…」ボタンをクリック。

No image

Descriptionの右の「…」「Edit」とクリックして説明文を編集したり……

No image

「Attachments」にファイルをドラッグすることで、画像などのファイルをアップロードできます。

No image

また、「Discussion」を使うと共同作業者とページについて、チャットで議論することもできます。

No image

リンク先のページを追加するには、ページの右下の「+」ボタンをクリックして……

No image

記事ページのタイトル・説明・カバータイプを入力して「Add Page」をクリック。

No image

Topページからリンクされた記事ページを追加できました。

No image

この要領で、GIGAZINEの簡単なサイトマップを作ってみると、以下の画像のようになります。操作に苦労することもなく、手軽に作ることができました。

No image

サイトマップは右上の「Export」ボタンをクリックすることで、PDFファイル・PNGファイル・DOCファイルの3つの形式でエクスポートできます。

No image

◆費用

「Flowmapp」は無料で利用することができますが、有料プランもあります。違いは容量と作成可能なプロジェクト数のみで、他のチーム作業向けのウェブサービスにあるような、共同作業者の人数制限はありません。無料プランは作成できるプロジェクトが1つのみで、100MBのスペースが使えます。月額9ドル(約1000円)の「Professional」プランは5プロジェクトまで作成できて、10GBのスペースが割り当てられます。月額25ドル(約2800円)の「Team」プランは25プロジェクトまで作成できて、25GBまでのスペースが利用でき、月額99ドル(約1万1000円)の「Agency」プランは作成できるプロジェクト数は無制限で、50GBまでのスペースが利用できます。

No image

「FlowMapp」は複数人で作っても、ほぼリアルタイムで手を加えた内容がサイトマップに反映できます。ただし、排他制御できていないためか、1つのページの情報を同時に編集できてしまい、タッチの差であっても、最後に編集した人の内容が反映されてしまうことを確認。記事作成時点で「Flowmapp」を使うときは「このページ情報の編集は○○さん」というように、あらかじめ担当を決めておくのが良いと思います。「Flowmapp」はベータ版なので、今後改善される可能性があります。同時編集部分を差し引いても、手軽な操作で人数制限なくサイトマップを作れるので、これからチームを作って、ウェブサイト制作を進めようとしている人は、サイトマップ作成に使うツールの1つとして選択肢に加えてみるのもアリだと思います。

この記事をお届けした
グノシーの最新ニュース情報を、

でも最新ニュース情報をお届けしています。

外部リンク

IT総合カテゴリの人気記事

グノシーで話題の記事を読もう!
国産初のIoT浄水器『クリンスイ CSP801i』は何がスゴい?
カーン・デザイン、6輪駆動でソフトトップ仕様の「フライング・ハンツマン」を発表!
楽天、携帯電話事業に参入へ 大手3社の寡占市場に風穴開くか
価格優先の人必見! KingSpec製2.5インチSSD
「家電批評」デスクが選ぶベストバイデジモノは、“じゃないほう”のスマートウォッチ!【自慢の家電ランキング】
  • このエントリーをはてなブックマークに追加