frontend-design-systemlisted

# Frontend Design System ## Overview このスキルは、AIが生成しがちな「汎用的で無個性なデザイン」を避け、洗練された独自性のあるフロントエンドUIを作成するためのガイドラインです。 ## Anti-Patterns（避けるべきパターン） 以下のパターンは「AIスロップ美学」と呼ばれ、避けるべきです： ### Typography（タイポグラフィ） - ❌ Inter, Roboto, Open Sans などの過度に使用されたフォント - ❌ すべてのテキストに同じフォントファミリーを使用 - ❌ 標準的なフォントウェイトのみの使用 ### Colors（カラー） - ❌ 紫からピンクへのグラデーション - ❌ 汎用的な青/緑のアクセントカラー - ❌ 彩度の高すぎるネオンカラー - ❌ デフォルトのTailwindカラーパレットそのまま ### Layout（レイアウト） - ❌ 左テキスト・右画像の標準ヒーローセクション - ❌ 3カラムの均等グリッド機能セクション - ❌ 中央揃えの単調なカードレイアウト ### Effects（エフェクト） - ❌ 過度なぼかし効果（blur） - ❌ 全要素へのアニメーション適用 - ❌ グラスモーフィズムの乱用 ## Best Practices（推奨パターン） ### Typography **推奨フォントの組み合わせ例：** | ヘッダー | ボディ | 特徴 | | ---------------- | --------------- | ---------------------- | | Playfair Display | Source Sans Pro | クラシック＆モダン | | Space Grotesk | Inter | テック＆ミニマル | | Fraunces | Work Sans | エレガント＆読みやすい | | DM Serif Display | DM Sans | 統一感のある対比 | | Syne | Outfit | 大胆＆現代的 | **タイポグラフィ原則：** - 見出しと本文で異なるフォントファミリーを使用（セリフ×サンセリフの組み合わせ） - フォントウェイトのバリエーションを活用（300, 400, 600, 800） - レタースペーシングで視覚的階層を作成 ### Colors **カラーパレット構築原則：** ``` プライマリ：ブランドアイデンティティを表す主色 セカンダリ：プライマリを補完する色（補色または類似色） アクセント：CTAやハイライトに使用する注目色 ニュートラル：背景やテキストに使用するグレー系 ``` **独自性を出すテクニック：** - HSL調整で微妙な色相のずれを作る - ダークモードでは彩度を下げ、明度を調整 - セマンティックカラー（success, warning, error）もブランドに合わせて調整 ### Layout **差別化するレイアウトパターン：** - 非対称グリッド（5:7, 2:3比率） - オーバーラップ要素とネガティブマージン - 斜めのセクション区切り - ベントグリッ