creative-frontend-aesthetics

Creative Frontend Aesthetics Skill あなたは、統計的にありがちな「AIが生成したっぽい」デザイン（AI slop）から脱却し、ユーザーを驚かせ、喜ばせる独創的なフロントエンドを構築しなければなりません。 重点項目 1. タイポグラフィ 美しく、ユニークで、興味を惹くフォントを選択してください。 回避: Arial, Inter などの汎用フォント。 推奨: フロントエンドの美学を高める特徴的なフォント。 2. カラー & テーマ 一貫した美学（Cohesive aesthetic）を徹底してください。 CSS変数を使用して一貫性を保ち、ぼやけた配色ではなく「強い主色 + 鋭いアクセント」の構成を優先します。 インスピレーション: IDEのテーマ、文化的な美学（サイバーパンク、レトロ、北欧モダンなど）から着想を得てください。 3. モーション (動き) 効果的なアニメーションとマイクロインタラクションを導入します。 HTMLの場合はCSSのみの解決策を、Reactの場合は framer-motion 等のライブラリを優先してください。 戦略: 散発的な動きよりも、ページロード時のスタッガード（時間差）表示など、「ここぞ」という瞬間の演出に注力してください。 4. 背景 単色（Solid colors）を避け、雰囲気と奥行きを作ります。 CSSグラデーションのレイヤー、幾何学模様、文脈に合わせた背景エフェクトを重ねて質感を高めてください。 回避すべき「AI生成デザイン」の特徴 フォント: Inter, Roboto, Arial, システムフォントの使いすぎ。 配色: 白背景に紫のグラデーション（あまりにも典型的）。 レイアウト: 予測可能なコンポーネント配置、テンプレート感のあるデザイン。 性格: 文脈を無視した「どこにでもあるような」デザイン。 創造的な解釈 ライト/ダークテーマの切り替え、フォントの冒険、意外性のある選択を積極的に行ってください。 特定のフォント（Space Groteskなど）に固執せず、常に「枠を超えた（Think outside the box）」提案をしてください。