Web Design Builder

Web デザインビルダー

このスキルは、仕様に基づいてプロフェッショナルな HTML5／JavaScript の Web デザインを作成し、Playwright MCP を使用してアクセシビリティと機能を自動検証します。

このスキルを使用するタイミング

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

• 仕様や説明に基づいて Web デザインを作成する
• ランディングページ、Web サイト、Web アプリケーションを構築する
• デザインのモックアップやプロトタイプを作成する
• 既存の HTML／CSS／JavaScript コードをリファクタリングまたは改善する
• レスポンシブな Web インターフェースを構築する
• コンポーネントライブラリやデザインシステムを作成する
• WCAG に準拠したアクセシブルな Web デザインを生成する

基本的なワークフロー

フェーズ 1：要件の確認

ユーザーから Web デザインの依頼があった場合、まずニーズを把握します。

1. デザインの範囲を明確にする

   • どのような種類のデザインですか？（ランディングページ、ダッシュボード、フォームなど）
   • 対象ユーザーと用途
   • 必要な機能
   • コンテンツとコピー（提供済みですか、それともプレースホルダーを使用しますか？）
   • ブランドカラー、フォント、デザインシステム
   • レスポンシブ対応の要件（モバイルファーストですか？）

2. 技術的な好み

   • フレームワークの好み：
     • Vanilla HTML/CSS/JS（シンプルで、依存関係なし）
     • Tailwind CSS（ユーティリティファーストで、迅速な開発におすすめ）
     • React（コンポーネントベースで、複雑なインタラクション向け）
     • Vue（プログレッシブフレームワーク）
     • Alpine.js（軽量なリアクティブ機能）
   • ブラウザーのサポート要件
   • アクセシビリティ要件（WCAG の適合レベル）
   • パフォーマンス上の制約

3. Playwright MCP が利用可能か確認する

   重要：デザインの作成を始める前に、Playwright MCP が利用可能か確認してください。

   // Check if mcp__playwright tools are available
   // Look for tools like: mcp__playwright__navigate, mcp__playwright__screenshot, etc.
   

   Playwright MCP が利用できない場合：

   • ユーザーに「Playwright MCP がインストールされていません。デザインの検証はスキップします。」と伝えます。
   • インストール手順を提示します（下記の「MCP のセットアップ」セクションを参照）。
   • デザインの生成は続行しますが、検証フェーズはスキップします。
   • この点を出力内に明記します。

   Playwright MCP が利用できる場合：

   • ユーザーに「Playwright MCP を検出しました。デザインを自動検証します。」と伝えます。
   • ワークフローに検証を含めます。

フェーズ 2：デザインの生成

ステップ 1：デザインのモックアップを作成する

次の要素を含む、完全な HTML／CSS／JS のモックアップを生成します。

HTML 構造：

• セマンティックな HTML5 要素
• 適切な見出し階層（h1 → h6）
• ARIA ランドマーク（header、nav、main、aside、footer）
• アクセシブルなフォームラベルと入力要素
• 画像の代替テキスト
• 固有のページタイトル

CSS スタイル：

• レスポンシブデザイン（モバイルファースト）
• レイアウトに CSS Grid または Flexbox を使用
• テーマ設定にカスタムプロパティ（CSS 変数）を使用
• 滑らかなトランジションとアニメーション
• 印刷用スタイル（該当する場合）
• ダークモード対応（任意）

JavaScript の機能：

• プログレッシブエンハンスメント
• アクセシブルなインタラクション（キーボード操作に対応）
• フォーム検証
• 動的なコンテンツの読み込み
• イベント処理
• エラー処理

アクセシビリティ機能：

• WCAG 2.1 レベル AA 以上への準拠
• キーボードナビゲーションへの対応
• フォーカスインジケーター
• スクリーンリーダーに配慮した設計
• 色のコントラスト比への準拠（最低 4.5:1）
• スキップリンク
• 必要に応じた ARIA 属性

出力例の構成：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <style>
    /* Modern CSS with custom properties */
    :root {
      --primary-color: #0066cc;
      --text-color: #1a1a1a;
      --bg-color: #ffffff;
      --spacing: 1rem;
    }

    /* Reset and base styles */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      line-height: 1.6;
      color: var(--text-color);
      background: var(--bg-color);
    }

    /* Responsive layout */
    @media (max-width: 768px) {
      /* Mobile styles */
    }
  </style>
