190 lines
4.3 KiB
Markdown
190 lines
4.3 KiB
Markdown
# Theme Examples
|
||
|
||
このドキュメントでは、具体的なテーマ例とその実装ガイドラインを提供します。
|
||
|
||
## 1. Nordic Minimal
|
||
|
||
**コンセプト：** スカンジナビアデザインにインスパイアされた、機能美と静謐さ
|
||
|
||
```css
|
||
:root {
|
||
/* Colors */
|
||
--color-primary: #2d3748; /* Charcoal */
|
||
--color-secondary: #718096; /* Slate */
|
||
--color-accent: #c17f59; /* Terracotta */
|
||
--color-background: #f7f5f3; /* Warm White */
|
||
--color-surface: #ffffff;
|
||
--color-text: #1a202c;
|
||
--color-text-muted: #4a5568;
|
||
|
||
/* Typography */
|
||
--font-heading: 'DM Serif Display', serif;
|
||
--font-body: 'DM Sans', sans-serif;
|
||
|
||
/* Spacing */
|
||
--space-unit: 8px;
|
||
}
|
||
```
|
||
|
||
**特徴：**
|
||
|
||
- 温かみのある白背景
|
||
- テラコッタのアクセント
|
||
- 大胆な余白
|
||
- セリフ見出し × サンセリフ本文
|
||
|
||
---
|
||
|
||
## 2. Neon Brutalism
|
||
|
||
**コンセプト：** ブルータリズムとサイバーパンクの融合、大胆で反抗的
|
||
|
||
```css
|
||
:root {
|
||
/* Colors */
|
||
--color-primary: #000000;
|
||
--color-secondary: #ffffff;
|
||
--color-accent: #00ff88; /* Electric Green */
|
||
--color-accent-alt: #ff6b35; /* Safety Orange */
|
||
--color-background: #0a0a0a;
|
||
--color-surface: #1a1a1a;
|
||
--color-text: #ffffff;
|
||
--color-border: #333333;
|
||
|
||
/* Typography */
|
||
--font-heading: 'Space Grotesk', sans-serif;
|
||
--font-body: 'JetBrains Mono', monospace;
|
||
|
||
/* Effects */
|
||
--shadow-brutal: 4px 4px 0 var(--color-accent);
|
||
--border-brutal: 3px solid var(--color-secondary);
|
||
}
|
||
```
|
||
|
||
**特徴：**
|
||
|
||
- 高コントラスト
|
||
- ハードシャドウ（ドロップシャドウなし）
|
||
- モノスペースフォント
|
||
- 太いボーダー
|
||
|
||
---
|
||
|
||
## 3. Organic Growth
|
||
|
||
**コンセプト：** 自然と持続可能性、有機的な形状と穏やかな色調
|
||
|
||
```css
|
||
:root {
|
||
/* Colors */
|
||
--color-primary: #2d4a3e; /* Forest */
|
||
--color-secondary: #8b7355; /* Earth */
|
||
--color-accent: #d4a574; /* Sand */
|
||
--color-background: #f5f1eb; /* Cream */
|
||
--color-surface: #ffffff;
|
||
--color-text: #2c3e2d;
|
||
--color-text-muted: #5d6b5e;
|
||
|
||
/* Typography */
|
||
--font-heading: 'Fraunces', serif;
|
||
--font-body: 'Work Sans', sans-serif;
|
||
|
||
/* Shapes */
|
||
--radius-organic: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
||
}
|
||
```
|
||
|
||
**特徴：**
|
||
|
||
- アースカラーパレット
|
||
- 有機的なブロブシェイプ
|
||
- 手書き風アクセント
|
||
- テクスチャ背景
|
||
|
||
---
|
||
|
||
## 4. Tech Noir
|
||
|
||
**コンセプト：** ダークモードファースト、洗練されたテック感
|
||
|
||
```css
|
||
:root {
|
||
/* Colors */
|
||
--color-primary: #6366f1; /* Indigo */
|
||
--color-secondary: #8b5cf6; /* Violet */
|
||
--color-accent: #22d3ee; /* Cyan */
|
||
--color-background: #0f0f23; /* Deep Navy */
|
||
--color-surface: #1a1a2e;
|
||
--color-surface-elevated: #252542;
|
||
--color-text: #e2e8f0;
|
||
--color-text-muted: #94a3b8;
|
||
|
||
/* Typography */
|
||
--font-heading: 'Syne', sans-serif;
|
||
--font-body: 'Outfit', sans-serif;
|
||
|
||
/* Effects */
|
||
--glow-primary: 0 0 20px rgba(99, 102, 241, 0.3);
|
||
--gradient-hero: linear-gradient(
|
||
135deg,
|
||
#6366f1 0%,
|
||
#8b5cf6 50%,
|
||
#22d3ee 100%
|
||
);
|
||
}
|
||
```
|
||
|
||
**特徴：**
|
||
|
||
- 深いネイビー背景
|
||
- グロー効果のアクセント
|
||
- グラデーションのポイント使用
|
||
- モダンなサンセリフ
|
||
|
||
---
|
||
|
||
## 5. Editorial Elegance
|
||
|
||
**コンセプト：** 雑誌のような洗練されたエディトリアルデザイン
|
||
|
||
```css
|
||
:root {
|
||
/* Colors */
|
||
--color-primary: #1a1a1a;
|
||
--color-secondary: #6b7280;
|
||
--color-accent: #dc2626; /* Editorial Red */
|
||
--color-background: #fafafa;
|
||
--color-surface: #ffffff;
|
||
--color-text: #111827;
|
||
--color-text-muted: #6b7280;
|
||
|
||
/* Typography */
|
||
--font-heading: 'Playfair Display', serif;
|
||
--font-body: 'Source Serif Pro', serif;
|
||
--font-accent: 'Libre Baskerville', serif;
|
||
|
||
/* Layout */
|
||
--column-width: 65ch;
|
||
--grid-editorial: 1fr 2fr 1fr;
|
||
}
|
||
```
|
||
|
||
**特徴：**
|
||
|
||
- クラシックなセリフ体
|
||
- 赤のアクセント（見出し・リンク）
|
||
- 65文字幅のコラム
|
||
- 豊富な余白と行間
|
||
|
||
---
|
||
|
||
## Application Guidelines
|
||
|
||
### テーマ適用時のチェックリスト
|
||
|
||
- [ ] CSS変数として定義し、一貫性を確保
|
||
- [ ] ダークモード/ライトモードの両方を考慮
|
||
- [ ] アクセシビリティ（コントラスト比4.5:1以上）を確認
|
||
- [ ] レスポンシブ時のフォントサイズ調整
|
||
- [ ] インタラクティブ要素のホバー/フォーカス状態を定義
|