フロントエンドデザイン
汎用的な「AIスロップ」と呼ばれる美的感覚を避け、差別化されたプロダクショングレードのフロントエンドインターフェースを作成します。実際に動作するコードで、美的ディテールと創造的な選択に卓越した注意を払います。
デザイン思考（コードを書く前に）
大胆な美的方向性をコミットしましょう：
- 目的：このインターフェースは何の課題を解決しますか？誰が使いますか？
- トーン：極端な方向性を選びましょう — 無慈悲なミニマリズム、マキシマリストの混沌、レトロフューチャー、有機的/ナチュラル、ラグジュアリー/洗練、遊び心/おもちゃのような、エディトリアル/マガジン風、ブルータリズム/ロウ、アールデコ/幾何学的、ソフト/パステル、インダストリアル/実用的
- 制約：技術的要件（フレームワーク、パフォーマンス、アクセシビリティ）
- 差別化：何がこれを忘れられないものにしますか？人が覚えている唯一のことは何ですか？
明確なコンセプトの方向性を選び、正確に実行します。大胆なマキシマリズムと洗練されたミニマリズムの両方が機能します — 鍵は強度ではなく、意図性にあります。
フロントエンドの美的柱
タイポグラフィ
美しく、ユニークで、興味深いフォントを選びましょう。Arial、Inter、Roboto、システムフォントなどの汎用的なフォントを避けてください。特徴的なディスプレイフォントと洗練されたボディフォントを組み合わせましょう。予想外で、個性的な選択を。
カラー＆テーマ
一貫性のある美的感覚にコミットします。CSS変数を使って一貫性を保ちます。強いアクセントを持つ支配的な色は、控えめで均等に配分されたパレットよりも効果的です。
モーション
エフェクトやマイクロインタラクションのためのアニメーション。HTMLにはCSSのみ、ReactにはMotionライブラリを使用。インパクトの高い瞬間：段階的に現れる演出を調整した1回のページロードは、散在したマイクロインタラクションよりも大きな喜びを生み出します。驚きを与えるスクロールトリガーやホバー状態。
空間構成
予想外のレイアウト。非対称性。オーバーラップ。斜めの流れ。グリッドを壊す要素。たっぷりとしたネガティブスペース、あるいは制御された密度。
背景とビジュアルディテール
無地の色よりも雰囲気と奥行きを。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、重ねられた透明度、ドラマチックな影、装飾的な枠線、カスタムカーソル、グレインオーバーレイ。
絶対に使用しないもの
- 使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）
- ありきたりな配色スキーム（白背景に紫のグラデーション）
- 予測可能なレイアウトやコンポーネントパターン
- 文脈固有の特徴が欠如した画一的なデザイン
創造的に解釈しましょう。同じデザインがあってはいけません。ライトテーマとダークテーマ、異なるフォント、異なる美的感覚を切り替えてください。生成ごとに共通の選択に収束することを決してしてはいけません。
実装の複雑さを美的ビジョンに合わせましょう。マキシマリストデザインには手の込んだコードが必要です。ミニマリストデザインには抑制、精度、そしてスペーシング、タイポグラフィ、微妙なディテールへの注意深い配慮が必要です。
Kevinのデザインコンテキスト
UI作業を開始する前に、wiki/design/design-system.md を読んで現在のデザイントークンを確認してください。
関連項目：wiki/design/aesthetic-systems.md（アートディレクションのアーキタイプについて）
関連スキル
web-design-guidelines— Vercel Web Interface Guidelines 準拠vercel-react-best-practices— Reactのパフォーマンス最適化frontend-design-taste— Kevinの個人アートディレクションスキルmodern-web-design— デザイントレンドと実装パターン