generic-ux-designer

汎用 UX デザイナー

あらゆるプロジェクトの制約に適応する、プロフェッショナルな UX の専門知識です。

ビジュアル作業ではリサーチと組み合わせる

UI／ビジュアルデザインの判断では、以下も使用してください。

Skill(ui-research)  # Research inspiration first

参考資料：

• UX 原則 - UX の方法論
• UI のインスピレーションソース - ビジュアルリサーチ

このスキルを使う場面

次の場合に使用します：

• 新しい機能やフローを設計する
• 既存のユーザー体験を改善する
• デザインレビューや批評を行う
• ユーザーフローやインタラクションを評価する
• アクセシビリティに関する判断を行う
• デザイン案から選択する

次の場合は使用しないでください：

• ビジュアルスタイル／トークン → generic-design-system を使用
• コードアーキテクチャ → generic-feature-developer を使用
• コード品質レビュー → generic-code-reviewer を使用

デザイン思考プロセス

1. 共感する - ユーザーのニーズ、課題、行動経路を理解します
2. 定義する - 問題の記述、ペルソナ、成功指標を定めます
3. アイデアを出す - 解決策をブレインストーミングし、代替案を探ります
4. プロトタイプを作る - まずは低忠実度で作成し、仮説を検証します
5. テストする - ユーザビリティテストを行い、データに基づいて改善します

リサーチの判断ガイド

リサーチするか、リリースするか

状況	対応
新しい製品／機能	本格的なリサーチ（インタビュー＋テスト）
段階的な変更	簡易レビュー（ヒューリスティック評価）
バグ修正	リサーチ不要
A/B テストの判断	アナリティクス＋小規模テスト
意見が分かれるデザイン	まず関係者間の合意を形成する

手法の選択

• ユーザーの動機を知りたいですか？ → インタビュー
• ユーザビリティに関するフィードバックが必要ですか？ → テスト
• 品質をすばやく確認したいですか？ → ヒューリスティック評価
• 定量データが必要ですか？ → アンケート／アナリティクス
• まだユーザーがいませんか？ → 競合分析＋仮ペルソナ

確信度に応じたリサーチの範囲

確信度	対応
高（確立されたパターン）	リサーチを省略する
中（不確実な点がある）	簡易レビュー
低（未開拓の領域）	本格的なリサーチ

参考資料： 手法の詳細なフレームワークについては UX_PRINCIPLES.md を参照してください。

ユーザー心理の活用

認知負荷

• 選択肢を減らします（ヒックの法則）
• 情報をまとめます（ミラーの法則）
• 段階的に情報を開示します
• 記憶への負荷を最小限に抑えます

視覚的な階層

• サイズで重要度を示します
• コントラストで注意を引きます
• 余白で要素をグループ化します
• F 字型／Z 字型の読み進め方を考慮します

インタラクションパターン

ナビゲーション

パターン	使用場面
上部ナビ	シンプルなサイト、7 項目未満
サイドナビ	複雑なアプリ、多数のセクション
下部ナビ	モバイルアプリ、5 項目未満
タブ	関連するコンテンツセクション

フォーム

• 1 列レイアウト
• 入力中の検証
• 適切なデフォルト値
• 進捗インジケーター

フィードバック

パターン	使用場面
トースト	操作を妨げない情報
モーダル	操作を妨げる／重要
インライン	文脈に即したフィードバック
スケルトン	読み込み状態

モバイルでの考慮事項

• タッチターゲット：最小 44x44px
• ターゲット間の間隔は 8px
• 親指で操作しやすい配置
• アクションにはボトムシートを使用

アクセシビリティ（UX の観点）

項目	アプローチ
視覚	高いコントラスト、拡大可能なテキスト
運動	大きなターゲット、キーボード操作
認知	平易な言葉、明確な構成
聴覚	字幕、視覚的なインジケーター

ヒューリスティック評価の実践

クイックスキャン（5分）

ヒューリスティック	クイックチェック
視認性	現在の状態は一目でわかりますか？
フィードバック	すべての操作に応答がありますか？
一貫性	似た操作は似た見た目・動作になっていますか？
エラー防止	ユーザーが簡単に間違えられる状態ですか？
復旧	ユーザーは操作を取り消したり、エラーを修正したりできますか？

指摘すべきよくある違反

• システム状態が隠れている（インジケーターなしで読み込み中）
• サイレントな失敗（操作に対するフィードバックがない）
• 一貫性のないパターン（同じ操作に異なるボタンを使う）
• 確認なしの破壊的操作（取り消しできない削除）
• ユーザー向けテキストに専門用語が使われている

調査結果の提示

Issue: [What's wrong]
Heuristic: [Which violated]
Impact: [User consequence]
Suggestion: [How to fix]
Priority: P0/P1/P2

デザイン批評フレームワーク

観点	質問
ユーザビリティ	ユーザーはタスクを完了できますか？
明確さ	目的はすぐに明確になりますか？
一貫性	確立されたパターンに従っていますか？
階層	最も重要な要素が際立っていますか？
フィードバック	ユーザーはシステムの状態を把握できますか？
アクセシビリティ	誰もが使えますか？

UX パターン

空の状態

1. ここに何が表示されるかを説明する
2. 最初の操作に導く
3. コンテンツの例を表示する

読み込み状態

1. スピナーよりスケルトンスクリーンを使う
2. 時間のかかる処理には進行状況を表示する
3. 安全な場合は楽観的 UI を使う

エラー状態

1. 何が起きたかを説明する
2. 修正方法を提案する
3. ユーザーを責めない

UX 出力チェックリスト

UX の推奨事項を提示する前に確認します。

• ユーザーの課題が明確に定義されている
• 解決策が根本原因に対処している（症状だけではない）
• アクセシビリティを考慮している
• エッジケースを特定している
• 実装の複雑さを記載している
• 成功指標を定義している

デザインレビューチェックリスト

• 主なタスクを達成できる
• 視覚的な階層が明確である
• キーボードで操作できる
• タッチターゲットのサイズが適切である
• 文言が明確で役に立つ

関連項目

• UX Principles - 調査手法、ヒューリスティック、心理学
• Design Patterns - 視覚的なパターンとコンポーネント
• generic-design-system - トークン、スタイリング、視覚的一貫性について
• generic-feature-developer - 実装アーキテクチャについて
• プロジェクトの CLAUDE.md - プロジェクト固有の制約

次の内容については、UX_PRINCIPLES.md を参照してください。

• 調査手法のフレームワーク全体 → 手法のセクション
• Nielsen のヒューリスティック全体 → 評価のセクション
• クイック批評ワークフロー → 批評のセクション