frontend-design

⚠️ パフォーマンスに関する注意: この Skill はデザイン理念と美学上のガイドラインに特化しており、具体的な実装コードは含みません。デザイン段階が完了したら、ReactBestPractices Skill と併用してパフォーマンスを最適化してください。

---

核心となるデザイン理念：AI っぽい無機質さを排する

「AI っぽい無機質さ」とは？

AI が生成するインターフェースには、使い古されたフォント、個性のない配色、予測可能なレイアウトなど、画一的で無機質な特徴がよく見られます。こうした特徴は、インターフェースを「正しく」見せる一方で、魂のないものにしてしまいます。

基本原則：すべてのデザインは、汎用的な「AI スタイル」ではなく、明確な美学上の方向性を持つべきです。

避けるべき「AI っぽい無機質さ」の特徴

アンチパターン	問題	代替案
使い古されたフォント	Arial、Inter、Roboto	個性的なフォントを選ぶ：JetBrains Mono、Playfair Display、Space Grotesk
ありきたりな配色	#4F46E5（青紫）、虹色のグラデーション	個性のあるパレットを作る：モノクロームを基調に、鮮やかなアクセントカラーを加える
予測可能なレイアウト	12 カラムグリッド、カードの羅列、ヒーローエリア + 機能エリア	非対称、意外性のある空間構成、大胆なネガティブスペース
汎用的な動き	フェードイン・フェードアウト、基本的なホバー効果	意図の明確なマイクロインタラクション、印象的な場面を引き立てるアニメーション
深みの不足	単色の背景、テクスチャなし	雰囲気のある背景、繊細なグラデーション、状況に応じたディテール

---

デザイン思考のフレームワーク（Design Before Code）

コードを書く前に、大胆な美学上の方向性を定める必要があります。

4 つの基本的な問い

1. PURPOSE（目的）
   - 这个界面解决什么问题？
   - 目标用户是谁？
   - 用户的情感需求是什么？

2. TONE（调性）
   选择一个大胆的美学方向：
   - 极简主义（Minimalist）
   - 极繁主义（Maximalist）
   - 复古未来主义（Retro-Futuristic）
   - 粗犷主义（Brutalist）
   - 有机自然（Organic）
   - 科技感（Tech/Cyberpunk）
   - 手工质感（Handcrafted）

3. CONSTRAINTS（限制）
   - 技术限制（浏览器支持、性能要求）
   - 品牌规范（如果有）
   - 无障碍要求（WCAG 等级）

4. DIFFERENTIATION（独特性）
   - 什么让这个设计令人难忘？
   - 用户离开后会记得什么？
   - 有什么意想不到的元素？

重要：明確なコンセプトの方向性を選び、正確に実現してください。大胆なマキシマリズムも洗練されたミニマリズムも選べます。大切なのは強さではなく、意図が明確であることです。

---

フロントエンド美学の 5 つの柱

1. タイポグラフィ（Typography）

基本原則：フォントはデザインの声です。意図を持って選びましょう。

/* ❌ 避免：过度使用的字体 */
font-family: 'Inter', 'Roboto', 'Arial', sans-serif;

/* ✅ 推荐：独特的字体组合 */
/* 科技感 */
font-family: 'JetBrains Mono', 'Fira Code', monospace;

/* 优雅感 */
font-family: 'Playfair Display', 'Cormorant Garamond', serif;

/* 现代感 */
font-family: 'Space Grotesk', 'DM Sans', sans-serif;

/* 实验性 */
font-family: 'Archivo Black', 'Bebas Neue', sans-serif;

タイポグラフィの階層:

• 2〜3 種類のフォントを使います（見出し + 本文 + 任意のアクセント）
• 明確なフォントサイズの階層を作ります（レスポンシブ対応には clamp() を使用）
• ウェイトに強いコントラストをつけます（400 対 700 以上）
• 本文にはゆとりのある行間を設定します（1.5〜1.75）

2. 色彩とテーマ（Color & Theme）

基本原則：まとまりのあるパレットを作り、基調色に鮮やかなアクセントカラーを加えます。

/* ❌ 避免：AI 通用配色 */
--primary: #4F46E5; /* 无处不在的紫蓝色 */
--gradient: linear-gradient(to right, #667eea, #764ba2);

/* ✅ 推荐：有性格的调色板 */

/* 暗黑科技风 */
:root {
  --bg-primary: #0a0a0a;
  --bg-secondary: #141414;
  --text-primary: #fafafa;
  --accent: #22d3ee; /* 青色点缀 */
  --accent-glow: rgba(34, 211, 238, 0.3);
}

/* 温暖自然风 */
:root {
  --bg-primary: #faf8f5;
  --bg-secondary: #f0ebe3;
  --text-primary: #2d2a26;
  --accent: #e07a5f; /* 陶土橙 */
  --accent-muted: #f4a261;
}

/* 高对比极简风 */
:root {
  --bg-primary: #ffffff;
  --text-primary: #000000;
  --accent: #ff3366;
}

3. 動きとインタラクション（Motion）

基本原則：アニメーションには意図を持たせ、印象的な場面に焦点を当てます。

/* ✅ 推荐：精心设计的动效 */
.page-load {
  animation: stagger-reveal 0.6s ease-out forwards;
  animation-delay: calc(var(--index) * 100ms);
}

/* ✅ 悬停效果要有惊喜 */
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* ❌ 避免：通用淡入淡出 */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

動きに関するベストプラクティス:

• 細部に分散したマイクロインタラクションより、丁寧に演出されたページ読み込みアニメーションのほうが、心地よい体験になります
• スクロール時のトリガーやホバー状態を使って、意外性を演出します
• CSS のみで実現できる方法を優先します
• React プロジェクトでは Motion ライブラリ（formerly framer-motion）を使用します

4. 空間とレイアウト（Spatial Composition）

基本原則：型を破り、予想外の視覚的なリズムを生み出します。

/* ✅ 推荐：不对称布局 */
.hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: center;
}

