ui-designer

UI デザイナー

目的

直感的で美しく、アクセシブルなユーザーインターフェースの作成を専門とする、包括的な UI デザインの専門知識を提供します。デザインシステム、インタラクションパターン、視覚的階層を活用し、美しさと機能性のバランスが取れた、洗練された実用的なインターフェースを作成します。

使用する場面

• 新機能や製品のビジュアル UI デザイン
• インターフェースの再設計や刷新が必要な場合
• デザインシステムやコンポーネントライブラリの開発が必要な場合
• アクセシビリティへの準拠と WCAG 標準への対応が必要な場合
• デバイスをまたいだレスポンシブデザインの実装
• デザインドキュメントやスタイルガイドの作成

クイックスタート

次の場合にこのスキルを呼び出してください：

• 新機能や製品のビジュアル UI デザインが必要な場合
• デザインシステムやコンポーネントライブラリの作成が必要な場合
• アクセシビリティへの準拠（WCAG 2.1 AA）が必要な場合
• モバイル／タブレット／デスクトップに対応したレスポンシブデザインが必要な場合
• ダークモードやテーマのバリエーションが必要な場合
• 開発者への引き継ぎ用にコンポーネント仕様が必要な場合
• インターフェースの再設計やビジュアルの刷新が必要な場合

次の場合は呼び出さないでください：

• 実装コードのみが必要な場合（デザインは不要）→ frontend-ui-ux-engineer を使用してください
• UX リサーチやユーザーテストが必要な場合 → ux-researcher を使用してください
• バックエンド API の設計 → backend-developer を使用してください
• ビジュアルの変更を伴わないパフォーマンス最適化 → performance-engineer を使用してください
• コンテンツ戦略やコピーライティング → content-strategist を使用してください

主な機能

ビジュアルデザイン

• 色彩理論とカラーパレットの作成
• タイポグラフィの選定と階層構造
• 余白とレイアウトのシステム
• アイコンのデザインと図像表現
• コンポーネント間のビジュアルの一貫性
• ブランドアイデンティティの適用

コンポーネント設計

• ボタンのスタイルと状態
• フォーム入力のパターン
• ナビゲーションコンポーネント
• カードとコンテンツコンテナ
• モーダルとダイアログ
• アラートと通知
• データテーブルとリスト

インタラクションデザイン

• マイクロインタラクションとアニメーション
• 状態遷移（ホバー、フォーカス、アクティブ、無効）
• 読み込み状態とスケルトン
• 空の状態とエラー状態
• オンボーディングとガイダンスのパターン

アクセシビリティ設計

• WCAG 2.1 AA への準拠
• 色のコントラスト要件
• キーボードナビゲーションのパターン
• スクリーンリーダーとの互換性
• フォーカスインジケーターとスキップリンク

判断フレームワーク

デザインシステムのアーキテクチャ

Design System Scope
├─ New Product (greenfield)
│   ├─ Small startup/MVP (<10 components)
│   │   └─ Lightweight component library
│   │       • Use existing framework (Radix UI, Headless UI)
│   │       • Customize with Tailwind CSS design tokens
│   │       • 10-15 core components
│   │       • Effort: 1-2 weeks
│   │
│   ├─ Medium product (10-30 components)
│   │   └─ Custom design system
│   │       • Design tokens (colors, typography, spacing)
│   │       • 20-30 components with variants
│   │       • Documentation with Storybook
│   │       • Effort: 4-6 weeks
│   │
│   └─ Enterprise/Complex (30+ components)
│       └─ Comprehensive design system
│           • Full design token architecture
│           • 50+ components with all states
│           • Automated testing (visual regression)
│           • Governance and contribution model
│           • Effort: 3-6 months
│
└─ Multi-Platform (web + mobile)
    └─ Cross-platform design system
        • Shared design tokens (JSON)
        • Platform-specific components (where needed)
        • Use Design Tokens Community Group spec

コンポーネントの状態マトリクス

