Motion（旧Framer Motion）で作る！Reactマイクロインタラクション6選【コピペで実装】

December 6, 2025March 29, 2026

Reactで動きのあるUIを作りたいけど、「アニメーションの実装って難しそう…」「CSSだけだと複雑な動きができない…」と悩んでいませんか？そんな課題を解決するのがMotion（旧Framer Motion）です。

Motionは、Reactアプリケーションに滑らかなアニメーションを簡単に追加できるライブラリです。この記事では、Motionの基本から実践的なマイクロインタラクション6選まで、コピペで使えるコード例とともに解説します。UX向上に直結する実用的なテクニックを身につけましょう！

公式サイト：https://motion.dev/

Motionとは？Framer Motionからの進化ポイント

Motionは、かつて「Framer Motion」として知られていたReact専用のアニメーションライブラリです。2024年11月にリブランディングされ、新たに「Motion」として生まれ変わりました。

2024年11月のリブランディング

Framer Motionから何が変わったのでしょうか？主な変更点は以下の通りです：

名称変更：Framer Motion → Motion
パッケージ名変更：framer-motion → motion
マルチフレームワーク対応：React専用 → React/Vue/JavaScript対応
モジュール構造の改善：より最適化されたバンドルサイズ

既存のFramer Motionプロジェクトは引き続き動作しますが、新規プロジェクトでは新しい「Motion」を使うことが推奨されています。

React/Vue/JavaScriptに対応

Motionの大きな進化は、複数のフレームワークに対応したことです：

React：従来通りの宣言的なアニメーション
Vue：Vueコンポーネントでの利用が可能に
JavaScript：フレームワークなしでも利用可能

この記事ではReactでの使い方に焦点を当てて解説します。

インストール方法の変更点

新しいMotionのインストール方法は以下の通りです：

# 新しいMotion（推奨）
npm install motion

# 旧Framer Motion（既存プロジェクト用）
npm install framer-motion

インポート方法も変更されています：

// 新しいMotion（React用）
import { motion } from "motion/react";

// 旧Framer Motion
import { motion } from "framer-motion";

Motionの基本的な使い方（3分で理解）

Motionを使ったアニメーションの基本を押さえましょう。

motion.divの基本

Motionでアニメーションを実装するには、通常のHTML要素をmotion.divやmotion.buttonなどのMotionコンポーネントに置き換えます。

import { motion } from "motion/react";

function App() {
  return (
    
      フェードインするテキスト
    
  );
}

animate, initial, transitionの役割

Motionの主要なpropsを理解しましょう：

initial：アニメーション開始時の状態（初期値）
animate：アニメーション終了時の状態（最終値）
transition：アニメーションの挙動（速度、イージングなど）

簡単な実装例

要素を右に100px移動させる例です：

import { motion } from "motion/react";

function SlideBox() {
  return (
    
      スライド
    
  );
}

1. ホバーで浮き上がるカード（whileHover）

カードにマウスを乗せると、まるで浮き上がるようなアニメーションです。影とスケールを組み合わせることで、立体感を演出します。

影とスケールの組み合わせ

whileHoverプロパティを使うと、ホバー時のアニメーションを簡単に実装できます。

実装コード例

import { motion } from "motion/react";

function HoverCard() {
  return (
    
      カードタイトル
      
        ホバーすると浮き上がります
      
    
  );
}

このアニメーションは、ブログカード、商品カード、ポートフォリオなど、クリック可能な要素に最適です。

2. クリック時のフィードバックボタン（whileTap + scale）

ボタンをクリックしたときに少し縮小することで、「押した感」をユーザーに伝えます。

ユーザーに「押した感」を伝える

視覚的なフィードバックは、ユーザーに「操作が受け付けられた」という安心感を与えます。

実装コード例

import { motion } from "motion/react";

function TapButton() {
  return (
     alert("クリックされました！")}
    >
      クリックしてね
    
  );
}

whileTapを使うことで、クリック中だけ適用されるスタイルを簡単に定義できます。

