UI/UX デザイン

デザインシステム作成ガイド、Figma ワークフロー パターン、アクセシビリティ監査チェックリスト、ブラウザベースのビジュアル監査手順、デザイン・ツー・コード ハンドオフ テンプレートを備えた体系的な UI/UX デザイン スキル。一貫性があり、アクセシビリティに対応し、コンバージョン最適化されたインターフェースを生成します。

使用する場合

• デザインシステムの作成または拡張（トークン、コンポーネント、パターン）
• 新しいページ、機能、またはユーザーフロー設計
• 既存 UI のアクセシビリティ準拠状況の監査
• 開発者ハンドオフ用のデザイン仕様書作成
• Figma プロジェクト構造とワークフロー設定
• 自動化されたブラウザ スクリーンショットとヒューリスティック分析による既存 UI の確認
• ヒューリスティックとプラットフォーム ガイドラインに対する UI コンポーネントの確認

使用しない場合

• ページコンテンツやコピーの作成（content-creation スキルを使用）
• フロントエンド コードの実装（frontend-engineer ロールを使用）
• SEO 監査の実施（seo-review スキル ワークフローを使用）
• 技術ドキュメントの作成（docs スキル ワークフローを使用）

デザインシステム作成

ステップ 1: 既存 UI の監査

デザインシステムを作成する前に：

1. スクリーンショット インベントリ: 既存のすべての画面とコンポーネントをキャプチャ
2. パターン抽出: 色、タイポグラフィ、間隔、コンポーネントの繰り返しパターンを特定
3. 不整合マップ: 同じ概念が異なる方法で実装されている箇所をドキュメント化
4. 優先度マトリックス: 使用頻度 × 不整合の重大度でコンポーネントをランク付け

ステップ 2: 基礎定義

ゼロから構築：

基礎	定義するもの	トークン命名
色	ブランド、セマンティック、ニュートラル、オーバーレイ パレット	color-{category}-{shade}
タイポグラフィ	フォント ファミリー、サイズ スケール、ウェイト、行の高さ	font-{property}-{size}
間隔	基本単位（4px または 8px）、スケール	spacing-{size}
ボーダー半径	なし～フルまでのスケール	radius-{size}
エレベーション	シャドウ レベル	shadow-{level}
モーション	デュレーション、イージング曲線	motion-{property}-{variant}
ブレークポイント	ビューポート閾値	breakpoint-{name}

ステップ 3: コンポーネント構築

アトミック デザイン プログレッションに従う：

1. Atoms: Button、Input、Label、Icon、Badge、Avatar、Checkbox、Radio、Toggle
2. Molecules: Input Group、Search Bar、Card、Dropdown、Tooltip、Alert、Breadcrumb
3. Organisms: Header、Footer、Sidebar、Form、Data Table、Modal、Navigation

各コンポーネントについて、以下をドキュメント化：

• バリアント: Primary、secondary、outline、ghost、destructive
• サイズ: xs、sm、md、lg、xl
• 状態: Default、hover、focus、active、disabled、loading、error
• アクセシビリティ: ARIA role、キーボード動作、スクリーンリーダー通知
• レスポンシブ: 各ブレークポイントでの動作
• Do / Don't: 使用例とアンチパターン

ステップ 4: ドキュメント化と維持管理

• ライブ例を含むコンポーネント ライブラリを公開
• セマンティック バージョニングでバージョン管理
• すべての更新のチェンジログ
• マイグレーション ガイド付きの廃止予定通知

完全な作成チェックリストについては design-system-checklist.md を参照してください。

Figma ワークフロー

詳細な Figma プロジェクト設定、コンポーネント整理、Auto Layout パターン、開発者ハンドオフ手順については figma-workflow.md を参照してください。

クイック リファレンス

Figma コンセプト	コード相当
Auto Layout	Flexbox / CSS Grid
コンポーネント バリアント	React props / variant configs
デザイン トークン（Variables）	CSS カスタム プロパティ
Constraints	CSS positioning / レスポンシブ ルール
コンポーネント インスタンス	React コンポーネント使用

アクセシビリティ監査

包括的な WCAG 2.2 AA 監査チェックリストについては accessibility-checklist.md を参照してください。

クイック監査（5 分チェック）

1. Tab キーでページを移動 — すべてのインタラクティブ要素にアクセスして操作できるか？
2. 200% にズーム — コンテンツが水平スクロールなしでリフロー可能か？
3. コントラスト確認 — すべてのテキスト要素が 4.5:1（標準）/ 3:1（大）を満たしているか？
4. スクリーンリーダー テスト — 見出し、ランドマーク、alt テキストが意味をなしているか？
5. キーボードのみ — マウスなしでプライマリ タスクを完了できるか？

デザイン・ツー・コード ハンドオフ テンプレート

デザインを開発者にハンドオフする場合、以下を提供：

## Component: [Name]

### Visual Spec
- Dimensions: [width × height or fluid]
- Spacing: [padding, margin in token values]
- Colors: [background, text, border in token values]
- Typography: [font, size, weight, line-height in token values]
- Border: [width, style, color, radius in token values]
- Shadow: [elevation token]

### Variants
- [variant-name]: [visual differences]

### States
- Default: [spec]
- Hover: [changes from default]
- Focus: [focus indicator spec]
- Active: [changes]
- Disabled: [opacity, cursor, interaction]

### Responsive Behavior
- Mobile (< 640px): [layout changes]
- Tablet (640–1024px): [layout changes]
- Desktop (> 1024px): [default layout]

### Interactions
- [trigger] → [animation: property, duration, easing]

### Accessibility
- Role: [ARIA role if not implicit]
- Keyboard: [key bindings]
- Screen reader: [announcement text]

### Code Reference
- Component: `<ComponentName variant="..." size="..." />`
- Tokens: `--token-name: value`

統合

• 従うルール: ui-ux-designer ロール（デザイン原則、アクセシビリティ、デザイン システム）
• 使用するワークフロー: ui-ux-design スキル（プライマリ）、feature-dev スキル（UI 機能）
• 関連リソース: design-system-checklist.md、figma-workflow.md、accessibility-checklist.md、visual-audit-checklist.md