UX・マーケティング

ユーザーフローテンプレート

初回訪問からダッシュボードまでの画面と分岐

ユーザーフローテンプレートのプレビュー

テンプレートの中身

ノード数
11
パック
フローチャートワイヤーフレーム
カテゴリ
UX・マーケティング

Free プランで使えます:ダイアグラムあたり 15 ノード+メモ・テキスト・ステッカー・マインドマップのトピック 150。

ユーザーフローは、ある人が目的にたどり着くまでに目にする画面と、途中で行う選択を図にしたものです。このテンプレートは初回訪問を追います。アプリを開いてからダッシュボードに着くまでに、ようこそ画面、アカウントの有無による分岐、そして登録とログインの画面があります。

画面は実際のコントロールを備えたシンプルなワイヤーフレームなので、ユーザーがどこへ進むかだけでなく、何を目にするかもわかります。プロダクトに必要なエラー状態、パスワードを忘れた場合の経路、オンボーディングの手順を加え、画面を作り始める前にデザインとエンジニアリングでフローを確認しましょう。

使いどころ

  • 詳細なモックアップを作る前に、新機能やオンボーディングの流れを設計するとき。
  • 既存の導線を見直して、行き止まりや不要な手順を見つけるとき。
  • 開発者、テスター、サポート担当にフローを説明するとき。
  • 登録や購入手続きの2つの案を比べるとき。

使い方

  1. 開始点と終了点の名前を、設計しているゴールに合わせて変えます。

  2. ワイヤーフレームの画面を編集し、ユーザーが目にする手順ごとに画面を追加します。

  3. 道が分かれる場所に判断を加え、各矢印にそこへ進む条件のラベルを付けます。

  4. エラーや例外のケースを加え、レビューのためにフローを共有するか、設計ドキュメント用に書き出します。

よくある質問

画面のために別のデザインツールが必要ですか?

フローを描くだけなら必要ありません。ワイヤーフレームパックには、構造を示すのに十分な画面、ボタン、入力欄、ナビゲーション要素があります。ピクセル単位の見た目が必要になったら、デザインツールに移りましょう。

ユーザーフローとカスタマージャーニーマップの違いは何ですか?

ユーザーフローはプロダクト内の画面と判断を扱います。ジャーニーマップは、感情やプロダクト外の接点も含め、時間の流れに沿ったより広い体験を扱います。

関連テンプレート

関連するユースケース

フローチャート作成ツール

1分でキャンバスを開く

Google または GitHub でサインイン。1シートは無料で、チームが加わったらアップグレード。