</head>
<body>
  
  <a href="#main-content" class="skip-link">Skip to main content</a>

  
  <header role="banner">
    <nav aria-label="Main navigation">
      
    </nav>
  </header>

  <main id="main-content" role="main">
    
  </main>

  <footer role="contentinfo">
    
  </footer>

  <script>
    // Progressive enhancement JavaScript
    (function() {
      'use strict';

      // Feature detection
      if (!('querySelector' in document)) return;

      // Your JavaScript here
    })();
  </script>
</body>
</html>

ステップ 2：デザインをファイルに保存する

生成したデザインをファイルに保存します。

// Recommended file structure
project-name/
  index.html         // Main HTML file
  styles.css         // Separate CSS (if needed)
  script.js          // Separate JS (if needed)
  assets/
    images/          // Image assets
    fonts/           // Custom fonts

Write ツールを使用してファイルを作成します。

• ユーザーの現在のディレクトリに保存するか、希望する保存先を尋ねます。
• 内容が分かるファイル名を使用します（例：landing-page.html、dashboard.html）。
• モックアップは単一の HTML ファイルとして作成します（CSS／JS をインライン化）。
• 本番用ビルドではファイルを分けて作成します。

フェーズ 3：デザインの検証（Playwright MCP が利用可能な場合のみ）

重要：フェーズ 1 で Playwright MCP が利用可能だと確認できた場合に限り、このフェーズを実行します。

ステップ 1：ブラウザーを起動してデザインを読み込む

Playwright MCP を使用してデザインを開きます。

// Navigate to the local HTML file
await mcp__playwright__navigate({
  url: 'file:///path/to/design.html'
});

ステップ 2：アクセシビリティテスト

包括的なアクセシビリティチェックを実行します。

1. 自動アクセシビリティスキャン

   • WCAG 違反を確認します
   • 色のコントラスト比を検証します
   • 見出しの階層を確認します
   • ARIA 属性を検証します
   • フォームのラベルを確認します
   • 画像の代替テキストを検証します

2. キーボード操作テスト

   • すべてのインタラクティブ要素を Tab キーで移動します
   • フォーカスインジケーターが表示されることを確認します
   • Tab キーの移動順序が論理的であることを確認します
   • Escape キーの動作（モーダル、ドロップダウン）をテストします
   • キーボードトラップがないことを確認します

3. スクリーンリーダーとの互換性

   • ARIA ランドマークを確認します
   • セマンティック HTML の使用を検証します
   • 動的コンテンツの読み上げを確認します
   • フォームのエラーメッセージを検証します

ステップ 3：ビジュアルテスト

スクリーンショットを取得して、レイアウトを検証します。

// Take full-page screenshot
await mcp__playwright__screenshot({
  fullPage: true,
  path: 'design-screenshot.png'
});

// Test responsive breakpoints
const breakpoints = [
  { width: 375, height: 667, name: 'mobile' },
  { width: 768, height: 1024, name: 'tablet' },
  { width: 1440, height: 900, name: 'desktop' }
];

for (const bp of breakpoints) {
  await mcp__playwright__setViewportSize({
    width: bp.width,
    height: bp.height
  });

  await mcp__playwright__screenshot({
    path: `design-${bp.name}.png`
  });
}

ステップ 4：機能テスト

インタラクティブ要素をテストします。

1. フォームの検証

   • 必須フィールドをテストします
   • 入力値の検証をテストします
   • エラーメッセージをテストします
   • 成功状態をテストします

2. インタラクティブコンポーネント

   • ボタンとリンクをテストします
   • モーダルとダイアログをテストします
   • ドロップダウンとメニューをテストします
   • タブとアコーディオンをテストします
   • カルーセルとスライダーをテストします

3. JavaScript の機能

   • イベントハンドラーが動作することを検証します
   • 動的コンテンツの読み込みをテストします
   • コンソールでエラーを確認します
   • プログレッシブエンハンスメントを検証します

ステップ 5：パフォーマンスチェック

パフォーマンス指標を評価します。

1. 読み込み時間

   • ページの読み込み時間を測定します
   • リソースの読み込みを確認します
   • ボトルネックを特定します

2. リソースの最適化

   • CSS ファイルのサイズを確認します
   • JavaScript ファイルのサイズを確認します
   • 画像が最適化されていることを検証します
   • 未使用の CSS／JS を確認します

フェーズ 4：検証レポート

包括的なレポートを生成します。

# Design Verification Report

## Overview
- **Design Type**: [Landing Page / Dashboard / etc.]
- **Framework**: [Vanilla / Tailwind / React / etc.]
- **Verification Date**: [Date]
- **Playwright MCP**: [Available / Not Available]

## Accessibility Compliance

