---
name: front-design
description: >
  ウェブサイトやLPのフロントエンドデザインを、コンセプトヒアリングからビジュアル戦略策定、
  デザインアセット生成まで一貫して支援するスキル。カラーパレット、タイポグラフィ、
  レイアウトパターン、CSSスニペットをコンセプト駆動で設計・生成する。
  処理完了時に画像リソースガイド（image-resources.md）を生成し、
  Unsplash/Pexels 検索キーワードと AI 画像生成プロンプト（Midjourney/DALL-E）を提供する。
  Use when user says「LPを作りたい」「ウェブサイトのデザイン」「ヒーロー画像を探して」
  「ランディングページの素材集め」「サイトのビジュアル方向性を決めたい」
  「ファーストビューのデザイン」「フロントデザインを準備して」「ウェブデザインの素材」
  「CSSグラデーション作って」「カラーパレットを提案して」「LP制作の準備」
  「画像素材を探して」「Midjourney のプロンプトを書いて」。
  Do NOT use for: 既存UIの改善・レビュー（→ ui-design）、
  SEO 最適化やアナリティクス設計（→ seo-analytics）、
  React/TSXコンポーネントの実装（→ effective-typescript）。
metadata:
  author: KC-Prop-Foundry
  version: 1.2.0
  category: development
---

# Skill: Front Design（フロントエンドデザイン戦略・アセット生成）

> **コンセプトから逆算せよ — 美しいサイトは戦略的なビジュアル設計から始まる**

## Instructions

### ワークフロー内の位置

```
コンセプトヒアリング → ビジュアル戦略 → [front-design] → アセットパッケージ
                                          ↓
                                     カラー・タイポ・レイアウト・CSS
                                          ↓
                                     visual-guide.html + hero-styles.css
```

### 入力

| 入力 | 説明 | 例 |
|:---|:---|:---|
| サイトコンセプト | 業種・ターゲット・トーンの情報 | 「SaaS向け、先進的、B2B」 |
| 参考サイト / ブランドガイドライン | 既存のデザイン資産 | URL、ブランドカラー、ロゴ |
| 技術制約 | フレームワーク・ブラウザ要件 | React + Tailwind、IE除外 |

### 出力

| 出力 | 形式 | 説明 |
|:---|:---|:---|
| ビジュアル戦略書 | Markdown (strategy.md) | コンセプトキーワード、ムードボード方針 |
| ビジュアルガイド | HTML (visual-guide.html) | カラー・タイポ・レイアウトの統合プレビュー |
| CSS アセット | CSS (hero-styles.css) | すぐに使える CSS 変数・クラス集 |
| 画像リソースガイド | Markdown (image-resources.md) | ストックフォト検索キーワード + AI 画像生成プロンプト |

---

## Step 1: コンセプトヒアリング

ユーザーから以下の情報を引き出す。足りない情報は推測せず、必ず確認する。

### 必須ヒアリング項目

| カテゴリ | 質問 | 例 |
|:---|:---|:---|
| **業種・サービス** | 何のサイト / LP か？ | SaaS、飲食店、コーポレート、EC、ポートフォリオ |
| **ターゲット** | 誰に向けたサイトか？ | 20代女性、B2B 意思決定者、テック系エンジニア |
| **トーン** | どんな印象を与えたいか？ | 信頼感、先進性、温かみ、高級感、遊び心 |
| **参考サイト** | 好みのサイトやデザインはあるか？ | URL、ブランド名、スクリーンショット |
| **制約** | 技術的制約やブランドガイドラインはあるか？ | フレームワーク、ブランドカラー、ロゴ |

### ヒアリングが不十分な場合

最低限「業種・サービス」と「トーン」の 2 つがあれば Step 2 に進める。
その他は合理的なデフォルトで補完し、ユーザーに提示して確認を取る。

**チェックリスト**:
### 品質ガードレール

- アクセシビリティ基準（WCAG AA）未達のコンポーネントを出荷してはならない
- ハードコードされたブレークポイント値を使用しないこと

品質基準:
- JavaScript バンドルサイズ 最大 200 KB
- LCP（Largest Contentful Paint）閾値: 2.5 秒

- [ ] 業種・サービスの種類を把握した
- [ ] ターゲットユーザー像を明確にした
- [ ] 与えたいトーン・印象を 2〜3 語で定義した
- [ ] 技術的制約（フレームワーク、ブラウザ要件）を確認した
- [ ] 既存ブランド資産（ロゴ、カラー、フォント指定）の有無を確認した

---

## Step 2: ビジュアル戦略策定

ヒアリング結果から **ビジュアル戦略ドキュメント** を Markdown で作成する。
これが以降のリソース収集の指針となる。

