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. デザインの提案

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

code

## デザイン提案

### カラーパレット
- 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. 実装計画

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

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

デザイン原則

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

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

使用技術

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

注意事項

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