同じ構図の画像・深度マップ・動きの見本動画を1つのフォルダにまとめて渡し、Claude Codeにthree.jsのLPを組ませる

長いプロンプトで動きを説明するより、「完成画像＋深度マップ＋動きの見本動画」をファイルで渡し、プロンプトはファイル名で指すだけにする。最後はスクショで見比べて自分で直させる。

奥行きのあるパララックスや、場面が切り替わる演出のあるLPをAIに作らせると、言葉だけでは動きが伝わらず、何往復も直すことになりがち。デザインと動きの参考資料を画像生成・動画生成ツールで先に作れるときに使う。投稿者は「強い参考資料があれば、ほとんど手直しは要らなかった」と返信している。

素材をそろえる（投稿者は Figma Weave のキャンバス1枚でまとめて作成）
- ブリーフ1つから方向性を3案出し（例：水墨画・ネオンの夜・四季）、1つを選ぶ。
- 選んだ案を、構図を完全に同じにしたまま季節だけ変えて4枚作る（テキストの差し替え機能で季節の言葉だけ変える）。
- 4枚それぞれの深度マップを作る（Depth Anything など）。
- 動きの見本動画を2本作る（マウスで揺れるパララックスのループ、季節が切り替わる演出。Kling など）。
フォルダごとClaude Codeに渡し、ファイル名で指示する。プロンプトの要点：
- 「design-C-four-seasons.png を、HTML1ファイルの three.js のLPとして再現して」
- 「4枚の季節画像は構図がまったく同じ」と明記する
- 「深度マップでマウスのパララックスを付けて。動きは motion-parallax-loop.mp4 のように」
- 「季節をクリックしたら、深度マップを使って手前から奥へ新しい季節に塗り替えて。motion-season-wash.mp4 のように」
- 季節ごとの演出（花びら・ホタル・落ち葉・雪）を足す
- 「デザインと一致するまで、スクリーンショットで自分で確かめて直して」
作業の流れをツール側に残しておけば、次のページは新しいブリーフと写真から始められる。