🎯 LANDING動く3Dは通常LPより高単価を狙える⏱ 実働 5時間
動く3Dサイト：視線追従＋スクロール進入（自作デモ）
マウスで目線が追う・スクロールでシーンの中に入る・マグネティックUI。画像→Klingアニメ→動く3Dサイトの見本。
実物を見る ↗// HOW IT WAS BUILT
- 01ChatGPT / Nano Banana でヒーロー画像（製品＋背景のみの2枚）を生成
- 02Kling 3.0 に画像＋プロンプトを入れて 5〜12秒のアニメ動画を生成（perfect loop）
- 03動画を背景に敷き内側グラデマスク／重い動画はEZGIFで連番JPG化しスクロール同期
- 04マウス追従（Look At）・マグネティックUI・スクロール進入をコードで実装
- 05prefers-reduced-motion／WebP・WebPで軽量化 → Vercelで公開
// TOOLS USED
// この作例について
この作例の作り方は全文を無料公開しています（上記）。さらに受注テンプレ・制作プロンプト集・納品チェックまでまとめた完全版は下記の実践パッケージへ。
// 作り方を完全版で
このクオリティを“作って納品”できるようになる
受注テンプレ・制作プロンプト集・納品チェック・月額保守まで、再現手順を実践パッケージにまとめています。