/* ✅ 推荐：大胆的负空间 */
.spacious {
  padding: 12rem 8rem;
}

/* ✅ 推荐：重叠元素 */
.overlap {
  position: relative;
  z-index: 1;
  margin-bottom: -3rem;
}

レイアウトの工夫:

• 非対称なグリッド
• 要素の重なり
• 斜め方向の流れ
• グリッドからはみ出す要素
• 大胆なネガティブスペース、または制御された密度

5. 背景とビジュアルのディテール（Backgrounds & Visual Details）

基本原則：無難な単色ではなく、雰囲気と深みを生み出します。

/* ✅ 推荐：纹理和深度 */
.gradient-mesh {
  background: 
    radial-gradient(at 40% 20%, hsla(228, 100%, 50%, 0.15) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 0.15) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 0.2) 0px, transparent 50%);
}

/* ✅ 推荐：噪点纹理 */
.noise-overlay {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,..."); /* SVG 噪点 */
  opacity: 0.03;
  pointer-events: none;
}

/* ✅ 推荐：戏剧性阴影 */
.card {
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

創造的なディテール:

• グラデーショングリッド
• ノイズテクスチャ
• 幾何学模様
• 重なり合う透明レイヤー
• ドラマチックな影
• 装飾的なボーダー
• カスタムカーソル
• 粒状感のあるオーバーレイ

---

実装ガイドライン

次に、動作するコード（HTML/CSS/JS、React、Vue など）を実装し、以下を満たしてください。

• 本番品質で機能的：コードが動作し、ベストプラクティスに沿っている
• 視覚的なインパクトがあり、記憶に残る：独自の美学上の方向性がある
• 一貫性がある：すべてのディテールが全体のビジョンに沿っている
• 丁寧に仕上げられている：余白、コントラスト、アニメーションを慎重に検討している

実装の複雑さをデザインに合わせる

重要：デザインと実装の複雑さを一致させてください。

• マキシマリズムのデザイン：豊富なアニメーションやエフェクトを盛り込んだ、丁寧に設計されたコードが必要です
• ミニマリズムのデザイン：抑制と精密さを大切にし、余白、タイポグラフィ、繊細なディテールに細心の注意を払う必要があります
• 洗練は実行から生まれる：優れたデザインは、要素を増やすことではなく、正確に実現することから生まれます

---

よくあるデザインパターンの参考例

テクノロジーを感じさせるインターフェース

/* 深色背景 + 青色点缀 */
--bg: #0a0a0a;
--surface: #141414;
--border: #262626;
--accent: #22d3ee;
--text: #fafafa;

温かみのある自然なインターフェース

/* 暖白背景 + 大地色点缀 */
--bg: #faf8f5;
--surface: #f5f1eb;
--border: #e8e2d9;
--accent: #e07a5f;
--text: #2d2a26;

ミニマルで高級感のあるインターフェース

/* 纯黑 + 高对比点缀 */
--bg: #ffffff;
--surface: #fafafa;
--border: #000000;
--accent: #000000;
--text: #000000;

---

禁止事項

汎用的な AI 生成の美学を決して使わないでください。

• ❌ 使い古されたフォントファミリー（Inter、Roboto、Arial、system fonts）
• ❌ ありきたりな配色（特に白背景に紫のグラデーション）
• ❌ 予測可能なレイアウトやコンポーネントのパターン
• ❌ 文脈に即した個性のない、どれも同じようなデザイン
• ❌ Space Grotesk などのよくある選択肢（世代を超えて多様性を保つ）

---

品質チェックリスト

デザインを完成させる前に、以下を確認してください。

• フォントの選択：個性的で、意味のあるものですか？
• 色彩システム：明確なパレットがありますか？
• 動きのデザイン：意図と焦点がありますか？
• 空間レイアウト：型を破っていますか？
• ビジュアルのディテール：深みと雰囲気がありますか？
• アクセシビリティ：WCAG 規格に準拠していますか？
• レスポンシブ対応：さまざまな画面に自然に適応しますか？

---

覚えておいてください：Claude には、並外れた創造的な作品を生み出す力があります。無難なものにとどまらず、固定観念を打ち破り、独自のビジョンに全力で取り組むことで何を生み出せるのかを示してください。