frontend-design

フロントエンドデザインスキル

このスキルは、平凡な「AI らしい粗雑な」美学を避けながら、独自性のある本番品質のフロントエンドインターフェースを作成するためのものです。実際に使えるコードを実装し、美的な細部や創造的な選択に細心の注意を払います。

このスキルを使用する場面

ユーザーから次のような依頼があった場合に、このスキルを使用します。

• Web コンポーネント、ページ、またはアプリケーション全体を構築する
• ランディングページ、ダッシュボード、またはマーケティングページを作成する
• React、Vue、またはネイティブ HTML/CSS のインターフェースを設計する
• 既存の Web UI を美しくしたり、再設計したりする
• ポスター、素材、またはビジュアルデザイン要素を作成する（Web 用）
• 高いデザイン品質と独自の美学が求められる、あらゆるフロントエンドプロジェクト

主なトリガーワード: Web コンポーネント、ページ、アプリ、Web サイト、ランディングページ、ダッシュボード、React コンポーネント、HTML/CSS、UI デザイン、デザインの改善、フロントエンド

基本原則

コードを書く前に、深くデザインを検討する必要があります。すべてのインターフェースは、独自性があり、意図が明確で、記憶に残るものにしてください。

デザイン思考のプロセス

コードを実装する前に、次の質問に答えてください。

1. 目的（Purpose）

• 課題: このインターフェースはどのような課題を解決しますか？
• ユーザー: 誰が、どのような状況で使用しますか？
• 目標: ユーザーはどのようなタスクを完了する必要がありますか？

2. スタイルの方向性（Style Direction）

明確で大胆な美学の方向性を選びます。「モダンでミニマル」のような一般的な説明ではなく、極端なスタイルを選びましょう。

スタイルの選択肢（これらに限定されません）:

• ミニマリズム: 徹底した抑制、広い余白、精密なタイポグラフィ
• 極端なカオス: 密集したレイアウト、要素の重なり、強烈な視覚効果
• レトロフューチャリズム: 80 年代のネオンカラー、グリッド、シンセウェーブスタイル
• オーガニック／ナチュラル: 流れるような形、自然な色調、柔らかな曲線
• ラグジュアリー／洗練: 優雅なフォント、ゴールドのアクセント、繊細なディテール
• 遊び心／おもちゃのような雰囲気: 明るい色、角丸、楽しいアニメーション
• エディトリアル／雑誌風: 大胆なタイポグラフィ、グリッドシステム、モノクロを基調
• 無骨／プリミティブ: モノクロ、硬いエッジ、実用主義
• アールデコ／幾何学: 対称的なパターン、幾何学的な形、高いコントラスト
• ソフト／パステル: 穏やかな色、グラデーション、夢のような雰囲気
• インダストリアル／実用的: システムフォント、モノクロ、機能を優先
• ニューモーフィズム: 柔らかな影、浮き彫り効果、繊細な奥行き
• グラスモーフィズム: ぼかした背景、透明度、光のような質感

重要: 明確なコンセプトの方向性を選び、正確に表現してください。大胆なマキシマリズムも、洗練されたミニマリズムも効果的です。重要なのは強度ではなく意図です。

3. 技術的な制約（Constraints）

• 使用するフレームワークは何ですか？（React、Vue、ネイティブ HTML/CSS）
• パフォーマンス要件は何ですか？（アニメーションの複雑さ、ファイルサイズ）
• アクセシビリティ要件は何ですか？（ARIA ラベル、キーボードナビゲーション、色のコントラスト）
• ブラウザーの互換性はどうなっていますか？

4. 差別化（Differentiation）

• 記憶に残る要素: 何が印象に残りますか？
• 独自性: ユーザーはどのディテールを覚えていますか？
• 驚き: どこでユーザーをあっと言わせますか？

フロントエンドの美学ガイド

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

原則: フォントの選択はデザインの魂です。

推奨事項:

• ✅ 独自性と個性のあるフォントを選びます
• ✅ 見出しには目を引くフォント、本文には読みやすいフォントを使います
• ✅ 意外性のあるフォントの組み合わせを試します
• ✅ フォントのバリエーション（font-weight、font-style）を使って階層を作ります
• ✅ 文字間隔（letter-spacing）と行の高さ（line-height）を正確に調整します

避けること:

• ❌ 一般的なフォントを使うこと: Arial、Helvetica、Inter、Roboto、システムフォント
• ❌ すべてのテキストで同じフォントとサイズを使うこと
• ❌ フォントの読み込みパフォーマンスを無視すること（font-display: swap を使用します）

おすすめのフォントソース:

• Google Fonts（あまり知られていない独自性のあるフォントを選びます）
• カスタムフォント（プロジェクトで使用できる場合）

フォントの組み合わせ例:

/* 极简编辑风格 */
--font-heading: 'Playfair Display', serif;
--font-body: 'Source Sans Pro', sans-serif;

/* 现代科技风格 */
--font-heading: 'Space Mono', monospace;
--font-body: 'DM Sans', sans-serif;

/* 优雅奢华风格 */
--font-heading: 'Cormorant Garamond', serif;
--font-body: 'Lato', sans-serif;

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

原則: 色は雰囲気とブランドを定義します。

推奨事項:

• ✅ 一貫性を保つために CSS 変数を使います
• ✅ メインカラーと鮮やかなアクセントカラーを組み合わせます
• ✅ 色彩心理学を考慮します（青＝信頼、赤＝緊急、緑＝成功）
• ✅ グラデーションを使って奥行きを演出します（ただし、上品に使います）
• ✅ 色のコントラストを保ちます（WCAG AA 基準: 最低 4.5:1）

避けること:

• ❌ ありきたりな配色: 白い背景＋紫のグラデーション
• ❌ 色を使いすぎること（メインカラーは 3～5 色で十分です）
• ❌ アクセシビリティを無視すること

テーマの例:

:root {
  /* 极简黑白 */
  --color-primary: #000000;
  --color-secondary: #ffffff;
  --color-accent: #ff3366;

  /* 复古未来 */
  --color-primary: #1a1a2e;
  --color-secondary: #16213e;
  --color-accent: #00fff5;
  --color-highlight: #ff006e;

  /* 自然有机 */
  --color-primary: #2d6a4f;
  --color-secondary: #52b788;
  --color-accent: #ffc857;
}

3. アニメーションとモーション（Animation & Motion）

原則: アニメーションは体験を向上させるものであり、注意をそらすものであってはなりません。

推奨事項:

• ✅ CSS アニメーションを優先します（パフォーマンスに優れています）
• ✅ ページ読み込み時のアニメーションをデザインします（第一印象を左右します）
• ✅ animation-delay を使って、要素を順番に表示します
• ✅ ホバー状態には、さりげないトランジションを追加します
• ✅ スクロールをトリガーとするアニメーションを使います（Intersection Observer）
• ✅ React では、Framer Motion または React Spring を使います

避けること:

• ❌ アニメーションを使いすぎること（すべての要素が動いている状態）
• ❌ アニメーションの時間を長くしすぎること（500ms を超えると、ユーザーをいら立たせます）
• ❌ prefers-reduced-motion メディアクエリを無視すること

アニメーションの例:

/* 页面加载 - 元素逐个淡入 */
.fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

.fade-in-up:nth-child(1) { animation-delay: 0.1s; }
.fade-in-up:nth-child(2) { animation-delay: 0.2s; }
.fade-in-up:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 悬停效果 */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

4. 空間構成（Spatial Composition）

原則: レイアウトは視線を導き、視覚的なリズムを生み出すものでなければなりません。

推奨事項:

• ✅ 非対称なレイアウトを試します
• ✅ 要素を重ねて奥行きを生み出します
• ✅ 対角線の流れで視線を導きます
• ✅ グリッドからはみ出す要素を取り入れます（ただし、意図的に配置します）
• ✅ 広々とした余白、または慎重に調整した密度を使います
• ✅ Grid と Flexbox を使って複雑なレイアウトを作ります

避けること:

• ❌ すべての要素を中央揃えにすること
• ❌ 均等に配置されたグリッド（退屈です）
• ❌ レスポンシブデザインを無視すること

レイアウトのテクニック例:

/* 不对称网格 */
.grid-asymmetric {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
}

/* 重叠效果 */
.overlap-container {
  position: relative;
}

.overlap-item {
  position: absolute;
  z-index: 2;
  transform: translate(-20%, -20%);
}

/* 对角线流程 */
.diagonal-section {
  transform: skewY(-3deg);
  padding: 100px 0;
}

.diagonal-section > * {
  transform: skewY(3deg);
}

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

