ui-design

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

UI/UX とフロントエンドデザインに関する包括的なベストプラクティスガイドです。8 つのカテゴリにわたる 42 のルールを、影響度の高い順にまとめ、アクセシブルで高パフォーマンスかつ使いやすいインターフェースの開発を支援します。

適用するタイミング

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

• アクセシビリティとセマンティクスを考慮して 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 - 画像に意味のある代替テキストを設定する
• 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 - タスクの状況ごとに明確な主要アクションを設ける
• 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 - フィールドからフォーカスが外れた後にインラインバリデーションを行う
• 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 - 適切なアニメーションの時間とイージングを使用します

使用方法

上記のルールのうちタスクに該当するものについて、references/<rule-id>.md を読みます。そこには、重要な理由と、誤ったコードと正しいコードが記載されています。