より具体的な議論をサイトマップや画面遷移図でおこないときにも便利なサイトマップ作成ツールです。

サイトマップやライトな画面遷移図を簡単に作れる「MockFlow SiteMap」

サイトを制作する際に作るサイトマップや画面遷移図。これらを既存のツールで実際のサイトをイメージしやすいように作るのは至難の業ですよね。

凝ったものを作ろうとしても無駄な時間を浪費するだけですし、かといって簡易すぎても伝えるべきことを伝えられなくなるなんてことにもつながりかねません。

そこで今回は、ある程度サイトのイメージをつけることもできるサイトマップを作成できるサービスをご紹介します。

• 
• 組織のマインドマップツールをマインドマイスターにすべき理由
• 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!!

イメージしやすいサイトマップや画面遷移図を作成できる「MockFlow SiteMap」

「MockFlow SiteMap」は、画面遷移のイメージを伝えやすいサイトマップを作成できるウェブサービス。

テキストだけで表現するよりも、より具体的な議論ができそうなものになっています。

※新しいサイトマップを作成する際、サイトマップのタイトル（Sitemap Title）を日本語で指定するとバグが起こってサイトマップを作れないのでご注意を。サイトマップのなかでページ名などに日本語を使うことは可能です。

画面レイアウトのサムネイル付きでページを表現

画像でエクスポートしたサイトマップ。アクションを入れれば画面遷移図としても機能します。

サイトマップ上では、ページごとにある程度のページレイアウトを示せるサムネイルを設定できます。

ただ単にテキストで見せるよりも、サイドバーが右にくる、アイキャッチの画像を文章内に入れていくなど、認識を合わせる意味でも効果的かもしれませんね。

また、ページだけでなくアクションも表現できるので、簡易的な画面遷移図としても機能します。サービス提供側としては、UI Flowsを実現するためのツールとして位置づけているようです。

スマホアプリの画面遷移図も作成可能

スマホアプリの画面遷移図。サンプル

ウェブサイトだけでなく、スマホアプリの画面遷移図も作成可能、画面イメージのアイコンも充実しているので、より具体的にアプリのUX/UIを伝えやすくなります。

サムネイルやアイコンなどの設定画面。

サムネイルの種類は豊富で、トップページやお問い合わせフォーム、あるいはチーム紹介、記事ページなどといった具体的な枠組みから、更に詳細なレイアウトを選んで配置することができます。

また、ソーシャルメディアや各種イラストのアイコンを表示させることも可能です。

ページごとにステータスの設定も可能

ページごとに進捗を色で明示できる。

ページごとにステータスを設定し、ページの左上に色で表現することができます。

ページごとの設定画面にメモを残したりファイルを添付することもできるので、修正作業漏れを防ぐ意味でも効果的かもしれません。

画像とCSV形式でエクスポート可能

CSV形式でエクスポートしたサイトマップ。

作成したサイトマップは、画像（PNG）かCSV、あるいはGoogle sitemapのフォーマット（XML形式）でエクスポートできます。Google sitemapのフォーマットを生成するときは、ページのURLを指定する必要があります。

ウェブ上に公開することも可能

公開設定をすることで、ウェブ上で公開することも可能。

デフォルトでは非公開となっていますが、共有設定で公開することによって、以下のリンク先のように、URLでウェブ上に公開することができます。

サンプルサイトマップ

興味がある方はMockFlow SiteMapへどうぞ。

冒頭でもご案内したとおり、サイトマップのタイトルに日本語を使うとバグが起こってサイトマップを開けなくなります。以下の画像の画面では、必ず半角英数で名前を指定してください。日本語で作成すると「パーミッションがありません」といってサイトマップを作ることが出来ません。

新しいサイトマップを作るとき、この画面では日本語を使うとバグが起こるのでご注意を。必ず半角英数でご指定ください。