ひとことで言うと#
ユーザーがサービス上で「やりたいこと」を達成するまでの操作ステップを、フローチャート形式で可視化する手法。画面遷移や分岐を図にすることで、無駄なステップや迷いやすいポイントを発見できる。
押さえておきたい用語#
- ハッピーパス(Happy Path)
- エラーや例外なく理想的にタスクが完了する流れ。まずこれを描いてから例外を追加する。
- エントリーポイント
- ユーザーがフローに入る起点。トップページ、検索結果、広告LPなど複数ありうる。
- 分岐(Decision Point)
- ユーザーが判断を求められるポイント。ひし形で表現し、条件ごとに流れが分かれる。
- サブフロー
- 複雑なフローを分割した部分的な流れ。全体を1枚に収めず、サブに分けることで可読性を維持。
ユーザーフロー設計の全体像#
こんな悩みに効く#
- ユーザーが途中で離脱してしまうが、どこで詰まっているかわからない
- 新機能を追加したいが、既存の画面遷移とどう繋がるか見えない
- デザイナー・エンジニア・PMの間で「完成形」のイメージがずれる
基本の使い方#
**ユーザーが達成したいこと(ゴール)とどこからフローが始まるか(エントリーポイント)**を明確にする。
- ゴール例:「商品を購入する」「アカウントを作成する」
- エントリーポイント例:トップページ、検索結果、広告LP
- 1つのフローには1つのゴールを設定する
ゴールが曖昧だと、フローも曖昧になる。「ユーザーは何をもって成功とするか?」を言語化すること。
ゴールに至るまでの全操作ステップを書き出し、判断が必要な分岐点を特定する。
- 各ステップは「〜する」の形で書く
- 分岐は「はい/いいえ」や「条件A/条件B」で表現する
- エラーケースや例外ケースも含める
まず主要なハッピーパスを描いてから例外を追加する。
洗い出したステップを視覚的なフローチャートにまとめる。
- 長方形=画面やアクション、ひし形=分岐、楕円=開始/終了
- FigmaやMiro、draw.ioなどのツールが便利
- チームメンバーに見せて違和感がないか確認
完成したフローを見直し、ユーザーの負担を減らせるポイントを探す。
- 「このステップは本当に必要か?」を各ステップに問いかける
- 入力の自動化で省略できるステップはないか
- ゴールまでのステップが1つ減るだけで、離脱率は大きく改善する
具体例#
フロー分析で発見した問題: 商品詳細→カート→ログイン必須→配送先入力→支払い→確認→完了の7ステップ。ログイン画面での離脱率が42%と突出。
改善: ログイン画面に「ゲスト購入」の選択肢を追加。ゲストはメールアドレスのみで購入可能に。配送先の前回入力値をクッキーで保持。
結果: 購入フローの離脱率が42%から14%に改善(28pt減)。 ゲスト購入者の30%が購入後にアカウント作成(フロー完了後の方がハードルが低い)。
Before: 求人詳細→応募ボタン→ログイン→履歴書アップロード→職務経歴入力→自己PR→確認→完了の8ステップ。応募開始から完了までの平均離脱率は68%。
フロー分析で発見: 職務経歴と自己PRは面接前に必要だが、応募時点では不要。確認画面はほぼ全員が修正なしで通過。
After: 求人詳細→応募(名前+メール+履歴書)→完了→後日「職務経歴の追加」をメールで案内の4ステップに短縮。
結果: 応募完了率が32%から71%に向上(2.2倍)。 後日の職務経歴追加率も78%と高く、情報の欠損は最小限。
フロー作成で発見: 稟議の承認フローが申請者→課長→部長→経理→総務→役員の6段階。各段階で平均0.8日のリードタイム。しかし金額10万円以下の案件(全体の65%)も全段階を通過していた。
改善: 金額による分岐をフローに追加。10万円以下は課長→経理の2段階で完了。10〜50万円は部長まで。50万円超のみ役員承認。
結果: 平均承認期間が5日から1.5日に短縮。 年間の稟議処理件数が1,200件→同数だが、管理職の承認作業時間が年間480時間削減。
やりがちな失敗パターン#
- ハッピーパスしか描かない — エラー時やイレギュラーな操作を考慮しないと、実装時に大量の抜け漏れが発覚する。例外パスも必ず描くこと
- フローが細かすぎてメンテ不能になる — ボタンのホバー状態まで含めると更新が追いつかない。「画面単位」か「主要アクション単位」の粒度に留める
- フローを作って満足してしまう — ユーザーフローはあくまで仮説。実際のデータやユーザーテストで検証し、改善を続けることが重要
- 複数ゴールを1つのフローに詰め込む — フローが複雑になりすぎる。1フロー1ゴールの原則を守り、関連するフローは別図に分ける
まとめ#
ユーザーフロー設計は、ユーザーの行動を 「見える化」 する最もシンプルで強力な手法。画面遷移を図にするだけで、無駄なステップ・迷いやすい分岐・チーム内の認識ずれが浮き彫りになる。新しい機能を作るとき、まずユーザーフローを描くことから始めよう。