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