ユーザーフロー（画面遷移）をサービス開発に活用する３つのメリット

こんな方を対象に書いてます
サービスの企画、デザイン、開発に関わっている方で、
「アプリケーションのUI改善が思うように進まない」
「よいユーザー体験を提供できるUIデザインにするにはどうしたらよい？」
「関係者との話し合いがスムーズに進まない・・・」

初めまして

こんにちは。TAM UX/UIチーム プロジェクトマネージャーの三内です。

私のチームでは、数年前から製品のUIデザイン、Webサービスの開発に取り組んでいます。主に、要件定義やプロトタイプ（PoC）のUIデザインを担当することが多いのですが、プロジェクトに取り組む中で、ユーザーフロー（画面遷移）の重要性を強く感じるようになりましたので、ここでまとめておこうと思います。

ユーザーフロー（画面遷移）について

ユーザーフロー（画面遷移）は、ユーザーの主要な動線に沿ってサービス全体を図解したもので、Webサービス開発の多くのプロジェクトで作成されています。作成する目的はいくつかあって「Webサービス全体のUXの確認」「画面の繋がりや必要な画面の洗い出し」「システム開発の要件定義の仕様書の1つ」など、全体〜詳細、要件定義〜システム開発といった、サービスや製品の開発の全体を通じて、活用することが可能です。

ユーザーフローが議論の中心に

私たちがWebサービスのUIデザインを始めた当初、デザインツールで作成したプロトタイプとユーザーフロー（画面遷移）を共有して関係者と議論していました。ただ、多くの議論では、プロトタイプを基に話をすることが少なく、ユーザーフロー（画面遷移）を中心に話をすることがほとんどでした。ユーザーフローは、サービス全体や前後の繋がりをイメージしながら話ができ、全員の理解と議論が滞りなく進むため、利用が促進されたと考えています。
現在のプロジェクトでは、実際のユーザーとして利用体験の確認や課題抽出、インタラクションの確認をする場合にはプロトタイプを作成していて、全体の設計を関係者で共有したり、議論する場合にはユーザーフロー（画面遷移）を利用しています。

「ユーザーフロー（画面遷移）をサービス開発に活用するメリット」は以下の3つになります。

１、誰でも理解しやすいので、関係者全員でディスカッションできる。
２、全体像と詳細の２つを同時に話すことができる。
３、1つのアウトプットを、プロジェクト全体を通じて利用することができます。

ここから、1つずつ解説を進めます。

１、誰でも理解しやすいので、関係者全員でディスカッションできる。

システム開発のプロセスで利用される「機能一覧」や「画面仕様書」などのドキュメントは、アプリケーション開発のプロジェクト経験がないと理解できなかったり、理解に時間がかかります。
その点、ユーザーフローは、ユーザーのストーリーを軸に話をすることができるのと、実際に画面の流れを目で見ることができるので、メンバーの得意領域（ビジネス、デザイン、システムなど）にかかわらず、多くの方が議論に参加して、話すことができます。

２、全体像と詳細の２つを同時に話すことができる。

１画面ずつの資料や、プロトタイプの場合、ユーザー体験の全体像を意識することが難しいのですが、詳細画面まで表示しているユーザーフローは、各画面の詳細について議論することもできるし、全体の体験を振り返ることもできます。
例えば、ユーザーのAB２つのアクションでフローが分岐した場合に、今みている画面がAのアクションの場合だったのか、Bのアクションの場合なのかは、その画面だけをみても判断しにくいです。そうなった場合は、全体を確認して、どっちのフローなのかを確認したりできます。

チームパフォーマンス向上支援ツール　NaviLight（ナビライト）のユーザー管理画面

ちなみに、すべての画面の詳細を描いて、それをユーザーフローにすると、とても大きな画面が必要になります。それを解決するために、私たちはユーザーフローの作成ツール「Overflow」を利用しています。

Overflow | User flows done right

「Overflow」はAdobeXDやSketchで作成した画面デザインを簡単にユーザーフローにすることができ、作成したユーザーフローをクラウド上にアップすれば、誰でも簡単に閲覧することができます。また、クラウドにアップされたユーザーフローは拡大、縮小やみたい部分でのリンクなどもスムーズに簡単に操作することができます。
「Overflow」を利用したユーザーフローのサンプルはこちら

３、1つのアウトプットを、プロジェクト全体を通じて利用することができます。

初期フェーズは、ユーザー体験のイメージを仮案として、ユーザーフローを作成して検証します。大枠のフローが固まってきたら、詳細の設計に入っていきます。各画面の要素や配置や、画面遷移するボタンの位置、不足している画面の洗い出しなどを行っています。
仕様が固まってきたら、ユーザの状態による条件分岐や、エラー時の遷移なども書き入れていき、最終としてはシステム全体の外部設計を一通り、ユーザーフローにまとめることもできます。

上記で説明したユーザーフロー作成ツール「overflow」のブログでは、このような良い点があるのに、そこまでユーザーフローが作成されていない理由をヒアリングした結果を書いてました。
「ユーザーフローをつくるのが面倒」「大きくなりすぎてプリントできない」などの理由だったそうです。

ユーザーフロー作成ツール「overflow」は、この部分を大きく解消されている感じがあるので、ご興味をもたれた方はぜひ、利用してみてもらえればと思います。

TAM はWebサービス、業務アプリなどの新しい価値を作り出すサポートしています！お気軽にご相談ください。

デジタルプロダクトのUXリサーチからUIデザイン｜TAM

三内 徹
UX/UIチーム リーダー／プロジェクトマネージャー
2008年よりTAMに在籍。大阪ガス、京セラ、ワコールなどの企業サイトやアプリのプロジェクトを多数担当。ユーザー行動の図解からの課題抽出、プロトタイプによる仮設検証など、UX（ユーザー体験）を重視したプロジェクトの設計・遂行を行っています。