Web App Designer

Web App Designer（Webアプリデザイナー）

Webアプリのデザインを体系的に行う。依頼内容に応じて適切なデザイン手法を選択・適用し、実装可能なデザイン仕様を出力する。

ワークフロー概要

Phase 1: 要件・コンテキスト把握
  → Phase 2: デザイン手法の選択
    → Phase 3: デザイン実行
      → Phase 4: アウトプット生成

Phase 1: 要件・コンテキスト把握

デザイン対象を正確に理解するための情報を収集する。

Step 1.1: デザイン対象の特定

以下を確認する:

Step 1.2: ターゲット・環境の確認

Step 1.3: 既存資産の確認

Phase 1のアウトプット: デザインブリーフ（対象・スコープ・制約の要約）

Phase 2: デザイン手法の選択

依頼内容に応じて最適なデザイン手法を選定する。

Step 2.1: 手法選定マトリクス

Step 2.2: 手法の組み合わせ判断

依頼内容が複数の種類にまたがる場合は、手法を組み合わせる。

判断基準:

• スコープが広い（プロダクト全体） → Design Thinking から開始
• スコープが狭い（特定画面） → コンポーネント設計から開始
• 既存UIの改善 → ヒューリスティック評価から開始
• アクセシビリティが要件に含まれる → 常にWCAG 2.1 AAチェックを併用

Phase 3: デザイン実行

選択した手法に基づきデザインを実行する。以下の要素を依頼に応じてカバーする。

Step 3.0: ビジュアル方針定義（LP・プロダクトUI共通）

コンポーネント設計の前に、ページ全体の構図と方針を定義する。詳細は references/art-direction.md を参照。

LP・マーケティングの場合、以下を言語化する:

プロダクトUI・ダッシュボードの場合、以下を定義する:

共通の制約: H1は1個、セクション最大6個、フォント2種類まで、アクセント色1色、プライマリCTA1個

Step 3.1: レイアウト設計

グリッドシステム:

• 12カラムグリッドを基本とする（grid-template-columns: repeat(12, 1fr)）
• 8pxグリッドでスペーシングを統一
• スペーシングスケール: 4, 8, 16, 24, 32, 48, 64, 96px

ページ構造の定義:

┌─────────────────────────────────────┐
│ Header                              │
├──────────┬──────────────────────────┤
│ Sidebar  │ Main Content             │
│ (2-3col) │ (9-10col)               │
│          │                          │
│          │                          │
├──────────┴──────────────────────────┤
│ Footer                              │
└─────────────────────────────────────┘

• grid-template-areas でセマンティックなエリアを定義する
• ページ全体構造は CSS Grid、コンポーネント内部は Flexbox を使い分ける

Step 3.2: カラー設計

60-30-10ルール（背景60% / 補助30% / アクセント10%）でセマンティックカラー体系（Primary/Secondary/Success/Warning/Error/Info/Neutral 50-950、各50〜950の明度スケール）を定義する。コントラスト比はWCAG 2.1 AA（通常テキスト4.5:1、大テキスト・UIコンポーネント3:1）を満たす。

Step 3.3: タイポグラフィ設計

Major Third（1.25倍）を基本にタイプスケール（xs〜3xl）を定義する。本文はline-height: 1.6、見出しはline-height: 1.15を目安とし、段落幅は1行45〜75文字に収める。4.4のCSS変数として出力する。

Step 3.4: コンポーネント設計（Atomic Design）

5階層で設計する:

コンポーネント仕様の記述項目:

• 名前（PascalCase）
• 説明（1文）
• Props（型・デフォルト値・必須/任意）
• 状態一覧（Step 3.5参照）
• バリアント一覧
• 使用例

Step 3.5: インタラクション・状態設計

基本6状態:

追加状態: Error（赤枠 + メッセージ）、Success（緑チェック）、Skeleton（プレースホルダ表示）

アニメーション指針:

• マイクロインタラクション: 100〜200ms
• UI遷移: 200〜300ms
• ナビゲーション遷移: 300〜500ms
• イージング: ease-in-out（メイン）、ease-out（表示）、ease-in（非表示）
• 300ms以下で応答性を維持する

Step 3.6: レスポンシブ対応

