ユーザーフローは、UIUXの話が、webマーケティングにおいて、重要視され始めてから、にわかに気にされるようになりました。
もともと、ユーザーフローは、ユーザーの行動 フローチャート、活動・動きのフロー（流れ）をまとめるだけで、一般的には、ドキュメント 業務 のようなかんじでした。もともとのユーザーフロー図は、図形 記号 の オンパレードでしたからね。しかし、UIUXが着目されてきて、その ユーザーフロー 情報 の価値が上がり、ユーザーフロー 書き方 などのスタディが増加しましたね。
この記事では、そんなユーザーフローについて、ユーザーフロー図を簡単に作れるwebツールであるwireflow（ワイヤーフロー）について、ご紹介します。
そして、ユーザーフローとは どんなものなのか、wireflow（ワイヤーフロー）を活用したユーザーフロー 書き方などをご紹介していきます。従来のユーザーフロー図よりも、わかりやすく、伝わりやすくなっていますよ。
wireflow（ワイヤーフロー）とは
wireflow（ワイヤーフロー） 公式ホームページ 英語
https://wireflow.co/
wireflow（ワイヤーフロー）とは、海外のユーザーフロー作成ツールです。オープンソースなので、導入、作成は無料です。
wireflow（ワイヤーフロー）は、その名の通り、ワイヤー的なユーザーフローがめちゃくちゃ簡単に制作できます。
特徴的なのは、画面のカードテンプレートがたくさん用意されていることです。
カードが用意されているので、それをつなぐだけで、webサイト、ネイティブアプリなどの画面遷移をさくさく作ることができます。
wireflow（ワイヤーフロー）があれば、
- Webサイトの新規作成
- ホームページリニューアル
- ネイティブアプリの画面遷移
などを、作業効率よく、検討、展開できます。
Meteor.jsで書かれているのが、１つの特徴ですね。
Meteor.jsは、有名になったnode.jsをベースとしたフルスタック型のフレームワークで、webアプリ開発には、非常に使いやすいフレームワークですね。
さて、実際の画面イメージのご紹介です。
wireflow（ワイヤーフロー） 画面イメージ 動画
wireflow（ワイヤーフロー）の操作感を知ってもらうために、以下の、利用イメージ動画を見てみてください。
さくさく動いて、ユーザーフローが作られていくのがわかると思います。
ところで、ユーザーフローって？と思われた方、以下で解説しますね。
ユーザーフロー とは ユーザーフローの考え方
wireflowは、ユーザーフローをまとめられるツールですが、そもそも、ユーザーフローをまとめる必要はあるのでしょうか？
ユーザーフローは、ユーザーに特定の目的のアクションをしてもらうために、ユーザーがどんなプロセスで、そのアクションにたどり着くのか、を明確にするものです。
ユーザーの流れを明確に、設計することです。
UXデザイン的にはとても重要なことです。
これはマーケティング的な発想ですが、一方で、導くようにするために、デザイン的な整合性も考える必要もあります。
これはデザイン視点ですね。
それゆえ、ユーザーフローの書き方として、何を正解として考えるかは、どんな視点で考えるかが重要です。
- マーケティング視点
- デザイン視点
ただし、どちらの視点においても、ユーザーフローについては、知識をもとに、まとめていくほうがいいですね。
海外では、このユーザーフローのとりまとめについても、非常によく学ばれているようです。以下、ご紹介するのは、ユーザーフローについての学習系Youtubeです。
ユーザーフローを専門とする企業は少ないので、実は、この市場で、戦うのも、ビジネスモデルとしては面白いかもしれませんね。
ユーザーフローチュートリアル|デザインプロジェクトでの使用方法
App for Interactive User Flows and UX Journeys – Design Tool Tuesday, ep42
UX Design – Why you NEED to know User Flows!
上記のような動画ですが、ユーチューブでの再生回数も多いんですよね。
そもそも、ユーザーフローは、ユーザーフローを明確にすることによって、コミュニケーションのズレの発生原因を探れるようになります。
これが、ユーザーフローを作成する最大のメリットですね。
また、ユーザーのプロセスをショートカットできれば、そこには、ビジネスチャンスも生まれてきます。
wireflow クチコミ 情報 リサーチ
wireflow（ワイヤーフロー）についての クチコミ 情報を集めてみました。
ツイッターで、どんな評判なのか、そもそも、利用者の感想が書かれているのかどうかなど、調査をしてみました。
結果、実は、そんなに話題になっていないようです。
海外での投稿の方が多いかんじです。
Web上で簡単にフローチャート図、操作説明などの図が作成できるWebサービス 『Wireflow』 https://t.co/TmWpZ4TqTz |PCあれこれ探索 pic.twitter.com/yfdS4odcsy
— mogeringo (@mogeringo) January 9, 2018
オープンソースのワイヤーツール。パーツが多くて楽だった。ラフなイメージ共有に良いかも。 / Wireflow https://t.co/KuAjkVoqUE pic.twitter.com/ATOZ8dRbCE
— クラク｜QRANOKO (@Qrac_JP) November 9, 2020
ユーザーフロー図の作成ツール “Wireflow – Free Wire / User Flow Tool” https://t.co/qthzw6J32S #webservice #illu
— azu (@azu_re) September 30, 2020
わりと、紹介系のツイートばかりでした。
つまり、ユーザーフローにおいては、wireflowは、まだまだ日本国内での認知が低い可能性が高いと思われます。
まとめ wireflow で ユーザーフローを共有しながら作る。
いかがでしたでしょうか、wireflow。
wireflowは、無料で使えるオープンソースのアプリケーションです。
webから、さくさく使えます。
wireflowがあれば、ユーザーフローを考えるときには、とても便利です。
目的を見据えて、Goalに対して、正しく進めるような設計がしやすくなりますね。
条件分岐など、フローを考えるよりも、画面イメージから、導線設計できるので、UXデザイン思考で、ユーザーフローをまとめられますよ。
画面共有して、チームみんなで、検討するのにも使えるのがいいですね。