無料AIユーザーフロー作成ツール

実際の動作を見る

ユーザーフローダイアグラムの例

同じツールに4つの依頼。以下の図はすべて実際に生成されたものです。

入力する内容

モバイルバンキングのパスワード再設定ユーザージャーニーを上から下へ作成：アプリを開き、「パスワードを忘れた場合」を選択し、顧客IDを入力して、ワンタイムパスコードを受け取る。パスコードが無効なら、銀行サポートとアカウント復旧の確認へ進む。有効なら、新しいパスワードを作成し、任意でFace IDまたは指紋認証に登録してサインインする。セキュリティアラートを受け取り、アカウントへのアクセスを復旧する。

次に試すパスコードを送信する前に、端末認証の確認を追加する。パスコードの入力に3回失敗したらアカウントをロックする経路に変更する。

フローチャート · Sugiyama layered DAG + orthogonal routing · schematex-flowchart

生成された図

ユーザーフローダイアグラムとは

ユーザーフローダイアグラムは、プロダクトでユーザーが目標を達成するまでの経路を示します。画面や操作を、選択肢、エラー、ループ、成功した結果とつなぎます。

デザインチームやプロダクトチームは、構築前に各経路が分かりやすいか確認するためにユーザーフローを使います。行き止まり、足りない状態、予期しない分岐について話し合いやすくなります。

Standard: Sugiyama layered DAG + orthogonal routing
Engine: schematex-flowchart
Editable: Double-click text, drag nodes
Export: SVG · PNG · PDF

利用者

ユーザーフローダイアグラムを使う人

プロダクトデザイナー

ワイヤーフレームやプロトタイプを確定する前に、ナビゲーション経路と画面の状態を整理する。

UXリサーチャー

ユーザビリティ調査の計画や、参加者がつまずきそうな箇所の把握に使うタスク経路を整理する。

プロダクトマネージャー

機能を定義する際に、購入手続きの選択肢、エラー、結果を共有する。

使い方

ユーザーフローダイアグラムの作り方：3ステップ

説明する

まずは1段落で十分です。

“モバイルバンキングのパスワード再設定ユーザージャーニーを上から下へ作成：アプリを開き、「パスワードを忘れた場合」を選択し、顧客IDを入力して、ワンタイムパスコードを受け取る。パスコードが無効なら、銀行サポートとアカウント復旧の確認へ進む。有効なら、新しいパスワードを作成し、任意でFace IDまたは指紋認証に登録してサインインする。セキュリティアラートを受け取り、アカウントへのアクセスを復旧する。”