Software UI/UX Design

直感的でアクセシブルなユーザー中心のインターフェースを設計します。

ベースライン (2026年3月):

• アクセシビリティ: WCAG 2.2 Level AA — W3C
• パフォーマンス: Core Web Vitals (LCP ≤2.5s, INP ≤200ms, CLS ≤0.1) — web.dev
• プラットフォーム: Apple HIG, Material 3

---

クイックスタート

• プラットフォーム、主要なユーザージャーニー、制約条件(アクセシビリティレベル、パフォーマンス、ローカライゼーション、認証)を明確にします。
• トラックを選択: 既存UIの監査(ヒューリスティック + 状態マトリックス + WCAG)または新規UI設計(IA + フロー + UI仕様)。
• 成果物を作成: 推奨事項、受け入れ基準、ハンドオフ仕様(コンポーネント、状態、コピー、トークン)。

---

デシジョンツリー

Design challenge:
    ├─ What to build? → Use software-ux-research first
    ├─ Improving existing UI?
    │   ├─ Usability issues → Heuristic review
    │   ├─ Accessibility gaps → WCAG 2.2 audit
    │   ├─ Inconsistency → Design system alignment
    │   └─ Conversion issues → CRO audit
    ├─ Building new UI?
    │   └─ references/ui-generation-workflows.md
    ├─ Non-technical users / simplification?
    │   └─ references/simplification-patterns.md
    ├─ Specific demographics?
    │   └─ references/demographic-inclusive-design.md
    └─ Platform constraints?
        ├─ Web → semantics + focus + reflow
        ├─ iOS → system nav + Dynamic Type
        └─ Android → Material + edge-to-edge

---

インタラクションチェックリスト

目的	実装	避けるべき
明確性	1ビューに1つのプライマリアクション	競合するCTA
アフォーダンス	ネイティブコントロール、強い視認性	クリック可能なdiv、ホバーのみ
フィードバック	即座の視覚的応答	サイレントなタップ
エラー防止	入力を制限、例を表示	送信後失敗
エラー復旧	具体的なメッセージ + 次のステップ	「問題が発生しました」
一貫性	パターンと用語を再利用	同じ用語で異なる意味

---

状態マトリックス

状態	処理	タイミング
ローディング	レイアウトに合わせたプレースホルダー	データ取得中
空	メッセージ + CTA	アイテムがゼロ
エラー	アラート + リトライアクション	リクエスト失敗
オフライン	バナー + キャッシュインジケーター	ネットワークなし
機能低下	警告 + 限定機能	部分的な失敗

---

プラットフォーム制約

Web

• セマンティックHTML優先(「div スープ」なし)
• 必要な場合のみAUES使用
• SPA ナビゲーション時のフォーカス管理
• 320 CSS px で リフロー対応 (WCAG 1.4.10)
• ターゲットサイズ ≥24px (WCAG 2.5.8)

iOS

• システムナビゲーション(タブバー、ナビゲーションバー)
• Dynamic Type サポート
• ダークモード + システムマテリアル
• Safe Area に対応

Android

• Material 3 コンポーネント
• Dynamic Color (Material You)
• エッジツーエッジコンテンツ
• 予測的戻るボタンに対応

---

WCAG 2.2 主な変更

要件	実装
フォーカスが隠れない	スティッキーUIでフォーカスを可視化
フォーカス表示	明確な可視インジケーター
ドラッグ操作	ドラッグ以外の代替手段
ターゲットサイズ	≥24×24 CSS px
冗長な入力	既知の情報を再度要求しない
アクセシブル認証	認知的テストを避ける

減速モーション

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

---

デザイントークン

{
  "color": {
    "primary": {
      "$value": "#0066cc",
      "$type": "color"
    }
  },
  "spacing": {
    "sm": {
      "$value": "8px",
      "$type": "dimension"
    }
  }
}

レイヤー	例	目的
プリミティブ	blue-500, 16px	基本値
セマンティック	color-primary	インテント指向
コンポーネント	button-bg	コンポーネント固有

---

リソース

リソース	目的
references/implementation-research-workflow.md	構築前のリサーチ
references/design-systems.md	デザインシステムパターン
references/component-library-comparison.md	shadcn, MUI, Radix の比較
references/nielsen-heuristics.md	ヒューリスティック評価
references/wcag-accessibility.md	WCAG コンプライアンス
references/demographic-inclusive-design.md	年齢別UX
references/neurodiversity-design.md	ADHD、自閉症、読字障害対応
references/ui-generation-workflows.md	UIをゼロから構築
references/ai-design-tools-2025.md	Figma AI, v0
references/cro-framework.md	変換最適化
references/mobile-ux-patterns.md	モバイルUX: サムゾーン、ナビゲーション、ジェスチャー、プラットフォームパターン
references/form-design-patterns.md	フォームUX: レイアウト、バリデーション、マルチステップ、アクセシビリティ
references/dark-mode-theming.md	ダークモード & マルチテーマ: トークン、CSS、プラットフォーム実装
references/ai-automation-ux.md	AI/自動化UX: チャットボット、エージェント、段階的な開示
references/cultural-design-patterns.md	クロスカルチャーデザイン: RTL、CJK、色のセマンティクス、ロケールUX
references/frontend-aesthetics-2025.md	ビジュアルデザイントレンド 2025: グラスモーフィズム、バリアブルフォント、3D
references/simplification-patterns.md	非技術ユーザー向けインターフェース簡略化、デジタルリテラシースペクトラム
references/modern-ux-patterns-2025.md	モダンUXパターン: コマンドパレット、スケルトン状態、ダークモード、2026トレンド
references/data-visualization-ux.md	データビジュアライゼーション: チャート選択、ダッシュボード、アクセシブルなチャート
references/typography-systems.md	タイプスケール、フォントペアリング、バリアブルフォント、デザイントークン
references/performance-ux-vitals.md	Core Web Vitals UX、知覚パフォーマンス、ローディングパターン
references/prototype-to-production.md	プロトタイプから本番環境への整合性、ダッシュボードQA、設計から出荷へのチェック
references/operational-playbook.md	決定フレームワーク

テンプレート

テンプレート	目的
assets/design-brief.md	デザインブリーフ
assets/ux-review-checklist.md	UXレビュー
assets/ui-generation/full-ui-spec.md	UI仕様
assets/audits/cro-audit-template.md	CRO監査
assets/accessibility/template-wcag-testing.md	WCAGテスト
assets/audits/simplification-audit-template.md	簡略化監査
assets/design-systems/template-design-system.md	デザインシステム構築
assets/component-libraries/template-shadcn-ui.md	shadcn/ui 統合
assets/component-libraries/template-mui-material-ui.md	MUI / Material UI
assets/interaction-patterns/template-micro-interactions.md	マイクロインタラクション

パターンインスピレーション

• Mobbin — 30万以上のスクリーンショット
• Page Flows — ユーザーフロー記録
• Refero Design — Webデザインリファレンス

関連スキル

スキル	目的
software-ux-research	リサーチ(最初に使用)
software-frontend	実装
software-mobile	モバイルパターン
product-management	プロダクト戦略

---

ファクトチェック

• 最終的な回答の前に、Web検索/フェッチを使用して現在の外部事実、バージョン、価格、締め切り、規制、またはプラットフォームの動作を確認します。
• 一次情報を優先し、変動しやすい情報についてはソースリンクと日付を報告します。
• Webアクセスが利用できない場合は、制限事項を述べ、ガイダンスを未検証としてマークします。