Webサイトのアニメーション費用｜価格例と依頼前の5項目

Webサイトのアニメーション費用を調べると、画面を動かす仕組みやアニメ素材の形式など、聞き慣れない言葉が並びます。技術名だけで見積もりを比べるのは難しいですよね。最初に決めるのは、何を伝えたいか、どのページに動きを入れるかです。

この記事では、見積もりの範囲をそろえる5項目と、制作会社へ渡す依頼メモ、納品前の確認方法を紹介します。費用の平均額は掲載しません。作る素材や確認範囲が異なる見積もりを、同じ相場として比べられる根拠がないためです。

Webサイトのアニメーションは3種類｜見積もり前に整理

見積もりを頼む前に、Webサイトの動きを画面操作に反応する動き、スクロールに合わせる演出、再生する素材に分けて考えましょう。同じ「アニメーション」でも、必要な作業が変わります。

• ボタンや画面の反応
• スクロールに合わせる演出
• 動画やアニメ素材の再生

まずは、入れたい動きがどの種類に近いかを見てみます。

①ボタンや画面の反応

ボタンを押したときに色が変わる、メニューが開くといった画面操作への反応です。操作した結果がわかるので、利用者が次に何をすればよいかを伝えやすくなります。

たとえば、資料請求ボタンを押したあとに受付画面へ切り替わる、といった場面です。ここで必要なのが色の変化だけか、別の画面や説明表示まで含むのかを依頼時に分けておきます。

②スクロールに合わせる演出

ページを下へ送ると、文字や図が現れるようなスクロール連動の動きです。MDNによると、CSS（Webページの見た目を決める仕組み）の機能でスクロールの進みにアニメーションを結び付ける方法があり、JavaScriptを使わずに実現できる場合もあります。

MDNのスクロール連動アニメーションの説明では、ページのスクロールに合わせて動きを進める仕組みが紹介されています。ただし、使う機能によってブラウザーの対応状況は異なります。MDNの対応状況も確認し、対応していない環境では何を表示するかを依頼に含めましょう。

③動画やアニメ素材の再生

短い動画や、繰り返し動くイラストをページに置く方法です。動画やアニメ素材を作る工程と、できた素材をページで再生できるように組み込む工程は、別の作業として見積もると範囲がわかります。

生成AIで作った画像や動画を使いたい場合も同じです。素材の修正、ページへの配置、スマートフォンでの表示確認を誰が担当するかを聞いておきましょう。AIで動画を作る方法を知りたい方は、Remotionで動画を作る入門ガイドも参考になります。動画づくりと、Webページに動きを付ける作業は別々に整理できます。

Webサイトに動きを入れる前に決める3つ

動きの種類を選ぶ前に、誰に何を伝えたいかを決めます。目的が決まると、制作会社へ伝える内容も、完成後に確認する場所もはっきりします。

• 見た人にしてほしいこと
• 動きを入れるページ
• 動き始めるきっかけ

次の3つを、短い言葉で書き出してみましょう。

①見た人にしてほしいこと

目的は、動きそのものではありません。商品ページなら特長を理解してほしい、案内ページなら次の手続きを見つけてほしいなど、見た人に伝えたいことから考えます。

動きを付けた結果は、ページの内容や利用者によって異なります。問い合わせが増えるなどの効果を約束するのではなく、どの情報を見つけやすくしたいのかを依頼先と共有しましょう。

②動きを入れるページ

トップページ全体なのか、商品紹介の一部分なのかを指定します。ページのURLが決まっているなら添え、まだ公開前なら、ページ名や画面の見本を共有してください。

最初からサイト全体に広げず、まず一画面を試作してもらう方法もあります。対象を絞ると、必要な動きと不要な動きを見分けやすくなります。

③動き始めるきっかけ

ページを開いたとき、ボタンを押したとき、画面をスクロールしたとき。どの操作で動くかを決めます。何度も繰り返すのか、一度だけ動くのかも書くと、仕上がりの認識がそろいやすくなります。

参考画像や短い動画がある場合は、どこを見てほしいかを一言添えましょう。雰囲気の参考なのか、動く速さまで合わせたいのかが伝わります。

Webサイトのアニメーション費用｜見積もりを分ける5項目

Webサイトのアニメーション費用は、素材を作るか、ページへ組み込むか、どこまで確認するかで変わります。金額だけを横に並べず、作業範囲をそろえて比べましょう。

