UIデザイナースキル

アプリケーションのUIデザインを対話形式で設計・改善する。

ワークフロー

1. 初期ヒアリング

まず以下を確認してデザインの方向性を把握する：

デザイン対象の確認

• 全体テーマの変更 / 特定ページ・コンポーネント / 新規画面設計

現状の把握

• 現在のデザインで気になる点は？
• 参考にしたいアプリやサイトは？
• 対象ユーザー層は？（一般向け / 業務用 / クリエイター向けなど）

2. デザイン方針の決定

以下の項目について対話形式で決定する：

2.1 カラースキーム

質問例：

• 「明るい雰囲気 vs ダーク系、どちらが好みですか？」
• 「メインカラーの希望は？（ブルー系 / パープル系 / グリーン系など）」
• 「アクセントカラーは目立つ色が良いですか、控えめが良いですか？」

提案内容：

• プライマリカラー
• セカンダリカラー
• 背景色
• テキストカラー
• アクセント / エラー / 成功 / 警告色

参照: references/color-schemes.md

2.2 レイアウト・構成

質問例：

• 「サイドバーは左固定 / 折りたたみ / なし、どれが使いやすいですか？」
• 「ヘッダーは常に表示 / スクロールで隠す、どちらが良いですか？」
• 「グリッド表示のカラム数は？（2列 / 3列 / 4列 / 自動調整）」
• 「カード型 vs リスト型、どちらが見やすいですか？」

2.3 コンポーネントスタイル

質問例：

• 「ボタンは角丸 / 四角 / ピル型、どれが好みですか？」
• 「影の使い方は？（フラット / 軽い影 / しっかりした影）」
• 「アニメーションは多め / 控えめ / なし、どれが良いですか？」
• 「アイコンスタイルは？（アウトライン / 塗りつぶし / 二色）」

参照: references/component-styles.md

2.4 タイポグラフィ

質問例：

• 「フォントは読みやすさ重視 / デザイン重視、どちらが良いですか？」
• 「見出しは大きめ / 控えめ、どちらが良いですか？」
• 「日本語フォントの希望は？（システムフォント / Noto Sans JP など）」

3. デザインの提案

ヒアリング結果を基に、具体的なデザイン案を提示する：

## デザイン提案

### カラーパレット
- Primary: #1976D2（信頼感のあるブルー）
- Secondary: #424242（落ち着いたグレー）
- Background: #121212（ダークモード）
- Surface: #1E1E1E
- Text Primary: #FFFFFF
- Text Secondary: #B0B0B0
- Accent: #FF4081

### レイアウト
- サイドバー: 左固定（240px）、モバイルで折りたたみ
- ヘッダー: 64px固定、スクロール時にシャドウ追加
- グリッド: 4列（レスポンシブで2-4列に調整）
- コンテンツ幅: 最大1200px

### コンポーネント
- ボーダー半径: 8px（ボタン・カード共通）
- シャドウ: elevation 2-4 のMUIスタイル
- アニメーション: 控えめ（200-300ms）

4. フィードバックと調整

提案に対するフィードバックを受けて調整：

• 「この色はもう少し明るく/暗くしたい」→ 調整
• 「このレイアウトは使いにくそう」→ 代替案を提示
• 「参考画像のような感じにしたい」→ 要素を分析して適用

5. 実装計画

最終的なデザインが決まったら、実装計画を提示：

1. テーマファイル（theme.ts）の変更点
2. 変更が必要なコンポーネント一覧
3. 新規作成が必要なコンポーネント
4. CSSの変更点
5. 推定工数

デザイン原則

このプロジェクトで守るべき原則：

1. 一貫性 - 同じ要素には同じスタイルを適用
2. 視認性 - 十分なコントラスト比（WCAG AA以上）
3. レスポンシブ - モバイル〜デスクトップで適切に表示
4. パフォーマンス - 重いアニメーションや大きな画像は避ける
5. アクセシビリティ - キーボード操作、スクリーンリーダー対応

使用技術

• フレームワーク: React + TypeScript
• UIライブラリ: Material-UI (MUI) v6
• スタイリング: Emotion (sx prop)
• アイコン: @mui/icons-material

注意事項

• 大幅な変更の場合は段階的に実装することを推奨
• 既存の機能を壊さないよう注意
• ユーザーの好みを最優先しつつ、UXのベストプラクティスも考慮