フロントエンドUIデザインを洗練された独自性のあるスタイルで生成します。ランディングページ、ダッシュボード、Webアプリケーションのデザイン、UIコンポーネント作成時に使用してください。「AIっぽい」汎用デザインを避け、プロフェッショナルで記憶に残るUIを実現します。
このスキルは、AIが生成しがちな「汎用的で無個性なデザイン」を避け、洗練された独自性のあるフロントエンドUIを作成するためのガイドラインです。
以下のパターンは「AIスロップ美学」と呼ばれ、避けるべきです:
推奨フォントの組み合わせ例:
| ヘッダー | ボディ | 特徴 |
|---|---|---|
| Playfair Display | Source Sans Pro | クラシック&モダン |
| Space Grotesk | Inter | テック&ミニマル |
| Fraunces | Work Sans | エレガント&読みやすい |
| DM Serif Display | DM Sans | 統一感のある対比 |
| Syne | Outfit | 大胆&現代的 |
タイポグラフィ原則:
カラーパレット構築原則:
プライマリ:ブランドアイデンティティを表す主色
セカンダリ:プライマリを補完する色(補色または類似色)
アクセント:CTAやハイライトに使用する注目色
ニュートラル:背景やテキストに使用するグレー系
独自性を出すテクニック:
差別化するレイアウトパターン:
効果的なアニメーション原則:
高影響度の瞬間に集中
タイミングの指針
イージング関数
/* 推奨イージング */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
背景デザインのアイデア:
進捗チェックリスト:
詳細なテーマ例については以下を参照:
フォントペアリング即決リスト:
カラー参考: