uiux-ops
UI/UX 設計・改善を進めるための運用手順とチェックリストをまとめたスキル。
When & Why to Use This Skill
This Claude skill provides a comprehensive framework and operational checklist for UI/UX design and continuous improvement. It streamlines the design process by integrating user-centered principles, accessibility standards (WCAG), and consistent design systems, ensuring high-quality, responsive user experiences across all digital platforms.
Use Cases
- Case 1: Conducting a systematic UI/UX audit of an existing application to identify usability gaps and areas for improvement based on established design principles.
- Case 2: Establishing and maintaining a unified design system, including color palettes, typography, and reusable component libraries to ensure visual consistency.
- Case 3: Implementing accessibility checks to ensure products comply with WCAG guidelines and provide an inclusive experience for diverse user groups.
- Case 4: Designing and refining interaction patterns, such as feedback loops and error handling, to enhance the overall user journey and micro-interactions.
- Case 5: Standardizing documentation for design decisions and version control to facilitate better collaboration between designers and developers.
| name | uiux-ops |
|---|---|
| description | UI/UX 設計・改善を進めるための運用手順とチェックリストをまとめたスキル。 |
UI/UX設計戦略
基本原則
- ユーザー中心設計: ユーザーの目標達成を最優先に考えた設計
- 一貫性: アプリケーション全体で統一されたデザインパターンとインタラクションを維持
- アクセシビリティ: 多様なユーザーが利用できるよう WCAG ガイドラインに準拠
- レスポンシブデザイン: 様々なデバイス・画面サイズに対応
デザインシステム
- コンポーネント設計: 再利用可能な UI コンポーネントをライブラリ化
- カラーパレット: ブランドカラーとセマンティックカラーを定義
- タイポグラフィ: フォントファミリー、サイズ、行間を統一
- スペーシング: 余白・間隔のルールを一貫して適用
インタラクション設計
- フィードバック: ユーザー操作に対して即座に視覚的フィードバックを提供
- エラーハンドリング: エラー発生時は原因と解決方法を明確に提示
- ローディング状態: 処理中であることをユーザーに適切に伝達
- マイクロインタラクション: 細かな動きでユーザー体験を向上
参照ドキュメント
- 詳細仕様: UI/UX の詳細な設計指針・コンポーネント仕様は
UIUX.mdを参照 - 変更時の記録: UI/UX に関わる設計判断・変更は必ず
UIUX.mdに記載・更新すること