高度なスタイリングテクニック

---

グラデーションテクニック

リニアグラデーション

リニアグラデーションは一直線の方向（水平・垂直・斜め）に流れる。

ヒーローセクションにリニアグラデーション背景を作成する:
パープル-600（#9333EA）からブルー-600（#2563EB）へ、左から右に流れる。
CSS: background: linear-gradient(to right, #9333EA, #2563EB)

よく使われるリニアグラデーションの方向:

方向	CSS値	視覚的効果
左から右	to right	水平方向の流れ
上から下	to bottom	縦方向のフェード
斜め	135deg	ダイナミックな斜め
カスタム角度	45deg	アーティスティックな傾き

夕焼け効果のための複数ストップのリニアグラデーションを使用する:
CSS: background: linear-gradient(135deg, #F97316 0%, #EC4899 50%, #8B5CF6 100%)
ページヒーロー背景に全幅で適用する。

---

ラジアルグラデーション

ラジアルグラデーションは中心点から外側に向かって放射状に広がる。

プレミアムセクション用のラジアルグラデーションカード背景を作成する:
CSS: background: radial-gradient(circle at top left, #8B5CF6 0%, #111827 70%)
左上角をパープルに光らせ、ダークにフェードさせる。

ラジアルグラデーションのユースケース:

暗い背景上にラジアルスポットライト効果を作成する:
CSS: background: radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.3) 0%, transparent 70%)
上部中央から広がる微妙なブルーグロー — ヒーローセクションに適している。

---

グラデーションテキスト

見出しテキストにグラデーションを適用する:
CSS:
  background: linear-gradient(135deg, #6366F1, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
ヒーローセクションのメインヘッドラインのみに使用する。

---

アニメーションとマイクロインタラクション

マイクロインタラクションとは、ユーザーの操作を確認し、インターフェースに生き生きとした感覚を与える、小さく目的のあるアニメーションだ。控えめであるべきで、気を散らすものであってはならない。

ホバーエフェクト

プロダクトカードにホバーマイクロインタラクションを追加する:
- スケール: ホバー時に transform: scale(1.03)
- シャドウ: ミディアムからラージシャドウへのトランジション
- トランジション: all プロパティを 200ms ease-in-out で
- カーソル: pointer
レイアウトに影響するプロパティ（width、height、padding）はアニメーションしない。

---

ボタン状態のトランジション

ボタン状態のトランジションをデザインする:
デフォルト: ブルー-600（#2563EB）背景、白テキスト
ホバー: ブルー-700（#1D4ED8）、transform: translateY(-1px)、より大きなシャドウ
アクティブ/押された状態: ブルー-800（#1E40AF）、transform: translateY(0)、インナーシャドウ
無効: gray-300 背景、gray-500 テキスト、ポインターイベントなし
すべてのトランジション: 150ms ease

---

ローディング状態

ブログポストカードのスケルトンローディング状態を作成する:
- 画像（アスペクト比 16:9）、タイトル（2行）、抜粋（3行）のプレースホルダーブロック
- 背景: gray-200（#E5E7EB）
- アニメーション: 1.5秒 infinite で左から右へのシマーエフェクト
- CSS: background-size: 400% 100%、キーフレームでアニメーション

---

フォーカスアニメーション

すべてのフォーム入力にアニメーションフォーカスリングを追加する:
デフォルト: 1px solid #D1D5DB ボーダー
フォーカス: 2px solid #3B82F6 ボーダー、box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25)
トランジション: border-color と box-shadow を 150ms ease で

---

CSSカスタムプロパティ（変数）

CSSカスタムプロパティはデザインを保守しやすくし、テーマの切り替えを容易にする。マルチテーマのインターフェースを構築する際は、必ず変数を使用するようプロンプトを書く。

基本変数システム

CSSカスタムプロパティのデザインシステムを実装する:

:root {
  --color-primary: #3B82F6;
  --color-primary-hover: #2563EB;
  --color-secondary: #6B7280;
  --color-background: #FFFFFF;
  --color-surface: #F9FAFB;
  --color-text: #111827;
  --color-text-secondary: #6B7280;
  --color-border: #E5E7EB;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

---

ダークモードのオーバーライド

data-theme 属性を使ったダークモードサポートを追加する:

[data-theme="dark"] {
  --color-background: #111827;
  --color-surface: #1F2937;
  --color-text: #F9FAFB;
  --color-text-secondary: #9CA3AF;
  --color-border: #374151;
}

JavaScriptで切り替える: document.documentElement.setAttribute('data-theme', 'dark')

---

スペーシングスケール

デザインシステムに一貫したスペーシングスケールを追加する:

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
}

すべてのコンポーネントのパディングとマージン値にこれらの変数を使用する。

---

事前構築済みカラーパレット

コヒーシブなインターフェースを素早く構築する際、パレットタイプを指定してAIにすべてのコンポーネントへ一貫して適用させる。

モダン

プロフェッショナルでクリーン — SaaSや企業向けツール向け。

モダンパレットを使用する:
Primary: #3B82F6（ブルー）、Secondary: #1F2937（ダークグレー）、
Accent: #2563EB、Neutral: #F3F4F6、Text: #111827
クリーンでプロフェッショナル、装飾は最小限。

ビビッド

エネルギッシュでボールド — クリエイティブで若々しいブランド向け。

ビビッドパレットを使用する:
Purple（#8B5CF6）、Pink（#EC4899）、Yellow（#F59E0B）、Green（#10B981）
高彩度、大胆なコントラスト、隣接する色の間にグラデーションを使用する。

アース

温かく自然 — フード、ウェルネス、サステナビリティブランド向け。

アースパレットを使用する:
Amber（#D97706）、Orange（#F97316）、Green（#10B981）、Stone（#78716C）
温かくオーガニック、クールなブルーは避け、背景には温かみのあるホワイト（#FEFCE8）を使用する。

モノクローム

洗練されたエディトリアル — コンテンツプラットフォームやポートフォリオ向け。

モノクロームパレットを使用する:
gray-900（#111827）、gray-700（#374151）、gray-500（#6B7280）、
gray-300（#D1D5DB）、white（#FFFFFF）
カラーアクセントなし — フォントウェイトとサイズで階層を作る。

オーシャン

信頼感があり落ち着いた — ファイナンス、データ、アナリティクス向け。

オーシャンパレットを使用する:
blue-900（#1E3A5F）、blue-700（#1D4ED8）、cyan-500（#06B6D4）、teal-400（#2DD4BF）
深みがあり権威的、データハイライトには明るいシアンアクセントを使用する。

サンセット

ダイナミックで表現豊か — ゲーム、エンターテインメント、ソーシャル向け。

サンセットパレットを使用する:
Orange（#F97316）、Red（#EF4444）、Pink（#EC4899）、Purple（#8B5CF6）、Yellow（#F59E0B）
温かみのあるグラデーション背景、暗いサーフェス上の高コントラスト。

---

高度なプロンプトのヒント

グラデーションと変数を組み合わせる — 保守しやすいコードのためにグラデーション内でCSSカスタムプロパティを参照する:

デザイントークンを使ったヒーローグラデーション:
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)

シャドウとグラデーションを重ねる — 深みのあるグラスモーフィズムを表現する:

レイヤードエフェクトのグラスカード:
background: rgba(255, 255, 255, 0.1),
backdrop-filter: blur(12px),
border: 1px solid rgba(255, 255, 255, 0.2),
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3)

---