モダンウェブデザイン

概要

2024-2025 年のモダンウェブデザインは、パフォーマンス、アクセシビリティ、そして意味のある相互作用を重視しています。このスキルは、現在のデザイントレンド、実装パターン、およびあらゆるデバイスで魅力的でアクセス可能で高速なウェブ体験を作成するためのベストプラクティスに関する包括的なガイダンスを提供します。

このメタスキルは、このリポジトリ内の全アニメーション、インタラクション、3D スキルの知識を総合し、全体的なデザインガイダンスを提供します。

コアデザイン原則 (2024-2025)

1. パフォーマンス・ファースト・デザイン

哲学: デザイン上の決定は、すべてのデバイスで Core Web Vitals とユーザー体験を優先する必要があります。

主要メトリクス:

• Largest Contentful Paint (LCP): < 2.5 秒
• First Input Delay (FID): < 100ms
• Cumulative Layout Shift (CLS): < 0.1
• Interaction to Next Paint (INP): < 200ms

実装ガイドライン:

• ページ読み込み後まで非クリティカルなアニメーションを遅延させる
• CSS の transform と opacity でアニメーション化 (GPU 加速)
• 画像、動画、3D コンテンツの遅延読み込みを実装
• プログレッシブ・エンハンスメント: JavaScript なしでコアコンテンツを表示

関連スキル: gsap-scrolltrigger、motion-framer、lottie-animations (最適化されたアニメーション用)

2. ボールドミニマリズム

特性:

• 大きく影響的なタイポグラフィ (clamp() による流動的サイジング)
• 豊富な余白 (ネガティブスペースをデザイン要素として)
• 限定的なカラーパレット (3～5 の主要色)
• 意図的な太い強調色の使用
• 幾何学的な形状と清潔な線

タイポグラフィスケール (モダンな流動的システム):

/* clamp() を使用した流動的タイポグラフィ */
--font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
--font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
--font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
--font-size-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
--font-size-xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);
--font-size-2xl: clamp(2.5rem, 2rem + 2.5vw, 4rem);
--font-size-3xl: clamp(3.5rem, 2.5rem + 5vw, 6rem);

カラーシステム (アクセシビリティ・ファースト):

/* WCAG AAA 準拠のカラーシステム */
--color-primary: oklch(50% 0.2 250); /* ブルー */
--color-accent: oklch(65% 0.25 30);  /* コーラル */
--color-neutral-50: oklch(98% 0 0);
--color-neutral-900: oklch(20% 0 0);
/* コントラスト比: テキストの最小値 7:1 */

関連スキル: animated-component-libraries (UI コンポーネント用)

3. マイクロインタラクション

定義: ユーザーへのフィードバック提供、ガイダンス、知覚性能の向上を実現する、小さく意図的なアニメーション。

カテゴリー:

a) ホバーステート (デスクトップ):

• スケール変形 (1.05～1.1 倍)
• カラー遷移 (200～300ms)
• シャドウ深度の変更
• カーソル変形

b) ローディングステート:

• スケルトンスクリーン (スピナーより優れている)
• 段階的な画像読み込み (ぼかし-アップ技術)
• 楽観的 UI 更新
• スタッガーされたコンテンツ表示

c) インタラクティブフィードバック:

• ボタン押下ステート (0.95 倍にスケーク)
• スプリング物理を持つトグルスイッチ
• フォームフィールド検証 (即座で思慮深いフィードバック)
• モーション付きの成功/エラーステート

実装例 (Framer Motion):

// マイクロインタラクション付きボタン
<motion.button
  whileHover={{ scale: 1.05, y: -2 }}
  whileTap={{ scale: 0.95 }}
  transition={{ type: "spring", stiffness: 400, damping: 17 }}
>
  Click me
</motion.button>

関連スキル: motion-framer、react-spring-physics、animejs (マイクロインタラクション用)

4. スクロールテリング

定義: ユーザーがスクロールするに従ってコンテンツが表示・変形されるナラティブ駆動の体験。

