【2026年9月最新】JavaScriptでアニメーションを作る基本｜サンプルコードとライブラリ比較、非エンジニアのAI活用法

「ボタンを押したら要素がふわっと動く」「スクロールに合わせて画像がスライドする」——こうしたWebサイトの動き（アニメーション）は、JavaScriptを使うことで実装できます。

この記事では、JavaScriptでアニメーションを作る基本の流れをサンプルコード付きで解説し、CSSだけで作る方法との使い分け、複雑な動きを作る際に使われるアニメーションライブラリの比較までを紹介します。さらに後半では、非エンジニアの経営者・管理職に向けて、JavaScriptを書かずにAIにアニメーション実装を任せる方法を、弊社の実運用データをもとに解説します。

01 WHAT IS IT アニメーションとは何か？CSSとJavaScriptの使い分け まずは全体像と、それぞれの得意分野を整理する

Webサイトにおけるアニメーションとは、要素の色・位置・大きさ・透明度などが時間をかけて変化する表現のことを指します。実装方法は大きく分けて、CSSで完結させる方法と、JavaScriptを使って制御する方法の2種類があります。

方法	得意なこと	苦手なこと
CSSのみ	シンプルな変化（フェード・移動・拡大）、実装が簡単	複雑な条件分岐、他の処理と連動した制御
JavaScript	クリックやスクロールなど条件に応じた細かい制御	CSSだけの場合よりコード量が増える

目安としては、「単純に動かすだけ」ならCSS、「何かの操作をきっかけに、条件に応じて動きを制御したい」ならJavaScript、と考えると整理しやすくなります。

もう少し実務的な視点で言えば、「ページを開いたら自動でふわっと表示される」「マウスを乗せたら少し拡大する」といった単方向の変化はCSSだけで完結しやすく、「ボタンを押すたびに表示・非表示が切り替わる」「特定の条件でのみ動きを発生させたい」といった状態管理を伴う変化はJavaScriptの出番になります。

02 BASIC STEPS JavaScriptでアニメーションを作る基本の流れ 5つのステップで考えると迷わない

JavaScriptでアニメーションを実装する際は、いきなりコードを書き始めるのではなく、以下の5ステップで設計してから実装すると、迷わずに進められます。

ステップ①〜②：どんな動きを、何をきっかけに起こすか考える

「ボタンをクリックしたら、要素の色と位置が変わる」というように、きっかけ（イベント）と結果（変化の内容）をセットで具体化します。ここが曖昧なままコードを書き始めると、後から手戻りが発生しやすくなります。

ステップ③〜④：要素と、変化前後の見た目をCSSで準備する

JavaScriptで直接すべての見た目を計算するのではなく、「変化前」と「変化後」の見た目をあらかじめCSSのクラスとして用意しておくのが定番の手法です。

/* 変化前の状態 */
.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: all 0.5s ease;
}

/* 変化後の状態（クラスを追加すると適用される） */
.box.active {
  background-color: #e74c3c;
  transform: translateX(200px);
}

ステップ⑤：JavaScriptでクラスの切り替えを制御する

CSSで見た目の準備ができたら、JavaScriptの役割は「いつクラスを付け替えるか」を制御するだけになります。

const btn = document.getElementById('toggleBtn');
const box = document.getElementById('box');

btn.addEventListener('click', function () {
  box.classList.toggle('active');
});

03 FULL EXAMPLE サンプルコード全体解説：クリックで動く要素 HTML・CSS・JavaScriptを組み合わせた完成形

ここまでのパーツを組み合わせた、完成形のサンプルコードです。ボタンをクリックすると、四角形の色と位置が変化します。

<!-- HTML -->
<button id="toggleBtn">クリックしてね</button>
<div id="box" class="box"></div>

/* CSS */
.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: all 0.5s ease;
  margin-top: 20px;
}
.box.active {
  background-color: #e74c3c;
  transform: translateX(200px);
}

// JavaScript
const btn = document.getElementById('toggleBtn');
const box = document.getElementById('box');

btn.addEventListener('click', function () {
  box.classList.toggle('active');
});