原則: 背景は雰囲気と奥行きを生み出します。

推奨事項:

• ✅ グラデーショングリッド
• ✅ ノイズテクスチャ
• ✅ 幾何学模様
• ✅ 透明度のレイヤー化
• ✅ 印象的なシャドウ
• ✅ 装飾的なボーダー
• ✅ カスタムカーソル（スタイルに合う場合）
• ✅ 粒子のオーバーレイ効果

避けること:

• ❌ 単色の背景（ミニマルなスタイルの場合を除く）
• ❌ 低品質、または無関係なストック画像
• ❌ シャドウの使いすぎ（box-shadow の乱用）

背景効果の例:

/* 渐变网格背景 */
.gradient-grid {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-size: 50px 50px, 50px 50px, 100% 100%;
}

/* 噪点纹理 */
.noise-texture {
  position: relative;
}

.noise-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* 玻璃态效果 */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

ありがちな AI 風の美学を避ける

絶対に避ける要素:

• ❌ 多用されているフォント: Inter、Roboto、Arial、システムフォント
• ❌ ありきたりな配色: 白い背景＋紫のグラデーション
• ❌ 予測可能なレイアウトパターン（中央揃えのカードグリッド）
• ❌ 固有の文脈が感じられない、ありふれたデザイン

避ける方法:

• ✅ プロジェクトごとに異なるフォントを選びます
• ✅ ライトテーマとダークテーマを使い分けます
• ✅ さまざまなレイアウト構成を試します
• ✅ 独自のブランド要素と個性を加えます

実装の複雑さと美学を一致させる

重要な原則: コードの複雑さは、デザインのビジョンに合わせます。

マキシマリズムのデザイン → 複雑なコード

• 多数のアニメーションとトランジション効果
• 複数の要素を重ねたレイヤー
• 複雑なインタラクション状態
• 詳細なビジュアル効果（パーティクル、グラデーション、テクスチャ）

// 示例：复杂的动画卡片
<motion.div
  initial={{ opacity: 0, scale: 0.8, rotateX: -15 }}
  animate={{ opacity: 1, scale: 1, rotateX: 0 }}
  whileHover={{
    scale: 1.05,
    rotateY: 5,
    boxShadow: "0 25px 50px rgba(0,0,0,0.2)"
  }}
  transition={{
    type: "spring",
    stiffness: 300,
    damping: 20
  }}
>
  {/* 复杂内容 */}
</motion.div>

ミニマリズムのデザイン → 精密なコード

• 控えめなアニメーション（重要な場面のみ）
• 正確な余白とタイポグラフィ
• 繊細なトランジション効果
• 数よりも細部を重視

/* 示例：精致的极简主义 */
.minimal-card {
  padding: 60px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  transition: border-color 0.3s ease;
}

.minimal-card:hover {
  border-color: rgba(0,0,0,0.2);
}

.minimal-card h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.5rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 20px 0;
}

ワークフロー

ステップ 1: 要件を理解する

• ユーザーの依頼を読み、重要な情報を抽出します
• プロジェクトの種類（コンポーネント、ページ、アプリケーション全体）を特定します
• 技術スタック（React、Vue、ネイティブ HTML/CSS）を確認します

ステップ 2: デザインを検討する

• デザイン思考のプロセスにある 4 つの質問に答えます
• 明確な美学の方向性を選びます
• 最終的な見た目を頭の中でイメージします

ステップ 3: 技術的な判断をする

• フレームワークとツールを選びます
• アニメーションライブラリ（Framer Motion、CSS、React Spring）を決めます
• フォントソースを決定します

ステップ 4: 実装する

• セマンティックな HTML 構造を書きます
• CSS スタイルを実装します（CSS 変数を使用）
• インタラクションとアニメーションを追加します
• レスポンシブデザインを確保します

ステップ 5: 仕上げる

• 余白とタイポグラフィを調整します
• アニメーションのタイミングを最適化します
• さまざまな画面サイズでテストします
• アクセシビリティを確保します（ARIA、キーボードナビゲーション）

シナリオ例

シナリオ 1: ランディングページの作成

ユーザーの依頼: 「SaaS 製品のランディングページを作ってください」

デザインの検討:

