「作り直し」ではなく「動きの追加」という発注が増えている理由
サイトのリニューアルというと、デザインから構成まで全部作り直す大掛かりな案件を想像しがちです。しかし実際の現場では、「今のサイトの構成や文言はそのままでいいので、トップページのここだけ動かしてほしい」という相談のほうが圧倒的に多くなっています。
理由は単純で、既にSEOで評価されているページ構成や、社内で合意済みの文言を崩したくないからです。全面リニューアルは稟議も時間もかかりますが、「動きの追加」は部分的な発注で済むため、意思決定が速く、予算も立てやすいという利点があります。
費用相場の目安
発注内容によって幅がありますが、目安は次の通りです。
- ボタンやリンク1箇所にホバー演出を追加するだけ:数万円程度
- トップページのヒーロー部分に見出しの出現アニメーションを追加:数万円〜十数万円程度
- スクロールに連動して複数のセクションが動く演出(scrub式):十数万円〜数十万円程度
- ページ全体に渡る複数箇所の演出を一括で追加:数十万円以上
価格が跳ね上がる分岐点は「スクロール連動の演出を何箇所に入れるか」と「カーソル追従やcanvas描画のような常時計算が必要な演出を使うか」です。静的な見出しをふわっと出すだけなら安価ですが、スクロール位置に応じて複数の要素が連動して変化する演出は、設計と調整の工数が一気に増えます。
例えば、導入前と導入後の違いを見せるビフォーアフター比較のような見せ方は、依頼側にも効果がイメージしやすい反面、スライダーの同期やアスペクト比の調整など細かい実装が必要です。
見積に入ってくる項目
「動きを追加するだけ」の見積でも、実際には次のような項目が積まれています。
1. ヒアリング・現状調査:既存のHTML/CSS/JSの構造を読み、クラス名の衝突や既存ライブラリとの競合がないかを確認する工数です。ここを省略すると、追加した演出が既存の他の部品を壊してしまうことがあります。 2. 演出設計:どこで何が起こるかの振る舞い(導入・展開・余韻)を決める工程です。単発の見た目ではなく、ページ全体の体験として設計します。 3. 実装:CSSアニメーション、JavaScriptでのイベント制御、必要であればGSAPなどのライブラリ導入を含みます。 4. 検証:スマートフォン幅での横スクロール崩れ、reduced-motion設定時の挙動、画面外にある演出が負荷をかけ続けていないかなどを確認します。 5. 納品・引き渡し:既存サイトへの組み込み方法のドキュメント化や、调整可能なパラメータの説明が含まれる場合があります。
見積書にこれらの項目が明記されているかどうかは、発注前に必ず確認してください。「演出一式」とだけ書かれた見積は、後から追加費用が発生しやすい傾向があります。
低コストで始めたい場合の進め方
予算を抑えたい場合は、最初から複雑な演出を依頼するのではなく、ボタンのホバー演出やカーソル追従のような「1箇所だけの軽い演出」から始めるのが現実的です。効果を見ながら追加していく進め方であれば、初回発注のリスクを小さくできます。
ボタンにカーソルが吸着するようなシンプルな演出は、実装範囲が1箇所に収まるため見積もしやすく、サイト全体のクリック率改善にもつながりやすい施策です。まず小さく試してから、評判が良ければスクロール演出のような大きめの追加に進むという二段構えの発注が、結果的にコストを抑えやすい方法です。
発注時に伝えておくべきこと
見積の精度を上げるために、発注時には次の情報を伝えておくと手戻りが減ります。
- 今のサイトで使っているCSS設計(クラス名の命名規則、既存のアニメーションライブラリの有無)
- 動きを入れたい箇所のスクリーンショットやURL
- モバイル表示を重視するかどうか
- 「必ず自動で動いて見えてほしい」のか「ユーザー操作に応じて動けば十分」なのかという優先度
特に、既存サイトに別の会社が作った演出が既に入っている場合は、クラス名の名前空間が衝突しないように、追加側の実装者に必ず伝えてください。これを伝えないと、新しい演出を入れた途端に既存の演出が見た目崩れを起こすことがあります。
まとめ
サイトを丸ごと作り直す前に、「動きだけを足す」という選択肢を検討する価値は十分にあります。費用は演出の複雑さとスクロール連動の有無で大きく変わるため、見積を依頼する際は演出の範囲(1箇所か、ページ全体か)を具体的に伝えることが、適正な価格を知る一番の近道です。小さく始めて効果を確認しながら広げていく進め方も、リスクを抑えた発注の仕方として有効です。