2026年のウェブ向けモーションデザイン：気を散らさずにコンバージョンを高めるクラフト

Motion design has become a primary differentiator in web experience quality. The sites that feel premium — Linear, Stripe, Arc, Vercel — use motion not as decoration but as a communication layer that tells users where they are, what just happened, and what will happen next. The sites that feel cheap use the same animations — parallax scrolling, entrance animations, hover transitions — but without underlying purpose. The difference is not technical sophistication. It is the discipline of asking, before adding any motion: what does this animation communicate that could not be communicated without it? If the answer is "nothing", the animation should not exist.

The three legitimate jobs of web motion

Motion on the web has exactly three legitimate jobs. First: spatial communication — showing the user where new content came from (a slide-in from the right communicates that a new panel opened to the right of the current view; a modal that scales up from its trigger communicates its relationship to that element). Second: state communication — confirming that an action has been received (a button that pulses when clicked; a form field that shakes when validation fails; a success state that fades in after form submission). Third: perceived performance — reducing the subjective experience of waiting (a skeleton loading state makes a 1.5-second load feel shorter than a blank screen; a progress indicator makes a 3-second load feel in control). Every other use of motion — decorative entrance animations, parallax backgrounds, hover effects that exist only to look impressive — should be audited and, in most cases, removed.

Easing: the detail that separates cheap from crafted

Easing is the acceleration curve of an animation — whether it starts fast and slows down (ease-out), starts slow and speeds up (ease-in), or follows a natural physics-based curve. Linear animations — constant speed — feel mechanical and digital. Eased animations feel natural and physical. The easing choices that most consistently signal craft in our design audits: ease-out for elements entering the screen (they decelerate as they arrive, like physical objects arriving in a space); ease-in for elements leaving the screen (they accelerate out, as if propelled); spring physics (using a CSS spring() function or a JavaScript physics library) for drag-and-drop and gesture-responsive interactions. The specific numbers matter: a 200ms ease-out-cubic for a panel transition feels responsive; 600ms feels sluggish. Test at 200ms, 300ms, and 400ms and choose based on the size and complexity of the animated element.

Performance: the constraint that defines good motion

Animation performance is determined by which CSS properties you animate. Properties that trigger layout recalculation (width, height, margin, padding, top, left) cause the browser to recalculate the position of every element on the page on every frame — this is expensive and produces jank on most devices. Properties that trigger compositing only (transform, opacity) are handled by the GPU and produce smooth 60fps animation even on mid-range devices. The rule: animate only transform and opacity in production code. Use transform: translateX() instead of left; transform: scale() instead of width and height; opacity for fade effects. This single rule eliminates the majority of animation performance issues in our audits.

prefers-reduced-motion: the accessibility requirement most motion-heavy sites ignore

The prefers-reduced-motion CSS media query detects users who have requested reduced motion in their operating system accessibility settings — primarily users with vestibular disorders, epilepsy, or motion sensitivity. WCAG 2.2 Success Criterion 2.3.3 requires that animation triggered by interaction can be disabled. The implementation is straightforward: in your global CSS, add a @media (prefers-reduced-motion: reduce) block that sets all animation durations to 0.01ms and removes transition properties. Do not remove all motion entirely — some state change indication is still required — but collapse all decorative and entrance animations to instant. In our site audits, 91% of sites with significant motion design do not implement prefers-reduced-motion correctly.

• Audit every animation on your site against the three legitimate motion jobs — remove anything that is only decoration.
• Animate only transform and opacity in production — never animate layout-triggering properties.
• Implement prefers-reduced-motion in your global CSS today if you have any entrance or continuous animations.
• Build a motion spec document alongside your colour and typography specs — easing curves, duration scale, and approved animation patterns for each interaction type.