### WCAG 2.1 Level AA
✅ **PASSED**: Color contrast (4.5:1 minimum)
✅ **PASSED**: Keyboard navigation
✅ **PASSED**: Semantic HTML structure
⚠️  **WARNING**: Missing alt text on 2 images
❌ **FAILED**: Form missing associated labels

### Issues Found
1. **HIGH**: Form input #email missing label
   - Location: Line 45
   - Fix: Add `<label for="email">Email</label>`

2. **MEDIUM**: Image missing alt text
   - Location: Line 78
   - Fix: Add `alt="Description of image"`

## Visual Testing

### Responsive Breakpoints
✅ **Mobile (375px)**: Layout renders correctly
✅ **Tablet (768px)**: Layout renders correctly
✅ **Desktop (1440px)**: Layout renders correctly

### Screenshots
- [x] Full page screenshot saved
- [x] Mobile screenshot saved
- [x] Tablet screenshot saved
- [x] Desktop screenshot saved

## Functionality Testing

### Interactive Elements
✅ Navigation menu works
✅ Form submission works
✅ Modal opens and closes
⚠️  Focus not returned to trigger after modal close

### JavaScript
✅ No console errors
✅ Event handlers working
✅ Progressive enhancement implemented

## Performance

### Metrics
- **Page Load Time**: 1.2s
- **Total File Size**: 45KB
- **CSS Size**: 12KB
- **JavaScript Size**: 8KB

### Optimization Opportunities
- Consider minifying CSS (potential 30% reduction)
- Lazy load images below the fold
- Consider code splitting for JavaScript

## Recommendations

### High Priority
1. Fix form label associations
2. Add missing alt text to images
3. Implement focus management for modal

### Medium Priority
1. Minify CSS and JavaScript for production
2. Add loading states for dynamic content
3. Implement error boundaries for JavaScript

### Low Priority
1. Add dark mode support
2. Enhance animations with reduced motion support
3. Add print styles

## Next Steps

1. Review and fix high-priority issues
2. Re-run verification after fixes
3. Test with actual screen readers
4. Conduct user testing
5. Deploy to staging environment

フェーズ 5：反復と改善

検証結果に基づいて、次の作業を行います。

1. 重大な問題を修正する

   • すべてのアクセシビリティ違反に対処します
   • 動作しない機能を修正します
   • レイアウトの問題を解決します

2. 改善を適用する

   • 推奨される最適化を実装します
   • フィードバックに基づいてビジュアルデザインを改善します
   • インタラクションとアニメーションを調整します

3. 再検証する

   • 修正後に検証を再実行します
   • すべての問題が解決されたことを確認します
   • 更新されたレポートを生成します

4. 最終デザインを納品する

   • クリーンで本番環境に対応したコードを提供します
   • ドキュメントを含めます
   • デプロイ手順を提供します
   • 検証レポートを共有します

デザインパターンとベストプラクティス

レスポンシブデザイン

モバイルファーストのアプローチ：

/* Base styles for mobile */
.container {
  padding: 1rem;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
    max-width: 960px;
    margin: 0 auto;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    padding: 3rem;
    max-width: 1200px;
  }
}

アクセシブルなフォーム

<form class="contact-form">
  <div class="form-field">
    <label for="name">
      Name <span aria-label="required">*</span>
    </label>
    <input
      type="text"
      id="name"
      name="name"
      required
      aria-required="true"
      aria-describedby="name-error"
    />
    <span id="name-error" class="error" role="alert" hidden>
      Please enter your name
    </span>
  </div>
</form>

インタラクティブコンポーネント

アクセシブルなモーダル：

function openModal(modalId) {
  const modal = document.getElementById(modalId);
  const lastFocused = document.activeElement;

  modal.hidden = false;
  modal.setAttribute('aria-modal', 'true');

  // Focus first focusable element
  const firstFocusable = modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
  firstFocusable?.focus();

  // Store last focused for return
  modal.dataset.lastFocused = lastFocused;

  // Trap focus
  trapFocus(modal);
}

function closeModal(modalId) {
  const modal = document.getElementById(modalId);
  modal.hidden = true;

  // Return focus
  const lastFocused = document.querySelector(`[data-last-focused="${modal.id}"]`);
  lastFocused?.focus();
}

フレームワーク固有のガイドライン

Tailwind CSS

メリット：

• 開発が迅速
• 一貫性のあるデザインシステム
• 組み込みのレスポンシブユーティリティ
• プロトタイピングに最適

セットアップ：

<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          primary: '#0066cc',
        }
      }
    }
  }
</script>

例：

<div class="container mx-auto px-4">
  <h1 class="text-4xl font-bold text-gray-900 mb-4">
    Welcome
  </h1>
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Click Me
  </button>
</div>

React