### ビジュアル戦略テンプレート

```markdown
# ビジュアル戦略: [サイト名/プロジェクト名]

## コンセプトキーワード
- [3〜5個のキーワード。例: "洗練", "信頼", "テクノロジー", "ミニマル"]

## ムードボード方針
- **カラー方向性**: [例: ダークベースにアクセントブルー / ナチュラルアースカラー]
- **写真スタイル**: [例: ハイコントラスト人物写真 / 抽象的テクスチャ / イラスト主体]
- **レイアウト傾向**: [例: 大胆な非対称 / クリーンなセンター配置 / スプリットスクリーン]
- **タイポグラフィ方向**: [例: ジオメトリックサンセリフ / エレガントなセリフ体]

## ヒーローセクション構成案
- **パターンA**: [例: フルスクリーン動画背景 + オーバーレイテキスト]
- **パターンB**: [例: 左テキスト・右画像のスプリットレイアウト]
- **パターンC**: [例: アブストラクトグラデーション背景 + 中央配置CTA]
```

このドキュメントをユーザーに提示し、方向性の合意を得てから次に進む。

### 2d. テーマ駆動デザイン

コンセプトキーワードから、以下のテーマソースを参照して美学の方向性を決定する。
詳細は [theme-catalog.md](references/theme-catalog.md) を参照。

| テーマソース | 活用方法 |
|:---|:---|
| **IDE テーマ** | Dracula, Nord, Solarized, One Dark → テック・開発者向けサイトの配色基盤 |
| **文化的美学** | Wabi-sabi（侘び寂び）, Bauhaus, Art Deco, Solarpunk → 情緒的なデザイン言語 |
| **業界別コンベンション** | SaaS = ダーク + アクセント、飲食 = アースカラー、金融 = ネイビー + ゴールド |
| **時代的美学** | Y2K, Retro-futurism, Brutalism → 特定のターゲット層へのアピール |

テーマを1つ選び、全デザイン判断の根拠とする。
テーマ名を strategy.md の冒頭に明記し、以降の Step で参照する。

> **Why**: LLM は指示がなければ訓練データの最頻出パターンに収束する
> （Anthropic: "distributional convergence"）。
> テーマを明示的に制約することで、一貫性のある個性的なデザインが生まれる。

**チェックリスト**:
- [ ] コンセプトキーワードが 3〜5 個に絞られている
- [ ] ムードボード方針がカラー・写真・レイアウト・タイポの 4 軸で定義されている
- [ ] ヒーローセクション構成案が 2〜3 パターン提示されている
- [ ] テーマソースから美学の方向性を1つ選定し、strategy.md に明記した
- [ ] ユーザーの合意を得た（または合意を得るために提示した）

---

## Step 3: カラーシステム設計

コンセプトキーワードとトーンから、サイト全体のカラーパレットを CSS 変数で設計する。
詳細は [color-palette-guide.md](references/color-palette-guide.md) を参照。

### カラーパレットの構成

| 区分 | 役割 | 色数 |
|:---|:---|:---|
| **Primary** | ブランドカラー、CTA、主要アクション | 1色 + 明暗バリエーション |
| **Accent** | ハイライト、ホバー、装飾 | 1色 |
| **Neutrals** | テキスト、背景、ボーダー、余白 | 5〜7段階 |
| **Semantic** | 成功・警告・エラーの状態表示 | 各 1色 |

### カラー定義の原則

- コントラスト比は WCAG AA（4.5:1）以上を確保する
- パレットは 5〜8 色に絞る（多すぎると散漫になる）
- アクセントカラーは主張が強すぎないもの 1 色に絞る
- CSS 変数で定義し、ハードコードされた色値は禁止
- コンセプト固有の色彩を導出する（AI slop の紫→青グラデーションを避ける）

### 出力形式

```css
:root {
  --color-primary: #...;
  --color-primary-light: #...;
  --color-primary-dark: #...;
  --color-accent: #...;
  --color-bg: #...;
  --color-surface: #...;
  --color-text: #...;
  --color-text-muted: #...;
  --color-success: #...;
  --color-warning: #...;
  --color-error: #...;
}
```

**チェックリスト**:
- [ ] テキストと背景のコントラスト比が WCAG AA（4.5:1）以上
- [ ] パレットが 5〜8 色に収まっている
- [ ] コンセプトキーワードからカラーが論理的に導出されている
- [ ] 全色が CSS 変数で定義されている
- [ ] AI slop 的な「紫→青」グラデーションに陥っていない

---

## Step 4: タイポグラフィ選定

コンセプトに合ったフォントを Google Fonts から選定し、見出しと本文のペアリングを設計する。
詳細は [typography-selection.md](references/typography-selection.md) を参照。

