「ホバーでふわっと動かしてほしい」と伝えたのに、上がってきたものがイメージと全然違う——Web制作を外注した経験がある方なら、一度は味わう失敗ではないでしょうか。特にアニメーションは言葉で伝わりにくく、修正のたびに工数も費用も膨らみます。この記事では、Webアニメをフリーランスに外注するときの準備物・指示書の書き方・トラブル回避策を、実務で使える形でまとめます。
依頼前に揃えておく5つの準備物
見積もり依頼の前に、最低限これだけは手元に作っておきます。ここが曖昧なまま相見積もりを取ると、金額が3倍ほどブレて比較になりません。
- 対象ページのURLまたはワイヤーフレーム（どの要素を動かすのか）
- 参考サイトのURL 3件（「この動きの、この部分だけ」とパーツ単位で指定）
- 動かしたい理由（回遊率を上げたい／商品の質感を伝えたい など）
- 実装環境（WordPress・Shopify・静的HTML／既存のJSライブラリの有無）
- 納期と予算レンジ（「15万円前後」でも可。レンジ提示があるほど提案が具体化します）
参考サイトは「おしゃれだから」ではなく「動きの種類が近いから」で選ぶのがコツです。デザインの好みと挙動の指定を混ぜると、フリーランス側が優先順位を判断できません。
指示書は「要素・きっかけ・変化・時間」の4点セットで
アニメの指示は、次の4つが揃っていれば8割は伝わります。口頭やチャットで散発的に伝えず、1枚のドキュメントにまとめてください。
| 項目 | 書き方の例 |
|---|---|
| 対象要素 | トップページの実績カード（3枚） |
| きっかけ | 画面内に30%入ったとき（1回のみ） |
| 変化 | 下から20px上昇＋透明度0→1 |
| 時間・イージング | 0.6秒 / ease-out / 0.1秒ずつ遅延 |
数値まで書くと、認識のズレがほぼ消えます。実装者に渡す補足としてCSSの擬似コードを添えるのも有効です。
/* 依頼側イメージ（実装方法は制作者にお任せ） */
.card {
opacity: 0;
transform: translateY(20px);
transition: opacity .6s ease-out, transform .6s ease-out;
}
.card.is-visible { opacity: 1; transform: none; }
たとえば「ホバーしたらタイルが起動する」と文字で書いても伝わりにくいのですが、実際に動くとこうなります。
このように動く見本を1つ添えるだけで、やり取りの往復が目に見えて減ります。
数字を見せる演出も指定の仕方で変わる
実績数値をカウントアップさせる定番演出も、「何秒かけて」「何回動かすか」で印象が変わります。
指示書には「2秒・1回のみ・小数点なし」のように書いておくと、再生のたびに動いてうるさい、といった事故を防げます。
トラブルを防ぐ契約・進行のルール
- 修正回数を明記する：「ラフ1回＋実装後2回まで、以降は1回○円」と最初に決める
- 検収環境を統一する：確認用URLを用意し、Chrome最新・iOS Safariなど対象ブラウザを事前に合意
- パフォーマンス条件を入れる：「LCPは2.5秒以内」「追加JSは合計100KB以内」など測定可能な基準で
- 著作権と納品物の範囲：ソースコード一式の受け渡し、使用素材のライセンス確認
- prefers-reduced-motion対応：動きを抑える設定のユーザーへの配慮も1行入れておく
支払いは着手金50%・納品時50%が一般的です。初回取引なら、小さなページ1本から試すと相性を見極めやすくなります。
言葉で伝わらないときは「動く実例」を見せる
それでもイメージ共有に詰まったら、動くサンプルを一緒に眺めるのが最短です。Webパーツ集のmotionAETHERのカタログ（ https://aether.novamor.jp/demo/index.html ）では500点の動きが実際に動く状態で無料閲覧でき、「この挙動の、この速度で」と指差しで伝えられます。社内の合意形成にも使えます。
まとめ
Web制作の外注でフリーランスとうまく進める鍵は、準備物を揃え、4点セットで数値指示し、修正回数を先に決めること。まずは参考になる「動き」を3つ集めて、指示書の1行目を書くところから始めてみてください。