3. スクロールで出現するテキスト（whileInView）

ユーザーがスクロールして要素が画面内に入ったときに、ふわっと出現するアニメーションです。

スクロールトリガーの活用

whileInViewプロパティを使うと、要素がビューポートに入ったタイミングでアニメーションを発火できます。

viewport設定のポイント

viewportプロパティで、どのタイミングでアニメーションを開始するかを細かく制御できます：

amount：要素の何%がビューポートに入ったら発火するか（0〜1）
once：一度だけアニメーションするか（true/false）

実装コード例

import { motion } from "motion/react";

function ScrollRevealText() {
  return (
    
      下にスクロールしてください...
      
      
        
          スクロールで出現！
        
        
        
          テキストが順番に表示されます
        
      
    
  );
}

ランディングページやブログ記事で、重要なセクションを目立たせるのに効果的です。

4. トグルで切り替わるダークモード（variants）

ダークモードとライトモードを滑らかに切り替えるアニメーションです。variants機能を活用します。

アイコンと背景のスムーズな切り替え

ダークモード切り替えでは、背景色だけでなくアイコンも同時にアニメーションさせることで、視覚的に楽しい体験を提供できます。

variants機能の活用

variantsを使うと、複数の状態を定義して切り替えられます。コードの可読性も向上します。

実装コード例

import { motion } from "motion/react";
import { useState } from "react";

function DarkModeToggle() {
  const [isDark, setIsDark] = useState(false);

  // アニメーションの状態を定義
  const containerVariants = {
    light: {
      backgroundColor: "#ffffff",
      color: "#000000",
    },
    dark: {
      backgroundColor: "#1a1a1a",
      color: "#ffffff",
    },
  };

  const iconVariants = {
    light: { rotate: 0, scale: 1 },
    dark: { rotate: 180, scale: 1.1 },
  };

  return (
    
      ダークモード切り替え
      
       setIsDark(!isDark)}
        style={{
          padding: "12px 24px",
          fontSize: 16,
          border: "2px solid currentColor",
          borderRadius: 8,
          backgroundColor: "transparent",
          cursor: "pointer",
          color: "inherit",
        }}
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
      >
        
          {isDark ? "🌙" : "☀️"}
        
        {" "}
        {isDark ? "ライトモード" : "ダークモード"}に切り替え
      
    
  );
}

5. ドラッグ可能なカード（drag + dragConstraints）

要素をドラッグで動かせるインタラクションです。範囲制限も簡単に設定できます。

ドラッグ範囲の制限

dragConstraintsを使うと、ドラッグ可能な範囲を制限できます。

実装コード例

import { motion } from "motion/react";

function DraggableCard() {
  return (
    
      
        ドラッグ
      
    
  );
}

カードソート、カスタマイズ可能なダッシュボード、ゲームなどで活用できます。

6. 数値カウントアニメーション（useMotionValue + useTransform）

数値が滑らかにカウントアップするアニメーションです。ダッシュボードや統計表示に最適です。

JavaScriptの値をアニメーション

useMotionValueとuseTransformを使うと、DOMではなくJavaScriptの値自体をアニメーションできます。

ダッシュボードでの活用例

売上数、ユーザー数、進捗率など、数値を視覚的に魅力的に表示できます。

実装コード例

import { motion, useMotionValue, useTransform, animate } from "motion/react";
import { useEffect } from "react";

function CounterAnimation() {
  // アニメーション可能な値を作成
  const count = useMotionValue(0);
  
  // 小数点を丸めて整数に変換
  const rounded = useTransform(count, (latest) => Math.round(latest));

  useEffect(() => {
    // 0から1000までカウントアップ
    const controls = animate(count, 1000, {
      duration: 2,
      ease: "easeOut",
    });

    return controls.stop;
  }, []);

  return (
    
      
        {rounded}
      
      
        ユーザー数
      
    
  );
}

この技術は、SVGのパスアニメーションや、プログレスバーの進捗表示にも応用できます。