UIXHERO
#543
情報設計・ナビゲーション
#543

ゆーざーふろー

ユーザーフロー

別名・表記:User Flowユーザーフロー図フロー図Flowchart

UIXHERO Definition

UIXHEROでは、ユーザーフローを「ある目標を達成するまでの画面遷移と分岐を、順序と条件付きで表した図」と定義する。

概要

ユーザーフローとカスタマージャーニーマップは混同されやすいが、対象範囲と目的が異なる。

ユーザーフローカスタマージャーニーマップ
対象プロダクト内の画面遷移認知から利用後までの全接点
粒度画面・操作・分岐フェーズ・行動・感情
主な用途実装前の設計・抜け漏れ確認課題の発見・部門間の合意形成

ユーザーフローの価値は、正常系だけでなく異常系まで書き出せる点にある。エラー、権限不足、通信断、途中離脱後の再開といった経路は、図にしないと設計から抜け落ちやすい。

UXでの活用

  • 必要な画面の確定: フローを描くことで、必要な画面と状態が数えられる。見積もりの精度が上がる。
  • 分岐条件の明示: 「未ログインの場合」「決済が失敗した場合」といった条件を、実装者と事前に合意できる。
  • ワイヤーフレームの前段: 画面単位の設計に入る前に、遷移の全体像を確定させると手戻りが減る。

誤用・混乱

  • 正常系だけ描かない: ハッピーパスだけのフローは、実装段階で必ず不足する。
  • 感情や課題は書けない: 「ここでユーザーは不安になる」といった情報を載せたい場合、それはジャーニーマップの領域である。両方を1枚に詰め込むと、どちらの用途にも使いにくくなる。
  • 理想フローと現状フローを混ぜない: 現状の課題を示す図と、これから作る図は分けて描く。

💡 使いどころ

実装前に、必要な画面と状態の抜けを洗い出したい時。エラーや例外を含めた経路を、チームで確認したい時。

⚠️ 注意点・誤用

ユーザーフローはプロダクト内部の経路を表すもので、プロダクトの外側にある体験(広告、他社サービス、オフラインの行動)は扱わない。その範囲を扱うのはカスタマージャーニーマップである。

具体例

  • 会員登録の開始からメール認証完了までの遷移と分岐
  • 決済失敗時に戻る画面と、再試行の導線
  • 未ログイン状態で保護ページにアクセスした場合の経路
出典・参考文献:
  • The Elements of User Experience (Jesse James Garrett)
  • About Face (Alan Cooper)
作成: 2026年7月29日

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

この記事をシェアする
シェア: