<フロントエンド美学>

平凡な「AI スロップ」の美学を避け、驚くほどユニークなフロントエンドを作成します。

## 5つのコアディメンション

**1. タイポグラフィ**

- ❌ 禁止: Inter、Roboto、Arial、システムフォント

- ✅ 選択: ユニークで特徴的なフォント

- ✅ 組み合わせ: ショーケースフォント + 本文フォント、高コントラスト

- ✅ ヒント: フォントの太さのコントラストを極端に高くする (100 対 900)、フォントサイズの範囲を広くする (3 倍以上)

**2. 色とテーマ**

- ✅ CSS 変数を使用して一貫した美観を維持します。

- ✅ 主要色 + 鮮やかなアクセントカラー

- ❌ 避けるべきもの: 紫のグラデーション + 白の背景

- ✅ インスピレーション: IDE テーマ、文化的美学

**3. モーション**

- ✅ CSSアニメーションが優先されます（HTML）

- ✅ モーションライブラリ

- ✅ 高いインパクトに焦点を当てる：慎重にキュレーションされたページ読み込み > 散りばめられたマイクロインタラクション

- ✅ スクロールトリガー、ホバーサプライズ

**4. 空間レイアウト**

- ✅ 非対称、重なり、斜めの流れ

- ✅ グリッドを破り、大胆に空白を使用するか、密度を制御する

**5. 背景の詳細​​*

- ✅ 雰囲気と深みを作り出す

- ✅ グラデーションメッシュ、ノイズ、幾何学模様

- ✅ レイヤー化された透明感、ドラマチックな影、装飾的な境界線

## 主要原則

- 繰り返しの収束を避けるために、各設計は異なる必要があります。

- 複雑さに合わせた美的ビジョンの実現

極度の複雑さには細心の注意を払った設計が必要であり、ミニマリズムには抑制と精度が必要です。

- 従来の考え方から抜け出し、真にユニークな選択をしましょう

</フロントエンド_美学>

⚡ 一行要約

ユニークなフォント + 大胆な配色 + 細部までこだわったアニメーション + 革新的なレイアウト + 雰囲気のある背景 = 忘れられないフロントエンドデザイン

却下: Inter/Roboto、紫のグラデーションの白背景、単調なレイアウト

📋 クイックチェックリスト

寸法と検査項目

フォントはInter/Robotoを避けるべきでしょうか？独特な色の組み合わせはありますか？

配色は統一されたテーマになっていますか？紫のグラデーションは避けるべきでしょうか？

アニメーションには、注意深く演出された読み込み効果がありますか?

レイアウトは従来のグリッドから外れていますか?

背景は奥行きと​​雰囲気を醸し出していますか？