AIにLPの動きを頼むときは「何が・いつ・どう動くか」の3点で伝える

どんな問題を解決するか / いつ使うか

AIでLPを作ったが、動きの入れ方が分からずに止まっているとき。「パララックス」「スタッガー」などの用語が出てこないとき。用語で指示できる人は スクロールアニメーションは「10の用語」で指示する と組み合わせると精度が上がる。

やり方

1. 動かしたい場所ごとに、次の3点を1文にする。
   • 何が：数字、スタンプ画像、カード、背景、縦書きの文字…
   • いつ：時間で（自動）／押したら／スクロールで
   • どう動くか：数え上がる、1枚ずつ入れ替わる、ランダムに変わる、はじかれる、色付く…
2. 投稿で実際に使われた指示の例（要約）：
   • 「数字部分はカウントアップで装飾的に」→ 数字が数え上がる
   • 「時間で自然にスタンプが入れ替わるイメージ」→ ファーストビュー下の帯が1枚ずつ入れ替わる
   • 「押したらランダムで変わるボタンにしよう」→ 押すたびにスタンプが切り替わる
   • 「縦書きの文字が色付く、背景は進行に応じて変化」→ スクロールで物語が色付き、背景が移り変わる
3. 初稿を見たら、気になった所をその場で言葉にして返す（例：「枠が多すぎる」「ローディングはもっと縦に動きを」）。この往復を繰り返して仕上げる（投稿では初稿から完成まで約1時間40分）。

注意点

• 動きを足しすぎると情報が読みにくくなる。prefers-reduced-motion で止められるようにすることも指示に入れる（ガイド：CSSで作る動き（アニメーション・インタラクション） を参照）。
• スクロール連動は端末によって重くなることがある。スマホ実機で確認する。
• 「いつ」が抜けると、AIは読み込み時に一斉に動かしがち。きっかけは必ず書く。

出典

• 投稿者: @tatsu_studio
• 投稿: @tatsu_studio · 2026-10-12（指示の例: @tatsu_studio · 2026-10-12）
• 収集日: 2026-10-13（JST）