この3つのファイルを組み合わせるだけで、クリックするたびに色と位置が切り替わる要素が完成します。応用として、色や移動距離、変化にかける時間（transitionの秒数）を変えるだけでも、様々なバリエーションの動きを作れます。

04 ANIMATION LIBRARIES もっと複雑な動きに！アニメーションライブラリの比較 基本の書き方だけでは大変な表現を効率化する

複数の要素を連動させて動かしたり、細かい速度変化（イージング）を細かく制御したりする場合、素のJavaScriptだけで書くとコードが複雑になりがちです。こうした場面で使われるのがアニメーションライブラリです。

ライブラリ	特徴	向いている人
anime.js	軽量でシンプルな構文、複数要素の連動が得意	まずライブラリを試してみたい人
GSAP（GreenSock Animation Platform）	業界標準クラスの高機能・高パフォーマンス	本格的な演出・複雑なタイムライン制御が必要な人
Web Animations API	ブラウザ標準機能、追加のライブラリ読み込みが不要	軽量に済ませたい・標準機能で完結させたい人

// anime.js での記述例（ライブラリを読み込んだ上で使用）
anime({
  targets: '.box',
  translateX: 250,
  backgroundColor: '#e74c3c',
  duration: 800,
  easing: 'easeInOutQuad'
});

// GSAP での記述例（ライブラリを読み込んだ上で使用）
gsap.to('.box', {
  x: 250,
  backgroundColor: '#e74c3c',
  duration: 0.8,
  ease: 'power2.inOut'
});

まず素のJavaScriptで基本の考え方を理解し、複雑な演出が必要になった段階でライブラリを導入するという順序で学ぶのが、遠回りに見えて実は最も理解が深まる進め方です。

応用編：スクロールに連動したアニメーション

近年のWebサイトでよく見かける「スクロールすると要素がふわっと表示される」演出は、Intersection Observerというブラウザ標準の機能で実装できます。

const target = document.querySelector('.fade-target');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('active');
    }
  });
});

observer.observe(target);

この仕組みも、基本的な考え方は「条件を満たしたらクラスを付け替える」というこれまでの説明と同じです。監視する条件が「クリック」から「画面内に入ったかどうか」に変わっただけと理解すると、応用範囲が一気に広がります。

05 CSS-ONLY ANIMATION おまけ：簡単なアニメーションならCSSだけでも作れる JavaScriptが不要なケースも知っておく

ページを開いた瞬間に自動で動く、条件分岐が不要なシンプルな演出であれば、CSSの@keyframesという機能だけで完結させられます。

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.box {
  animation: fadeIn 1s ease forwards;
}

JavaScriptによる制御が不要な場面では、無理にJavaScriptを使わずCSSだけで完結させる方が、コードがシンプルになり、パフォーマンス面でも有利になることが多いです。

06 COMMON PITFALLS よくあるつまずきポイントとデバッグの考え方 初心者が引っかかりやすい落とし穴

デバッグの基本フロー

一度に複数箇所を直そうとすると、何が原因で直ったのか分からなくなります。1箇所ずつ修正して都度確認するのが、遠回りに見えて最も早く解決に至る方法です。

代表的なエラーメッセージの意味

エラーメッセージの例	主な原因
Cannot read properties of null	指定したidの要素が見つかっていない（HTML読み込み前に実行、またはスペルミス）
is not a function	メソッド名のスペルミス、またはライブラリの読み込み順序の誤り
Unexpected token	カッコや波カッコの閉じ忘れなど、文法上のミス

エラーメッセージには、原因を特定するための手がかりが含まれています。全て理解できなくても、キーワードだけ拾ってAIに質問するだけで、原因の見当がつくケースが多くあります。

07 AI-ASSISTED CODING 【独自】JavaScriptを書かずにAIにアニメーションを任せる 非エンジニアが「動くサイト」を手に入れる最短ルート

ここまでJavaScriptでアニメーションを作る方法を解説してきましたが、「毎日コードを書くわけではない」非エンジニアの経営者・管理職にとって、これらの構文を全て覚える必要は必ずしもありません。2026年現在、AIに日本語で指示するだけでアニメーションのコードを生成してもらう選択肢が現実的になっています。

