web-design-guidelines

Web Design Guidelines

Agent Skills™ の一部（googleadsagent.ai™ 提供）

説明

Web Design Guidelines には、アクセシビリティ、フォーカス状態、フォーム、アニメーション、タイポグラフィ、画像、パフォーマンス、ナビゲーション、ダークモード、タッチターゲット、国際化を網羅する100以上のルールが定められています。エージェントは、UIコードの生成、デザインのレビュー、新しいページの構築時にこれらのルールを適用し、デフォルトでアクセシブルかつ高パフォーマンスで、視覚的に一貫性のあるインターフェースを作成します。

このガイドラインは、WCAG 2.2 AA の要件、プラットフォーム固有の HIG 規約、実証済みの UX パターンを集約し、実践的な単一のルールセットとしてまとめたものです。アクセシビリティを後回しにしたり、コンプライアンスのチェック項目として扱ったりするのではなく、生成プロセスに組み込んでいます。すべてのコンポーネントがキーボードで操作でき、すべての画像に代替テキストがあり、すべての色の組み合わせがコントラスト比を満たし、すべてのインタラクティブ要素に視認できるフォーカスインジケーターが備わります。

ルールはアクセシビリティにとどまらず、包括的なデザイン品質をカバーします。レスポンシブなタイポグラフィのスケーリング、動きの設定、フォームの検証パターン、画像の最適化、ナビゲーション階層、ダークモードの実装、タッチ操作に適したサイズ、RTL／i18n への対応が含まれます。その結果、あらゆる状況で、すべてのユーザーが利用できる本番品質の UI コードを作成できます。

使用する場面

• 新しい UI コンポーネントやページを生成するとき
• アクセシビリティへの準拠についてフロントエンドコードをレビューするとき
• ダークモードやテーマ切り替えを実装するとき
• 検証機能付きのフォームを構築するとき
• アニメーションやトランジションを追加するとき
• 画像やメディアを最適化するとき
• 国際化や RTL レイアウトに対応するとき

動作の仕組み

graph TD
    A[UI Code Generation] --> B[Apply Rule Categories]
    B --> C[Accessibility: WCAG 2.2 AA]
    B --> D[Focus States: Visible + Logical]
    B --> E[Forms: Validation + Labels]
    B --> F[Animation: prefers-reduced-motion]
    B --> G[Typography: Fluid Scale]
    B --> H[Images: Responsive + Alt Text]
    B --> I[Performance: Lazy Load + CLS]
    B --> J[Navigation: Keyboard + Hierarchy]
    B --> K[Dark Mode: System Preference]
    B --> L[Touch: 44px Min Target]
    B --> M[i18n: RTL + Locale]
    C --> N[Validated UI Output]
    D --> N
    E --> N
    F --> N
    G --> N
    H --> N
    I --> N
    J --> N
    K --> N
    L --> N
    M --> N

生成されるすべてのコンポーネントは、出力前に該当するすべてのルールカテゴリを通過します。アクセシビリティのルールは必須です。その他のカテゴリは、コンポーネントの種類に応じて適用されます。

実装

/* Focus: Always visible, high contrast */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Animation: Respect user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Typography: Fluid responsive scale */
:root {
  --step-0: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
  --step-1: clamp(1.2rem, 0.61vw + 1.07rem, 1.58rem);
  --step-2: clamp(1.44rem, 0.98vw + 1.24rem, 2.11rem);
}

/* Dark mode: System preference + manual toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0a;
    --fg: #ededed;
  }
}

/* Touch: Minimum 44px targets */
button, a, [role="button"] {
  min-height: 44px;
  min-width: 44px;
}

// Form: Accessible label + validation + error association
function EmailField({ error }: { error?: string }) {
  const id = useId();
  return (
    <div>
      <label htmlFor={id}>Email address</label>
      <input
        id={id}
        type="email"
        aria-invalid={!!error}
        aria-describedby={error ? `${id}-error` : undefined}
        autoComplete="email"
      />
      {error && <p id={`${id}-error`} role="alert">{error}</p>}
    </div>
  );
}

ベストプラクティス

• リリース前に、キーボードのみの操作で各ページをテストします
• 通常のテキストには最低4.5:1、大きなテキストには3:1のコントラスト比を維持します
• ARIA 属性を使う前に、セマンティックな HTML 要素を使用します
• 明るい背景と暗い背景の両方で機能する、視認可能なフォーカスインジケーターを用意します
• CLS を防ぐため、画像には明示的な width と height を設定します
• prefers-reduced-motion、prefers-color-scheme、prefers-contrast に対応します

プラットフォーム互換性

プラットフォーム	サポート	備考
Cursor	完全	CSS + JSX の生成
VS Code	完全	axe-core の統合
Windsurf	完全	アクセシビリティを考慮した出力
Claude Code	完全	HTML/CSS の生成
Cline	完全	ルールベースの UI レビュー
aider	一部	デザインコンテキストに制限あり

関連スキル

• Composition Patterns
• React Best Practices
• View Transitions
• Edge Rendering

キーワード

web-design accessibility wcag dark-mode responsive typography forms focus-states touch-targets i18n animation performance

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License