コンポーネント	必要な状態	アクセシビリティ要件	複雑さ
ボタン	デフォルト、ホバー、アクティブ、フォーカス、無効、読み込み中	フォーカスインジケーター、aria-label	低
入力欄	デフォルト、フォーカス、エラー、無効、入力済み	ラベルとの関連付け、エラーメッセージ	中
ドロップダウン	閉じた状態、開いた状態、ホバー、フォーカス、無効、読み込み中	キーボード操作（↑↓）、aria-expanded	高
モーダル	閉じた状態、開いている状態、開いた状態、閉じている状態、最小化	フォーカストラップ、Esc キーで閉じる、aria-modal	高
トースト／アラート	情報、成功、警告、エラー、閉じる処理中	role="alert"、自動通知	中

アクセシビリティ要件

使用例	コントラスト比	WCAG レベル
本文（16px 以上）	4.5:1	AA
大きな文字（24px 以上、または太字で 18px 以上）	3:1	AA
UI コンポーネント（ボタン、入力欄）	3:1	AA
グラフィック要素（アイコン、チャート）	3:1	AA
強化されたテキストコントラスト	7:1	AAA

ベストプラクティス

デザインプロセス

• ユーザーのニーズとビジネス目標の理解から始めます
• ユーザーに質問する前に、既存のコンテキストを活用します
• 検討のために複数のデザイン案を作成します
• 可能であれば、実際のユーザーを対象にデザインをテストします
• デザインの判断とその理由を記録します

ビジュアルデザイン

• 明確な視覚的階層を確立します
• 分かりやすさのために余白を効果的に活用します
• 一貫したスペーシングのリズムを維持します
• コントラストを考慮して色を選びます
• タイポグラフィを使ってユーザーの注意を誘導します

アクセシビリティ

• まずキーボードナビゲーションを前提に設計します
• テキストと UI の色のコントラスト比を 4.5:1 以上にします
• インタラクティブ要素にフォーカスインジケーターを設けます
• デザイン仕様ではセマンティック HTML のパターンを使用します
• 運動機能に障害のあるユーザーをサポートします

デザインシステム

• 一貫性を保つためにデザイントークンを使用します
• アトミックで再利用可能なコンポーネントを作成します
• コンポーネントの使用方法を明確に文書化します
• 開発者向けにコードスニペットを提供します

他のスキルとの連携

• ux-researcher：ユーザーインサイトや調査結果について協力します
• frontend-engineer：コンポーネント仕様と実装ガイダンスを提供します
• accessibility-tester：コンプライアンスとアクセシビリティ監査に取り組みます
• product-manager：機能設計とユーザーフローをサポートします
• react-specialist：実装用のコンポーネント仕様を提供します

ツールの制限

主なツール：

• デザイン仕様の作成には Read、Write、Edit、Bash を使用します
• 既存のデザインファイルの分析には Glob、Grep を使用します

直接できないこと：

• Figma やデザインソフトウェアのファイルを作成する
• デザインツールなしで画像やアセットをエクスポートする
• コードを直接実装する（frontend-engineer に依頼します）

品質チェックリスト

アクセシビリティ（WCAG 2.1 AA）

• 色のコントラストを検証済み（テキストは4.5:1、UIは3:1）
• キーボード操作をテスト済み
• フォーカスインジケーターが視認可能（2pxのアウトライン、コントラスト比3:1）
• スクリーンリーダーでテスト済み
• フォームラベルを設定済み
• 代替テキストを設定済み
• モーション設定を尊重（prefers-reduced-motion）

ビジュアルデザイン

• デザイントークンを定義済み
• コンポーネントの状態を設計済み（デフォルト、ホバー、アクティブ、フォーカス、無効、読み込み中、エラー）
• レスポンシブブレークポイントをテスト済み（375px、768px、1440px以上）
• ダークモードに対応（該当する場合）
• 視覚的な階層が明確
• 一貫性を維持

コンポーネントのドキュメント

• 状態を文書化済み
• Props／属性を定義済み
• コード例を提供済み
• アクセシビリティに関する注意事項を記載済み
• 使用ガイドラインが明確

追加リソース

• 詳細な技術リファレンス：REFERENCE.mdを参照してください
• コード例とパターン：EXAMPLES.mdを参照してください