modern-web-design

モダンなウェブデザイン

概要

2024～2025年のモダンなウェブデザインでは、パフォーマンス、アクセシビリティ、意味のあるインタラクションが重視されています。このスキルでは、魅力的でアクセシブルかつ高パフォーマンスなウェブ体験を作成するための、現在のデザイントレンド、実装パターン、ベストプラクティスを包括的に解説します。

このメタスキルは、このリポジトリにあるすべてのアニメーション、インタラクション、3D関連スキルの知識を統合し、包括的なデザインガイダンスを提供します。

デザインの基本原則（2024～2025年）

1. パフォーマンスを最優先するデザイン

考え方：デザイン上の判断では、すべてのデバイスにおける Core Web Vitals とユーザー体験を優先する必要があります。

主な指標：

• Largest Contentful Paint（LCP）：< 2.5s
• First Input Delay（FID）：< 100ms
• Cumulative Layout Shift（CLS）：< 0.1
• Interaction to Next Paint（INP）：< 200ms

実装ガイドライン：

• 重要でないアニメーションは、ページの読み込み完了後まで遅らせます
• アニメーションには CSS の transforms/opacity を使用します（GPU アクセラレーション）
• 画像、動画、3D コンテンツには遅延読み込みを実装します
• プログレッシブエンハンスメント：JavaScript がなくてもコアコンテンツを表示します

関連スキル：最適化されたアニメーションには gsap-scrolltrigger、motion-framer、lottie-animations

2. 大胆なミニマリズム

特徴：

• 大きく印象的なタイポグラフィ（流動的なサイズ調整には clamp() を使用）
• 十分なホワイトスペース（ネガティブスペースをデザイン要素として活用）
• 限定的なカラーパレット（主要色は3～5色）
• 大胆なアクセントカラーを意図的に使用
• 幾何学的な図形とすっきりした線

タイポグラフィのスケール（モダンな流動型システム）：

/* Fluid typography using 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 compliant color system */
--color-primary: oklch(50% 0.2 250); /* Blue */
--color-accent: oklch(65% 0.25 30);  /* Coral */
--color-neutral-50: oklch(98% 0 0);
--color-neutral-900: oklch(20% 0 0);
/* Contrast ratio: minimum 7:1 for text */

関連スキル：UI コンポーネントには animated-component-libraries

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

定義：フィードバックを提供し、ユーザーを導き、体感パフォーマンスを高める、小規模で目的の明確なアニメーションです。

カテゴリ：

a) ホバー状態（デスクトップ）：

• スケール変換（1.05～1.1x）
• 色の遷移（200～300ms）
• シャドウの深さの変化
• カーソルの変化

b) 読み込み状態：

• スケルトンスクリーン（スピナーより効果的）
• 画像の段階的な読み込み（ぼかしから鮮明にする手法）
• 楽観的な UI 更新
• コンテンツを段階的に表示

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

• ボタンの押下状態（0.95x に縮小）
• スプリング物理を用いたトグルスイッチ
• フォームフィールドのバリデーション（即時かつ親切なフィードバック）
• モーションによる成功／エラー状態の表示

実装例（Framer Motion）：

// Button with micro-interaction
<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）：

// Scroll-linked 3D rotation
gsap.to(".cube", {
  scrollTrigger: {
    trigger: ".section",
    start: "top top",
    end: "bottom top",
    scrub: 1, // Smooth scrubbing
  },
  rotationY: 360,
  ease: "none"
});

関連スキル：gsap-scrolltrigger、locomotive-scroll、scroll-reveal-libraries、3D スクロールテリングには react-three-fiber

5. カーソル UX

進化：インタラクションを強化し、状況に応じたフィードバックを提供するカスタムカーソルです。

パターン：

a) カスタムカーソルの形状：

• 円形／ドットの追従カーソル（遅延とイージングを適用）
• テキストベースのカーソル（「表示」「ドラッグ」「クリック」）
• 視覚的な魅力を高めるブレンドモード
• ホバー時の拡大／変形

b) 状況に応じた変化：

• リンク／ボタン上で拡大
• インタラクティブ要素への磁力的な吸着
• 画像上で色を反転
• アクション用のカスタムアイコン（再生、ズーム、拡大）

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

• CSS トランスフォームのみを使用します（top/left は使用しません）
• JavaScript のカーソルには RequestAnimationFrame を使用します
• モバイル／タッチデバイスでは無効にします
• prefers-reduced-motion を尊重します

実装例：

