動きのあるLP制作を外注する前の準備リスト

「競合のLPは写真がふわっと出てきたり数字が動いたり、うちのLPは静止画のまま…」そんな焦りを感じて見積もりを取ってみたら、会社によって金額が3倍も違った、という話をよく伺います。差が出る原因のほとんどは、発注側の準備不足で「何をどこまで動かすか」が曖昧なまま見積もられていることです。

ここでは、動きのあるLP制作を外注する前に、社内で決めておくべきことを順番に整理します。

まず「動かす目的」を1行で決める

アニメーションは目的が無いと工数だけが膨らみます。発注前に、次のどれに当たるかを1行で書き出してください。

• 視線誘導：長いLPで離脱させず、次のセクションへ送りたい
• 信頼感の演出：実績数や導入社数を印象づけたい
• 理解促進：ビフォーアフターや仕組みを動きで説明したい
• ブランド表現：高級感・遊び心など雰囲気を伝えたい

たとえば「スクロール中の離脱を防ぐ」が目的なら、セクションの頭でカードがふわっと出る程度で十分です。実際に動くとこうなります。

逆に「実績数を印象づけたい」なら、数字そのものが動く演出が効きます。

この2つを見ただけでも「うちはこっち」と判断できるはずです。口頭の「いい感じに動かして」を、参考URLか具体名に変換しておくだけで見積もり精度は大きく上がります。

構成：セクションごとに動きの優先度をつける

LP全体を均等に動かす必要はありません。下のような表を作って発注書に添付すると、制作会社と認識がそろいます。

A＝必須、B＝予算が合えば、C＝不要。この3段階があるだけで、予算オーバー時の削り所を制作会社が自分で判断できます。

素材：解像度と尺を先に決める

動きのあるLPは、素材要件が静的なLPより厳しくなります。発注前に次を確認してください。

• ファーストビュー画像：横幅2000px以上。ズーム演出をかけると端が切れるため、被写体の周囲に余白のある写真を選ぶ
• ロゴ：SVGまたはAI形式。PNGだと拡大アニメーションで粗くなります
• 動画を使う場合：10秒以内・ループ前提・音声なし。MP4で5MB以内を目安に
• テキスト：キャッチコピーは20文字前後。1文字ずつ表示する演出は長文だと待たされて逆効果です
• 数値データ：「導入120社」など、確定した数字を発注時点で確定させる（後から変わると再調整が発生）

素材が揃わないまま着手すると、仮素材での実装→差し替え→崩れの修正、と二度手間になります。

納期：アニメーション分の検証期間を足す

静的LPの感覚で組むと必ず押します。目安として、デザイン確定後に以下を見込んでください。

• 実装：静的LPの工数＋3〜5割
• 動作検証：3〜5営業日（iOS Safari、Android Chrome、Windows の各ブラウザ）
• 修正反映：2〜3営業日

特にスマホでの検証は必須です。スクロール連動の演出は端末によって動きが変わるため、公開日の直前に全部まとめて確認、という進め方は避けてください。

発注書に書くと話が早い一文

【動きの方針】
・FV：背景ズーム（6秒ループ）
・実績：数字カウントアップ（0→120、1.5秒）
・事例：スクロール時に下から順次フェードイン（0.1秒ずつ遅延）
・prefers-reduced-motion 対応を希望
・対象ブラウザ：iOS Safari最新2バージョン / Android Chrome / Edge

最後の prefers-reduced-motion は、動きを控えたい設定のユーザーにアニメーションを止めるOSの仕組みです。一文入れておくだけで配慮あるLPになります。

言葉で伝わらないときは「動いている実物」を見せる

ここまで整理しても、「ふわっと」「シュッと」の感覚は言葉では伝わりません。参考サイトのURLを集めるのが王道ですが、該当箇所をピンポイントで指し示しにくいのが難点です。動く部品を単位ごとに見比べたい場合は、motionAETHERのカタログ（ https://aether.novamor.jp/demo/index.html ）のように500点の実演を無料で閲覧できる場所もあります。「この動きの、速度だけ半分で」と伝えられれば、打ち合わせは一気に短くなります。

まとめ

動きのあるLP制作の成否は、発注前の1時間で決まります。目的を1行で書く → セクションごとにA/B/Cの優先度をつける → 素材要件を確認する → 検証期間を納期に足す。この4つをまとめた1枚を用意して、見積もり依頼に添付してみてください。