モバイルファーストで設計し、min-width（sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536px が一般的な区切り）で段階的にスタイルを追加する。モバイル1カラム→タブレット2カラム→デスクトップ3カラム+常時サイドバーへ拡張し、タッチターゲットは最低44x44pxを確保する。

Step 3.7: アクセシビリティチェック

WCAG 2.1 AAに準拠する（コントラスト比、キーボード操作性、ランドマーク・見出し階層、ARIA属性、labelとinputの関連付け、alt テキスト、prefers-reduced-motion）。

Step 3.8: 品質リトマステスト

デザイン完了時に以下を確認する。すべてYesであること。詳細は references/art-direction.md を参照。

Phase 4: アウトプット形式

依頼に応じて以下の形式で出力する。

4.1: 画面レイアウト

ASCIIアートまたはHTML構造記述で画面構成を表現する。

例: ダッシュボード画面

┌─────────────────────────────────────────────┐
│ [Logo]  Dashboard   Search...   [Avatar ▼]  │
├───────┬─────────────────────────────────────┤
│ ≡ Nav │  Welcome, User                      │
│       │                                     │
│ Home  │  ┌──────┐ ┌──────┐ ┌──────┐        │
│ Tasks │  │ KPI  │ │ KPI  │ │ KPI  │        │
│ Users │  │ Card │ │ Card │ │ Card │        │
│ ...   │  └──────┘ └──────┘ └──────┘        │
│       │                                     │
│       │  ┌────────────────────────────┐     │
│       │  │     Chart / Table          │     │
│       │  │                            │     │
│       │  └────────────────────────────┘     │
├───────┴─────────────────────────────────────┤
│ Footer                                      │
└─────────────────────────────────────────────┘

4.2: コンポーネント仕様書

各コンポーネントを以下のフォーマットで記述する:

### ComponentName

**説明**: 1文の説明

**Props**:
| Prop | 型 | デフォルト | 必須 | 説明 |
|------|----|-----------|------|------|
| variant | 'primary' \| 'secondary' \| 'ghost' | 'primary' | No | ボタンの見た目 |
| size | 'sm' \| 'md' \| 'lg' | 'md' | No | サイズ |
| disabled | boolean | false | No | 無効状態 |
| loading | boolean | false | No | ローディング状態 |

**状態**: Idle / Hover / Active / Focused / Disabled / Loading

**使用例**:
- プライマリCTA: `<Button variant="primary" size="lg">送信</Button>`
- 二次アクション: `<Button variant="secondary">キャンセル</Button>`

4.3: カラーパレット

## カラーパレット

### プライマリ
| スケール | HEX | 用途 |
|----------|-----|------|
| 50 | #EFF6FF | 背景ハイライト |
| 100 | #DBEAFE | ホバー背景 |
| 500 | #3B82F6 | メインカラー |
| 700 | #1D4ED8 | ホバー状態 |
| 900 | #1E3A8A | テキストアクセント |

（Success, Warning, Error, Neutral も同様に定義）

4.4: タイポグラフィスケール

:root {
  --font-family-sans: 'Inter', system-ui, sans-serif;
  --font-family-mono: 'JetBrains Mono', monospace;

  --text-xs: 0.8rem;
  --text-sm: 0.889rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;

  --leading-tight: 1.15;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
}

4.5: インタラクション仕様

各インタラクションを以下で記述する:

### [コンポーネント名] のインタラクション

| トリガー | アクション | フィードバック | デュレーション |
|----------|-----------|---------------|---------------|
| クリック | 送信処理開始 | ボタンがloading状態に | 即時 |
| 送信完了 | 成功通知表示 | トースト表示 + ボタンsuccess状態 | 200ms |
| エラー | エラー通知表示 | トースト + ボタンidle復帰 | 200ms |

注意事項

• 実装可能性を優先する: Claudeはビジュアルモックアップを画像生成できない。ASCIIアート・HTML構造・CSS仕様で実装者が再現できる形で出力する
• 既存資産を尊重する: 既存デザインシステムやUIフレームワークがある場合、それに合わせる
• 段階的に進める: 全要素を一度に出力せず、Phase 1→4の順で段階的に進め、各Phaseでユーザーの確認を取る
• アクセシビリティは常に考慮する: 依頼にアクセシビリティの言及がなくても、WCAG 2.1 AA準拠を基本とする
• モバイルファーストを基本とする: 特に指定がなければモバイルファーストで設計する

連携スキル