ux-flow

UX フロー設計者

使用する場面

実績のある UX パターンに沿って、ユーザーフローとナビゲーション構造を設計する必要がある場合に、このスキルを使用します。

使用しない場面

• 単一ページを実装する場合 → フローが確定した後に /ss-page を使用します
• 各ステップのコピーを作成する場合 → 構造が確定した後に /ss-copy を使用します
• 製品全体の情報アーキテクチャを設計する場合 — まず対象を1つのフローに絞ります
• ハイファイモックアップを作成する場合 — これはフローマップを作成するもので、ピクセル単位で仕上げたデザインではありません

ユーザーフローを設計します：$0 説明：$ARGUMENTS

手順

1. デザインシステムのリファレンスを読みます：

   • コンポーネント一覧は CLAUDE.md
   • レイアウトパターンは DESIGN-LANGUAGE.md（セクション13-14、19-20）
   • 利用可能な構成要素は components/patterns/

2. 以下の UX 原則を適用します：

情報アーキテクチャ

• 段階的開示：各ステップで必要な情報だけを表示します。複雑さは論理的な掘り下げの先に隠します。
• ミラーの法則：情報は最大5～9項目のグループに分けます。
• ヒックの法則：画面ごとの選択肢を最小限にします。選択肢が少ないほど、判断は速くなります。

ナビゲーションパターン

• ハブ＆スポーク：ダッシュボード → 詳細ページ → ダッシュボードに戻る（モバイルアプリのデフォルト）
• リニアフロー：ステップ1 → ステップ2 → ステップ3（フォーム、オンボーディング、チェックアウト向け）
• タブナビゲーション：BottomNav を介した、最上位の3～5セクション

画面フローのルール

• すべてのフローに明確な開始地点と明確な終了地点を設けます
• ホーム画面から主要機能へは、最大3タップで到達できるようにします
• ルート画面を除き、常に戻るナビゲーションを利用できるようにします
• エラー状態には、必ず復旧手段（再試行、戻る、サポートへの問い合わせ）を用意します
• 読み込み状態にはスケルトン画面を使用します（カード内でスピナーは使用しません）

ページ構成（DESIGN-LANGUAGE.md より）

• 情報ピラミッドに従います：ヒーロー → KPI グリッド → 詳細 → リスト
• 各画面で答える主要な問いは1つにします
• ファーストビューには、最も重要な指標またはアクションを配置します
• 4種類のセクションを使用します：フルカード（A）、グリッド（B）、カルーセル（C）、ヒーロー（D）

3. 出力形式：

   • 画面のつながりを示す ASCII のフロー図
   • 各画面の目的と主要コンポーネントを列挙した画面一覧
   • 各画面のエッジケース（空状態、エラー、読み込み）
   • PageShell、TopBar、BottomNav パターンを使ったスキャフォールド済みページ

4. /ss-page の規約に従って、実際のページファイルを生成します。

例

ユーザーのリクエスト：

実績のある UX パターンに沿って、ユーザーフローとナビゲーション構造を設計してください。

制限事項

• タスクが上流の情報源およびローカルのプロジェクトコンテキストに明確に合致する場合に限り、このスキルを使用します。
• 変更を適用する前に、コマンド、生成コード、依存関係、認証情報、外部サービスの動作を検証します。
• 例を、環境固有のテスト、セキュリティレビュー、または破壊的・高コストな操作に対するユーザー承認の代わりにしてはいけません。

実行境界

このガイドは既存の StyleSeed プロジェクトを対象としています。記載されているプロジェクトパス、コンポーネント、トークン、/ss-* コマンドは、この単一ファイルのエントリーポイントには含まれていません。実際のプロジェクトルートを特定し、編集前に必要な前提条件を確認してください。リソースが存在しない場合は、作り上げずにその旨を報告してください。ホストがサポートする起動方法と既存のプロジェクト規約を使用してください。レイアウトの数値はデザインシステム上の選択であり、普遍的なユーザビリティの保証ではありません。実際のインターフェースで、キーボード操作、レスポンシブ時のはみ出し、モーションの低減をテストしてください。