// Simple smooth cursor follower
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() {
  // Smooth easing
  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 scale */
--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）
• 高速なパーソナライズを実現するエッジコンピューティング
• プライバシーを保護する分析
• 透明性のあるデータ利用

実装時の考慮事項：

• デフォルトのエクスペリエンスにフォールバックします
• パーソナライズによるレイアウトシフトを避けます
• 「トラッキング拒否」を尊重します
• 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) {
      // Count up animation
      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 のバリアント）：

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) {
  // Disable or simplify animations
  gsap.config({ nullTargetWarn: false });
  // Skip scroll animations, use instant reveals
}

2. 色のコントラスト

WCAG AAA 基準：

• 通常のテキスト：コントラスト比 7:1
• 大きなテキスト（18pt 以上）：コントラスト比 4.5:1
• 知覚的な均一性のために OKLCH 色空間を使用

テスト：

// Check contrast ratio
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;
}

/* Remove focus ring for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

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

セマンティック HTML：

• 適切な見出し階層（h1-h6）を使用
• ランドマーク領域（header、nav、main、footer）
• アイコンボタンに aria-label を設定
• 動的コンテンツには 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;
  /* Tap target includes padding */
}

パフォーマンスの最適化

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

60 FPS チェックリスト：

• CSS transforms（translateX/Y/Z、scale、rotate）を使用します（GPU で高速化）
• フェードには opacity を使用します（GPU で高速化）
• 次のアニメーションは避けます：top/left、width/height、margin、padding
• will-change は控えめに使用します（メモリコストがかかります）
• JS アニメーションには RequestAnimationFrame を使用します

GSAP のパフォーマンス：

// Force GPU acceleration
gsap.set(element, { force3D: true });

// Use will-change during animation only
gsap.to(element, {
  x: 100,
  onStart: () => element.style.willChange = 'transform',
  onComplete: () => element.style.willChange = 'auto'
});

2. 読み込み戦略

クリティカルパス：

• クリティカル CSS をインライン化します（ファーストビュー）
• クリティカルでない CSS の読み込みを遅延させます
• JavaScript を非同期で読み込みます
• フォントとヒーロー画像をプリロードします

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

<style>
  /* Critical CSS inlined */
</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 バンドルサイズ

コード分割：

// Dynamic imports
const AnimationModule = lazy(() => import('./animations'));

// Route-based splitting
const Gallery = lazy(() => import('./pages/Gallery'));

ツリーシェイキング：

• ES6 imports を使用します
• 必要なものだけをインポートします
• 最新のビルドツール（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()) {
  // Simplify or disable animations
}

落とし穴 3：フォールバックの不足

問題：JavaScript がない場合や古いブラウザーでは、エクスペリエンスが機能しなくなります。

解決策：

• プログレッシブエンハンスメントの考え方を取り入れます
• JS がなくてもコアコンテンツにアクセスできるようにします
• 最新の API を使用する前に機能を検出します
• 重要な機能にはポリフィルを使用します

// Feature detection
if ('IntersectionObserver' in window) {
  // Use scroll-triggered animations
} else {
  // Show content immediately
}

落とし穴 4：アクセシビリティへの配慮不足

問題：キーボードユーザー、スクリーンリーダー、動きに敏感なユーザーへの配慮を忘れてしまいます。

解決策：

• キーボードだけでテストします
• スクリーンリーダー（NVDA、VoiceOver）でテストします
• 必ず prefers-reduced-motion を確認します
• セマンティック HTML を使用します
• 適切なフォーカス管理を維持します

チェックリスト：

• すべてのインタラクティブ要素をキーボードで操作できる
• フォーカスインジケーターが見える
• 色のコントラストが WCAG AAA を満たしている
• 動きを無効にできる
• スクリーンリーダーの通知が適切である

落とし穴 5：読み込み状態を無視する

問題：コンテンツの読み込み中に画面が真っ白になったり、レイアウトがずれたりします。

解決策：

• レイアウトを予測できる場合はスケルトンスクリーンを使用します
• 読み込み時に滑らかなトランジションを適用します
• 動的コンテンツ用のスペースを確保します
• 内容のわかる読み込みインジケーターを表示します

// Skeleton screen pattern
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 Custom Properties）：

:root {
  /* Colors - OKLCH for perceptual uniformity */
  --color-primary: oklch(50% 0.2 250);
  --color-accent: oklch(65% 0.25 30);

  /* Spacing - Consistent scale */
  --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);

  /* Typography - Fluid scale */
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);

  /* Animation - Consistent timing */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* Easing - Natural motion */
  --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. アトム：ボタン、入力欄、ラベル
2. モレキュール：フォームフィールド、カード
3. オーガニズム：ナビゲーション、ヒーローセクション
4. テンプレート：ページレイアウト
5. ページ：個別のインスタンス

関連スキル：コンポーネントのパターンについては 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 - Canvas ベースの 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 を参照してください。