### フォント選定の方針

| 用途 | 選定基準 | 例 |
|:---|:---|:---|
| **ディスプレイ（見出し）** | コンセプトの個性を反映 | ジオメトリック、セリフ、手書き風 |
| **ボディ（本文）** | 可読性を最優先 | サンセリフ、ニュートラルな書体 |

### コンセプトとフォントの対応

| トーン | ディスプレイ候補 | ボディ候補 |
|:---|:---|:---|
| 先進的・テック | Space Grotesk, Outfit | DM Sans, Plus Jakarta Sans |
| 信頼・コーポレート | Playfair Display, Lora | Source Sans 3, Noto Sans |
| 温かみ・ナチュラル | Fraunces, Vollkorn | Nunito, Atkinson Hyperlegible |
| 高級・エレガント | Cormorant Garamond, Bodoni Moda | Jost, Libre Franklin |

### 日本語サイトの場合

日本語 Web フォントの選定と `font-feature-settings` を含める:
- **ゴシック体**: Noto Sans JP, Zen Kaku Gothic New, BIZ UDGothic
- **明朝体**: Noto Serif JP, Shippori Mincho, BIZ UDMincho
- 欧文フォントと日本語フォントの `font-family` 宣言順に注意（欧文が先）

### タイポグラフィスケール

```css
.hero-heading {
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hero-subheading {
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.6;
}
```

**チェックリスト**:
- [ ] ディスプレイフォントとボディフォントの 2 つを選定した
- [ ] Google Fonts の `@import` URL を含めた（即座に利用可能）
- [ ] コンセプトとの整合性を確認した（高級感→セリフ体等）
- [ ] `clamp()` でフルード設計にしている
- [ ] 日本語サイトの場合、日本語 Web フォントを検討した

---

## Step 5: レイアウトパターン設計

ヒーローセクションのレイアウトを 2〜3 パターン設計する。レスポンシブ対応は必須。
詳細は [layout-patterns.md](references/layout-patterns.md) を参照。

### 主要レイアウトパターン

| パターン | 特徴 | 適用場面 |
|:---|:---|:---|
| **フルスクリーン背景** | 画像 / 動画 / グラデーションの全画面表示 + オーバーレイテキスト | インパクト重視、ブランディング |
| **スプリットレイアウト** | 左テキスト・右画像（または逆）の 2 カラム構成 | SaaS、プロダクト紹介 |
| **センター配置** | テキスト中央揃え + 背景グラデーション + CTA | シンプル、LP |
| **カード / グリッド** | 複数の特徴を並列表示 | 機能紹介、サービス一覧 |
| **非対称レイアウト** | 意図的なバランス崩し + 大胆な余白 | クリエイティブ、ポートフォリオ |

### レスポンシブ設計の原則

- モバイルファーストの CSS を記述する
- `grid-template-columns` でブレイクポイント対応
- `clamp()` でフォントサイズ・パディングをフルード化
- 画像のアスペクト比をヒーロー向け（16:9〜21:9）に統一

**チェックリスト**:
- [ ] コンセプトに合ったレイアウトパターンを 2〜3 個選定した
- [ ] モバイル時のフォールバック（1 カラム化等）を設計した
- [ ] `min-height: 100vh` またはそれに準ずる高さ設計がある
- [ ] 各パターンの CSS を出力した

---

## Step 6: CSS スニペット生成

コンセプトに合わせた、すぐに使える CSS コードを生成する。
詳細は [css-snippets-catalog.md](references/css-snippets-catalog.md) を参照。

### 生成する CSS の種類

| 種類 | 説明 | 数 |
|:---|:---|:---|
| **グラデーション背景** | コンセプトに合ったメッシュグラデーション / リニアグラデーション | 2〜3 パターン |
| **テキストオーバーレイ** | 画像上テキストの可読性を確保する `::after` オーバーレイ | 1〜2 パターン |
| **CTA ボタン** | ホバーエフェクト付き、アクション階層を意識したボタン | Primary + Secondary |
| **アニメーション** | フェードイン、スライドイン等の入場アニメーション | 2〜3 パターン |

### 6b. 技術スタック判定

ユーザーのプロジェクト環境に応じて、CSS 出力形式を切り替える。

| スタック | 使用条件 | 出力形式 |
|:---|:---|:---|
| **Vanilla CSS** | 単純な LP、静的サイト、技術スタック未指定の場合 | CSS 変数 + `@keyframes` + メディアクエリ |
| **Tailwind CSS** | React / Next.js / Vue プロジェクト | `tailwind.config.js` のテーマ拡張 + ユーティリティクラス |
| **Tailwind + shadcn/ui** | 管理画面、SaaS ダッシュボード、コンポーネント駆動 UI | shadcn/ui コンポーネント + Tailwind カスタム設定 |

