手前と奥の最大ずれ幅: 21px。0%だと全レイヤーが同じだけ動いて平面のまま。上げるほどライムのバッジとダストが背景を追い越し、奥行きが立ち上がる。
動き自体はどれも数行で書ける。差がつくのはイージングと、いま触った「奥行き」のような重ね方だ。この記事はその引き出しを、reveal・スクロール連動・ホバー・背景演出と順番に開いていく。
スクロール演出の技法（reveal / parallax）
要素が画面内に入ったタイミングでフェード・上昇させる「reveal」と、スクロール量に応じて背景と前景の速度差をつける「parallax」が二大技法。revealは IntersectionObserver（またはCSSのanimation-timeline: view()）で発火させ、要素は50〜70%重ねて連続して現れるようにすると「紙芝居」にならない。
重なり率を0%にすると1枚ずつ止まる「紙芝居」、55%以上にすると次のカードが前のカードの途中で動き出して連続に見える。下のタイムラインで区間が重なるほど、視覚的にはなめらかになる。本文で言う「50〜70%重ねる」は、この区間をどれだけ重ねるかを指している。
発火区間の外ではクランプされて動かず、区間内だけを0→1に読み替えて補間する。これがanimation-timeline: view()やScrollTriggerの scrub が内部でやっていること。
スクロール連動（scrub）は時間ではなく「進捗→状態の写像」。発火区間の外ではクランプされて動かず、区間内だけを0→1に読み替えて補間する。これがanimation-timeline: view()やScrollTriggerのscrubが内部でやっていること。
背景演出（シェーダー・パーティクル・流体）
WebGLシェーダーで流体風のノイズ背景を敷く、Canvas 2Dでパーティクルを漂わせる、という2系統がある。どちらも主役はDOM側のコピーで、背景は「主張しすぎない質感」として使うのが実例に共通する。金融・保険など信頼系の業種ではWebGL自体を避け、CSSのみで質感を出す方が実例上も適合する。
密度と速度を上げるほど背景が前に出てくる。「主張しすぎない質感」に留めるとは、このつまみをどこで止めるかという引き算の判断。
いま動かしたのがCanvas 2D系の背景演出。密度と速度を上げるほど、背景がだんだん前に出てくる。「主張しすぎない質感」に留めるというのは、このつまみをどこで止めておくか、という引き算の判断だ。
主張度の目安: ほどよい質感。粒状感とアクセントを上げるほど背景が前に出る——信頼系ではこのつまみをどこで止めるかが引き算の判断。
これはWebGLを使わず、グラデーションと粒状ノイズだけで奥行きを出した背景。金融・保険など信頼系ではこの「CSS的な質感」に留めるのが実例上も適合する。粒状感とアクセントを上げすぎると「主張しすぎ」に振れるのが体感できる。
ホバー・マイクロインタラクション
ボタンやカードのホバーは「行き」と「戻り」でイージングを変えるのが定石（行き: power2.out、戻り: power2.out〜elastic.out）。画像のホバーで歪ませる「distortion」はWebGLが要るが、単純な持ち上げ・影の強調はCSSのtransitionだけで十分な質感が出せる。
行きをpower2.out、戻りをelastic.outにすると、「素直に持ち上がって、最後に少し弾んで戻る」定石どおりの動きになる。両方をlinearに変えると手触りが一気に平板になり、質感がイージングだけで決まっているのが体感できる。
指をステージに置くとピンクのカーソルが追い、CTAが吸い付く。磁力を上げるほど気持ちいいが、引き寄せが26pxを超えるとボタンが指の真下から逃げて「命中」しにくくなる——その手前が効かせどころ。
カーソルや指に吸い付く「磁石ボタン」も定番。本体より内側のラベルを控えめに動かすと奥行きが出る。ただし磁力を上げると、ボタンが指の真下から逃げてしまう。気持ちよさと押しやすさが入れ替わる、その手前がホバー演出の効かせどころだ。
業種別の演出Tier設計
演出強度は業種と相関する。3Dオブジェクトが主役の「Tier A」はブランド特設向き、シェーダー背景でDOM中心の「Tier B」はスタートアップ・LP向き、GSAP+clip-pathのみの「Tier C」は金融・保険・医療などの信頼系業種向き、動きを最小限にする「Tier D」は老舗・高級路線に向く。まず業種からTierを決め、そこから技法を選ぶ順番を守ると過剰演出を避けられる。
スタートアップLP → 推奨 Tier B（勢いと今っぽさ）
業種を選ぶと推奨Tierと技法、そのプレビューが切り替わる。金融・保険に「Tier Aで上書き」を掛けると過剰演出の警告が出る。技法から入るのではなく、まず業種でTierを決めてから技法を選ぶ。その順番を守れば過剰演出は避けられる。
実装スニペット集
rAFはGSAPのgsap.tickerに統一し、Lenis（スムーズスクロール）のスクロールイベントをScrollTriggerに同期させるのが土台になる。この土台を作らずに個別のライブラリがそれぞれrAFを持つと、スクロール連動がガタつく原因になる。
3点を結ぶ線が一直線なら視差が保たれている状態。バラバラだと線が折れて震え、これがスクロール連動の「ガタつき」。
rAFを1本に統一すると全レイヤーが同じ瞬間の値を読むので、視差の比率が保たれて3点は一直線に動く。各ライブラリが別々にrAFやタイマーを持つと、読む瞬間がずれて線が折れ、小刻みに震える。本文でいう「ガタつき」は、この位相のズレから来ている。
最後に、どのTierでも共通の下地がprefers-reduced-motionへの対応。演出を止めても情報とCTAが等価に読める設計にしておく。
季節限定コース
秋の味覚を一皿ずつ
9月30日まで・オンライン予約
予約する「フル演出」は各行が時間差で立ち上がりCTAが弾む。「動きを減らす」に切り替えると、消えるのは演出だけ——見出し・本文・予約ボタンはどちらでも等価に読めて押せる。
動きを減らすと、派手な入場演出は短いフェードに変わる。それでも見出し・本文・予約ボタンは、どちらのモードでも同じように読めて押せる。下のプロンプトの「演出を止めても情報が読める設計」が指しているのは、この等価性だ。
AIに投げるプロンプト例
Webサイトのヒーローセクションにスクロール演出を追加したいです。 業種は金融系で、信頼感を損なわない上品な動きにしてください。 - GSAP + ScrollTrigger + Lenis の構成で、rAFは1本に統一する - 見出し・画像・補足テキストを50〜70%重ねてrevealする - WebGLは使わず、clip-pathとフェードのみで実装する - prefers-reduced-motionで演出を止めても情報が読める設計にする