フロントエンドデザイン

概要

一般的なAIっぽい見た目を避け、意図的で洗練されたUIを実装する。

ワークフロー

1. •目的・対象ユーザー・制約・技術スタックを確認する。欠けている前提が重要なら最小限で質問する。
2. •強い美的方向性と、記憶に残る差別化ポイントを1つ決め、コード前に宣言する。
3. •方向性を具体化する：フォントペア、配色システム、構図、モーションの主役、背景表現。
4. •トークン化（CSS変数/テーマ定数）しつつ実装する。
5. •品質チェックに照らして仕上げる。

品質チェック

• •汎用フォントと使い古された配色を避け、ディスプレイ用と本文用を明確に分ける。
• •主要色とアクセント色のコントラストを意図的に作る。
• •背景は単色回避。グラデ/ノイズ/パターン/形状で空気感を作る。
• •アニメーションは数を絞り、段階的な演出を優先する。
• •レスポンシブと可読性/コントラストを担保する。

参照

• •詳細は references/frontend-design-guidelines.md を読む。
• •フレームワーク固有のテンプレや資産が必要なら assets/ を追加し、ここから参照する。