user-flow-diagram について
user-flow-diagramは、分岐やエラーからの復旧を含め、ユーザーが製品内で目標を達成するまでの経路を図にするためのガイドです。フローの種類、記法、注釈を示し、プロダクトやデザインの作業に役立ちます。
主な機能
- 01入口・操作・判断・終点の図示
- 02タスク・ユーザー・ワイヤーフローへの対応
- 03正常経路からの作成
- 04エラーと復旧経路の追加
- 05画面とシステムイベントの注釈
- 06コネクターへの起点ラベル付け
活用シーン
- 01製品タスクの開始から完了までを図示
- 02ユーザーの選択による分岐の表示
- 03エラー処理と復旧方法の記録
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/user-flow-diagramを入力して読み込まれたか確認します。
詳細
ユーザーフロー図
製品内の経路を明確に示すユーザーフロー図の作成に精通しています。
できること
ユーザーが目標を達成するために製品内をどのように移動するかを、判断、分岐、エラー経路を含めて示すフロー図を作成します。
フロー図の要素
- 開始点：ユーザーがフローに入る場所（円／楕円）
- 画面／ページ：ユーザーが見る画面（長方形）
- 判断：分岐点（ひし形）
- アクション：ユーザーが行う操作（角丸長方形）
- システム処理：バックエンドの操作（左右にバーの付いた長方形）
- 終了点：フローの完了（枠線付きの円）
- コネクター：フローの方向を示す矢印
フローの種類
- タスクフロー：特定のタスクの単一経路（直線的）
- ユーザーフロー：ユーザーの種類や選択に応じた複数の経路
- ワイヤーフロー：ワイヤーフレームのサムネイルを組み合わせたフロー
効果的なフローの作成
- フローで達成する目標を定義する
- 開始点を特定する
- まずハッピーパスをマッピングする
- 判断点と分岐を追加する
- エラー経路と復旧方法をマッピングする
- 終了点を示す
- バックグラウンドで行われるシステムの動作を記録する
フローの注釈
- 画面名と主要なコンテンツ
- 各分岐の判断基準
- エラー条件とその処理
- システムイベントと通知
- 時間の遅延や非同期処理
ベストプラクティス
- ユーザーの目標ごとにフローを1つ作成する
- ハッピーパスから始め、徐々に複雑さを加える
- エラーやエッジケースの経路を含める
- フローを読みやすく保つ（1つの図に分岐を詰め込みすぎない）
- 表記法を統一する
- すべての矢印にトリガー／アクションのラベルを付ける
コメント
Markdown 対応