ユーザーが技術スタックを指定しない場合は **Vanilla CSS をデフォルト**とする。
Tailwind / shadcn/ui を使う場合でも、本スキルの設計原則（コンセプト駆動、AI slop 回避、テーマ一貫性）は同様に適用する。

### CSS 品質基準

- **WCAG AA コントラスト比**: テキストと背景のコントラスト 4.5:1 以上
- **レスポンシブ対応**: 全 CSS にモバイル対応のメディアクエリを含める
- **パフォーマンス意識**: 過度に重い `box-shadow` や `filter` は避ける
- **ブラウザ互換性**: モダンブラウザ（Chrome, Firefox, Safari, Edge 最新 2 バージョン）で動作
- **`clamp()` の活用**: `font-size`, `padding` 等はフルード設計
- **CSS 変数の一貫使用**: ハードコードされた色値は禁止、全て変数参照

**チェックリスト**:
- [ ] グラデーション背景がコンセプトから論理的に導出されている
- [ ] CTA ボタンに `hover` / `focus` のインタラクションが定義されている
- [ ] アニメーションが `prefers-reduced-motion` を考慮している
- [ ] 全 CSS が CSS 変数を参照している（ハードコード色値なし）
- [ ] パフォーマンスに配慮した実装になっている

---

## Step 7: アセットパッケージ生成

収集・生成したリソースを 3 つのファイルにまとめて出力する。

### 出力ファイル構成

```
<output-dir>/
├── visual-guide.html     ← 全リソースを一覧できるインタラクティブ HTML
├── hero-styles.css       ← 全 CSS スニペットをまとめたファイル
├── strategy.md           ← ビジュアル戦略ドキュメント
└── image-resources.md    ← ストックフォト検索キーワード + AI 画像生成プロンプト
```

### visual-guide.html の構成

| セクション | 内容 |
|:---|:---|
| ビジュアル戦略サマリー | コンセプトキーワード、トーン、方向性 |
| カラーパレットプレビュー | CSS 変数で定義した色をスウォッチ表示 |
| タイポグラフィプレビュー | 選定フォントの実際の表示サンプル |
| グラデーションプレビュー | 生成したグラデーションの実物表示 |
| レイアウトプレビュー | 各パターンのワイヤーフレーム的プレビュー |
| 画像ギャラリー | 画像検索結果の一覧表示 |
| CSS コードリファレンス | コピー可能な CSS コードブロック |
| 参考サイトリンク | インスピレーション元の URL 集 |

visual-guide.html は選定したフォントを実際に読み込んで使用し、このガイド自体のデザインクオリティも高いものにする。

### image-resources.md の構成

コンセプトキーワードとビジュアル戦略から、画像取得に必要な情報を生成する。
**ストックフォト検索キーワード** と **AI 画像生成プロンプト** の 2 系統を必ず出力する。

```markdown
# 画像リソースガイド: [プロジェクト名]

> コンセプトキーワード: [keyword1], [keyword2], [keyword3]
> 生成日: YYYY-MM-DD

---

## 1. ストックフォト検索キーワード

### 検索先

| サービス | URL テンプレート | 特徴 |
|:---|:---|:---|
| Unsplash | `https://unsplash.com/s/photos/{keyword}` | 高品質、無料、商用利用可 |
| Pexels | `https://www.pexels.com/search/{keyword}/` | 動画もあり、無料、商用利用可 |

### セクション別キーワード

| 用途 | 検索キーワード（英語） | 検索キーワード（日本語） | 推奨サイズ | フィルター |
|:---|:---|:---|:---|:---|
| ヒーロー背景 | "..." | "..." | 1920×1080 以上 | Landscape, Dark |
| セクション背景 | "..." | "..." | 1920×800 以上 | — |
| 特徴カード | "..." | "..." | 800×600 | — |
| チーム / 人物 | "..." | "..." | 600×600 | Portrait |
| CTA 背景 | "..." | "..." | 1920×600 以上 | Dark, Abstract |

### 検索の組み合わせ Tips

検索結果が不十分な場合、以下の修飾語を追加する:
- **スタイル修飾**: minimal, abstract, flat lay, aerial, bokeh, dark, moody
- **業種修飾**: [業種に応じた修飾語リスト]
- **除外キーワード**: 検索結果にノイズが多い場合の `-keyword` 指定

---

## 2. AI 画像生成プロンプト

### 共通スタイル指示

以下のスタイル指示をプロンプト末尾に付加する:

```
Style: [コンセプトから導出したスタイル記述]
Color palette: [パレットの主要色を自然言語で]
Mood: [トーンキーワード]
```

### ヒーロービジュアル

**用途**: ファーストビュー背景 / メインビジュアル
**推奨サイズ**: 1920×1080 / 16:9

#### Midjourney

```
[具体的なプロンプト] --ar 16:9 --s 250 --q 2
```

#### DALL-E / GPT-4o

```
[具体的なプロンプト。1024x1024 or 1792x1024]
```

### セクションイラスト / アイコン

**用途**: 各セクションの装飾 / 概念図
**推奨サイズ**: 800×600 / 4:3

#### Midjourney

```
[具体的なプロンプト] --ar 4:3 --s 200
```

#### DALL-E / GPT-4o

```
[具体的なプロンプト]
```

### カード / アイキャッチ画像

**用途**: 特徴カード、ブログサムネイル
**推奨サイズ**: 800×600 / 4:3

#### Midjourney

```
[具体的なプロンプト] --ar 4:3 --s 150
```

### OGP / SNS シェア画像

**用途**: SNS シェア時のプレビュー画像
**推奨サイズ**: 1200×630

#### Midjourney

```
[具体的なプロンプト] --ar 1200:630 --s 200
```

---

## 3. 画像利用ガイドライン

### ライセンス確認チェックリスト

- [ ] ストックフォトのライセンス条項を確認した（商用利用可否）
- [ ] AI 生成画像の利用規約を確認した（商用利用・著作権表示）
- [ ] クライアントへのライセンス情報の共有を準備した

### 画像最適化

| 形式 | 用途 | 目安サイズ |
|:---|:---|:---|
| WebP | Web 表示（メイン） | 100-300KB |
| AVIF | モダンブラウザ向け | 50-200KB |
| PNG | ロゴ・アイコン（透過あり） | — |
| SVG | アイコン・装飾（ベクター） | — |
```

#### プロンプト生成の原則

- **コンセプト駆動**: プロンプトは Step 2 のコンセプトキーワードから逆算する
- **カラー整合**: Step 3 で定義したパレットの色名を自然言語でプロンプトに含める
- **トーン一貫性**: 全プロンプトで同じスタイル指示を末尾に付加し、統一感を保つ
- **具体性**: 「beautiful website background」のような漠然とした表現を避け、被写体・構図・ライティング・テクスチャを具体的に記述する
- **ネガティブプロンプト**: 不要な要素を `--no` (Midjourney) で明示する

### hero-styles.css の構成

先頭にコメントで使い方を記載し、ユーザーがそのままプロジェクトにコピーできる形にする。

```css
/*
 * Hero Styles - [プロジェクト名]
 * Generated for: [コンセプト概要]
 *
 * 使い方:
 * 1. このファイルをプロジェクトにコピー
 * 2. CSS変数は :root で定義済み、そのまま使えます
 * 3. クラス名は .hero- プレフィックス付き
 * 4. Google Fontsの@importは先頭にあります
 */
```

**チェックリスト**:
- [ ] visual-guide.html がブラウザで正しく表示される
- [ ] hero-styles.css が独立してコピー可能な形式になっている
- [ ] strategy.md にコンセプトキーワードと方針が記載されている
- [ ] image-resources.md にストックフォト検索キーワードが用途別に記載されている
- [ ] image-resources.md に AI 画像生成プロンプトが Midjourney / DALL-E の両形式で記載されている
- [ ] 全プロンプトがコンセプトキーワード・カラーパレットと整合している
- [ ] 4 ファイルの内容に矛盾がない

---

## Step 8: 納品とレビュー

品質基準チェックを実施し、ユーザーに引き渡す。
品質基準の詳細は [design-quality-standards.md](references/design-quality-standards.md) を参照。

### AI slop の回避確認

以下の代表的パターンは「AI が作った感」が強く出るため、意識的に避ける（全 12 項目の詳細は [design-quality-standards.md](references/design-quality-standards.md) を参照）:

| ID | 回避すべきパターン | 代替アプローチ |
|:---|:---|:---|
| SLOP-FD-001 | 紫→青のグラデーション背景 | コンセプト固有の色彩を導出する |
| SLOP-FD-002 | Inter / Roboto / Arial のデフォルト使用 | 個性のあるフォントを選定する |
| SLOP-FD-003 | 角丸が全て同じ値のカード群 | 要素の役割に応じて角丸を変える |
| SLOP-FD-004 | 意味なくセンター寄せされたレイアウト | レイアウトに意図的な非対称性や余白を持たせる |
| SLOP-FD-005 | コンセプトと無関係な装飾的グラデーション | 装飾はコンセプトから論理的に導かれるものだけ使う |
| SLOP-FD-006 | 全ての要素にドロップシャドウ | 影はエレベーション設計に基づいて使い分ける |

### 品質基準チェック

| 基準 | 確認内容 |
|:---|:---|
| **WCAG AA** | テキスト × 背景のコントラスト比 4.5:1 以上 |
| **レスポンシブ** | 全 CSS にモバイル対応のメディアクエリあり |
| **パフォーマンス** | 過度な `box-shadow` / `filter` なし |
| **CSS 変数** | ハードコード色値なし、全て変数参照 |
| **フルード設計** | `clamp()` で `font-size` / `padding` を可変化 |
| **ブラウザ互換性** | モダンブラウザ最新 2 バージョンで動作 |

### 納品時の伝達事項

1. ビジュアル戦略の要約（2〜3 行）
2. 各ファイルの使い方ガイド
3. 次のステップの提案（「このまま実装に進みますか？」等）
4. 画像リソースのライセンス確認を促す注意事項

**チェックリスト**:
- [ ] AI slop パターンに該当していない（design-quality-standards.md の 12 項目チェック済み）
- [ ] 品質基準チェック 6 項目を全てパスした
- [ ] ユーザーにファイルの使い方を説明した
- [ ] image-resources.md の検索キーワードで実際に検索し、結果が適切か確認を促した
- [ ] AI 画像生成プロンプトのスタイル指示がカラーパレットと一貫している
- [ ] 画像ライセンスの最終確認を促した
- [ ] 次のステップ（実装、レビュー等）を提案した

---

## Examples

### Example 1: SaaS LP のヒーローデザイン準備

```
「B2B SaaS のランディングページを作りたい。先進的で信頼感のあるデザインにしたい」