指示例：
「トップページの『資料請求』ボタンにマウスを乗せたら、
少し拡大して色が変わるアニメーションをつけてください。
変化の時間は0.3秒くらいで、なめらかな動きにしてください。」

この指示だけで、適切なCSSのtransitionとJavaScriptの処理（必要であれば）が生成され、実装まで完了します。「classList.toggleとは何か」を知らなくても、やりたい動きを言葉で伝えるだけで結果が手に入るのが、AI活用の最大のメリットです。

学ぶべきか、AIに任せるべきか

状況	おすすめのアプローチ
たまに自社サイトに動きを加えたいだけ	AIに都度依頼する方が圧倒的に速い
Web制作をキャリア・副業にしたい	基礎から学びつつ、複雑な実装はAIに相談
凝った演出を安定して量産したい	ライブラリの使い方を学びつつAIをレビュー相手として活用

AI活用の限界も理解しておく

AIにアニメーション実装を任せる際にも、知っておくべき限界があります。

AIは「実装の手間を代行してくれる存在」であり、「どんな体験を作りたいか」を考えるのは引き続き人間の役割です。この前提を理解した上で活用すれば、非エンジニアでも十分に恩恵を受けられます。

08 GENAI CASE STUDY 【独自】GENAI社内でのアニメーション実装×AI活用事例 Claude Codeを使ったサイト演出の実際

弊社（株式会社GENAI）では、Claude Max 20xプラン（月額$200・約30,000円）を契約し、コーポレートサイトやLPの演出・アニメーション実装でもClaude Codeを活用しています。

作業内容	従来（構文を調べながら手作業）	AI活用後
ボタンのホバーエフェクト追加	CSS transitionを都度調べて実装	指示して数分で反映
スクロールに連動した表示演出	Intersection Observerの使い方を調査	「スクロールしたら表示されるように」で自動対応
複数要素の連動アニメーション	ライブラリの導入・設定から着手	デザイン意図を伝えてベースを自動生成

特にコーポレートサイトやLPの演出は、「派手さ」よりも「離脱を防ぐ・伝えたい情報に自然と目がいく」という効果検証を伴う改善サイクルが重要です。AIを使って素早く試作し、効果を見ながら調整するサイクルを高速に回せることは、演出面のクオリティ向上そのものにも寄与しています。

09 CONCLUSION まとめ ── 基本を理解しつつ、AIとも上手に付き合う CSS・JavaScript・AIを目的に応じて使い分ける

この記事では、JavaScriptでアニメーションを作る基本の流れ、サンプルコード、CSSとの使い分け、アニメーションライブラリの比較、そしてAIを活用した非エンジニア向けの選択肢までを解説しました。最後にポイントを振り返ります。

JavaScriptでアニメーションを作る技術を理解しておくことは、コードの意図を読み取ったり、AIが生成したコードを検証したりする上でも役立ちます。一方で、「今すぐこの動きが欲しい」という場面では、AIに直接依頼してしまうのも十分に合理的な選択です。学ぶこととAIに任せることを両立させるのが、2026年現在の効率的なWeb制作との付き合い方だと言えます。

JavaScriptを書かなくても、サイトの演出改善はAI鬼管理にお任せください

アニメーションの実装だけでなく、日々のサイト改善・業務効率化をAIに任せる仕組みづくりを、弊社の実運用ノウハウをもとにご提案します。

ここから先の進め方は、大きく2つあります。

自社で回せるようになりたい方は、AI鬼管理でClaude Code／Codexの使い方から業務設計・社内定着まで伴走を受けながら、社内に仕組みを作る道があります。

覚えるより任せたい方は、AI社員AIKATAでこの記事のような定型業務を丸ごと預ける道があります。料金は月30万円の月額定額、追加費用は0円です。

どちらが合うかは、業務量と社内体制次第です。無料相談・無料適合診断で、貴社の場合はどちらが向くかからご相談いただけます。

よくある質問

Q. JavaScriptとCSSどちらでアニメーションを作るべきですか？

A. 単純にページを開いたら自動で動く、シンプルな変化であればCSSの@keyframesで十分です。クリックやスクロールなど、ユーザーの操作や条件に応じて動きを制御したい場合はJavaScriptが必要になります。

Q. アニメーションライブラリは必ず使うべきですか？