パターン:

a) スクロールトリガーされたリビール:

• スクロール入場時のフェードイン (オフセット付き)
• サイドからのスライドイン (スタッガー付き)
• スケール + 不透明度遷移
• クリップパスリビール

b) スクロールリンクアニメーション:

• パララックスレイヤー (異なるスクロール速度)
• 水平スクロールセクション
• スクラビングアニメーション付きのピンセクション
• スクロールに連動した 3D オブジェクト回転

c) プログレスインジケーター:

• 読み進度バー
• ステップバイステップのビジュアルガイド
• スクロールに従うアニメーション SVG パス

実装例 (GSAP ScrollTrigger):

// スクロールリンク 3D 回転
gsap.to(".cube", {
  scrollTrigger: {
    trigger: ".section",
    start: "top top",
    end: "bottom top",
    scrub: 1, // スムーズなスクラビング
  },
  rotationY: 360,
  ease: "none"
});

関連スキル: gsap-scrolltrigger、locomotive-scroll、scroll-reveal-libraries、react-three-fiber (3D スクロールテリング用)

5. カーソル UX

進化: インタラクションを強化し、コンテキストフィードバックを提供するカスタムカーソル。

パターン:

a) カスタムカーソル形状:

• サークル/ドットフォロワー (遅延とイージング付き)
• テキストベースのカーソル ("View"、"Drag"、"Click")
• ビジュアルインタレストのためのブレンドモード
• ホバーでのスケール/モーフ

b) コンテキスト変形:

• リンク/ボタン上での拡大
• インタラクティブ要素への磁気吸引
• 画像上での色反転
• アクション用のカスタムアイコン (再生、ズーム、展開)

c) パフォーマンスに関する考慮事項:

• CSS transform のみを使用 (top/left なし)
• JS カーソルの RequestAnimationFrame
• モバイル/タッチデバイスで無効化
• prefers-reduced-motion を尊重

実装例:

// シンプルなスムーズカーソルフォロワー
const cursor = document.querySelector('.cursor');
let mouseX = 0, mouseY = 0;
let cursorX = 0, cursorY = 0;

document.addEventListener('mousemove', (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

function updateCursor() {
  // スムーズなイージング
  cursorX += (mouseX - cursorX) * 0.1;
  cursorY += (mouseY - cursorY) * 0.1;

  cursor.style.transform = `translate(${cursorX}px, ${cursorY}px)`;
  requestAnimationFrame(updateCursor);
}
updateCursor();

関連スキル: gsap-scrolltrigger (イージング用)、motion-framer (React カーソルコンポーネント用)

6. グラスモーフィズムと奥行き

特性:

• フロストガラス効果 (backdrop-filter)
• 奥行き階層を持つレイヤー UI
• 微妙なシャドウとボーダー
• 半透明の背景

モダングラスモーフィズム (2024):

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
}

奥行きシステム (レイヤリング):

/* エレベーションスケール */
--elevation-1: 0 1px 3px rgba(0,0,0,0.12);
--elevation-2: 0 4px 8px rgba(0,0,0,0.15);
--elevation-3: 0 8px 16px rgba(0,0,0,0.18);
--elevation-4: 0 16px 32px rgba(0,0,0,0.2);

関連スキル: animated-component-libraries (グラスモーフィックコンポーネント用)

7. AI 強化パーソナライゼーション

パターン:

a) アダプティブコンテンツ:

• ユーザー行動に基づいたダイナミックレイアウト
• パーソナライズされたコンテンツ推奨
• アダプティブカラースキーム (システム設定 + ユーザー履歴)
• コンテキストに基づくスマートデフォルト

b) インテリジェントインタラクション:

• 即座の結果を伴う予測検索
• スマートなフォーム補完
• コンテキスト認識の提案
• 使用状況に基づく段階的な開示

c) パフォーマンス + プライバシー:

• クライアントサイドパーソナライゼーション (localStorage、IndexedDB)
• パーソナライゼーションのためのエッジコンピューティング
• プライバシー保護アナリティクス
• 透明なデータ使用

実装に関する考慮事項:

• デフォルト体験へのフォールバック
• パーソナライゼーション由来のレイアウトシフトなし
• "Do Not Track" を尊重
• GDPR/CCPA コンプライアンス

一般的なデザインパターン

パターン 1: イマーシブヒーローセクション

使用例: ランディングページ、製品ローンチ、ポートフォリオサイト

特性:

• フルビューポート高さ
• 微妙な 3D 背景またはアニメーション勾配
• 流動的タイポグラフィの大きいヘッドライン
• スムーズなスクロールインジケーター
• スクロール終了時のパララックス

実装 (統合アプローチ):

HTML 構造:

<section class="hero">
  <div id="bg-canvas"></div>
  <div class="hero__content">
    <h1 class="hero__title">Modern Design</h1>
    <p class="hero__subtitle">Performance meets beauty</p>
    <button class="hero__cta">Explore</button>
  </div>
  <div class="scroll-indicator">
    <span>Scroll</span>
  </div>
</section>

テクノロジー:

• 背景: Vanta.js WAVES エフェクト (lightweight-3d-effects)
• テキストアニメーション: GSAP SplitText とスタッガー (gsap-scrolltrigger)
• ボタン: Framer Motion ホバーステート (motion-framer)
• スクロールインジケーター: CSS アニメーション + GSAP フェードアウト

関連スキル: lightweight-3d-effects、gsap-scrolltrigger、motion-framer

パターン 2: 水平スクロールギャラリー

使用例: ポートフォリオ作品、製品ショーケース、ケーススタディ

実装 (GSAP ScrollTrigger):

gsap.to(".gallery__track", {
  x: () => -(document.querySelector(".gallery__track").scrollWidth - window.innerWidth),
  ease: "none",
  scrollTrigger: {
    trigger: ".gallery",
    pin: true,
    scrub: 1,
    end: () => "+=" + document.querySelector(".gallery__track").scrollWidth
  }
});

拡張機能:

• スクロール時にビューに入った画像を遅延読み込み
• カード内でのパララックス
• アクティブカード上でのスケール変形
• Locomotive によるスムーズなモーメンタムスクロール

関連スキル: gsap-scrolltrigger、locomotive-scroll

パターン 3: 3D 製品ビューアー

使用例: e-コマース、製品マーケティング、ショーケース

実装 (React Three Fiber):

import { Canvas } from '@react-three/fiber'
import { OrbitControls, useGLTF } from '@react-three/drei'

function ProductViewer() {
  return (
    <Canvas camera={{ position: [0, 0, 5], fov: 50 }}>
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 10, 10]} angle={0.15} />
      <Product />
      <OrbitControls
        enableZoom={false}
        autoRotate
        autoRotateSpeed={2}
      />
    </Canvas>
  )
}

拡張機能:

• マテリアルバリアント (カラーピッカー)
• アノテーション付きホットスポット
• モバイルでの AR モード
• スクリーンショット/シェア機能

関連スキル: react-three-fiber、threejs-webgl、model-viewer-component

パターン 4: アニメーション化データビジュアライゼーション

使用例: ダッシュボード、アナリティクス、インフォグラフィック

パターン:

• スクロール時のビューへの入場時のカウントアップアニメーション
• アニメーション化チャートリビール (プログレスバー、円グラフ)
• スタッガーグリッドアニメーション
• データを表現するパーティクル背景

実装 (Framer Motion + IntersectionObserver):

function AnimatedStat({ end, label }) {
  const [count, setCount] = useState(0);
  const ref = useRef();
  const isInView = useInView(ref, { once: true });

  useEffect(() => {
    if (isInView) {
      // カウントアップアニメーション
      const duration = 2000;
      const steps = 60;
      const increment = end / steps;
      let current = 0;

      const timer = setInterval(() => {
        current += increment;
        if (current >= end) {
          setCount(end);
          clearInterval(timer);
        } else {
          setCount(Math.floor(current));
        }
      }, duration / steps);
    }
  }, [isInView, end]);

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 20 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.6 }}
    >
      <h2>{count}+</h2>
      <p>{label}</p>
    </motion.div>
  );
}

