フロントエンドデザイン

独創的で本番環境グレードのフロントエンドインターフェースを作成するスキル。汎用的な「AIスロップ」美学を避け、卓越した審美的ディテールと創造的な選択に細心の注意を払った、実際に動作するコードを実装します。

🎯 使用タイミング

• Webコンポーネント構築時
• ページ・アプリケーション作成時
• インターフェースデザイン時
• UIリファクタリング時

🧠 デザイン思考プロセス

コーディング前に、コンテキストを理解し大胆な美的方向性にコミット：

1. 目的の明確化

• このインターフェースが解決する問題は何か？
• 誰が使用するのか？

2. トーンの決定（極端な方向を選択）

以下から選択し、インスピレーションとして活用：

• ブルータリズム・ミニマル: 極限まで削ぎ落とした美
• マキシマリストカオス: 情報量と装飾の洪水
• レトロフューチャリスティック: 80s/90sサイバーパンク
• オーガニック/ナチュラル: 自然界からの着想
• ラグジュアリー/洗練: 高級ブランドの品格
• プレイフル/トイライク: 遊び心と楽しさ
• エディトリアル/マガジン: 雑誌的レイアウト
• ブルータリスト/ロー: 生々しい素材感
• アールデコ/ジオメトリック: 幾何学的パターン
• ソフト/パステル: 柔らかく優しい色調
• インダストリアル/ユーティリタリアン: 機能美

3. 制約の把握

• 技術的要件（フレームワーク、パフォーマンス、アクセシビリティ）

4. 差別化ポイント

• これを忘れられないものにする要素は何か？
• 誰かが覚えている一つのことは何か？

重要: 明確なコンセプト方向を選び、精度を持って実行する。大胆なマキシマリズムも洗練されたミニマリズムも有効 - 重要なのは強度ではなく意図性。

🎨 フロントエンド美学ガイドライン

タイポグラフィ

• 美しく、ユニークで、興味深いフォントを選択
• ❌ 避けるべき: Arial、Inter、Roboto、システムフォント
• ✅ 推奨: 特徴的でデザインを高める選択
• ペアリング: 特徴的なディスプレイフォント + 洗練されたボディフォント

カラー & テーマ

• 一貫した美学にコミット
• CSS変数で統一性を確保
• 支配的な色 + シャープなアクセント > 控えめで均等に分散されたパレット

モーション & アニメーション

• エフェクトとマイクロインタラクションにアニメーションを使用
• HTMLの場合: CSS-onlyソリューションを優先
• Reactの場合: Motion（Framer Motion）ライブラリを使用

高インパクトな瞬間にフォーカス:

• 散発的なマイクロインタラクションより、よく構成されたページロード演出
• animation-delayを使ったスタガードリビール
• スクロールトリガー、驚きを与えるホバー状態

空間構成

• 予想外のレイアウト
• 非対称性
• オーバーラップ
• 対角線の流れ
• グリッドを破る要素
• 寛大なネガティブスペース、または制御された密度

背景 & ビジュアルディテール

ソリッドカラーをデフォルトにせず、雰囲気と深みを創出：

❌ 絶対に避けること

汎用AI生成美学（AIスロップ）

重要: 生成ごとに異なるデザインを。ライト/ダークテーマ、異なるフォント、異なる美学を変化させる。共通の選択に収束してはいけない。

💡 実装の複雑さを美的ビジョンに合わせる

エレガンスはビジョンの優れた実行から生まれる。

🚀 実装チェックリスト

□ 大胆な美的方向性を選択した
□ 汎用フォント（Inter, Roboto, Arial）を避けた
□ 特徴的なカラーパレットを定義した
□ 予想外のレイアウト要素を含めた
□ 意味のあるアニメーション/トランジションを追加した
□ 背景に深みと雰囲気を持たせた
□ CSS変数で一貫性を確保した
□ 本番環境グレードで機能する
□ 誰かが覚えている一つの要素がある

🔗 関連スキル

• developing-nextjs: Next.js固有の最適化
• using-shadcn: shadcn/uiコンポーネントの活用
• enforcing-type-safety: TypeScript型安全性

📚 技術スタック別ガイド

HTML/CSS/JS

• CSS-onlyアニメーションを優先
• カスタムプロパティ（CSS変数）活用
• @keyframesでのスタガードアニメーション

React

• Framer Motion（Motion）ライブラリ
• CSS Modulesまたはstyled-components
• コンポーネントごとのアニメーション管理

Vue

• Vue Transitionコンポーネント
• GSAP連携
• Scoped Stylesでのカプセル化

記憶せよ: Claudeは並外れた創造的作業が可能。既成概念にとらわれず、独自のビジョンに完全にコミットしたとき、真に何が創造できるかを示せ。