• 目的: 製品の価値を伝え、ユーザー登録を促します
• スタイル: モダンなテクノロジーとエディトリアルスタイルを組み合わせ、Space Grotesk フォント、白黒を基調に青をアクセントとして使います
• レイアウト: 非対称にし、ヒーローエリアが画面の 70% を占める対角線の流れにします
• 差別化: 独自のフォントの組み合わせと、大胆なタイポグラフィの階層

実装の重点:

• ヒーローセクションでは、大きな文字サイズの見出し（4～6rem）を使います
• スクロールをトリガーにしたフェードインアニメーション
• グラスモーフィズムの CTA ボタン
• 機能を紹介するレスポンシブグリッド

シナリオ 2: ダッシュボードのデザイン

ユーザーのリクエスト: 「データ分析ダッシュボードを作成する」

デザインの考え方:

• 目的：データを分かりやすく表示し、迅速な意思決定を支援する
• スタイル：実用性と洗練さを両立し、IBM Plex Sans とダークテーマを使用する
• レイアウト：グリッドシステム、カード型レイアウト、データの可視化を優先する
• 差別化：さりげないアニメーション効果と、ホバー時の詳細情報表示

実装のポイント:

• ダークな背景で目の疲れを軽減する
• カードに柔らかな影と枠線を使用する
• グラフに鮮やかなアクセントカラーを使用する
• 読み込み状態にスケルトンスクリーンを使用する

シナリオ 3: React コンポーネントライブラリ

ユーザーのリクエスト: 「カスタムボタンコンポーネント一式を作成する」

デザインの考え方:

• 目的：再利用可能で、カスタマイズできるボタンシステム
• スタイル：柔軟で、複数のバリエーションをサポートする
• 技術：styled-components または CSS modules を使用する
• 差別化：独自のホバー効果と読み込み状態

実装のポイント:

• プライマリーボタン、セカンダリーボタン、テキストボタンのバリエーション
• サイズのバリエーション（小、中、大）
• 読み込み状態と無効状態
• 滑らかなトランジションアニメーション

コード品質基準

必ず守ること:

• ✅ セマンティック HTML（<header>, <nav>, <main>, <article>）
• ✅ BEM 命名規則または CSS Modules
• ✅ 色と余白に CSS 変数を使用する
• ✅ モバイルファーストのレスポンシブデザイン
• ✅ アクセシビリティ（ARIA 属性、キーボードナビゲーション）
• ✅ パフォーマンスの最適化（画像の遅延読み込み、フォントの最適化）

禁止事項:

• ❌ インラインスタイル（動的な値を除く）
• ❌ 不必要な !important
• ❌ 色の値のハードコーディング（CSS 変数を使用する）
• ❌ 最適化されていない画像
• ❌ 意味のないクラス名（.box1, .container2）

技術スタックの参考情報

推奨ツール:

• フォント: Google Fonts, Font Squirrel
• 色: Coolors.co, Adobe Color
• アニメーション: Framer Motion (React), Anime.js, GreenSock
• アイコン: Heroicons, Lucide, Phosphor Icons
• CSS フレームワーク: Tailwind CSS (カスタム設定), styled-components

避けるもの:

• ❌ Bootstrap, Material-UI（ありきたりな外観になりやすい）
• ❌ Tailwind のデフォルト設定（カスタマイズが必要）

チェックリスト

実装が完了したら、以下の項目を確認してください:

• 独自性のあるフォントの組み合わせを選んでいる（Inter/Roboto/Arial ではない）
• 色の配色に明確な美的方向性がある
• 丁寧に設計されたアニメーションが少なくとも 1〜2 か所ある
• 単純な中央揃えのグリッドレイアウトではない
• 独自の視覚的な細部（背景、テクスチャ、影）がある
• モバイルとデスクトップの両方で見栄えのよいレスポンシブデザインになっている
• アクセシビリティ基準を満たしている（コントラスト、ARIA）
• コードが明確で、保守しやすい
• パフォーマンスが良好（アニメーションがカクつかず、読み込みが速い）

最後に

創造的な解釈が鍵です。ユーザーに「何色がいいですか？」と尋ねるのではなく、文脈に基づいて大胆なデザインの判断をしてください。すべてのデザインに独自性を持たせましょう。プロジェクトごとに、ライトテーマとダークテーマ、フォント、美的スタイルを変えてください。

完璧ではなく、卓越を目指しましょう。強い個性を持つデザインは、「無難」でも平凡なデザインに勝ります。思い切って挑戦し、ユーザーを驚かせましょう。