ありきたりな「AIの安っぽいデザイン」を避け、驚くほど個性的なフロントエンドを作り上げましょう。

## 5つの主要な側面

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

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

- ✅ 選択：ユニークで個性的なフォント

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

- ✅ ヒント：極端なフォントの太さのコントラスト（100 vs 900）、大きなフォントサイズ範囲（3倍以上）

**2. 色とテーマ**

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

- ✅ メインカラー + 鮮やかなアクセントカラー

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

- ✅ インスピレーション：IDEテーマ、文化的美意識

**3. 動作**

- ✅ CSSアニメーションがHTMLアニメーションよりも優先されます

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

- ✅ インパクト重視：厳選されたページ読み込み > 散在するマイクロインタラクション

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

**4. 空間配置**

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

- ✅ グリッドを崩し、大胆な余白の使い方、または密度のコントロール

**5. 背景情報**

- ✅ 雰囲気と奥行きを演出する

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

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

## 主要原則

・重複した収束を避けるため、各デザインは異なるべきである。

複雑さに見合った美的ビジョンを実現する

極めて複雑なデザインには綿密な設計が求められる一方、ミニマリズムには抑制と正確さが求められる。

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

⚡ 一行要約

ユニークなフォント + 大胆な配色 + 緻密なアニメーション + 革新的なレイアウト + 雰囲気のある背景 = 忘れられないフロントエンドデザイン

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

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

寸法および検査項目

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

配色に統一感はありますか？紫のグラデーションは避けるべきでしょうか？

そのアニメーションには、綿密に計算された読み込み効果がありますか？

レイアウトは従来のグリッドから逸脱していますか？

背景は奥行きや雰囲気を作り出しているか？