→ Step 1: 業種=SaaS、ターゲット=B2B意思決定者、トーン=先進性+信頼感
→ Step 2: キーワード「洗練・信頼・テクノロジー・ミニマル」で戦略策定
→ Step 3: ダークネイビー×アクセントグリーンのパレット設計
→ Step 4: Space Grotesk（見出し）+ DM Sans（本文）
→ Step 5: スプリットレイアウト + グラデーション背景の 2 パターン
→ Step 6: メッシュグラデーション、CTA ボタン、フェードインアニメーション
→ Step 7: visual-guide.html + hero-styles.css + strategy.md + image-resources.md を出力
   image-resources.md の例:
   - Unsplash: "dark technology abstract", "server room blue light", "data network visualization"
   - Midjourney ヒーロー: "abstract dark navy network visualization with glowing green nodes,
     geometric connections, isometric perspective, minimal, dark background --ar 16:9 --s 250"
   - Midjourney カード: "minimal flat icon of cloud security shield, dark navy background,
     emerald green accent, vector style --ar 1:1 --s 150"
→ Step 8: AI slop チェック、WCAG AA 確認、プロンプトとパレットの整合確認、納品
```

### Example 2: 飲食店コーポレートサイトのビジュアル設計

```
「地域の老舗和食店のウェブサイトを作りたい。温かみと格式を両立したい」

→ Step 1: 業種=飲食（和食）、ターゲット=30-60代、トーン=温かみ+格式
→ Step 2: キーワード「和・温もり・格式・素材感・自然」
→ Step 3: アースカラー（深い朱色×生成り×墨色）のパレット
→ Step 4: Shippori Mincho（見出し）+ Noto Sans JP（本文）
→ Step 5: フルスクリーン食材写真 + オーバーレイの 1 パターン
→ Step 6: 和風テクスチャ背景、縦書きCSS、控えめなフェードイン
→ Step 7: アセットパッケージ生成
→ Step 8: 過度な装飾を排した和の美を確認
```

### Example 3: EC サイトのファーストビュー素材集め

```
「オーガニックコスメの EC サイトを立ち上げる。ファーストビューの素材を準備して」

→ Step 1: 業種=EC（コスメ）、ターゲット=20-30代女性、トーン=自然・クリーン
→ Step 2: キーワード「オーガニック・透明感・ナチュラル・クリーン」
→ Step 3: ソフトグリーン×ライトベージュ×ホワイトのパレット
→ Step 4: Nunito（見出し）+ Atkinson Hyperlegible（本文）
→ Step 5: 商品画像グリッド + ヒーローの 2 パターン
→ Step 6: ソフトグラデーション、商品カードCSS、ホバーエフェクト
→ Step 7: 画像検索結果（フラットレイ、テクスチャ）を含むパッケージ
→ Step 8: 自然で押し付けがましくないデザインを確認
```

### Example 4: ポートフォリオサイトのデザイン方向性決定

```
「フリーランスデザイナーのポートフォリオサイトを作る。方向性を決めたい」

