UI/UX ベストプラクティス フロントエンドデザイン

アクセシブルで高性能かつユーザーフレンドリーなインターフェース開発を指導するために、8つのカテゴリ全体で42個のルールを含む包括的なUI/UXおよびフロントエンドデザインベストプラクティスガイド。影響度に基づいて優先順位を付けています。

適用場面

以下のような場面でこれらのガイドラインを参照してください：

• アクセシビリティとセマンティクスのための HTML 構造化
• レスポンシブレイアウトと視覚的階層のための CSS 記述
• Core Web Vitals のための画像とフォント最適化
• 適切なバリデーションとエラーハンドリングを備えたフォーム設計
• アニメーションとインタラクティブ要素の追加

ルールカテゴリ（優先度順）

優先度	カテゴリ	影響度	プレフィックス
1	アクセシビリティと WCAG コンプライアンス	重大	access-
2	Core Web Vitals 最適化	重大	cwv-
3	視覚的階層とレイアウト	高	layout-
4	レスポンシブとモバイルファースト設計	高	resp-
5	タイポグラフィとフォント読み込み	中～高	typo-
6	色とコントラスト	中	color-
7	フォームとバリデーション UX	中	form-
8	アニメーションとパフォーマンス	低～中	anim-

クイックリファレンス

1. アクセシビリティと WCAG コンプライアンス（重大）

• access-semantic-html - スクリーンリーダーのためにセマンティック HTML 要素を使用する
• access-keyboard-navigation - キーボード操作で完全にナビゲーション可能にする
• access-focus-indicators - 可視的なフォーカスインジケータを提供する
• access-alt-text - 画像に意味のある alt テキストを提供する
• access-aria-labels - アイコンのみのコントロールに ARIA ラベルを使用する
• access-target-size - 最小限のタッチターゲットサイズ（24×24px）を確保する
• access-heading-hierarchy - 論理的な見出しの階層を維持する

2. Core Web Vitals 最適化（重大）

• cwv-optimize-lcp - Largest Contentful Paint を2.5秒以下に最適化する
• cwv-minimize-cls - Cumulative Layout Shift を0.1以下に最小化する
• cwv-improve-inp - Interaction to Next Paint を200ms以下に改善する
• cwv-responsive-images - srcset を使用してレスポンシブ画像を配信する
• cwv-lazy-load-offscreen - オフスクリーン画像と iframe を遅延読み込みする
• cwv-critical-css - クリティカル CSS をインライン化し、その他を遅延させる

3. 視覚的階層とレイアウト（高）

• layout-visual-hierarchy - 明確な視覚的階層を確立する
• layout-whitespace - 空白スペースを使用して読みやすさを向上させる
• layout-f-pattern - F パターン読者行動向けにデザインする
• layout-grid-system - 一貫したグリッドシステムを使用する
• layout-single-cta - 画面ごとにプライマリ CTA を1つに制限する
• layout-proximity-grouping - 近接によって関連要素をグループ化する

4. レスポンシブとモバイルファースト設計（高）

• resp-mobile-first - min-width クエリを使用してモバイルファースト設計を行う
• resp-fluid-typography - clamp() を使用してフルイドタイポグラフィを使用する
• resp-container-queries - コンポーネント用にコンテナクエリを使用する
• resp-touch-targets - モバイル用にタッチターゲットをサイズ変更する（44×44px）
• resp-viewport-meta - viewport メタタグを正しく設定する

5. タイポグラフィとフォント読み込み（中～高）

• typo-font-display - font-display を使用して読み込み動作を制御する
• typo-preload-fonts - クリティカルな Web フォントをプリロードする
• typo-readable-line-length - 行の長さを制限する（45-75ch）
• typo-line-height - 適切な行の高さを設定する（1.5-1.7）
• typo-system-font-stack - UI 要素にシステムフォントスタックを使用する

6. 色とコントラスト（中）

• color-contrast-ratio - WCAG コントラスト比要件を満たす（4.5:1）
• color-not-only-indicator - 色だけで情報を伝えない
• color-dark-mode - prefers-color-scheme でダークモードをサポートする
• color-semantic-palette - デザイントークンでセマンティック色名を使用する

7. フォームとバリデーション UX（中）

• form-inline-validation - フィールド blur 後にインライン検証を使用する
• form-error-messages - 実行可能なエラーメッセージを作成する
• form-labels-above - ラベルを入力フィールド上に配置する
• form-input-types - モバイル用に正しい HTML input type を使用する
• form-autocomplete - 正しい属性でブラウザのオートコンプリート機能を有効にする

8. アニメーションとパフォーマンス（低～中）

• anim-gpu-properties - GPU アクセラレーション対応プロパティのみをアニメーション化する
• anim-will-change - アニメーションヒントに will-change を控えめに使用する
• anim-reduced-motion - ユーザーのモーション設定を尊重する
• anim-duration-easing - 適切なアニメーション継続時間とイージングを使用する

使い方

詳細な説明とコード例については、個別リファレンスファイルをお読みください：

• セクション定義 - カテゴリ構造と影響レベル
• ルールテンプレート - 新しいルール追加用テンプレート
• 例：access-semantic-html

完全なコンパイル済みドキュメント

すべてのルールを展開した完全なガイドについては、AGENTS.md を参照してください。