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

手法

常にどこかで動画が動いているギャラリー型LP。ヒーローの見出しの下には高さ違いの動画タイルを3枚並べ、機能カードの見出し直下にも同じ手法でループ動画を差し込んだ。CTA手前には13秒3カットのリール動画を、劇場のように余白を広く取った大画面で置く。動画は7本すべてffmpegで手元素材から書き出したもので、静止画に頼る場面をページのどこにもつくらない構成にした。

なぜAI感が消えるのか

1. 生成AIがヒーローに置くのは静止画1枚か、せいぜいCSSのケンバーンズ（背景画像をゆっくり拡大する演出）止まりが多い。ここでは3枚の動画タイルが同時に、しかも別々の周期で動いている。手の動きとスクロールのタイミングが完全に一致することはないので、この「そろわなさ」自体が実写の証拠になる。
2. 動画の被写界深度――手前の積み木にピントが合い、背景の付箋ボードがわずかにぼける現象――は光学的に生まれるもので、画面全体にfilter:blur()をかけても再現できない。ピントの合う面が奥行きに応じて連続的に変わる仕組みは、レンズを通した実写にしか宿らない。
3. 手ブレも同じ理由で合成が難しい。三脚固定でない手持ち撮影には、フレームごとに数ピクセル単位で揺れる不規則な軌跡が乗る。CSSのtranslateアニメーションで真似ようとすると一定周期の反復になりやすく、逆に作り物だと気づかれる。
4. 機能カードでは、ボードビュー・自動リマインド・週次レポートという3つの説明文の直上に、対応する手元の動きを置いた。静止画のスクリーンショットは「操作した結果」しか見せられないが、動画は「操作している最中」まで見せられる。この差がテキストと映像の結びつきを強くしている。
5. IntersectionObserverで画面外の動画をpause()しているのは演出だけの都合ではない。7本を常に再生し続けると通信量とバッテリーへの負荷が無視できず、見えている分だけ動かす制御そのものが、このデザインを成立させる条件になっている。

向いている場面

実写の質感がそのまま売り物になるプロダクトに向く。チームの作業風景や現場の手元を見せたいSaaS、撮影素材を潤沢に持つブランドとは相性がいい。逆に、通信環境が不安定なユーザーが多いサービスや、そもそも動画素材を持たないプロジェクトには不向きだ。7本の動画は合計で数MBの追加読み込みになり、バッテリー消費もテキストと画像だけのLPより確実に増える。prefers-reduced-motionでポスター画像に切り替える設計は入れているが、それでも初回読み込みの重さそのものはなくならない。