料金の一例として、コーディング代行会社のCODING ARMYは、同社の料金ページでフェードインアニメーション1点を6,000円から、ドロップダウンメニューを10,000円からと案内しています。また、2025年4月30日付の記事では「リッチアニメーション実装」を最低20,000円から、内容に応じて別途見積もりとしています。いずれも一社が公開した作業別の価格例で、サイト全体の制作費や業界平均ではありません。料金ページだけでは税込・税別や修正条件まで分からないため、相談時に確認してください。公開額は変わる場合があるので、依頼前に同社の料金ページと同社の記事を確認します。

• 素材制作とページ実装
• 動きの数と表示条件
• 確認・修正・保守

見積書では、次の項目がどこまで含まれているかを確認します。

見積もりを比べる前に、5つの作業範囲が同じ条件か確認します。

①新しい素材を作るか、手持ちの素材を使うか

ロゴやイラストを新しく作るのか、すでにある画像や動画を使うのかで作業が変わります。新しい素材が必要なら、企画、制作、修正、元データの受け取りが見積もりに含まれるか聞きましょう。

素材づくりとページへの組み込みは別項目にしてもらうと、素材だけ別の会社へ頼む場合にも比較しやすくなります。生成AIの素材を使うときは、利用条件や公開後の修正担当も確認してください。

②動きの数、複雑さ、表示条件

一つのボタンを反応させるのか、複数の部品を順番に動かすのかでも作業が異なります。さらに、パソコンとスマートフォンで見せ方を変えるか、横向き画面も考えるかを決めておきます。

見積もりにCSSやライブラリの名前が書かれていても、それだけでは完成範囲がわかりません。依頼した動きの数と、確認する端末・ブラウザーを質問しましょう。

③表示確認、修正、公開後の保守

見積もりは、公開前の確認や修正回数、公開後の保守まで含むかも確認します。動かないときに静止画を表示する対応、文字が読めるかの確認、公開後に直す場合の窓口が別料金かもしれません。

見積書の「軽量化」は、画像や動画のデータが大きすぎないかを確かめ、読み込みやすくする作業です。何をどの端末で確認するかも書いてもらいましょう。

動きを入れると必ず表示が速くなる、または必ず遅くなるとは限りません。アニメーションの方法だけで決めず、公開先のページと端末で確認する項目を見積もりに含めます。

• 既存素材か、新規制作か
• 動きの種類・数・複雑さ
• スマートフォン、画面幅、操作条件
• ブラウザー確認、軽量化、動かない場合の代替表示
• 修正回数、納品データ、公開後の保守

Webサイトの動きを依頼するメモ｜制作会社へ伝えること

専門用語がわからなくても、完成イメージと依頼範囲を言葉にできれば相談を始められます。下の項目を一枚にまとめ、同じ内容を複数の依頼先へ渡すと見積もりを比べやすくなります。

• 目的と対象ページ
• 参考素材と利用条件
• 端末、納品物、修正

書く内容は、完璧でなくて大丈夫です。決まっていない項目は未定とし、依頼先に質問して埋めましょう。

①目的、ページ、動き始める操作

たとえば、会社案内ページで製品の使い方を見せたい、といった目的を書きます。続けてページ名やURL、どの操作で動くかを記載してください。目指す印象を伝える参考サイトがあれば、該当する画面も添えます。

②使う素材と、利用してよい範囲

ロゴ、写真、イラスト、動画など、渡せる素材を書きます。第三者から受け取った素材なら、Webサイトへの掲載や加工が許可されているか確認しましょう。生成AIで作った素材も、使用したサービスの条件を確認してから共有します。

③端末、納品物、修正と日程

納品してほしいデータ、修正回数、希望時期を書きます。スマートフォンとパソコンのどちらで見せるかも添えてください。予算が決まっているなら上限を伝え、範囲内で優先順位を相談しましょう。

目的：
対象ページ：
見た人に伝えたいこと：
動き始める操作：
使う素材と利用条件：
対象端末・ブラウザー：
動きを減らしたい人への希望：
納品してほしいデータ：
修正回数・公開後の保守：
希望時期・予算：

納品前の確認リスト｜スマホと動きへの配慮

納品前は、動きがきれいかだけでなく、必要な情報が読めるか、動かない場合もページが使えるかを確認します。完成したページを、依頼メモで決めた条件に合わせて見ましょう。