A. 必須ではありません。シンプルな動きであれば素のJavaScriptとCSSだけで十分実装できます。複数要素を連動させる、細かいタイミング制御が必要といった複雑な演出をする段階になったら、anime.jsやGSAPの導入を検討すると良いでしょう。

Q. JavaScriptを書かずにアニメーションを実装する方法はありますか？

A. あります。Claude CodeのようなAIエージェントに「このボタンにホバーエフェクトをつけて」と日本語で指示すると、必要なCSS・JavaScriptのコードを自動生成し実装してくれます。構文を覚えていなくても、やりたい動きを言葉で伝えるだけで実現できます。

Q. classList.toggle()以外にクラスを操作する方法はありますか？

A. あります。classList.add()でクラスを追加、classList.remove()で削除、classList.contains()でクラスが付いているか判定できます。toggle()は「付いていれば外す、なければ付ける」という切り替え処理を1行で書けるのが特徴です。

Q. TweenMaxというライブラリ名を見かけましたが、今も使われていますか？

A. TweenMax・TweenLiteは、現在のGSAP（バージョン3以降）に統合されており、単体のライブラリとしては提供されていません。これから学ぶ場合は、統合後の「GSAP」の公式ドキュメントを参照することをお勧めします。

Q. AIが生成したJavaScriptのアニメーションコードは、そのまま本番サイトに使って良いですか？

A. 基本的な演出であれば実用レベルの精度がありますが、本番反映前には複数のブラウザ・画面サイズで意図通りに動くか確認することをお勧めします。特に既存のコードと組み合わせる場合は、クラス名の衝突がないかも確認してください。

Q. スクロール連動のアニメーションは、パフォーマンスに影響しませんか？

A. 古い実装方法（スクロールイベントを直接監視する方式）は負荷が高くなりがちでしたが、Intersection Observerはブラウザ側で最適化された仕組みのため、多くの場合パフォーマンスへの影響は小さく抑えられます。ただし、多数の要素を同時に監視する場合は動作確認をしっかり行うことをお勧めします。

AIAI鬼管理

AI鬼管理／AI社員AIKATAへのお問い合わせ

この記事を読んで気になった方へ。
専門スタッフが、御社に最適な
業務自動化・業務代行プランを無料でご提案します。

ご希望のサービス

お問い合わせ対象のサービス*必須 選択してください AI鬼管理（AI業務自動化の導入支援） AI社員AIKATA（業務の丸ごと代行） 両方・相談して決めたい

サービスを選択してください

---

お客様情報

会社名・屋号*必須

会社名を入力してください

業種*必須 選択してください IT・ソフトウェア 製造業 建設・不動産 小売・EC 飲食・宿泊 医療・介護 教育・研修 士業・コンサル 人材・BPO その他

業種を選択してください

お名前*必須

お名前を入力してください

メールアドレス*必須

※法人・事業用のメールアドレスでお願いします（Gmail等の個人用フリーメールは受付できません）

正しいメールアドレスを入力してください

電話番号任意

---

現在の課題について

現在感じている課題*必須

人手不足で業務が回らない 社長・経営者が現場を離れられない 定型業務に時間を取られている AIを導入したいが何から始めればいいかわからない 外注・人件費コストが高い 業務フローが属人化している 社員のITリテラシーにばらつきがある

1つ以上選択してください

効率化・自動化したい業務*必須

営業・顧客対応（CRM・メール等） 経理・請求書・入金管理 採用・人事・労務管理 マーケティング・SNS・広告運用 カスタマーサポート・問い合わせ対応 資料作成・レポート・議事録 データ入力・集計・分析 社内の情報共有・ナレッジ管理

1つ以上選択してください

上記業務に現在かけている月額コスト*必須 選択してください まだかけていない（これから検討） 〜10万円 10〜30万円 30〜50万円 50〜100万円 100万円以上 その他（自由入力）

月額コストを選択してください

その他、ご相談内容任意

---

面談日時の選択

ご希望の日時*必須

約1時間のオンライン面談（Google Meet）です

空き枠を取得中...

面談日時を選択してください

この内容で面談を予約する

予約確定後、Google Calendarの招待メールをお届けします。
しつこい営業は一切ございません。