YEBISU SOFT(エビスソフト)ホームへ

Web内アニメーション

ホームページのアニメーション制作費用と実例

スクロールで動くサイトを、いくらで・どのくらいの期間で作れるか

複雑なサービスが数秒で伝わり、離脱が止まる。

このデモの実装時間 約10分AIを活用した制作体制で構築
赤いボブヘアとシアンの衣装が特徴のAI広報キャラクター、クロマ
YOUR AI GUIDEクロマAI広報
エビスさんと一緒に新しい可能性を、案内します。

DESIGN 11 / Loopstack言葉の後ろで咲く仕組み|黒い画布に咲くブルーム。言葉を大胆に置き、技術は背後で静かに働く。

LOADING DEMO…

How to use

  • 各パネルにマウスを乗せる/タップすると反応します
  • スクロールすると連動して変化する演出もあります
  • OSで「視差効果を減らす」を有効にしている場合、動きは自動的に抑制されます
NOTEどこまでが実装で、本番では何が変わるか

ここに並んでいる8つは、すべてこのページ上で実際に動いているアニメーションです。外部のアニメーションライブラリを使わず、CSS と Web Animations API のみで実装しています(=追加のJavaScriptを読み込まないため、表示速度に影響しません)。

Cost & Duration

費用と期間の目安

「いくらかかるか」を先に出します。金額はサイト制作のプラン表と同じ基準で、この機能だけの特別料金は設けていません。

COST¥680,000〜

サイト制作に含めてご依頼いただく場合の「スタンダード」プランが目安です。

3プランの料金表
DURATION1〜3週間(既存サイトへの追加なら1週間程度から)

このデモ自体は約10分で実装しました。実案件では要件整理・原稿・検証を含めて上記が目安です。

VARIABLES金額が変わる要素
  • 動かす箇所の数と、1つあたりの作り込みの深さ
  • 図解やイラストを新規に作るか、既存素材を使うか
  • 表示速度を落とさないための最適化をどこまで行うか

Business Impact

導入すると、何が変わるか

スクロール連動の演出、図解アニメーション、操作に反応するマイクロインタラクションを設計・実装します。装飾ではなく、視線を導き、理解を助けるための動きです。

01文章では読まれない仕組みが伝わる

「何をしてくれる会社か分かりにくい」商材ほど効きます。図が順に組み上がる演出は、長文の説明より速く、正確に理解されます。

02滞在時間が伸び、離脱が減る

スクロールするたびに変化があるページは、途中で閉じられにくくなります。最後のCTAまで読み進めてもらえる確率が上がります。

03ブランドの格が上がる

操作に対する反応の丁寧さは、そのまま「仕事の丁寧さ」として受け取られます。単価の高い商材ほど、体験の質が信頼に直結します。

CAN DOできること
  • スクロール連動のパララックス・リビール演出
  • SVGのパス描画・モーフィングアニメーション
  • テキストのスクランブル/分解/グラデーション演出
  • ボタンやカードのマイクロインタラクション
  • prefers-reduced-motion に対応したアクセシブルな実装
WHO FORこんな企業に
  • 仕組みの説明が難しいBtoB・SaaS
  • スクロールで物語を伝えるブランドサイト・LP
  • 操作感を高めたいWebアプリ・予約システム
STACK使用する技術
  • CSS Animations / Transitions
  • Web Animations API
  • IntersectionObserver
  • SVG SMIL・stroke-dasharray
  • GSAP・Framer Motion(案件に応じて)

Web内アニメーションを、
自社サイトでも。

「どこまでできるか」「いくらかかるか」だけでも構いません。初回のご相談・お見積もりは無料です。

電話で相談090-8208-7295無料で相談するお見積もりも無料