関連スキル: motion-framer、pixijs-2d (キャンバスベースのビジュアライゼーション用)

パターン 5: ページトランジション

使用例: マルチページアプリ、ポートフォリオサイト、ストーリーテリング体験

実装 (Barba.js + GSAP):

barba.init({
  transitions: [{
    name: 'slide',
    leave(data) {
      return gsap.to(data.current.container, {
        xPercent: -100,
        duration: 0.5
      });
    },
    enter(data) {
      return gsap.from(data.next.container, {
        xPercent: 100,
        duration: 0.5
      });
    }
  }]
});

モダンな代替案:

• View Transitions API (Chrome 111+、プログレッシブエンハンスメント)
• React SPA 用 Framer Motion の AnimatePresence
• 共有要素トランジション

関連スキル: barba-js、gsap-scrolltrigger、motion-framer

パターン 6: インタラクティブカーソルエフェクト

使用例: クリエイティブエージェンシー、ポートフォリオ、インタラクティブ体験

パターン:

• テキストカーソルが遅延で追従
• 磁気ボタン (カーソルが要素に吸引される)
• ブレンドモードカーソル (色反転)
• コンテンツを表示するカーソル

実装 (Vanilla JS + GSAP):

const links = document.querySelectorAll('a');
const cursor = document.querySelector('.cursor');

links.forEach(link => {
  link.addEventListener('mouseenter', () => {
    gsap.to(cursor, {
      scale: 2,
      duration: 0.3,
      ease: "power2.out"
    });
  });

  link.addEventListener('mouseleave', () => {
    gsap.to(cursor, {
      scale: 1,
      duration: 0.3,
      ease: "power2.out"
    });
  });
});

関連スキル: gsap-scrolltrigger、motion-framer

パターン 7: スタッガーコンテンツリビール

使用例: 機能セクション、推薦文、チームグリッド

実装 (Framer Motion variants):

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1
    }
  }
};

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
};

function FeatureGrid() {
  return (
    <motion.div
      variants={container}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, amount: 0.3 }}
      className="grid"
    >
      {features.map((feature, i) => (
        <motion.div key={i} variants={item}>
          {feature}
        </motion.div>
      ))}
    </motion.div>
  );
}

関連スキル: motion-framer、gsap-scrolltrigger、scroll-reveal-libraries

他のスキルとの統合

アニメーションスキル統合

GSAP ScrollTrigger (gsap-scrolltrigger):

• スクロール駆動ストーリーテリングに使用
• マルチステップリビール用のセクションピン
• スクロール位置に紐付けたアニメーションスクラビング
• パフォーマンスのためのバッチアニメーション

Framer Motion (motion-framer):

• React コンポーネントアニメーション
• AnimatePresence によるページトランジション
• ジェスチャーベースのインタラクション (ドラッグ、ホバー、タップ)
• レイアウトアニメーション (共有要素トランジション)

React Spring (react-spring-physics):

• 物理ベースアニメーション (より自然な感覚)
• インタラクティブスプリング (ドラッグ、プル)
• トレイルアニメーション (順序付きリビール)
• 「本物」に見える UI フィードバック用

Anime.js (animejs):

• SVG パスアニメーション (線描画)
• SVG モーフィングトランジション
• スタッガーグリッドアニメーション
• タイムラインベースのシーケンス

Lottie (lottie-animations):

• 複雑なデザイナー作成アニメーション
• アイコンアニメーションとマイクロインタラクション
• ローディングステート
• スクロール駆動再生

3D スキル統合

Three.js (threejs-webgl):

• カスタム 3D シーンとエクスペリエンス
• シェーダーエフェクトとポストプロセッシング
• WebGL ベースのパーティクルシステム
• 高度なライティングとマテリアル

React Three Fiber (react-three-fiber):