メリット：

• コンポーネントの再利用性
• 仮想 DOM によるパフォーマンス
• 大規模なエコシステム
• SPA に最適

例：

function DesignComponent() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div className="container">
      <button
        onClick={() => setIsOpen(!isOpen)}
        aria-expanded={isOpen}
      >
        Toggle
      </button>
      {isOpen && (
        <div className="content">
          Content here
        </div>
      )}
    </div>
  );
}

Alpine.js

メリット：

• 軽量（15KB）
• 宣言的な構文
• ビルド手順が不要
• プログレッシブエンハンスメントに適しています

例：

<div x-data="{ open: false }">
  <button @click="open = !open" :aria-expanded="open">
    Toggle
  </button>
  <div x-show="open" x-transition>
    Content here
  </div>
</div>

MCP のセットアップ手順

Playwright MCP を利用できない場合は、次の手順をユーザーに案内してください。

Playwright MCP のインストール

オプション 1：NPM 経由（推奨）

# Install Playwright MCP server
npm install -g @playwright/mcp-server

# Configure in Claude Code
claude code mcp add playwright

オプション 2：手動セットアップ

1. MCP 設定ファイルを作成します。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp-server"],
      "env": {}
    }
  }
}

2. Claude Code を再起動します。

確認： インストール後、Playwright MCP が動作していることを確認します。

# Check MCP servers
claude code mcp list

利用可能な MCP サーバーの一覧に playwright が表示されます。

コミュニケーションスタイル

ユーザーとやり取りする際は、次の点に従ってください。

1. まず要件を明確にする

   • デザインの目標と制約について尋ねる
   • 技術要件を把握する
   • フレームワークの希望を確認する

2. 背景情報を伝える

   • デザイン上の決定について説明する
   • フレームワークを選んだ理由を説明する
   • アクセシビリティに関する考慮事項を説明する

3. 進捗を共有する

   • デザインを生成するときに知らせる
   • 検証中に状況を伝える（MCP が利用可能な場合）
   • 分かったことを段階的に共有する

4. 実行可能な情報を提供する

   • 問題に対する具体的な修正方法を示す
   • コード例を含める
   • 適切な場合は代替案を提示する

5. MCP が利用できない場合も適切に対応する

   • 検証をスキップする場合は明確に伝える
   • 手動テストの手引きを提供する
   • インストール手順を提示する

成果物

デザインプロセスの最後に、次のものを提供してください。

1. デザインファイル一式

   • HTML、CSS、JavaScript ファイル
   • アセット（ある場合）
   • セットアップ手順を記載した README

2. 検証レポート（MCP が利用可能な場合）

   • アクセシビリティ準拠の結果
   • ビジュアルテストのスクリーンショット
   • 機能テストの結果
   • パフォーマンス指標
   • 優先順位を付けた推奨事項

3. ドキュメント

   • コンポーネントの使用ガイド
   • カスタマイズ手順
   • ブラウザーのサポート情報
   • デプロイのガイドライン

4. 次のステップ

   • 改善案
   • テストに関する推奨事項
   • 本番環境向けチェックリスト

ワークフローの例

ユーザーの依頼：

「ヒーローセクション、機能、料金、問い合わせフォームを備えた SaaS 製品のランディングページを作成してください。」

応答：

1. 要件を明確にする：

   • 「モダンな SaaS ランディングページを作成します。いくつか質問があります。
     • ブランドカラーはありますか？それとも、プロフェッショナルなデフォルトの配色を使用しますか？
     • 希望するフレームワークはありますか？迅速に開発できる Tailwind CSS をおすすめします。
     • 特に強調したい機能はありますか？
     • 問い合わせフォームにはどの項目が必要ですか？」

2. Playwright MCP を確認する：

   • 「Playwright MCP を確認しています……検出されませんでした。デザインの検証はスキップします。インストール手順が必要ですか？」

3. デザインを生成する：

   • HTML／CSS／JS ファイル一式を作成する
   • ヒーロー、機能、料金、問い合わせフォームを含める
   • レスポンシブでアクセシブルにする
   • saas-landing-page.html に保存する

4. 手動検証ガイド（MCP が利用できないため）：

   • 手動テスト用のチェックリストを提供する
   • アクセシビリティテストツールを紹介する
   • ブラウザーテストの方法を提案する

5. 成果物を提供する：

   • デザインファイル一式を共有する
   • カスタマイズガイドを提供する
   • 必要に応じて修正を提案する

覚えておいてください。目標は、可能な場合は自動検証を行いながら、すべてのユーザーが利用できる美しく、アクセシブルで、機能的なウェブデザインを作成することです。