• 実際の端末で見る
• 動かない場合を確認する
• 動きを減らす設定を確認する

最低限、次の3点を制作会社と一緒に確認します。

①スマートフォンとパソコンで確認

画面幅が変わったときに文字やボタンが隠れないか、ページを操作できるかを見ます。可能なら、実際に使う端末とブラウザーで表示を確認してください。

キーボードでも操作する場合は、Tabキーでボタンやリンクへ移動できるか、今どこにいるかを示す枠が見えるかも確認します。画像に枠が描かれていても、実際のページで同じように使えるとは限らないため、完成ページ上で試してください。

動きが一部の環境で表示されない場合もあります。MDNはスクロール連動アニメーションの機能を説明していますが、すべてのブラウザーで同じように使えるとは限りません。未対応の環境で静止した表示に切り替わるかも確認項目です。

②読み込み中や停止中の表示

素材の読み込みが遅い場合や、再生できない場合に、空白のままにならないかを確認します。動きがなくても、見出しや説明、ボタンなど必要な情報が残っていると、ページの目的を保ちやすくなります。

アニメーションの速さや滑らかさは、作り方の名前だけでは判断できません。Googleのweb.devによるアニメーション性能の説明でも、画面の描画方法や実装によって負荷が変わると説明されています。実際のページで確認してもらいましょう。

③動きを減らす設定と文字の読みやすさ

大きく揺れる、画面いっぱいに動く、同じ動きが続くといった演出が苦手な人もいます。OSやブラウザーの動きを減らす設定を読み取り、動きを控えめにする方法があるか、依頼先へ聞いてみてください。

MDNのprefers-reduced-motionの説明では、利用者がシステム側で希望した動きの軽減を、Webページが確認する仕組みを紹介しています。表示を切り替えた後も、本文や操作ボタンが読めることを確かめましょう。

動きを減らす配慮は、読みやすさや使いやすさを高めるために確認しておきたい項目です。公開先の利用者や依頼範囲に合わせて、どこまで対応するかを相談しましょう。

Webサイトのアニメーション依頼でよくある質問

見積もりを依頼する前によく迷う点をまとめました。

Webサイトのアニメーション費用の相場はいくらですか？

作業範囲が異なるため、一社の価格例を業界全体の相場とは言えません。CODING ARMYは料金ページでフェードイン1点を6,000円から、ドロップダウンメニューを10,000円からと案内しています。別の記事にはリッチアニメーション実装が最低20,000円からとありますが、内容に応じた別見積もりです。これは同社の例で、税込・税別や修正条件も相談時に確認してください。同じ依頼メモを複数社へ渡し、素材制作・ページ実装・確認・保守の範囲を比べましょう。

AIで作った動画や画像を使う場合、何を伝えればいいですか？

素材づくりとWebページへの組み込みのどちらを依頼するかを分け、素材の利用条件も共有してください。スマートフォンでの見え方や、動きを減らす設定への対応も確認しましょう。

スマートフォンでも同じように動きますか？

端末やブラウザー、動きの作り方によって表示が異なる場合があります。公開する環境での表示を依頼メモに書き、動かない場合も納品前に見てもらいましょう。

Webサイトのアニメーション費用｜まとめと次の一歩

Webサイトの動きを依頼するときは、技術名や金額だけで決めず、何を作り、どこで確認するかをそろえます。まず一枚の依頼メモを作ることが、見積もりを比べる出発点です。

次の一歩は、動きを入れたいページと目的をメモに書くことです。技術名は空欄でもかまいません。依頼先と完成イメージを合わせてから、費用と作業範囲を比べましょう。

関連記事

AIで作る素材や動画制作について知りたい方は、次の記事も参考にしてください。

• Remotionとは？AIで動画を作る入門ガイド：動画制作の流れや、Webページの動きとの違いを知りたい方へ。
• 生成AIで画像素材を作る方法：サイトで使う画像を用意する流れを知りたい方へ。

参考情報源（2026年10月15日確認）
アニメーションのついたサイトのコーディング代行｜CODING ARMY（同社の料金例）
Webサイトのアニメーション実装は外注がおすすめ｜CODING ARMY（2025年4月30日付、同社の価格例）
Scroll-driven animation timelines | MDN
animation-timelineの仕様・対応状況 | MDN
prefers-reduced-motion | MDN
Why are some animations slow? | web.dev