3行でわかるユーザーフローとジャーニーマップの違い
- ユーザーフロー：ユーザーがタスクを完了するまでの画面遷移図
- ジャーニーマップ：ユーザーの体験全体を時系列で可視化した図
- 違い：フローは「どう動くか」を設計し、ジャーニーは「何を感じ、どこに課題があるか」を捉える
導入：「フローとジャーニー、どっちを作ればいい？」
「ユーザーの動きを整理したい。フロー図を作ればいいですか？」 「カスタマージャーニーマップを作ったのに、画面設計に使えない」
こんな悩みを聞くことがあります。これはユーザーフローとジャーニーマップの役割を混同していることから生じます。
両者は似たように見えますが、目的も粒度も全く異なります。
- ユーザーフロー: 画面遷移の設計図（How）
- ジャーニーマップ: 体験の時系列分析（Why / What）
フローは「動き」を設計し、ジャーニーは「体験全体」を可視化する。 この違いを理解していないと、適切なツールを適切なタイミングで使えない。本記事では、その違いと実務での使い分けを明確にする。
ユーザーフローとジャーニーマップの違い（定義）
ユーザーフローは「遷移」であり、ジャーニーマップは「体験」である。
| 項目 | ユーザーフロー | ジャーニーマップ |
|---|---|---|
| 定義 | ユーザーがタスクを完了するまでの画面遷移図 | ユーザーの体験を時系列で可視化した図 |
| 視点 | システム視点（画面・機能） | ユーザー視点（感情・行動・課題） |
| 粒度 | 画面・ステップ単位 | フェーズ・タッチポイント単位 |
| 範囲 | プロダクト内の操作 | プロダクト内外を含む体験全体 |
| 用途 | UI設計、開発仕様 | 課題発見、体験改善の優先順位付け |
ユーザーフローはソフトウェア工学のプロセスフロー図を起源とし、画面遷移や分岐を視覚化する。ジャーニーマップはサービスデザインの文脈で発展し、顧客がサービスと関わる一連の接点を時系列で可視化するツールである。IDEOが述べたとおり、「個別の接点ではなく、体験全体を設計するために使う」。
一言での使い分け
ユーザーフローは「どう動くか」——画面遷移の設計図。 ジャーニーマップは「どう感じるか」——体験の時系列分析。
この違いを意識するだけで、どちらをいつ使うべきかが明確になる。
タップして拡大表示クリックして拡大表示
具体例・ケース比較
ケース1：ECサイトの購入体験
| 観点 | ユーザーフロー | ジャーニーマップ |
|---|---|---|
| 範囲 | カート→配送先入力→支払い→確認→完了 | 認知→検索→比較→購入→配送→使用→口コミ |
| 記述内容 | 各画面の遷移、分岐（ログイン有無など） | 各フェーズの行動・感情・課題・タッチポイント |
| 発見例 | 「支払い画面で戻るボタンがない」 | 「配送待ちの期間に不安を感じている」 |
| 改善策 | 戻るボタンを追加 | 配送状況通知を強化、追跡機能を改善 |
ケース2：SaaSの導入体験
| 観点 | ユーザーフロー | ジャーニーマップ |
|---|---|---|
| 範囲 | サインアップ→初期設定→ダッシュボード | 認知→評価→契約→導入→運用→更新/解約 |
| 記述内容 | 登録フォーム、プラン選択、初期ウィザード | 導入検討時の不安、成功体験、解約理由 |
| 発見例 | 「初期設定の手順が10ステップある」 | 「導入後1週間で価値を感じないと解約する」 |
| 改善策 | 初期設定を3ステップに短縮 | オンボーディング強化、早期に成功体験を提供 |
ケース3：予約サービス
| 観点 | ユーザーフロー | ジャーニーマップ |
|---|---|---|
| 範囲 | 日時選択→人数選択→確認→予約完了 | 計画→検索→予約→当日→体験後 |
| 記述内容 | カレンダーUI、確認画面の情報 | 予約前の期待、当日の体験、事後の記憶 |
| 発見例 | 「空き状況の更新が遅い」 | 「当日のリマインドが欲しい」 |
| 改善策 | リアルタイム在庫表示 | 前日リマインダー、当日の持ち物チェックリスト |
なぜ重要なのか
1. 視点が異なる
| ユーザーフロー | ジャーニーマップ |
|---|---|
| 「ユーザーは次にどの画面に行くか」 | 「ユーザーはこの時点で何を感じているか」 |
| システムの動作を記述 | ユーザーの体験を記述 |
| 設計者・開発者向け | ステークホルダー全員向け |
フローは「機能」を設計し、ジャーニーは「体験」を設計します。
タップして拡大表示クリックして拡大表示
2. 範囲が異なる
- ユーザーフロー: アプリ内の「購入ボタンを押す→確認画面→完了画面」
- ジャーニーマップ: 「商品を知る→比較検討→購入→配送待ち→開封→使用→リピート検討」
フローはプロダクト内に閉じていますが、ジャーニーはプロダクトの外まで広がります。
実務でなぜ区別すべきか
UIXHEROがこの2つを厳密に区別する理由は3つあります。
1. 使うタイミングが異なる
| フェーズ | 使うツール |
|---|---|
| 課題発見・要件定義 | ジャーニーマップ |
| UI設計・画面設計 | ユーザーフロー |
| 開発仕様の共有 | ユーザーフロー |
| 体験全体の改善検討 | ジャーニーマップ |
ジャーニーマップは「何を作るべきか」を決め、ユーザーフローは「どう作るか」を決めます。
タップして拡大表示クリックして拡大表示
2. 粒度を間違えると役に立たない
- フローが粗すぎる: 開発仕様として使えない
- フローが細かすぎる: 体験全体が見えない
- ジャーニーが粗すぎる: 具体的な改善点が見えない
- ジャーニーが細かすぎる: 画面設計になってしまう
適切な粒度で作ることが、両ツールの価値を最大化します。
3. 共有相手が異なる
| ツール | 主な共有相手 |
|---|---|
| ユーザーフロー | デザイナー、エンジニア |
| ジャーニーマップ | 経営層、マーケ、CS、全ステークホルダー |
ジャーニーマップは「共通言語」として、部門を超えた議論に使えます。
作り方の違い
ユーザーフローの作り方
- タスクを定義: 「会員登録を完了する」など
- 開始点と終了点を決める: どこから始まり、どこで終わるか
- 画面を洗い出す: 必要な画面をリストアップ
- 遷移を描く: 矢印で画面間の移動を表現
- 分岐を追加: 条件による分岐（ログイン済み/未ログインなど）
ジャーニーマップの作り方
- ペルソナを設定: 誰の体験を描くか
- フェーズを定義: 認知→検討→購入→使用など
- 各フェーズの要素を埋める:
- 行動（何をしているか）
- タッチポイント（どこで接触するか）
- 感情（どう感じているか）
- 課題（何に困っているか）
- 機会を特定: 改善できるポイントを洗い出す
よくある質問 (FAQ)
Q1. 両方作る必要がありますか？
プロジェクトの規模と目的によります。
- 小さな機能改善: ユーザーフローだけで十分
- 新規サービス設計: ジャーニーマップ→ユーザーフローの順で両方作る
- 体験全体の見直し: まずジャーニーマップで課題を特定
Q2. ジャーニーマップからユーザーフローは作れますか？
直接は作れませんが、つながります。
- ジャーニーマップで「このフェーズを改善したい」と特定
- そのフェーズに関わる機能を洗い出す
- その機能のユーザーフローを設計
ジャーニーマップは「どこを改善するか」、フローは「どう実装するか」を示します。
Q3. ユーザーフローとワイヤーフローの違いは？
| ユーザーフロー | ワイヤーフロー |
|---|---|
| 画面遷移のみを示す | 画面遷移＋各画面のワイヤーフレーム |
| 抽象度が高い | より具体的 |
| 早い段階で作成 | ワイヤーフレーム作成後 |
ワイヤーフローは、ユーザーフローにワイヤーフレームを組み合わせた、より詳細なドキュメントです。
ユーザーフローは「どう動くか」——画面遷移の設計図である。 ジャーニーマップは「どう感じるか」——体験の時系列分析である。
まとめ
- ユーザーフロー: 画面遷移の設計図（システム視点・プロダクト内）
- ジャーニーマップ: 体験の時系列分析（ユーザー視点・プロダクト外も含む）
- 使い分け: ジャーニーで「何を改善するか」を決め、フローで「どう実装するか」を設計する。
「画面の流れ」と「体験の流れ」は違う。両方の視点を持つことで、機能だけでなく体験を設計できる。
次に読む
- ユーザーフローの書き方 — 実践ガイド
- カスタマージャーニーマップの作り方 — テンプレート付き
- 情報アーキテクチャとは — 構造設計の基本
- IAとナビゲーションの違い — 構造と導線の関係
