チームのタスクを、
積み木のように。

手法

ヒーローの背景をCSSのグラデーションではなく、13秒・3カットのクロスフェードリール（hero-loop.mp4）に置き換えた。<video>にautoplay muted loop playsinlineを指定し、object-fit:coverで画面いっぱいに敷いたうえで、二層のグラデーションスクリムを重ねて白文字の可読性を確保している。機能紹介の3行は左右交互のレイアウトにして、各行の右または左に10秒級のループ動画（積み木の手元・付箋ボード・カンバン画面）を差し込んだ。前進+逆再生で撮った素材のため、ループの継ぎ目にジャンプカットが出ない。CTA直前には窓際オフィスの動画を幅広のバンドで敷き、静止画では出せない室内の空気の揺らぎをそのまま見せている。

なぜAI感が消えるのか

1. 静的な背景画像なら1枚のJPEGで済むところを、13秒のクロスフェードリールにした。CSSのlinear-gradientは色相と角度で階調を作るが、実写の映像は光源の位置と被写界深度が時間とともに変化し続ける。カメラのピントが手前から奥へ移るだけで、テンプレのヒーロー画像には出ない奥行きが生まれる。
2. 機能紹介の3行それぞれに専用のループ動画を割り当て、10秒の尺を前進再生と逆再生でつないだ。単純なloop属性だけでは最後のフレームから最初のフレームへ戻る瞬間に画がずれるが、逆再生素材を使うことでそのジャンプが起きない。見ていても、どこがループの継ぎ目か分からない。
3. IntersectionObserverでvideo要素の再生・停止を画面内外に応じて切り替えている（threshold: 0.2）。ページを開いた瞬間に全部の動画が一斉に動き出すのではなく、スクロールして視界に入った行の動画だけが再生を始める。動きに主従がつく。
4. prefers-reduced-motionが有効な環境ではJavaScript側でautoplay属性を外し、全てのvideoをposterの静止画表示に切り替えている。CSSのメディアクエリでアニメーションを止めるだけでなく、動画そのものの再生を止める設計にした。
5. ヒーローの下に二層のグラデーションスクリム（縦方向の暗転と、中心を抜いた放射状のビネット）を重ね、白文字の視認性を確保しながら映像の質感を消さない濃度に調整した。ベタ塗りの半透明パネルでテキストを乗せるやり方より、映像との境界がなめらかになる。

プロダクトの現場に本当に人がいて、実際に手を動かしている実感を見せたいときに向く。人材紹介・研修会社・オフィス系SaaS・不動産の内見のように、空間や人の動きそのものが商材の一部になる領域と相性がいい。一方で、回線が細い環境や、SNSのOGP画像・スクリーンショットのように静止画で共有される場面では動画の効果がほとんど伝わらない。撮影素材の用意が要る分、量産のスピードでは画像だけのLPに劣る。