ui-design

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

包括的な UI/UX およびフロントエンドデザインのベストプラクティスガイドです。アクセシブルでパフォーマンスに優れ、使いやすいインターフェースの開発を支援するため、影響度に応じて優先順位を付けた 8 カテゴリー、42 のルールを収録しています。

適用する場面

次の場合に、これらのガイドラインを参照してください。

• アクセシビリティとセマンティクスを考慮して HTML を構成するとき
• レスポンシブなレイアウトと視覚的な階層を実現する CSS を記述するとき
• Core Web Vitals のために画像とフォントを最適化するとき
• 適切な検証とエラー処理を備えたフォームを設計するとき
• アニメーションやインタラクティブな要素を追加するとき

優先度別のルールカテゴリー

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

クイックリファレンス

1. アクセシビリティと WCAG 準拠（CRITICAL）

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

2. Core Web Vitals の最適化（CRITICAL）

• 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. 視覚的階層とレイアウト（HIGH）

• layout-visual-hierarchy - 明確な視覚的階層を確立する
• layout-whitespace - 余白を活用して読みやすさを高める
• layout-f-pattern - F パターンの読み方を考慮してデザインする
• layout-grid-system - 一貫性のあるグリッドシステムを使用する
• layout-single-cta - 1 画面につき主要な CTA を 1 つに絞る
• layout-proximity-grouping - 関連する要素を近接させてグループ化する

4. レスポンシブデザインとモバイルファーストデザイン（HIGH）

• resp-mobile-first - min-width クエリを使ってモバイルファーストでデザインする
• resp-fluid-typography - clamp() を使った流動的なタイポグラフィを採用する
• resp-container-queries - コンポーネントにはコンテナクエリを使用する
• resp-touch-targets - モバイル向けにタッチターゲットのサイズ（44×44px）を確保する
• resp-viewport-meta - viewport meta タグを正しく設定する

5. タイポグラフィとフォントの読み込み（MEDIUM-HIGH）

• 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. 色とコントラスト（MEDIUM）

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

7. フォームと検証 UX（MEDIUM）

• form-inline-validation - フィールドからフォーカスが外れた後にインライン検証を行う
• form-error-messages - 対応方法が分かるエラーメッセージを作成する
• form-labels-above - ラベルを入力フィールドの上に配置する
• form-input-types - モバイル向けに適切な HTML 入力タイプを使用する
• form-autocomplete - 正しい属性を設定してブラウザーの自動補完を有効にする

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

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

使用方法

詳しい説明とコード例については、各リファレンスファイルを参照してください。

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

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

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