ユーザーフロー設計

英語名 User Flow
読み方 ユーザー フロー
難易度
所要時間 2〜4時間
提唱者 UXデザイン分野の一般的手法
目次

ひとことで言うと
#

ユーザーがサービス上で「やりたいこと」を達成するまでの操作ステップを、フローチャート形式で可視化する手法。画面遷移や分岐を図にすることで、無駄なステップや迷いやすいポイントを発見できる。

押さえておきたい用語
#

押さえておきたい用語
ハッピーパス(Happy Path)
エラーや例外なく理想的にタスクが完了する流れ。まずこれを描いてから例外を追加する。
エントリーポイント
ユーザーがフローに入る起点。トップページ、検索結果、広告LPなど複数ありうる。
分岐(Decision Point)
ユーザーが判断を求められるポイント。ひし形で表現し、条件ごとに流れが分かれる。
サブフロー
複雑なフローを分割した部分的な流れ。全体を1枚に収めず、サブに分けることで可読性を維持。

ユーザーフロー設計の全体像
#

ゴール定義→ステップ洗い出し→フローチャート化→最適化の流れ
ゴール定義達成目標と起点を明確に1フロー1ゴール「成功とは何か」を言語化ステップ洗い出し全操作と分岐を書き出す「〜する」の形で記述エラーケースも含むフローチャート化図にしてチームでレビューする長方形=画面ひし形=分岐最適化ムダなステップを削って短縮1ステップ減で離脱率が大幅改善ユーザーの行動を「見える化」する最もシンプルで強力な手法
ユーザーフロー設計の進め方
1
ゴールと起点を定義
1フロー1ゴールで設計
2
ステップと分岐を洗い出し
ハッピーパス→例外の順
3
フローチャートを作成
チームでレビュー・検証
4
ムダを削って最適化
ステップ削減で離脱率を改善

こんな悩みに効く
#

  • ユーザーが途中で離脱してしまうが、どこで詰まっているかわからない
  • 新機能を追加したいが、既存の画面遷移とどう繋がるか見えない
  • デザイナー・エンジニア・PMの間で「完成形」のイメージがずれる

基本の使い方
#

ステップ1: ゴールとエントリーポイントを決める

**ユーザーが達成したいこと(ゴール)どこからフローが始まるか(エントリーポイント)**を明確にする。

  • ゴール例:「商品を購入する」「アカウントを作成する」
  • エントリーポイント例:トップページ、検索結果、広告LP
  • 1つのフローには1つのゴールを設定する

ゴールが曖昧だと、フローも曖昧になる。「ユーザーは何をもって成功とするか?」を言語化すること。

ステップ2: ステップと分岐を洗い出す

ゴールに至るまでの全操作ステップを書き出し、判断が必要な分岐点を特定する。

  • 各ステップは「〜する」の形で書く
  • 分岐は「はい/いいえ」や「条件A/条件B」で表現する
  • エラーケースや例外ケースも含める

まず主要なハッピーパスを描いてから例外を追加する。

ステップ3: フローチャートとして図にする

洗い出したステップを視覚的なフローチャートにまとめる。

  • 長方形=画面やアクション、ひし形=分岐、楕円=開始/終了
  • FigmaやMiro、draw.ioなどのツールが便利
  • チームメンバーに見せて違和感がないか確認
ステップ4: ムダなステップを削って最適化する

完成したフローを見直し、ユーザーの負担を減らせるポイントを探す。

  • 「このステップは本当に必要か?」を各ステップに問いかける
  • 入力の自動化で省略できるステップはないか
  • ゴールまでのステップが1つ減るだけで、離脱率は大きく改善する

具体例
#

例1:ECサイトの購入フローからゲスト購入を追加し離脱率を28%改善する

フロー分析で発見した問題: 商品詳細→カート→ログイン必須→配送先入力→支払い→確認→完了の7ステップ。ログイン画面での離脱率が42%と突出。

改善: ログイン画面に「ゲスト購入」の選択肢を追加。ゲストはメールアドレスのみで購入可能に。配送先の前回入力値をクッキーで保持。

結果: 購入フローの離脱率が42%から14%に改善(28pt減)。 ゲスト購入者の30%が購入後にアカウント作成(フロー完了後の方がハードルが低い)。

例2:求人応募フローを可視化してステップ数を8から4に半減する

Before: 求人詳細→応募ボタン→ログイン→履歴書アップロード→職務経歴入力→自己PR→確認→完了の8ステップ。応募開始から完了までの平均離脱率は68%。

フロー分析で発見: 職務経歴と自己PRは面接前に必要だが、応募時点では不要。確認画面はほぼ全員が修正なしで通過。

After: 求人詳細→応募(名前+メール+履歴書)→完了→後日「職務経歴の追加」をメールで案内の4ステップに短縮。

結果: 応募完了率が32%から71%に向上(2.2倍)。 後日の職務経歴追加率も78%と高く、情報の欠損は最小限。

例3:社内稟議フローの可視化で承認期間を5日から1.5日に短縮する

フロー作成で発見: 稟議の承認フローが申請者→課長→部長→経理→総務→役員の6段階。各段階で平均0.8日のリードタイム。しかし金額10万円以下の案件(全体の65%)も全段階を通過していた。

改善: 金額による分岐をフローに追加。10万円以下は課長→経理の2段階で完了。10〜50万円は部長まで。50万円超のみ役員承認。

結果: 平均承認期間が5日から1.5日に短縮。 年間の稟議処理件数が1,200件→同数だが、管理職の承認作業時間が年間480時間削減。

やりがちな失敗パターン
#

  1. ハッピーパスしか描かない — エラー時やイレギュラーな操作を考慮しないと、実装時に大量の抜け漏れが発覚する。例外パスも必ず描くこと
  2. フローが細かすぎてメンテ不能になる — ボタンのホバー状態まで含めると更新が追いつかない。「画面単位」か「主要アクション単位」の粒度に留める
  3. フローを作って満足してしまう — ユーザーフローはあくまで仮説。実際のデータやユーザーテストで検証し、改善を続けることが重要
  4. 複数ゴールを1つのフローに詰め込む — フローが複雑になりすぎる。1フロー1ゴールの原則を守り、関連するフローは別図に分ける

まとめ
#

ユーザーフロー設計は、ユーザーの行動を 「見える化」 する最もシンプルで強力な手法。画面遷移を図にするだけで、無駄なステップ・迷いやすい分岐・チーム内の認識ずれが浮き彫りになる。新しい機能を作るとき、まずユーザーフローを描くことから始めよう。