• React アプリケーション内の 3D
• 製品ビューアーとコンフィギュレーター
• インタラクティブ 3D UI コンポーネント
• スクロール駆動 3D アニメーション

Babylon.js (babylonjs-engine):

• 物理ベースの 3D 体験
• VR/XR アプリケーション
• ゲーム的なインタラクション
• PBR マテリアルのリアリズム

軽量 3D (lightweight-3d-effects):

• 背景エフェクト (Vanta.js)
• 微妙な 3D イラスト (Zdog)
• チルトエフェクト (Vanilla-Tilt)
• パフォーマンスフレンドリーな 3D アクセント

コンポーネントライブラリ

アニメーション化コンポーネント (animated-component-libraries):

• Magic UI コンポーネント (背景、テキストエフェクト)
• プリビルトインタラクティブコンポーネント
• デザインシステム基盤
• 迅速なプロトタイピング

スクロールリビール (scroll-reveal-libraries):

• スクロール時のシンプルなフェード/スライド
• AOS ライブラリ統合
• ScrollTrigger の軽量代替案
• 基本的なリビール用の素早い実装

アクセシビリティベストプラクティス

1. モーションとアニメーション

ユーザー設定を尊重:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

JavaScript 検出:

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

if (prefersReducedMotion) {
  // アニメーションを無効化または簡素化
  gsap.config({ nullTargetWarn: false });
  // スクロールアニメーションをスキップ、即座にリビール
}

2. 色のコントラスト

WCAG AAA 標準:

• 通常テキスト: 7:1 のコントラスト比
• 大きいテキスト (18pt 以上): 4.5:1 のコントラスト比
• 知覚的に均一な OKLCH カラースペースを使用

テスト:

// コントラスト比をチェック
function getContrastRatio(color1, color2) {
  const l1 = getLuminance(color1);
  const l2 = getLuminance(color2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}

3. キーボードナビゲーション

要件:

• すべてのインタラクティブ要素がキーボード操作可能
• 表示されたフォーカスインジケーター (outline: none ではなく)
• 論理的なタブ順
• 長いナビゲーション用のスキップリンク
• モーダル/オーバーレイを閉じる Escape キー

フォーカススタイル (モダン):

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* マウスユーザーのフォーカスリングを削除 */
:focus:not(:focus-visible) {
  outline: none;
}

4. スクリーンリーダーサポート

セマンティック HTML:

• 適切な見出しの階層構造 (h1-h6)
• ランドマークリージョン (header、nav、main、footer)
• アイコンボタン用の aria-labels
• 動的コンテンツ用の aria-live リージョン

アニメーションアナウンスメント:

<!-- コンテンツ読み込み時にアナウンス -->
<div role="status" aria-live="polite" aria-atomic="true">
  Loading complete. 12 items displayed.
</div>

5. タッチターゲット

最小サイズ: 44x44px (iOS)、48x48px (Android)

スペーシング: タッチターゲット間の最小 8px

実装:

.button {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 24px;
  /* タップターゲットはパディングを含む */
}

パフォーマンス最適化

1. アニメーションパフォーマンス

60 FPS チェックリスト:

• CSS transform (translateX/Y/Z、scale、rotate) を使用 - GPU 加速
• フェード用の opacity を使用 - GPU 加速
• 回避: top/left、width/height、margin、padding アニメーション
• will-change は控えめに (メモリコスト)
• JS アニメーション用の RequestAnimationFrame

GSAP パフォーマンス:

// GPU 加速を強制
gsap.set(element, { force3D: true });

// アニメーション中のみ will-change を使用
gsap.to(element, {
  x: 100,
  onStart: () => element.style.willChange = 'transform',
  onComplete: () => element.style.willChange = 'auto'
});

2. 読み込み戦略

クリティカルパス:

• クリティカル CSS をインライン (ビューポート上部)
• クリティカル非 CSS を遅延
• JavaScript を非同期で読み込み
• フォントとヒーロー画像をプリロード

プログレッシブエンハンスメント:

<!-- 最初に必須スタイルを読み込む -->
<style>
  /* インライン化されたクリティカル CSS */
</style>

<!-- クリティカル非スタイルを遅延 -->
<link rel="preload" href="animations.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="animations.css"></noscript>

3. 画像最適化

モダンフォーマット:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" loading="lazy">
</picture>

レスポンシブ画像:

<img
  srcset="image-400.jpg 400w,
          image-800.jpg 800w,
          image-1200.jpg 1200w"
  sizes="(max-width: 640px) 100vw,
         (max-width: 1024px) 50vw,
         33vw"
  src="image-800.jpg"
  alt="Description"
  loading="lazy"
>

4. 3D コンテンツ最適化

読み込み戦略:

• 読み込み中のプレースホルダーを表示
• 最初にロー-ポリゴンモデルを読み込み
• ハイ-ポリゴンでのプログレッシブエンハンスメント
• ビューポート下の 3D シーンを遅延読み込み

ランタイムパフォーマンス:

• オブジェクトプーリングを使用
• LOD (Level of Detail) の実装
• フラスタムカリング
• テクスチャ圧縮 (Basis Universal)

関連スキル: threejs-webgl、react-three-fiber、babylonjs-engine

5. JavaScript バンドルサイズ

コード分割:

// ダイナミックインポート
const AnimationModule = lazy(() => import('./animations'));

// ルートベースの分割
const Gallery = lazy(() => import('./pages/Gallery'));

ツリーシェイキング:

• ES6 インポートを使用
• 必要なものだけをインポート
• モダンなビルドツールを使用 (Vite、esbuild)

一般的なピットフォール

ピットフォール 1: オーバーアニメーション

問題: 多くのアニメーションがコンテンツから注意をそらしパフォーマンスを害する。

解決策:

• アニメーションを意味のあるインタラクションに限定
• アニメーションを使って注意をガイド (それを求めるのではなく)
• 原則に従う: 「目的のあるアニメーション」
• パフォーマンス影響を測定 (Chrome DevTools Performance タブ)

経験則: アニメーション存在理由を説明できない場合は削除してください。

ピットフォール 2: モバイルパフォーマンスの無視

問題: アニメーションはデスクトップではうまく機能するが、モバイルデバイスではラグが発生。

解決策:

• 実デバイスでテスト (シミュレーターだけではなく)
• モバイルでアニメーション複雑性を低減
• 低スペックデバイスで高コスト効果を無効化 (パララックス、3D)
• デバイス特定体験に matchMedia を使用

const isLowEndDevice = () => {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) &&
         navigator.hardwareConcurrency < 4;
};

if (isLowEndDevice()) {
  // アニメーションを簡素化または無効化
}

ピットフォール 3: フォールバックの欠落

問題: JavaScript なしまたは古いブラウザーで体験が壊れる。

解決策:

• プログレッシブエンハンスメントの考え方
• JavaScript なしでアクセス可能なコアコンテンツ
• モダン API 使用前の機能検出
• クリティカル機能用ポリフィル

// 機能検出
if ('IntersectionObserver' in window) {
  // スクロールトリガーアニメーションを使用
} else {
  // コンテンツを即座に表示
}

ピットフォール 4: アクセシビリティの見落とし

問題: キーボードユーザー、スクリーンリーダー、またはモーション敏感なユーザーを忘れる。

解決策:

• キーボードのみでテスト
• スクリーンリーダーでテスト (NVDA、VoiceOver)
• 常に prefers-reduced-motion をチェック
• セマンティック HTML を使用
• 適切なフォーカス管理を維持

チェックリスト:

• すべてのインタラクティブ要素がキーボード操作可能
• フォーカスインジケーターが表示される
• 色のコントラストが WCAG AAA を満たす
• モーションを無効化できる
• スクリーンリーダーアナウンスメントが意味をなす

ピットフォール 5: ローディングステート無視

問題: コンテンツ読み込み中に空白スクリーンまたはレイアウトシフト。

解決策:

• 予測可能なレイアウト用スケルトンスクリーン
• スムーズな読み込み遷移
• ダイナミックコンテンツ用スペース予約
• 意味のあるローディングインジケーターを表示

// スケルトンスクリーンパターン
function ProductCard({ loading, data }) {
  if (loading) {
    return (
      <div className="skeleton">
        <div className="skeleton__image" />
        <div className="skeleton__title" />
        <div className="skeleton__price" />
      </div>
    );
  }

  return <ProductCardContent data={data} />;
}

ピットフォール 6: スクロールハイジャック

問題: ネイティブスクロール動作をオーバーライドしてユーザーをフラストレーションさせる。

解決策:

• ブラウザーのネイティブスクロール保持 (モーメンタム、キーボード)
• ScrollTrigger/Locomotive を使用してもスクロール物理を変更しない
• ユーザーが自分のペースでスクロールできるようにする
• スクロール全体を無効にしない
• フルページセクション用スクロールジャッキングを回避

良い慣行: スクロールを置き換えるのではなく強化する。

デザインシステムアーキテクチャ

トークン構造

モダンデザイントークン (CSS カスタムプロパティ):

:root {
  /* 色 - 知覚均一性用 OKLCH */
  --color-primary: oklch(50% 0.2 250);
  --color-accent: oklch(65% 0.25 30);

  /* スペーシング - 一貫したスケール */
  --space-2xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
  --space-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
  --space-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.125rem);
  --space-md: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --space-lg: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  --space-xl: clamp(2rem, 1.6rem + 2vw, 3rem);
  --space-2xl: clamp(3rem, 2.4rem + 3vw, 4.5rem);

  /* タイポグラフィ - 流動スケール */
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);

  /* アニメーション - 一貫したタイミング */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* イージング - ナチュラルモーション */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

コンポーネントアーキテクチャ

アトミックデザイン (Brad Frost):

1. Atoms: ボタン、入力、ラベル
2. Molecules: フォームフィールド、カード
3. Organisms: ナビゲーション、ヒーローセクション
4. Templates: ページレイアウト
5. Pages: 特定のインスタンス

関連スキル: animated-component-libraries (コンポーネントパターン用)

リソース

このスキルは実装用に以下のスキルを参照しています:

アニメーションとインタラクション

• gsap-scrolltrigger - スクロール駆動アニメーション、ピンニング、スクラビング
• motion-framer - React アニメーション、ジェスチャー、レイアウトアニメーション
• react-spring-physics - 物理ベースアニメーション
• animejs - SVG アニメーション、スタッガーエフェクト
• lottie-animations - デザイナー作成アニメーション
• scroll-reveal-libraries - シンプルなスクロールリビール (AOS)

3D と WebGL

• threejs-webgl - カスタム 3D シーンとエフェクト
• react-three-fiber - React アプリケーションの 3D
• babylonjs-engine - 物理ベースの 3D、VR/XR
• lightweight-3d-effects - Vanta.js 背景、Zdog イラスト

ページトランジションとスクロール

• barba-js - ページトランジション
• locomotive-scroll - スムーズなスクロール

コンポーネントライブラリ

• animated-component-libraries - Magic UI、React Bits
• pixijs-2d - キャンバスベースの 2D グラフィックス

詳細リファレンス

references/ ディレクトリで詳細ドキュメントを参照:

• design_trends_2024.md - 現在のウェブデザイントレンドと予測
• interaction_patterns.md - 包括的なマイクロインタラクションカタログ
• accessibility_guide.md - WCAG コンプライアンスパターンとテスト
• performance_checklist.md - 最適化戦略とメトリクス

スクリプト

scripts/ ディレクトリにはデザインパターン実装用のツールが含まれています:

• pattern_generator.py - デザインパターンボイラープレートを生成
• design_audit.py - 既存デザインのコンプライアンスを監査

アセット

assets/ ディレクトリにはデザインシステムテンプレートとスターターファイルが含まれています。詳細は assets/README.md を参照してください。