スクロールで動くサイトは安く作れるようになりました。成果を分けるのは表示速度と動きの設定です

カーソルを重ねると、人物の写真が金属の彫刻に変わる。スクロールすると製品が回転する。ページを進めるたびに、カメラが一コマずつ奥へ入っていく。こうしたサイトは、3Dの予算をかけた制作会社の仕事に見えます。

実際の仕組みは、多くの場合もっと単純です。動いているのは5秒から8秒ほどの短い動画一本で、訪問者がどこまでスクロールしたかに応じて、表示するコマを選んでいるだけです。位置を揃えた静止画二枚とマスクだけで作られているものもあります。動画は生成AIで数分で作れ、ページのコードはAIのコーディングツールが書きます。

つまり、作るコストは大きく下がりました。ただ、そのサイトが役に立つか、逆に足を引っ張るかを決める二つの条件は、以前と同じです。

一つ目の確認：主要コンテンツが2.5秒以内に表示されるか

Googleは読み込みの速さを Largest Contentful Paint（LCP）で測っています。最初の画面で最も大きな画像、動画、テキストのかたまりが表示されるまでの時間です。web.dev のガイドでは、良好な水準を2.5秒以下としています。測定は実際のページ読み込みの75パーセンタイルで、モバイルとデスクトップは別々に数えます。

Google 検索セントラルも、検索で成果を出すために Core Web Vitals を良好な水準にすることを強く推奨すると明記しています。

スクロールで動かす動画は、この目安と相性がよくありません。どのコマにも瞬時に移れるよう、すべてのコマを完全な一枚の画像として保存する形式で書き出すため、通常の再生用に書き出した同じ動画より、ファイルがかなり重くなります。その動画が最初の画面で一番大きな要素なら、訪問者も測定も、その読み込みを待つことになります。

対策は定番で、費用もかかりません。

• 最初のコマを静止画として先に読み込み、動画の代わりに表示する
• 動画は短くし、映画館ではなく背景に合ったサイズにする
• 動画はページが使える状態になってから読み込み、回線の遅いスマートフォンでは静止画のままにする

二つ目の確認：動きを止められるか

スクロールに連動した大きな動きは、前庭障害のある人にめまいや吐き気を起こすことがあります。WCAG 2.2 の達成基準 2.3.3「インタラクションによるアニメーション」は、操作をきっかけに起きる動きのアニメーションは、機能や伝える情報に不可欠な場合を除き、無効にできることを求めています。

この基準はレベルAAAです。EUの EN 301 549 や日本の JIS X 8341-3 など、多くの規格が目標にしているレベルAAには含まれません。それでも、対応の手間が最も小さい項目の一つです。

OSにはすでに「視差効果を減らす」「アニメーションを減らす」といった設定があり、ブラウザはそれを prefers-reduced-motion としてページに伝えます。W3C の Media Queries Level 5 で定義されている仕組みです。これに応じるサイトなら、最後のコマを静止画で見せ、文字はそのまま、何も動かない落ち着いた版を表示できます。訪問者がスイッチを探す必要はありません。

検索エンジンも見ている三つ目の点

動画の中に描き込んだ文字は、検索エンジンにも、ウェブサイトを引用するAIアシスタントにも、スクリーンリーダーにも読めません。見出し、会社名、提供しているサービスは、動画の上に重ねた本物のテキストとしてページに残す必要があります。

制作を頼む相手に聞くこと

1. 通信速度を絞った中価格帯のスマートフォンで、最初の画面の主要コンテンツが表示されるまで何秒かかるか
2. 動画の容量はどれくらいで、読み込み中は何が表示されるか
3. OSで動きを減らす設定にすると、ページはどう見えるか
4. 見出しや本文は、すべてHTMLの本物のテキストになっているか
5. スマートフォンを縦に持ち、親指で速くスクロールしても問題なく動くか

答えがはっきりしていれば、その演出はブランドのために働いています。そうでなければ、提案の場では見栄えがしても、実際に使う人の手の中では遅いサイトになります。