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

手法

ヒーローとCTA帯以外に、本文の中に6枚の写真を重ねた1枚のsticky写真ステージを置いた。左側（モバイルは背面）に固定されたステージの上で、opacityの切り替えだけで写真が入れ替わる。右側（モバイルは前面カード）には「チームの1日」を追う6つのステップを並べ、IntersectionObserverが画面中央付近にあるステップを判定して、対応する写真にis-activeクラスを付け外しする。機能紹介の3つ（ボードビュー・自動リマインド・週次レポート）は独立したセクションを作らず、朝から夕方までの時間軸のステップの中に埋め込んだ。

なぜAI感が消えるのか

1. テンプレのLPは機能紹介を3カラムのグリッドで一括表示し、閲覧者は一度に全部を目に入れる。ここではrootMargin:"-45% 0px -45% 0px"を持つ1つのIntersectionObserverで、画面中央付近に来たステップだけを「現在地」として扱い、写真とテキストを同時に切り替える。3つの機能が同時に画面に見えることは一度もない。
2. 切り替えのタイミングを決めているのはCSSのtransitionでもsetIntervalでもなく、読者のスクロール量そのもの。opacity 1000msのtransitionは「動きの滑らかさ」だけを担当し、「いつ動くか」はスクロール位置に完全に委ねている。速く読めば数秒で6枚が切り替わり、立ち止まればその写真が長く画面に残る。
3. モバイルでは.story-stepsにmargin-top:-100svhを与えて、position:stickyの写真ステージの上にテキストカードを物理的に重ねている。グリッドを解いてブロック要素に戻し、負のマージンで押し上げるという組み方は、既製のページビルダーが標準では出さない実装。
4. 6枚の<img>は常にDOMに置いたまま、opacityの0/1だけを切り替えている。display:noneの付け外しやカルーセルライブラリの実装と違い、レイアウトの再計算が起きないため、切り替わりの瞬間にガクつきが出ない。
5. ボードビュー・自動リマインド・週次レポートという機能説明は、独立した「機能セクション」を作らず、朝・昼・夕方というチームの1日の中に順番に差し込んだ。ヒーロー→機能グリッド→料金という定型のリズムを、意図的に崩している。

ワークフローや1日の流れのように、時間軸に沿って理解するのが自然な商材に向く。逆に、価格や機能をまず一覧で比較したい訪問者には不向き。1つずつ開示する構成は「読む速度」を読者に強いるため、目当ての情報だけ拾いたい人にはむしろ遠回りになる。写真の枚数が多い分、回線が遅い環境では最初の数ステップで離脱される可能性も残る。