Webサイトの「動き」はどこまで必要？時代は繰り返す。2026年のモーションデザインとUX - アニメーションがCVRと表示速度を阻害する理由 -

スクロールするたびに要素がフワッと出る。画面を替えるたびに長いローダー。それはユーザーのためか、カンプを賑やかにするためか。意識していない意図が混ざっていることがあります。ブランディングや演出が目的のサイトでは、動きそのものが価値になることもあります。成果（問い合わせ、購入、速度）が必要とされるサイトでは、演出のための待ち時間は、原則として必要とされません。足す理由が「状態が変わったと伝える」以外なら、外す候補。それが実務の境界線です。

結論です。2026年に「機能的モーション以外は禁止」という公式見解はありません。求められることが多いのは、UX を補う最小の動きです。CVR と表示速度を破壊する、と断定できるデータはこのブログにはありません。起きやすいのは、本文が見えるまでイージングを待たされること、装飾の動きに視線が取られること、スクロールと描画がぶつかることです。

この記事では、フリーランスのWebディレクター兼エンジニアとして、要る動きと、害になりやすい動きの境界を整理します。Flash 全盛を知っているからこそ、アニメーションの弊害を知らない人たちに伝えたい。業界で繰り返された事例として書きます。架空の CVR 改善％は出しません。

Flash サイトを知っていますか？

2010 年前後、バナーやサイト導入によく使われた Flash が廃止されていきました。理由はいくつもあります。iOS が Flash を載せず、セキュリティと終了宣言が重なり、Adobe は 2020 年末に Flash Player の配布を終了しました。その前後には、「導入アニメを見てから中身が表示される」という過程がユーザーに嫌われた、という現場の記憶があります。
不満爆発、という具体的な比率・人数は出しません。待たされて離脱する、は今も観測できます実例です。

現代の IntersectionObserver や JS のアニメーションライブラリは、Flash と同じ技術ではありません。同じストレスになり得るのは、見たい文が、表示領域に入ってから数百分の一秒〜1秒以上、透明のままになることです。高速スクロールで発火が追いつかず、真っ白に近いブロックが残る、は実装でよくある事例です。乱用が必ず同じ結果、ということではありません。初期状態を opacity: 0 にした要素（透明にする）を、交差する（画面内に入る）まで戻さない（表示させない）、とその状態になります。

「とりあえず動かす」が成果を下げやすい理由

壊れてる、バグ、とはここでは使いません。

1. イージング待ちで、情報が遅れる

読みたい見出しが、フェードの終わりまで操作できない。装飾の 400ms が、ファーストビューに 5 ブロックあると、体感は足し算になります。悪手、は「本文より演出が先」のときです。

2. CTA と本文から、視線がずれる

動くものは目に入りやすい。意図した誘導なら、ボタンのホバー程度に留める。背景の粒子や、全セクションのスライドインは、メッセージより先に動きが残ることがあります。伝わらない、という確証ではありません。実際に動きを追加しているもの、動きを削除したものをA / Bテストで測定することで、動きの有無による影響を評価することができます。

3. モバイルのスクロールと、描画

レイアウトを毎フレーム変える、大きな box-shadow をアニメする、はメインスレッドと合成に乗りやすい。カクつきとバッテリーを許容するなら実装しても良い。でもユーザー端末に制限をしたくないならどこまで実装するか検討が必要です。必ずジャンクする、とは言いません。transform と opacity など、アニメーションの量・数を減らす、が負荷低減に繋がるという話です。

4. Core Web Vitals との関係

LCP の対象が、最初 opacity: 0 だと、大きく塗られるタイミングが遅れます。直接ダメージ、は条件付きです。INP は、スクロールやクリックと同じタイミングで重い JS が走ると悪化し得ます。SEO の順位が必ず落ちる、とは言いません。

実装：削るものと、残すもの

IntersectionObserver を、白紙の原因にしない

交差してから見せるなら、未交差でも中身の高さは確保する。テキストを透明にするだけにし、レイアウトは先に置く。閾値を厳しくしすぎない。一度出したら戻さない（unobserve）。「画面に入るまで DOM を空」は、真っ白の原因になりやすい。

prefers-reduced-motion を、例外にしない

OS で視覚効果を減らしている人向けの機能があります。酔い、前庭感覚【バランス感覚（平衡感覚）】の過敏、集中のしやすさ。必須かどうかは法令の一文ではなく、WCAG の動きに関する達成基準と、実在する設定です。

@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;
  }
}

全称セレクタは雑です。本番では、動かすクラスにだけ当てる方が安全です。0.01ms は、duration 0 で発火しない実装への回避としてよく使われます。状態変化の結果（開いた・閉じた）は、動きを切っても残す。

機能的モーションに絞る例

アコーディオンの開閉、メニューの出入り、ボタンの押下、フォームのエラー表示、スケルトン（まだ来ない領域の予約）。マイクロインタラクションは、フィードバックがあるもの。ページ全体の入場アニメ、ローダーを 2 秒固定、スクロール連動のパララックス重ね、は候補から外して理由を書く。

演出優先と、速度・操作優先

読み込みは、画像と JS の量と、初回に動かす範囲。CVR は、この対比だけでは決まりません。滞在のストレスは、待ちと、誤タップ。アクセシビリティは、動きを切れるか、フォーカスが見えるか。前者は「着いてから中身」、後者は「着いたら中身がある」。どちらが正しいかではなく、サイトの目的で選ぶ。選んだら、見積もりとカンプに書く。

要・不要の判断表

企画とデザインの段階で、エンジニアとデザイナーが同じ表を見るためのものです。2026 年版という公式フローではありません。

まとめ：動きは、状態の説明である

装飾として足す前に、何の状態を説明するかを書く。削ぎ落としたデザインが最高のパフォーマンス、とは限りません。計測していない速度と CVR を、動きの有無だけで語らない。補助として残すなら、切れることと、待たないことを先に満たす。

表示の待ち、スクロール演出、Core Web Vitals を見ながらの改修の相談は、相談・お問い合わせからどうぞ。