<p class="thumb"><img src="http://web-marketing.zako.org/images/2016/08/mockflow-sitemap.png" alt="MockFlow SiteMap" width="592" height="311" class="alignnone size-full wp-image-30468" /></p>
<p>サイトを制作する際に作るサイトマップや画面遷移図。これらを既存のツールで実際のサイトをイメージしやすいように作るのは至難の業ですよね。</p>
<p>凝ったものを作ろうとしても無駄な時間を浪費するだけですし、かといって簡易すぎても伝えるべきことを伝えられなくなるなんてことにもつながりかねません。</p>
<p>そこで今回は、ある程度サイトのイメージをつけることもできるサイトマップを作成できるサービスをご紹介します。</p><!--more-->


<h3 class="header-label">イメージしやすいサイトマップや画面遷移図を作成できる「MockFlow SiteMap」</h3>
<p>「<a target="_blank" href="https://mockflow.com/apps/sitemap/">MockFlow SiteMap</a>」は、<strong>画面遷移のイメージを伝えやすいサイトマップを作成できる</strong>ウェブサービス。</p>
<p>テキストだけで表現するよりも、より具体的な議論ができそうなものになっています。</p>
<p class="desc">※新しいサイトマップを作成する際、サイトマップのタイトル（Sitemap Title）を日本語で指定するとバグが起こってサイトマップを作れないのでご注意を。サイトマップのなかでページ名などに日本語を使うことは可能です。</p>

<h4 class="tips">画面レイアウトのサムネイル付きでページを表現</h4>
[caption id="attachment_30473" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/08/sitemap-mockflow.png" alt="画像でエクスポートしたサイトマップ。アクションを入れれば画面遷移図としても機能します。" width="592" height="403" class="size-full wp-image-30473" /> 画像でエクスポートしたサイトマップ。アクションを入れれば画面遷移図としても機能します。[/caption]
<p>サイトマップ上では、ページごとにある程度のページレイアウトを示せるサムネイルを設定できます。</p>
<p>ただ単にテキストで見せるよりも、サイドバーが右にくる、アイキャッチの画像を文章内に入れていくなど、認識を合わせる意味でも効果的かもしれませんね。</p>

<p>また、ページだけでなくアクションも表現できるので、簡易的な画面遷移図としても機能します。サービス提供側としては、UI Flowsを実現するためのツールとして位置づけているようです。</p>
<h4 class="tips">スマホアプリの画面遷移図も作成可能</h4>
[caption id="attachment_30475" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/08/mockflow-sitemap-apps.png" alt="スマホアプリの画面遷移図。" width="592" height="618" class="size-full wp-image-30475" /> スマホアプリの画面遷移図。[/caption]
<p>ウェブサイトだけでなく、スマホアプリの画面遷移図も作成可能、画面イメージのアイコンも充実しているので、より具体的にアプリのUX/UIを伝えやすくなります。</p>

[caption id="attachment_30472" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/08/mockflow-sitemap-thum.png" alt="サムネイルやアイコンなどの設定画面。" width="592" height="426" class="size-full wp-image-30472" /> サムネイルやアイコンなどの設定画面。[/caption]
<p>サムネイルの種類は豊富で、トップページやお問い合わせフォーム、あるいはチーム紹介、記事ページなどといった具体的な枠組みから、更に詳細なレイアウトを選んで配置することができます。</p>

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

<h4 class="tips">ページごとにステータスの設定も可能</h4>
[caption id="attachment_30471" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/08/mockflow-sitemap-status.png" alt="ページごとに進捗を色で明示できる。" width="592" height="298" class="size-full wp-image-30471" /> ページごとに進捗を色で明示できる。[/caption]
<p>ページごとにステータスを設定し、ページの左上に色で表現することができます。</p>
<p>ページごとの設定画面にメモを残したりファイルを添付することもできるので、修正作業漏れを防ぐ意味でも効果的かもしれません。</p>

<h4 class="tips">画像とCSV形式でエクスポート可能</h4>
[caption id="attachment_30470" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/08/mockflow-sitemap-csv.png" alt="CSV形式でエクスポートしたサイトマップ。" width="592" height="321" class="size-full wp-image-30470" /> CSV形式でエクスポートしたサイトマップ。[/caption]
<p>作成したサイトマップは、画像（PNG）かCSV、あるいはGoogle sitemapのフォーマット（XML形式）でエクスポートできます。Google sitemapのフォーマットを生成するときは、ページのURLを指定する必要があります。</p>

<h4 class="tips">ウェブ上に公開することも可能</h4>
[caption id="attachment_30469" align="alignnone" width="591"]<img src="http://web-marketing.zako.org/images/2016/08/mockflow-sitemap-public.png" alt="公開設定をすることで、ウェブ上で公開することも可能。" width="591" height="202" class="size-full wp-image-30469" /> 公開設定をすることで、ウェブ上で公開することも可能。[/caption]
<p>デフォルトでは非公開となっていますが、共有設定で公開することによって、以下のリンク先のように、URLでウェブ上に公開することができます。</p>
<p class="desc"><a target="_blank" href="https://sitemap.mockflow.com/view/66474f4c265c6d8f83878be64d5b5e22">サンプルサイトマップ</a> </p>

<p>興味がある方は<a target="_blank" href="https://mockflow.com/apps/sitemap/">MockFlow SiteMap</a>へどうぞ。</p>

<p>冒頭でもご案内したとおり、サイトマップのタイトルに日本語を使うとバグが起こってサイトマップを開けなくなります。以下の画像の画面では、必ず半角英数で名前を指定してください。日本語で作成すると「パーミッションがありません」といってサイトマップを作ることが出来ません。</p>
[caption id="attachment_30474" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/08/new-sitemap.png" alt="新しいサイトマップを作るとき、この画面では日本語を使うとバグが起こるのでご注意を。必ず半角英数でご指定ください。" width="592" height="304" class="size-full wp-image-30474" /> 新しいサイトマップを作るとき、この画面では日本語を使うとバグが起こるのでご注意を。必ず半角英数でご指定ください。[/caption]
