カーソルを目で追うキャラクターのLPは「Figma→向きごとの画像→動き→Claude Codeで追従」の4つの道具をつないで作る

1つのツールで全部作らず、見た目の方向・画像・動画・実装をそれぞれ得意なAIに分ける。カーソル追従は「向きごとの画像を切り替える」仕組みにすると作りやすい。

LPにキャラクターを置いて、マウスの位置に合わせてこちらを見てくるような「触って楽しい」演出を入れたいとき。3Dモデルを作らなくても、画像生成と簡単なJSで実現できる。海外のデザイナー（@desgnwitkinsley）が1人で作り、手順を公開した事例。

Figmaで見た目の方向を決める：配色、レイアウト、キャラクターの置き場所をラフで決める。
ChatGPTの画像生成で、キャラクターと「向きごとの画像」を作る：正面、左、右、上、下、斜めなど、見る方向だけを変えた同じキャラクターを作る。同じキャラクターに見えるよう、元の画像を参照に渡して向きだけ変えさせる。
Higgsfield で動きをつける：まばたきや呼吸のような小さな動きを動画にする（必要な場合）。
Claude Code でページとカーソル追従を作る。頼み方の例（補足・自分で組み立てた例）：
「キャラクターの中心からカーソルへの角度と距離を計算し、8方向の画像のうち一番近いものに切り替えて。切り替えは短いフェードでなめらかに。タッチ端末ではゆっくり左右を見回すアニメーションにして、prefers-reduced-motion のときは正面の画像で止めて。」