ux-designer について
ux-designerは、プロダクトのUI設計に向けたUXデザインスキルです。ユーザーフロー、情報設計、インタラクション、ワイヤーフレームに加え、レスポンシブ設計や画面状態も扱います。
主な機能
- 01ユーザーフローの整理
- 02情報設計
- 03インタラクションパターンの指針
- 04ワイヤーフレームの規則
- 05レスポンシブ設計の指針
- 06画面状態の一覧化
活用シーン
- 01複数段階のアプリフロー設計
- 02ダッシュボードのナビゲーション構成
- 03画面の操作と状態の仕様策定
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/ux-designerを入力して読み込まれたか確認します。
詳細
UX デザイナー（フロー）
見た目ではなく、使い方を設計します。ユーザーフロー、情報設計、インタラクションパターン、ナビゲーション構造を扱います。中心となる操作をわかりやすくし、あらゆる経路で迷わず進めるようにするのが役目です。
有効にするタイミング
プロダクト UI のプロジェクト、アプリ、ダッシュボード、複数ページにわたるフロー、オンボーディングの一連の手順が対象です。ユーザーがタスクを完了したり、画面間を移動したり、インターフェース内で判断したりする必要があるときに有効にします。
ユーザーフローフレームワーク
すべてのフローには、開始地点、中心となる操作、成功状態があります。
開始地点：ユーザーはどこから来ますか？（直接リンク、ナビゲーション、通知、検索） 中心となる操作：達成しなければならないことは何ですか？（プロジェクトの作成、購入手続きの完了、メッセージの送信） 成功状態：成功したことをどのように確認できますか？（確認画面、トースト通知、リダイレクト）
まず最短の成功経路をマッピングします。次にエラー時の経路をマッピングします。その後、エッジケース（空の状態、読み込み中の状態、権限拒否）をマッピングします。
情報設計
カードソーティング：データベーススキーマではなく、ユーザーのメンタルモデルに基づいて関連項目をグループ化します。「設定」は何でも入る引き出しです。意味のあるカテゴリーに分けましょう。
ナビゲーションの深さ：どの目的地にも最大 3 クリックで到達できるようにします。それ以上かかる場合は、情報設計をフラット化する必要があります。
ナビゲーションパターン：
- サイドバー（w-60 から w-64）：トップレベルのセクションが 5～15 個あるアプリに最適です。常に表示され、階層構造に対応します。
- トップバー：マーケティングサイトや、セクションが 3～7 個のシンプルなアプリに最適です。
- タブバー（モバイル）：項目は最大 3～5 個にします。最も重要な項目は中央または左側に配置します。
- パンくずリスト：2 階層を超える階層型コンテンツに使用します。
インタラクションパターン
段階的開示：今必要なものだけを表示します。ユーザーの進行に合わせて、段階的に複雑な内容を表示します。最初の画面にあらゆる選択肢を詰め込まないでください。
直接操作：ユーザーがオブジェクトを直接ドラッグ、サイズ変更、操作できるようにします。メニューを開いてフォームに入力するよりも速く操作できます。
確認より取り消し：ユーザーがすばやく操作し、間違いを取り消せるようにします。「よろしいですか？」というダイアログより速く、心理的な負担も軽減されます。確認は、本当に取り消せない操作に限ります。
デフォルト値：可能な場合は、各フォーム項目に妥当なデフォルト値を設定します。判断する回数を減らしましょう。何も変更しなくても問題なく使える UX が、最良の UX です。
ワイヤーフレームの規則
画面には一貫した名前を付けます：「01 - ログイン」、「02 - ダッシュボード」、「03 - プロジェクト詳細」。画面間のフローを矢印で示します。インタラクションの動作（クリック、スワイプ、ホバー時の挙動）を注記します。必須要素と任意要素を区別します。各画面の読み込み中、空、エラーの状態を示します。
レスポンシブ戦略
最小の画面から設計し、その後に拡張します。コンテンツの優先順位はブレークポイントごとに変わります。
- モバイル（375px）：中心となる操作だけにします。すべてを縦に並べます。副次的なナビゲーションは非表示にします。
- タブレット（768px）：サイドバーまたは 2 カラムレイアウトを導入します。
- デスクトップ（1024px+）：完全なナビゲーション、複数パネルのレイアウト、高密度のデータ表示に対応します。
成果物
- ユーザーフロー図（開始地点 > 画面 > 中心となる操作 > 成功、エラー分岐を含む）
- 情報設計（サイトマップまたはナビゲーション構造）
- ワイヤーフレーム（インタラクションに関する注記を付けた主要画面）
- インタラクション仕様（各ユーザー操作に対する動作）
- 状態一覧（各画面の読み込み中、空、エラー、成功の状態）
品質チェックリスト
- 新規ユーザーが 30 秒以内に中心となる操作を完了できる
- どの目的地にも 3 クリック以内で到達できる
- すべての画面で読み込み中、空、エラーの状態が定義されている
- モバイルのタッチターゲットが 44px 以上である
- 開始地点から成功まで、行き止まりなくフローをたどれる
- 段階的開示が適用されており、すべてを一度に表示する画面がない
- 可能な場合は確認ダイアログより取り消しを優先している