Webサイトを作る際にユーザフロー（ワイヤーフロー）を作ります。Webサイトの画面を並べて、リンク先をつないでいくことで、フローを明確にします。そして目的のページまでたどり着くのに深くなりすぎていないか、分かりづらい流れになっていないかなどをチェックできます。 今回紹介するWireflowはWeb上か簡単にワイヤーフローが作成できるソフトウェアです。

Wireflowの使い方

例です。左側にあるパーツをドロップして、線でつないでいくだけという簡単さです。

拡大できます。

パーツを縦につなげることで、長いページも表現できます。

グルーピングも可能です。

Wireflowを使えばワイヤーフローが手軽に作成できます。あらかじめ多数の画面モックアップが用意されていますので、ページの雰囲気に合わせて自由に作成できるでしょう。Wireflowを使えばWebサイトの構造を検討したり、パーツをカスタマイズしてアプリの画面を検討するのにも使えそうです。

WireflowはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Wireflow - Free Wire / User Flow Tool vanila-io/wireflow: Wireflow - user flow chart real-time collaborative tool