→ Step 1: 業種=クリエイティブ、ターゲット=採用担当者・クライアント、トーン=個性・プロフェッショナル
→ Step 2: キーワード「モダン・大胆・ミニマル・個性」
→ Step 3: モノクロベース + 鮮やかなアクセント 1 色
→ Step 4: Outfit（見出し）+ Plus Jakarta Sans（本文）
→ Step 5: 非対称レイアウト + 大胆な余白の 2 パターン
→ Step 6: カスタムカーソル、スクロールアニメーション、作品グリッド
→ Step 7: アセットパッケージ生成
→ Step 8: 「作品が主役」のデザインになっているか確認
```

### Example 5: 既存ブランドガイドラインからの LP デザイン展開

```
「既にブランドガイドラインがある。これをベースに LP のデザインアセットを作って」

→ Step 1: 既存ガイドライン（カラー、フォント、ロゴ規定）を入力として受領
→ Step 2: ガイドラインの制約内でヒーロー構成案を策定
→ Step 3: 既存パレットを CSS 変数に変換 + 足りない色を補完
→ Step 4: 指定フォントを使用、指定がない部分のみ新規選定
→ Step 5: ブランドの世界観に合ったレイアウトパターン
→ Step 6: ガイドライン準拠の CTA、オーバーレイ、アニメーション
→ Step 7: アセットパッケージ生成（ガイドライン参照表付き）
→ Step 8: ブランドガイドラインとの整合性を重点的にレビュー
```

### Example 6: 多言語サイト（日英）のビジュアルアセット準備

```
「日英対応のコーポレートサイトを作る。両言語で美しく見えるデザインを」

