スクロールに合わせて写真や文字が現れるLPを見ると、自社の紹介にも動きを付けた方が伝わるのでは、と考えることがあります。ただ、動きが多いほど読まれる、問い合わせが増える、という関係はこのページで示せる資料がありません。まずは伝える内容を決め、動きがなければ理解しにくい関係だけに使うかを判断します。
スクロールアニメーションは、ページを下へ進める操作に応じて、要素の位置や見え方を変える表現です。工程の順序や、製品が組み上がる過程を示す助けになることがあります。一方、会社名、特徴、料金の条件、連絡先など、読み手が立ち止まって確かめたい情報まで動きの途中に隠す必要はありません。
先に、静止した画面だけで話が通るか確かめる
制作を始めるときは、見出し、説明文、写真、図、行動先を動かさずに並べた画面を作ります。読者が最初に知りたいこと、比較するときに戻って見たい条件、相談に進む前に確かめたい証拠が、スクロールの途中でも読めるかを見ます。静止した画面で何を伝えるか決まっていなければ、出現順や移動量だけを調整しても説明は明瞭になりません。
例えば、工業製品の組立工程を紹介する仮のLPなら、完成品の用途、構成する部品、工程ごとの変化を先に文章と写真で示します。そのうえで、部品がどの順に重なるかを一つの動きで示すと理解が進むのか、横に並べた連続写真で十分かを比べます。図面や作業条件を公開できるかは事業者側の確認事項です。
動きを使う理由を、場面ごとに一文で書く
動きを採用するなら「見栄えをよくするため」だけでなく、「前の工程と次の工程の関係を追いやすくする」など、読み手が得る情報を明らかにします。スクロールすると複数の部品が重なり、完成後の位置が分かる演出は、構造の説明に役立つかもしれません。背景の模様が横へ流れるだけなら、主な説明を読む妨げになっていないか確かめます。
LPのすべての節を動かす必要はありません。要点や証拠となる資料へのリンク、問い合わせの入口は、動作が終わるまで読めない状態を避けます。ユーザーが途中からページを開いた場合、戻って読んだ場合、速くスクロールした場合にも、文字やボタンが見失われないかを試します。スマートフォンでは画面が狭いため、装飾の移動と本文の上下移動が重なったときの読みやすさも確認します。
動きを減らしたい人にも、同じ内容を渡す
W3Cの「操作によって始まるアニメーション」に関する解説は、スクロールに伴う不要な移動が一部の人の不調につながり得ることを説明し、必要でない動きを止められる方法を示しています。これはWCAGのレベルAAAの達成基準についての解説であり、この一項目を扱うだけでLP全体が適合するという意味ではありません。
端末側で動きを減らす設定を選んでいる人には、prefers-reduced-motionを使って動きを減らす設計ができます。実装時には、アニメーションを止めた結果として本文が非表示のままにならないこと、工程の順序やボタンの行き先を静止した画面でも理解できることを確かめます。必要ならページ内にも動きを止める操作を設け、戻って読み直せるようにします。
制作範囲は、画面の数より動作条件で確認する
見積りを比べる際は、「スクロールアニメーション付きLP」という名称だけで作業を比べないようにします。どの節で何が変化するか、パソコンとスマートフォンで同じ動きを使うか、動きを減らす設定では何を表示するか、写真や図の制作が含まれるかを聞きます。原稿と静止画を生かし、一箇所だけ動かす案と、複数の場面を連動させる案では、設計と確認の範囲が異なります。
動く要素が多いと表示処理の負担も増えることがあります。Googleの描画性能の解説は、変更するCSSの種類によって、レイアウト・描画・合成に必要な処理が違うと示しています。特定の容量やフレーム数をすべてのLPの合格線にするのではなく、対象端末で文字の表示、スクロール操作、画像の読み込みを確認して調整します。
公開後は、動きそのものより読者の行動を見る
公開後に確かめるのは、最後までスクロールした人が増えたかだけではありません。読者が重要な説明へたどり着き、資料を開き、問い合わせなど次の行動へ進めたかを、設定済みの計測で見ます。スクロール量は参考になっても、内容を理解したことや相談の質をそのまま示す数値ではありません。
既存LPを改修するなら、変更前の画面と計測条件を保存し、動きを加えた箇所、原稿を直した箇所、案内先を変えた箇所を分けて記録します。複数を同時に変えた場合は、数字の増減をアニメーションだけの効果と断定しません。そもそも何を伝えるか曖昧なページなら、まず見出しや根拠資料を整える選択もあります。
Bämのサービスサイト・LP制作案内では、事業や商品を理解するための原稿、画面、行動への流れを整理します。動きを検討する際は、伝えたい工程や比較項目、使える写真・図、公開できる条件、静止画で示したい説明を持ち寄ると、必要な演出と制作範囲を具体的に相談できます。
スクロールアニメーションの採用や制作範囲を検討中なら、相談・お見積り窓口から、現在のページと伝えたい内容をお知らせください。必要な動きと制作範囲を確認してご案内します。
参考資料
- W3C：Understanding SC 2.3.3 Animation from Interactions
- MDN：prefers-reduced-motion
- web.dev：Rendering performance
- Bäm：サービスサイト・LP制作
資料確認日：2026年9月26日。組立工程の例は説明のための仮例です。
