インタラクションデザイン

モーション、フィードバック、熟慮されたステート遷移を通じて、ユーザビリティを向上させ、ユーザーを喜ばせるエンゲージングで直感的なインタラクションを作成します。

このスキルを使う場面

• ユーザーフィードバックを強化するためのマイクロインタラクションを追加する
• スムーズなページとコンポーネント遷移を実装する
• ローディング状態とスケルトンスクリーンを設計する
• ジェスチャーベースのインタラクションを作成する
• 通知とトーストシステムを構築する
• ドラッグアンドドロップインターフェースを実装する
• スクロールトリガーのアニメーションを追加する
• ホバーとフォーカス状態を設計する

コアプリンシパル

1. 目的を持つモーション

モーションは装飾ではなく、コミュニケーションするべきです：

• フィードバック: ユーザーアクションが実行されたことを確認する
• オリエンテーション: 要素がどこから来てどこへ行くかを示す
• フォーカス: 重要な変更に注意を向ける
• 継続性: 遷移中にコンテキストを維持する

2. タイミングガイドライン

期間	ユースケース
100-150ms	マイクロフィードバック（ホバー、クリック）
200-300ms	小さい遷移（トグル、ドロップダウン）
300-500ms	中程度の遷移（モーダル、ページ変更）
500ms+	複雑なコレオグラフされたアニメーション

3. イージング関数

/* Common easings */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerate - entering */
--ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* Accelerate - exiting */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Both - moving between */
--spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot - playful */

クイックスタート：ボタンマイクロインタラクション

import { motion } from "framer-motion";

export function InteractiveButton({ children, onClick }) {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 400, damping: 17 }}
      className="px-4 py-2 bg-blue-600 text-white rounded-lg"
    >
      {children}
    </motion.button>
  );
}

インタラクションパターン

1. ローディング状態

スケルトンスクリーン: ローディング中にレイアウトを保持

function CardSkeleton() {
  return (
    <div className="animate-pulse">
      <div className="h-48 bg-gray-200 rounded-lg" />
      <div className="mt-4 h-4 bg-gray-200 rounded w-3/4" />
      <div className="mt-2 h-4 bg-gray-200 rounded w-1/2" />
    </div>
  );
}

プログレスインジケータ: 確定的なプログレスを表示

function ProgressBar({ progress }: { progress: number }) {
  return (
    <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
      <motion.div
        className="h-full bg-blue-600"
        initial={{ width: 0 }}
        animate={{ width: `${progress}%` }}
        transition={{ ease: "easeOut" }}
      />
    </div>
  );
}

2. ステート遷移

スムーズな遷移付きトグル:

function Toggle({ checked, onChange }) {
  return (
    <button
      role="switch"
      aria-checked={checked}
      onClick={() => onChange(!checked)}
      className={`
        relative w-12 h-6 rounded-full transition-colors duration-200
        ${checked ? "bg-blue-600" : "bg-gray-300"}
      `}
    >
      <motion.span
        className="absolute top-1 left-1 w-4 h-4 bg-white rounded-full shadow"
        animate={{ x: checked ? 24 : 0 }}
        transition={{ type: "spring", stiffness: 500, damping: 30 }}
      />
    </button>
  );
}

3. ページ遷移

Framer Motion レイアウトアニメーション:

import { AnimatePresence, motion } from "framer-motion";

function PageTransition({ children, key }) {
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={key}
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -20 }}
        transition={{ duration: 0.3 }}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  );
}

4. フィードバックパターン

クリック時のリップルエフェクト:

function RippleButton({ children, onClick }) {
  const [ripples, setRipples] = useState([]);

  const handleClick = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    const ripple = {
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
      id: Date.now(),
    };
    setRipples((prev) => [...prev, ripple]);
    setTimeout(() => {
      setRipples((prev) => prev.filter((r) => r.id !== ripple.id));
    }, 600);
    onClick?.(e);
  };

  return (
    <button onClick={handleClick} className="relative overflow-hidden">
      {children}
      {ripples.map((ripple) => (
        <span
          key={ripple.id}
          className="absolute bg-white/30 rounded-full animate-ripple"
          style={{ left: ripple.x, top: ripple.y }}
        />
      ))}
    </button>
  );
}

5. ジェスチャーインタラクション

スワイプして削除:

function SwipeCard({ children, onDismiss }) {
  return (
    <motion.div
      drag="x"
      dragConstraints={{ left: 0, right: 0 }}
      onDragEnd={(_, info) => {
        if (Math.abs(info.offset.x) > 100) {
          onDismiss();
        }
      }}
      className="cursor-grab active:cursor-grabbing"
    >
      {children}
    </motion.div>
  );
}

CSSアニメーションパターン

キーフレームアニメーション

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}
.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}
.animate-spin {
  animation: spin 1s linear infinite;
}

CSSトランジション

.card {
  transition:
    transform 0.2s ease-out,
    box-shadow 0.2s ease-out;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

アクセシビリティに関する考慮事項

/* ユーザーのモーション設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

function AnimatedComponent() {
  const prefersReducedMotion = window.matchMedia(
    "(prefers-reduced-motion: reduce)",
  ).matches;

  return (
    <motion.div
      animate={{ opacity: 1 }}
      transition={{ duration: prefersReducedMotion ? 0 : 0.3 }}
    />
  );
}

ベストプラクティス

1. パフォーマンス優先: スムーズな60fpsのために transform と opacity を使用する
2. モーション削減サポート: 常に prefers-reduced-motion を尊重する
3. 一貫したタイミング: アプリ全体でタイミングスケールを使用する
4. 自然な物理: 線形アニメーションよりスプリングアニメーションを優先する
5. 割り込み可能: ユーザーが長いアニメーションをキャンセルできるようにする
6. 段階的な強化: JSアニメーションなしで動作する
7. デバイスでテスト: パフォーマンスは大きく異なる

よくある問題

• カクカクしたアニメーション: width、height、top、left のアニメーション化を避ける
• 過度なアニメーション: 多すぎるモーションは疲労を引き起こす
• インタラクションをブロックする: アニメーション中にユーザー入力を決してブロックしない
• メモリリーク: アンマウント時にアニメーションリスナーをクリーンアップする
• フラッシュオブコンテンツ: 最適化のため will-change をむやみに使用しない