→ Step 1: 言語=日英、業種=IT企業、ターゲット=グローバル、トーン=先進性+信頼
→ Step 2: 日英両方で映えるビジュアル戦略（文字量の違いを考慮）
→ Step 3: 言語非依存のカラーパレット設計
→ Step 4: 英語=Inter系 + 日本語=Noto Sans JP の多言語フォントスタック
→ Step 5: テキスト量の増減に強いフルードレイアウト
→ Step 6: 言語切替時にも崩れない CSS（固定幅を避ける）
→ Step 7: 日英それぞれのプレビューを含むビジュアルガイド
→ Step 8: 両言語でのレンダリング確認、文字量差異の吸収を検証
```

---



### 不正な入力でのエラーハンドリング

**Given**: ブランドガイドライン未定義でデザイン要件が曖昧
**When**: デザイン生成を試行
**Then**: 不足情報のエラーリストと必要ヒアリング項目を警告として出力する

### marketing-copy スキルとの連携

**Given**: marketing-copy で策定済みのブランドガイドライン
**When**: 上流スキルの成果物を参照してデザインを生成
**Then**: ブランド定義と統合されたビジュアルアセットを出力する

### 成果物の出力フォーマット確認

**Given**: 全デザインステップが完了しアセットが揃っている
**When**: 最終納品物を出力
**Then**: ビジュアルガイドとすぐに使える CSS 変数・クラス集を含むアセットパッケージを出力する

## Troubleshooting

| 問題 | 原因 | 解決策 |
|:---|:---|:---|
| コンセプトが漠然としてまとまらない | ヒアリング不足 | Step 1 の 5 カテゴリを 1 つずつ確認。参考サイト URL が最も効果的 |
| カラーパレットがしっくりこない | コンセプトとの乖離 | コンセプトキーワードに立ち返り、各キーワードから連想される色を列挙して絞り込む |
| フォント選定で迷う | 選択肢が多すぎる | [typography-selection.md](references/typography-selection.md) のトーン対応表から 2〜3 候補に絞る |
| AI slop 的なデザインになる | テンプレ的な選択 | [design-quality-standards.md](references/design-quality-standards.md) の回避パターンを確認し、コンセプト固有の選択を意識 |
| レスポンシブで崩れる | 固定幅 / 固定サイズの多用 | `clamp()`, `grid`, `min()` / `max()` でフルード化。768px ブレイクポイントで確認 |
| グラデーションが安っぽく見える | 色相差が大きすぎる | 同系色のグラデーションにする。色相差は 30 度以内が目安 |
| 画像の上のテキストが読めない | オーバーレイ不足 | `::after` で半透明オーバーレイ。`rgba(0,0,0,0.5)` 以上の不透明度を確保 |
| 日本語フォントが重い | Web フォント全体のダウンロード | `font-display: swap` を指定。サブセット化、または `woff2` 形式を使用 |
| ブランドカラーがアクセシビリティを満たさない | コントラスト比不足 | 明度調整でバリエーションを作り、テキスト用には十分なコントラストの段階を使用 |
| CTA ボタンが目立たない | 周囲との差別化不足 | サイズ・色・余白の 3 つで差をつける。Primary CTA は 1 画面に 1 つ |
| visual-guide.html の表示が崩れる | CSS の競合 / フォント未読み込み | CSS リセット適用、Google Fonts の `@import` が先頭にあるか確認 |
| 参考サイトのデザインを再現しすぎる | コンセプト固有性の欠如 | 参考サイトは「方向性の参考」に留め、コンセプトキーワードから独自に導出する |
| ストックフォト検索で良い結果が出ない | キーワードが漠然としすぎ | スタイル修飾語（minimal, abstract, dark）と業種修飾語を組み合わせる。英語キーワードを優先 |
| AI 生成画像のトーンがサイトと合わない | プロンプトにカラー指定がない | パレットの主要色を自然言語で明示（例: "dark navy background with cyan accents"）。`--s` 値で統一感を調整 |
| Midjourney プロンプトが汎用的すぎる | コンセプトキーワード未反映 | Step 2 のキーワードを必ずプロンプトに含める。被写体・構図・ライティングを具体的に記述 |
| 生成画像とインライン SVG のスタイル不整合 | 別々に作成して統一感なし | image-resources.md の共通スタイル指示を全プロンプトに適用。SVG のカラーと合わせる |

---

## References

| ファイル | 内容 |
|:---|:---|
| [color-palette-guide.md](references/color-palette-guide.md) | カラーパレット設計の詳細ガイド（WCAG 準拠チェック手順、HSL ベースの段階設計、業種別パレット例） |
| [typography-selection.md](references/typography-selection.md) | フォント選定・ペアリングガイド（Google Fonts 推奨リスト、日本語フォント対応、トーン別マッピング） |
| [layout-patterns.md](references/layout-patterns.md) | ヒーローセクションレイアウトパターン集（8 パターンの CSS テンプレート、レスポンシブ対応） |
| [css-snippets-catalog.md](references/css-snippets-catalog.md) | CSS スニペットカタログ（グラデーション、オーバーレイ、CTA ボタン、アニメーション、Staggered Reveal、コピー可能コード集） |
| [design-quality-standards.md](references/design-quality-standards.md) | デザイン品質基準・AI slop 回避ガイド（Distributional Convergence 概念、蒸留美学プロンプト要約、品質チェックリスト、回避パターン 12 項目、納品前確認手順） |
| [theme-catalog.md](references/theme-catalog.md) | デザインテーマカタログ（10 テーマの配色・フォント・モーション・背景定義、IDE テーマ変換ガイド、テーマ選定フローチャート） |
| `project/00_schemas/REVIEW_RESULT_TEMPLATE.md` | フロントエンドデザインレビュー結果テンプレート |
| `project/00_schemas/DOMAIN_MODEL_TEMPLATE.md` | UI コンポーネントドメインモデルテンプレート |

## アンチパターン検出

このスキルの出力品質を検証し、AI Decay（品質劣化）を防止するためのアンチパターン検出リスト。各項目は品質劣化パターンの検出条件を定義し、不合格時は対応する対策（修正ガイドライン）に従って改善する。

- [ ] カラーパレットが WCAG 2.1 AA 基準のコントラスト比を満たしているか（具体的な数値で検証）
- [ ] フォント選定がコンセプトキーワードから導出されているか（デフォルトの Inter/Noto Sans で済ませていないか）
- [ ] ヒーローセクションのレイアウトが参考サイトの丸写しになっていないか（コンセプト固有性の確認）
- [ ] AI 生成画像のプロンプトにカラーパレットの主要色が明示されているか
- [ ] CSS スニペットが visual-guide.html 上で実際にレンダリング検証されているか
- [ ] CTA ボタンが 1 画面に 1 つに絞られているか（サイズ・色・余白での差別化）

---

## Related Skills

| スキル | 関係 | 説明 |
|:---|:---|:---|
| **ux-psychology** | 前工程 | UX 心理学評価の結果（特に Peak-End Rule, Aesthetic-Usability Effect）をビジュアル戦略に反映。「なぜこのデザインが効果的か」の心理学的根拠を提供 |
| **ui-design** | 補完 | 既存 UI の分析・改善・レビューは ui-design、新規サイトのビジュアル戦略・アセット準備は front-design |
| **effective-typescript** | 後続 | front-design のアセットを元に React/TSX コンポーネントを実装する |
| **review** | 検証 | 完成したデザインアセットの品質レビュー（WCAG、ブランド整合性、コード品質） |
| **diagram** | 補助 | サイトマップやワイヤーフレームの draw.io 作成を支援 |